/* Import a DOS-style font - IBM VGA 8x16 or similar */
@font-face {
    font-family: 'IBM VGA';
    src: url('/fonts/WebPlus_IBM_VGA_8x16.woff') format('woff');
}

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

:root {
    --term-bg: #0a0a0a;
    --term-fg: #aaaaaa;
    --term-bright: #ffffff;
    --term-cyan: #55ffff;
    --term-yellow: #ffff55;
    --term-green: #55ff55;
    --term-red: #ff5555;
    --term-blue: #5555ff;
    --term-magenta: #ff55ff;
    --char-width: 8px;
    --char-height: 16px;
    --cols: 80;
    --rows: 25;  /* 25 rows for DOS door compatibility */
}

html, body {
    height: 100%;
    background: #000;
    overflow: hidden;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'IBM VGA', 'Courier New', monospace;
}

#scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 1000;
}

#terminal-container {
    position: relative;
    padding: 20px;
    background: #111;
    border-radius: 20px;
    box-shadow:
        0 0 60px rgba(0, 170, 170, 0.3),
        inset 0 0 20px rgba(0, 0, 0, 0.5);
}

#terminal {
    width: calc(var(--char-width) * var(--cols));
    height: calc(var(--char-height) * (var(--rows) + 1)); /* +1 for input line */
    background: var(--term-bg);
    color: var(--term-fg);
    font-size: 16px;
    line-height: var(--char-height);
    position: relative;
    overflow: hidden;
    /* Pixel-perfect rendering */
    image-rendering: pixelated;
    -webkit-font-smoothing: none;
}

#screen {
    white-space: pre;
    height: calc(var(--char-height) * var(--rows));
    overflow: hidden;
    /* Crisp pixel rendering for block characters */
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
    text-rendering: optimizeSpeed;
}

#input-line {
    display: flex;
    align-items: center;
    height: var(--char-height);
}

#prompt {
    color: var(--term-cyan);
}

#command-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--term-fg);
    font-family: inherit;
    font-size: inherit;
    caret-color: transparent;
    flex: 1;
    padding: 0 4px;
}

#cursor {
    color: var(--term-fg);
    animation: blink 1s step-end infinite;
}

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

/* ANSI Color Classes - Canonical CGA Palette (as used by 16colo.rs/PabloDraw) */
/* Normal colors (30-37 fg, 40-47 bg) - CGA colors 0-7 */
.fg-black   { color: #000000; }  /* CGA 0 */
.fg-red     { color: #aa0000; }  /* CGA 4 */
.fg-green   { color: #00aa00; }  /* CGA 2 */
.fg-yellow  { color: #aa5500; }  /* CGA 6 - brown/dark yellow */
.fg-blue    { color: #0000aa; }  /* CGA 1 */
.fg-magenta { color: #aa00aa; }  /* CGA 5 */
.fg-cyan    { color: #00aaaa; }  /* CGA 3 */
.fg-white   { color: #aaaaaa; }  /* CGA 7 - light gray */

/* Bright/bold colors (90-97 fg, or 30-37 with bold attribute) - CGA colors 8-15 */
.fg-bright-black   { color: #555555; }  /* CGA 8 - dark gray */
.fg-bright-red     { color: #ff5555; }  /* CGA 12 */
.fg-bright-green   { color: #55ff55; }  /* CGA 10 */
.fg-bright-yellow  { color: #ffff55; }  /* CGA 14 - bright yellow */
.fg-bright-blue    { color: #5555ff; }  /* CGA 9 */
.fg-bright-magenta { color: #ff55ff; }  /* CGA 13 */
.fg-bright-cyan    { color: #55ffff; }  /* CGA 11 */
.fg-bright-white   { color: #ffffff; }  /* CGA 15 */

/* Background colors - standard 40-47 (CGA colors 0-7) */
.bg-black   { background: #000000; }
.bg-red     { background: #aa0000; }
.bg-green   { background: #00aa00; }
.bg-yellow  { background: #aa5500; }  /* CGA 6 - brown/dark yellow */
.bg-blue    { background: #0000aa; }
.bg-magenta { background: #aa00aa; }
.bg-cyan    { background: #00aaaa; }
.bg-white   { background: #aaaaaa; }

/* Bright background colors (100-107, or with blink in iCE mode) - CGA colors 8-15 */
.bg-bright-black   { background-color: #555555; }
.bg-bright-red     { background-color: #ff5555; }
.bg-bright-green   { background-color: #55ff55; }
.bg-bright-yellow  { background-color: #ffff55; }  /* CGA 14 - bright yellow */
.bg-bright-blue    { background-color: #5555ff; }
.bg-bright-magenta { background-color: #ff55ff; }
.bg-bright-cyan    { background-color: #55ffff; }
.bg-bright-white   { background-color: #ffffff; }

/* Reverse video (ANSI code 7) - swap fg/bg for cursor display */
.reverse-video {
    color: #0a0a0a;
    background-color: #aaaaaa;
}