:root {
    --terminal-bg: #000;
    --terminal-color: #00ff00;
    --terminal-dim: #666;
    --terminal-error: #ff6b6b;
    --terminal-success: #51cf66;
    --terminal-warning: #ffaa00;
    --terminal-info: #00aaff;
    --terminal-highlight: #55ff55;
    --terminal-positive: #51cf66;
    --terminal-negative: #ff6b6b;
    --terminal-header: #999;
    --terminal-glow: rgba(0, 255, 0, 0.8);
    --terminal-scanline: rgba(0, 255, 0, 0.05);

    /* Preference variables */
    --terminal-font-size: 14px;
    --animation-speed: 1;
    --glow-intensity: 1;
}

/* Theme variations */
:root.theme-amber {
    --terminal-bg: #1a0f00;
    --terminal-color: #ffb000;
    --terminal-dim: #8b6914;
    --terminal-error: #ff3300;
    --terminal-success: #ffcc00;
    --terminal-warning: #ff6600;
    --terminal-info: #ffcc66;
    --terminal-highlight: #ffcc00;
    --terminal-positive: #ffcc00;
    --terminal-negative: #ff3300;
    --terminal-header: #b8860b;
    --terminal-glow: rgba(255, 176, 0, 0.8);
    --terminal-scanline: rgba(255, 176, 0, 0.04);
}

:root.theme-white {
    --terminal-bg: #1e1e1e;
    --terminal-color: #ffffff;
    --terminal-dim: #999;
    --terminal-error: #ff6b6b;
    --terminal-success: #90ee90;
    --terminal-warning: #ffa500;
    --terminal-info: #6495ed;
    --terminal-highlight: #f0f0f0;
    --terminal-positive: #90ee90;
    --terminal-negative: #ff6b6b;
    --terminal-header: #ccc;
    --terminal-glow: rgba(255, 255, 255, 0.6);
    --terminal-scanline: rgba(255, 255, 255, 0.02);
}

/* Cyberpunk - Neon city vibes */
:root.theme-cyberpunk {
    --terminal-bg: #0a0014;
    --terminal-color: #ff00ff;
    --terminal-dim: #9932cc;
    --terminal-error: #ff1493;
    --terminal-success: #00ffff;
    --terminal-warning: #ff69b4;
    --terminal-info: #00ffff;
    --terminal-highlight: #ff00ff;
    --terminal-positive: #00ffff;
    --terminal-negative: #ff1493;
    --terminal-header: #da70d6;
    --terminal-glow: rgba(255, 0, 255, 0.8);
    --terminal-scanline: rgba(255, 0, 255, 0.05);
}

/* Ocean - Deep sea terminal */
:root.theme-ocean {
    --terminal-bg: #001f3f;
    --terminal-color: #00ced1;
    --terminal-dim: #4682b4;
    --terminal-error: #ff6347;
    --terminal-success: #00fa9a;
    --terminal-warning: #ffd700;
    --terminal-info: #00ffff;
    --terminal-highlight: #00ffff;
    --terminal-positive: #00fa9a;
    --terminal-negative: #ff6347;
    --terminal-header: #5f9ea0;
    --terminal-glow: rgba(0, 206, 209, 0.8);
    --terminal-scanline: rgba(0, 206, 209, 0.04);
}

/* Blood - Dark vampire aesthetic */
:root.theme-blood {
    --terminal-bg: #0d0000;
    --terminal-color: #ff1744;
    --terminal-dim: #c62828;
    --terminal-error: #d32f2f;
    --terminal-success: #ff5252;
    --terminal-warning: #ff6659;
    --terminal-info: #ff8a80;
    --terminal-highlight: #ff1744;
    --terminal-positive: #ff5252;
    --terminal-negative: #c62828;
    --terminal-header: #e53935;
    --terminal-glow: rgba(255, 23, 68, 0.8);
    --terminal-scanline: rgba(255, 23, 68, 0.05);
}

/* IBM - Classic DOS nostalgia */
:root.theme-ibm {
    --terminal-bg: #0000aa;
    --terminal-color: #00ffff;
    --terminal-dim: #4169e1;
    --terminal-error: #ff0000;
    --terminal-success: #ffffff;
    --terminal-warning: #ffff00;
    --terminal-info: #ffffff;
    --terminal-highlight: #ffffff;
    --terminal-positive: #ffffff;
    --terminal-negative: #ff0000;
    --terminal-header: #87ceeb;
    --terminal-glow: rgba(0, 255, 255, 0.8);
    --terminal-scanline: rgba(0, 255, 255, 0.04);
}

/* Synthwave - 80s retrowave */
:root.theme-synthwave {
    --terminal-bg: #1a0033;
    --terminal-color: #ff6ec7;
    --terminal-dim: #9d4edd;
    --terminal-error: #ff073a;
    --terminal-success: #00f5ff;
    --terminal-warning: #ffd700;
    --terminal-info: #ff9472;
    --terminal-highlight: #ff6ec7;
    --terminal-positive: #00f5ff;
    --terminal-negative: #ff073a;
    --terminal-header: #c77dff;
    --terminal-glow: rgba(255, 110, 199, 0.8);
    --terminal-scanline: rgba(255, 110, 199, 0.05);
}

/* Arctic - Ice cold terminal */
:root.theme-arctic {
    --terminal-bg: #0a1929;
    --terminal-color: #e0ffff;
    --terminal-dim: #b0e0e6;
    --terminal-error: #ff6b6b;
    --terminal-success: #87ceeb;
    --terminal-warning: #ffd700;
    --terminal-info: #87ceeb;
    --terminal-highlight: #ffffff;
    --terminal-positive: #87ceeb;
    --terminal-negative: #ff6b6b;
    --terminal-header: #d3d3d3;
    --terminal-glow: rgba(224, 255, 255, 0.8);
    --terminal-scanline: rgba(224, 255, 255, 0.04);
}

/* Lava - Molten volcanic aesthetic */
:root.theme-lava {
    --terminal-bg: #1a0000;
    --terminal-color: #ff1744;
    --terminal-dim: #d32f2f;
    --terminal-error: #b71c1c;
    --terminal-success: #ff5722;
    --terminal-warning: #ff9800;
    --terminal-info: #ff7043;
    --terminal-highlight: #ff3d00;
    --terminal-positive: #ff5722;
    --terminal-negative: #b71c1c;
    --terminal-header: #e53935;
    --terminal-glow: rgba(255, 23, 68, 0.8);
    --terminal-scanline: rgba(255, 23, 68, 0.05);
}

/* Void - Minimalist dark */
:root.theme-void {
    --terminal-bg: #000000;
    --terminal-color: #bb86fc;
    --terminal-dim: #9575cd;
    --terminal-error: #ff006e;
    --terminal-success: #e1bee7;
    --terminal-warning: #ce93d8;
    --terminal-info: #d1c4e9;
    --terminal-highlight: #f3e5f5;
    --terminal-positive: #e1bee7;
    --terminal-negative: #ff006e;
    --terminal-header: #ab47bc;
    --terminal-glow: rgba(187, 134, 252, 0.8);
    --terminal-scanline: rgba(187, 134, 252, 0.03);
}

/* Toxic - Radioactive terminal */
:root.theme-toxic {
    --terminal-bg: #0a0f00;
    --terminal-color: #7fff00;
    --terminal-dim: #9acd32;
    --terminal-error: #ff0000;
    --terminal-success: #adff2f;
    --terminal-warning: #ffff00;
    --terminal-info: #32cd32;
    --terminal-highlight: #adff2f;
    --terminal-positive: #32cd32;
    --terminal-negative: #ff0000;
    --terminal-header: #90ee90;
    --terminal-glow: rgba(127, 255, 0, 0.8);
    --terminal-scanline: rgba(127, 255, 0, 0.05);
}

/* Solar - Bright sunshine theme */
:root.theme-solar {
    --terminal-bg: #1a1a0a;
    --terminal-color: #ffeb3b;
    --terminal-dim: #f9a825;
    --terminal-error: #dc143c;
    --terminal-success: #fff59d;
    --terminal-warning: #ffca28;
    --terminal-info: #ffe082;
    --terminal-highlight: #ffff8d;
    --terminal-positive: #fff59d;
    --terminal-negative: #dc143c;
    --terminal-header: #ffeb3b;
    --terminal-glow: rgba(255, 235, 59, 0.8);
    --terminal-scanline: rgba(255, 235, 59, 0.04);
}

/* Preference classes */

/* Font size preferences */
.font-small { --terminal-font-size: 12px; }
.font-medium { --terminal-font-size: 14px; }
.font-large { --terminal-font-size: 16px; }
.font-xlarge { --terminal-font-size: 18px; }

/* Animation speed preferences */
.animation-off { --animation-speed: 0; }
.animation-slow { --animation-speed: 2; }
.animation-normal { --animation-speed: 1; }
.animation-fast { --animation-speed: 0.5; }

/* Glow intensity preferences */
:root.glow-off { --glow-intensity: 0; }
:root.glow-low { --glow-intensity: 0.2; }
:root.glow-medium { --glow-intensity: 0.5; }
:root.glow-high { --glow-intensity: 1; }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--terminal-bg);
    color: var(--terminal-color);
    font-family: 'Courier New', monospace;
    font-size: var(--terminal-font-size);
    line-height: 1.4;
    overflow: hidden;
}

.terminal {
    height: 100dvh;
    width: 100vw;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* CRT effects - only when enabled */
.terminal.crt-enabled::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        transparent 50%,
        var(--terminal-scanline) 50%
    );
    background-size: 100% 2px;
    pointer-events: none;
    z-index: 1;
    animation: scanlines calc(8s * var(--animation-speed)) linear infinite;
}

@keyframes scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(2px); }
}

/* Hide scrollbars but allow scrolling */
.output::-webkit-scrollbar {
    display: none;
}

/* For Firefox */
.output {
    scrollbar-width: none;
}

.header {
    font-size: 12px;
    color: var(--terminal-dim);
    opacity: 0.7;
    flex-shrink: 0;
    margin-bottom: 20px;
    z-index: 10;
}

.output {
    flex: 0 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100dvh - 110px);
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
    min-height: 0;
}

.line {
    margin: 2px 0;
    word-wrap: break-word;
    text-shadow: 0 0 calc(10px * var(--glow-intensity)) var(--terminal-glow);
}

.input-line {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-top: 10px;
    position: relative;
    z-index: 2;
}

.prompt {
    margin-right: 8px;
    color: var(--terminal-color);
    text-shadow: 0 0 calc(10px * var(--glow-intensity)) var(--terminal-glow);
}

.input-container {
    flex: 1;
    position: relative;
    display: inline-block;
}

#input, #lost-input {
    background: transparent;
    border: none;
    color: transparent;
    font-family: 'Courier New', monospace;
    font-size: var(--terminal-font-size);
    outline: none;
    width: 100%;
    caret-color: transparent;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
}

.input-text {
    color: var(--terminal-color);
    font-family: 'Courier New', monospace;
    font-size: var(--terminal-font-size);
    white-space: pre;
    z-index: 3;
    position: relative;
    min-height: 14px;
    display: inline-block;
    text-shadow: 0 0 calc(10px * var(--glow-intensity)) var(--terminal-glow);
}

.ghost-text {
    position: absolute;
    left: 0;
    color: var(--terminal-dim);
    font-family: 'Courier New', monospace;
    font-size: var(--terminal-font-size);
    pointer-events: none;
    z-index: 2;
    white-space: pre;
    opacity: 0.6;
}

.cursor {
    color: var(--terminal-color);
    animation: blink calc(1s * var(--animation-speed)) infinite;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    text-shadow: 0 0 calc(15px * var(--glow-intensity)) var(--terminal-glow);
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

.error {
    color: var(--terminal-error);
}

.dim {
    color: var(--terminal-dim);
}

.success {
    color: var(--terminal-success);
}

.warning {
    color: var(--terminal-warning);
}

.info {
    color: var(--terminal-info);
}

.highlight {
    color: var(--terminal-highlight);
}

.positive {
    color: var(--terminal-positive);
}

.negative {
    color: var(--terminal-negative);
}

.header {
    color: var(--terminal-header);
}

.loading-spinner {
    color: var(--terminal-dim);
    opacity: 0.8;
}

@media (max-width: 768px) {
    body {
        font-size: 12px;
    }

    .terminal {
        padding: 10px;
    }
}