/* 
    INTERACTIVE COMMAND PROMPT STYLES - MS-DOS THEME
    This CSS file creates the visual appearance of a classic MS-DOS terminal interface.
    It uses a monochrome black and white color scheme for authentic terminal appearance.
*/

/* 
    FONT FACE DECLARATIONS
    FSEX302 font for authentic MS-DOS appearance.
    Classic monospaced bitmap font reminiscent of MS-DOS and early Windows.
*/
@font-face {
    font-family: 'FSEX302';
    src: url('fonts/FSEX302.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 
    RESET AND BASE STYLES
    These styles remove default browser styling and set up our base appearance.
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 
    BODY STYLING
    Sets the full viewport height and removes any default margins/padding.
    The font-family uses monospace fonts that are common in terminals.
    MS-DOS theme with monochrome black and white colors.
*/
body {
    font-family: 'FSEX302', 'Courier New', 'Monaco', 'Consolas', monospace;
    background-color: #000000; /* Pure black background */
    color: #A0A0A0; /* Light gray text color */
    min-height: 100vh; /* Minimum viewport height, can grow */
}

/* 
    TERMINAL CONTAINER
    This is the main container that holds our entire command prompt interface.
    It uses a normal block layout where the input follows the output.
    MS-DOS style with monochrome terminal appearance.
    Wide enough to fit ASCII art banner.
*/
.terminal-container {
    display: block;
    background-color: #000000; /* Pure black terminal background */
    position: relative; /* Required for scanline pseudo-elements */
}

/* 
    OUTPUT AREA
    This is where all the command output and responses are displayed.
    It grows with content and allows natural scrolling.
    MS-DOS style with monochrome terminal appearance.
    Limited to 120 characters per line.
*/
.output-area {
    padding: 15px 15px 0 15px; /* Remove bottom padding to connect with input */
    background-color: #000000; /* Pure black terminal background */
    font-size: 24px; /* Optimized size for Perfect DOS VGA 437 font */
    line-height: 1.2; /* Tighter line spacing like old terminals */
    font-weight: normal; /* Normal weight like classic terminals */
    text-align: left; /* Ensure all text is left-aligned */
}

/* 
    OUTPUT LINE STYLING
    Each line of output is wrapped in a div with this class.
    The margin-bottom creates spacing between lines.
    MS-DOS style with classic terminal spacing.
    Limited to 120 characters per line.
*/
.output-line {
    margin-bottom: 2px; /* Tighter spacing like old terminals */
    word-wrap: break-word; /* Ensures long lines wrap properly */
    font-family: 'FSEX302', 'Courier New', monospace; /* Ensure monospace font */
    max-width: 120ch; /* Wide enough for ASCII art */
    text-align: left; /* Ensure text is left-aligned */
}

/* 
    PROMPT SYMBOL
    The "C:\>" symbol that appears before commands and in the input area.
    It's styled to look like a traditional MS-DOS command prompt.
*/
.prompt-symbol {
    color: #A0A0A0; /* Light gray color for MS-DOS prompts */
    font-weight: normal;
    font-size: 24px;
    margin-right: 4px; /* Tighter spacing like old terminals */
}

/* 
    ASCII ART TEXT
    Special styling for ASCII art banner.
    Red color with preserved spacing.
*/
.ascii-text {
    color: #DD0000; /* Bright red color for ASCII art */
    font-weight: normal;
    white-space: pre; /* Preserve all whitespace and spacing */
    font-family: 'FSEX302', 'Courier New', 'Monaco', 'Consolas', monospace;
}

/* 
    WELCOME TEXT
    Special styling for the welcome message when the page loads.
    MS-DOS style with monochrome terminal colors.
*/
.welcome-text {
    color: #DDDD00; /* Bright yellow color for emphasis */
    white-space: pre; /* Preserve all whitespace and spacing */
    font-weight: normal;
}

/* 
    WELCOME BOX
    Container for the initial welcome and help text.
    Limited to 120 characters per line.
*/
.welcome-box {
    border: 2px solid #A0A0A0; /* Light gray outline */
    padding: 15px;
    margin: 10px 0;
    font-family: 'FSEX302', 'Courier New', 'Monaco', 'Consolas', monospace;
    max-width: 80ch; /* Limit to 120 characters */
    text-align: center; /* Center all content in the welcome box */
}

/* Override output-line alignment inside welcome box */
.welcome-box .output-line {
    text-align: center; /* Center the output lines inside welcome box */
}

/* 
    HELP TEXT
    Styling for help and instruction text.
    MS-DOS style with monochrome terminal colors.
*/
.help-text {
    color: #A0A0A0; /* White for secondary information */
    font-style: normal; /* No italic in classic terminals */
}

/* 
    COMMAND OUTPUT
    Styling for the actual command output text.
    MS-DOS style with monochrome terminal colors.
*/
.command-output {
    color: #A0A0A0; /* Light gray text for command output */
}

/* 
    ERROR MESSAGES
    White text for error messages to make them stand out.
    MS-DOS style with monochrome terminal colors.
*/
.error-message {
    color: #DD0000; /* Red color for errors */
    font-weight: normal;
    background-color: #000000; /* Black background for contrast */
}

/* 
    SUCCESS MESSAGES
    Gray text for success messages.
    MS-DOS style with monochrome terminal colors.
*/
.success-message {
    color: #A0A0A0; /* Light gray color for success */
    font-weight: normal;
}

/* 
    INFO MESSAGES
    Gray text for informational messages.
    MS-DOS style with monochrome terminal colors.
*/
.info-message {
    color: #A0A0A0; /* Light gray color for info */
    font-weight: normal;
}

/* 
    INPUT AREA
    This is where users type commands.
    It appears directly after the output content.
    MS-DOS style with monochrome terminal appearance.
    Wide enough for ASCII art.
*/
.input-area {
    display: flex;
    align-items: center;
    padding: 0 15px 15px 15px; /* Remove top padding to connect with output */
    background-color: #000000; /* Pure black background */
    min-height: 50px; /* Slightly smaller height like old terminals */
    max-width: 120ch; /* Wide enough for ASCII art */
    text-align: left; /* Ensure text is left-aligned */
}

/* 
    COMMAND INPUT FIELD
    The actual input field where users type their commands.
    It has no visible border and matches the terminal aesthetic.
    MS-DOS style with monochrome terminal appearance.
    Limited to 120 characters per line.
*/
.command-input {
    flex: 1; /* Takes up remaining space in the input area */
    background-color: transparent;
    border: none;
    color: #A0A0A0; /* Light gray text color */
    font-family: 'FSEX302', 'Courier New', 'Monaco', 'Consolas', monospace;
    font-size: 24px; /* Optimized size for DOS fonts */
    outline: none; /* Removes the default focus outline */
    padding: 5px 0;
    font-weight: normal; /* Normal weight like classic terminals */
    max-width: 120ch; /* Limit to 120 characters */
    text-align: left; /* Ensure text is left-aligned */
}

/* 
    FOCUS STATE
    When the input field is focused, we add a subtle cursor effect.
    MS-DOS style with monochrome terminal colors.
*/
.command-input:focus {
    caret-color: #A0A0A0; /* Gray cursor to match the prompt symbol */
}

.output-area::-webkit-scrollbar-track {
    background: #000000; /* Black track */
    border: 1px solid #A0A0A0; /* Gray border */
}

.output-area::-webkit-scrollbar-thumb {
    background: #A0A0A0; /* Gray thumb */
    border-radius: 0; /* Sharp corners like old terminals */
    border: 1px solid #000000; /* Black border */
}

.output-area::-webkit-scrollbar-thumb:hover {
    background: #CCCCCC; /* Light gray on hover */
}

/* 
    RESPONSIVE DESIGN
    These styles ensure the interface works well on different screen sizes.
    MS-DOS style maintained across all screen sizes.
*/
/* Mobile devices - smaller fonts for better fit */
@media (max-width: 768px) {
    .terminal-container {
        margin: 2px;
        border-radius: 0; /* Keep sharp corners */
    }
    
    .output-area {
        padding: 8px;
        font-size: 14px; /* Much smaller for mobile */
        line-height: 1.1; /* Tighter line spacing */
    }
    
    .input-area {
        padding: 6px 8px;
        min-height: 35px;
    }
    
    .command-input {
        font-size: 14px; /* Match output font size */
    }
    
    .prompt-symbol {
        font-size: 14px; /* Match other text */
    }
    
    .welcome-box {
        padding: 10px;
        font-size: 12px; /* Smaller welcome text */
    }
    
    .ascii-text {
        font-size: 10px; /* Smaller ASCII art for mobile */
        line-height: 0.5; /* Tighter spacing for ASCII art */
    }
}

/* Very small mobile devices */
@media (max-width: 480px) {
    .output-area {
        padding: 6px;
        font-size: 12px; /* Even smaller for very small screens */
        line-height: 1.0;
    }
    
    .input-area {
        padding: 4px 6px;
        min-height: 30px;
    }
    
    .command-input {
        font-size: 12px;
    }
    
    .prompt-symbol {
        font-size: 12px;
    }
    
    .welcome-box {
        padding: 8px;
        font-size: 10px;
    }
    
    .ascii-text {
        font-size: 8px;
        line-height: 0.9;
    }
}

/* Desktop-only elements - hidden on mobile devices */
.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none; /* Hide on mobile devices */
    }
}

/* 
    SCANLINE EFFECT
    Creates a subtle CRT monitor scanline effect for authentic retro appearance.
*/
.terminal-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
    );
    pointer-events: none;
    z-index: 10; /* High z-index to be on top of all content */
}

/* 
    SCANLINE OVERLAY
    Additional subtle horizontal lines for enhanced CRT effect.
*/
.terminal-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 1px,
        rgba(0, 0, 0, 0.08) 1px,
        rgba(0, 0, 0, 0.08) 2px
    );
    pointer-events: none;
    z-index: 10; /* High z-index to be on top of all content */
}