/* Terminal Container */
#terminal {
    background-color: #000; /* Black background */
    color: #0f0; /* Green text */
	text-shadow: /* Green glow */
        0 0 5px rgba(0, 255, 0, 1.0),  /* Slight glow, 50% opacity */
        0 0 10px rgba(0, 255, 0, 0.8), /* Diminished outer glow */
        0 0 20px rgba(0, 255, 0, 0.6), /* Fainter at further distances */
        0 0 40px rgba(0, 255, 0, 0.4); /* Barely visible farthest glow */
    font-family: "Courier New", monospace; /* Monospaced font */
    padding: 20px;
    height: 100vh; /* Full height of the viewport */
    overflow-y: auto; /* Allow scrolling for long output */
    box-sizing: border-box;
    position: relative;

    /* Static Scanlines */
    background-image: 
        linear-gradient(rgba(0, 218, 0, 0.1) 75%, transparent 25%); /* Green and black scanlines */
    background-size: 100% 6px; /* Line height */
    background-repeat: repeat; /* Ensure scanlines repeat vertically */
}

/* Terminal Output */
#output {
    white-space: pre-wrap; /* Preserve spacing and line breaks */
    margin-bottom: 10px; /* Spacing before input line */
}

/* Input Line */
#input-line {
    display: flex;
    align-items: center;
}

#input-line span {
    margin-right: 10px; /* Spacing between prompt symbol and input */
}

#input {
    background: none; /* Transparent background */
    border: none; /* No border */
    color: inherit; /* Inherit the terminal text color */
    font: inherit; /* Inherit the font */
    outline: none; /* Remove focus outline */
    flex-grow: 1; /* Allow input to stretch across the line */
    caret-color: #0f0; /* Green caret for the blinking cursor */
	text-shadow: /* Green glow */
        0 0 5px rgba(0, 255, 0, 1.0),  /* Slight glow, 50% opacity */
        0 0 10px rgba(0, 255, 0, 0.8), /* Diminished outer glow */
        0 0 20px rgba(0, 255, 0, 0.6), /* Fainter at further distances */
        0 0 40px rgba(0, 255, 0, 0.4); /* Barely visible farthest glow */
}

/* Blinking Cursor Effect */
#input::placeholder {
    color: #0f0; /* Matches the text color */
    opacity: 0.5;
    animation: blink 1s steps(2, start) infinite; /* Blinking effect */
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Modal Background */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000; /* Above all other content */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
}

/* Modal Content */
.modal-content {
    background-color: #000; /* Black background */
    color: #0f0; /* Green text */
    font-family: "Courier New", monospace; /* Match terminal font */
    position: fixed;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 1px solid #0f0; /* Green border */
    width: 80%; /* Adaptive width */
    max-width: 600px; /* Limit modal width */
    overflow-y: auto; /* Enable scrolling for long content */
    text-align: left; /* Align text to the left */
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); /* Green glow around modal */
    background-image: linear-gradient(rgba(0, 255, 0, 0.05) 50%, transparent 50%);
    background-size: 100% 5px; /* Match scanline spacing */
    text-shadow: 
        0 0 5px rgba(0, 255, 0, 0.9),   /* Core glow */
        0 0 10px rgba(0, 255, 0, 0.6), 
        0 0 20px rgba(0, 255, 0, 0.4), 
        0 0 40px rgba(0, 255, 0, 0.2); /* Extended glow effect */
}

.modal-content pre {
    white-space: pre-wrap; /* Preserve whitespace but allow wrapping */
    word-break: break-word; /* Force breaking of long words */
    overflow-wrap: break-word;
    line-height: 1.5; /* Match terminal line height */
    margin: 0; /* Remove default margin */
    text-shadow: inherit; /* Ensure pre text inherits the modal's glow */
}


/* Close Button */
.modal-content .close {
    color: #0f0; /* Green color */
    float: right; /* Align to the top-right corner */
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

.modal-content .close:hover {
    color: #fff; /* White on hover */
}

.modal-content pre {
    white-space: pre-wrap; /* Allows wrapping of text while preserving whitespace */
    word-break: break-word; /* Forces breaking of long words */
    overflow-wrap: break-word; /* Ensures long words are wrapped */
    width: 100%; /* Ensures the content doesn't exceed the modal's width */
    max-width: 100%; /* Keeps the text within the modal boundaries */
}
.modal-content::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
    background: #000; /* Match modal background */
}

.modal-content::-webkit-scrollbar-thumb {
    background: #0f0; /* Green color to match terminal text */
    border-radius: 5px; /* Rounded edges for the thumb */
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); /* Green glow effect */
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #0a0; /* Darker green for hover effect */
}

.modal-content::-webkit-scrollbar-track {
    background: #111; /* Slightly lighter black for contrast */
    border-radius: 5px; /* Rounded edges for the track */
}

.modal-content {
    scrollbar-color: #0f0 #111; /* Thumb color and track color */
    scrollbar-width: thin; /* Makes the scrollbar thinner */
}

/* centre modal overlay */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;display:flex;align-items:center;justify-content:center}

.modal-content{
  font-family:"Courier New",monospace;
  max-height:80vh;    /* cap height so it can scroll */
  overflow:auto;
}

#modal-body{
  white-space:pre-wrap;   /* allow wrapping but keep newlines */
}