/* ==========================================================================
   sandersmw.ai - Retro Terminal Styling
   SMW-OS v1.0
   ========================================================================== */

/* Import retro monospace font */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    --terminal-bg: #0a0a0a;
    --terminal-fg: #33ff33;
    --terminal-fg-dim: #1a8c1a;
    --terminal-fg-bright: #66ff66;
    --terminal-cursor: #33ff33;
    --terminal-selection: rgba(51, 255, 51, 0.3);
    --terminal-border: #1a1a1a;
    --terminal-glow: 0 0 5px rgba(51, 255, 51, 0.5);
    --font-terminal: 'VT323', 'Courier New', monospace;
    --scanline-opacity: 0.03;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--terminal-bg);
}

::selection {
    background: var(--terminal-selection);
    color: var(--terminal-fg-bright);
}

/* ==========================================================================
   Terminal Container
   ========================================================================== */
.terminal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--terminal-bg);
    font-family: var(--font-terminal);
    font-size: 18px;
    line-height: 1.4;
    color: var(--terminal-fg);
    display: flex;
    flex-direction: column;
    padding: 20px;
}

/* CRT Scanlines Overlay */
.terminal::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, var(--scanline-opacity)),
        rgba(0, 0, 0, var(--scanline-opacity)) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 1000;
}

/* CRT Screen Curvature Effect (subtle) */
.terminal::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        rgba(0, 0, 0, 0.2) 90%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
    z-index: 999;
}

/* ==========================================================================
   Terminal Output Area
   ========================================================================== */
.terminal-output {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--terminal-fg-dim) var(--terminal-bg);
}

.terminal-output::-webkit-scrollbar {
    width: 8px;
}

.terminal-output::-webkit-scrollbar-track {
    background: var(--terminal-bg);
}

.terminal-output::-webkit-scrollbar-thumb {
    background-color: var(--terminal-fg-dim);
    border-radius: 4px;
}

/* ==========================================================================
   Terminal Lines
   ========================================================================== */
.terminal-line {
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    padding: 0;
    text-shadow: var(--terminal-glow);
}

.terminal-line.dim {
    color: var(--terminal-fg-dim);
    text-shadow: none;
}

.terminal-line.bright {
    color: var(--terminal-fg-bright);
    text-shadow: 0 0 8px rgba(51, 255, 51, 0.7);
}

.terminal-line.error {
    color: #ff6b6b;
    text-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
}

.terminal-line.system {
    color: #6bb3ff;
    text-shadow: 0 0 5px rgba(107, 179, 255, 0.5);
}

.terminal-line.ascii-art {
    line-height: 1.1;
    font-size: 14px;
}

/* ==========================================================================
   Input Area
   ========================================================================== */
.terminal-input-area {
    display: flex;
    align-items: flex-start;
    padding-top: 10px;
    border-top: 1px solid var(--terminal-border);
    margin-top: 10px;
}

.terminal-prompt {
    color: var(--terminal-fg);
    text-shadow: var(--terminal-glow);
    flex-shrink: 0;
    padding-right: 8px;
}

.terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--terminal-fg);
    font-family: var(--font-terminal);
    font-size: 18px;
    line-height: 1.4;
    caret-color: var(--terminal-cursor);
    text-shadow: var(--terminal-glow);
    padding: 0;
    margin: 0;
}

.terminal-input::placeholder {
    color: var(--terminal-fg-dim);
    text-shadow: none;
}

.terminal-input:disabled {
    opacity: 0.5;
}

/* ==========================================================================
   Cursor Blink Animation
   ========================================================================== */
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.cursor {
    display: inline-block;
    width: 10px;
    height: 18px;
    background-color: var(--terminal-fg);
    animation: blink 1s step-end infinite;
    vertical-align: middle;
    box-shadow: var(--terminal-glow);
}

/* ==========================================================================
   Typing Animation
   ========================================================================== */
.typing-cursor::after {
    content: '█';
    animation: blink 1s step-end infinite;
}

/* ==========================================================================
   Screen Flicker (Optional - can be toggled)
   ========================================================================== */
@keyframes flicker {
    0% { opacity: 1; }
    3% { opacity: 0.95; }
    6% { opacity: 1; }
    7% { opacity: 0.9; }
    8% { opacity: 1; }
    9% { opacity: 0.97; }
    10% { opacity: 1; }
    100% { opacity: 1; }
}

.terminal.flicker-enabled {
    animation: flicker 4s infinite;
}

/* ==========================================================================
   Loading Indicator
   ========================================================================== */
.loading-dots::after {
    content: '';
    animation: loading-dots 1.5s steps(4) infinite;
}

@keyframes loading-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* ==========================================================================
   Links
   ========================================================================== */
.terminal a {
    color: var(--terminal-fg-bright);
    text-decoration: underline;
    text-shadow: var(--terminal-glow);
}

.terminal a:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(51, 255, 51, 0.8);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 768px) {
    .terminal {
        font-size: 16px;
        padding: 15px;
    }

    .terminal-input {
        font-size: 16px;
    }

    .terminal-line.ascii-art {
        font-size: 10px;
        line-height: 1.0;
    }
}

@media (max-width: 480px) {
    .terminal {
        font-size: 14px;
        padding: 10px;
    }

    .terminal-input {
        font-size: 14px;
    }

    .terminal-line.ascii-art {
        font-size: 8px;
    }

    .terminal-prompt {
        font-size: 12px;
    }
}

/* ==========================================================================
   Accessibility - Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .terminal.flicker-enabled {
        animation: none;
    }

    .cursor,
    .typing-cursor::after {
        animation: none;
        opacity: 1;
    }

    .loading-dots::after {
        animation: none;
        content: '...';
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .terminal {
        background: white;
        color: black;
    }

    .terminal::before,
    .terminal::after {
        display: none;
    }

    .terminal-line {
        text-shadow: none;
        color: black;
    }
}