/* ================================================================
   SYNTHETIC KIDS :: ZORK_TERMINAL — Unified Netrunner Stylesheet
   Consolidates: terminal.css, terminal-enhanced.css, terminal-prompt-fix.css,
                 ascii-fix.css, zork-title-fix.css, + runtime styles from zork-fix.js
   ================================================================ */

/* --- Netrunner palette --- */
:root {
    --tr-bg:           #07090b;
    --tr-bg-panel:     #0a0e12;
    --tr-fg:           #c9d1d9;
    --tr-prompt:       #00ff9f;  /* bright mint — prompt + user input */
    --tr-lime:         #7fff7f;  /* command echoes, success */
    --tr-cyan:         #00ddff;  /* system info, location names */
    --tr-pink:         #ff3aa0;  /* accent, highlights, active */
    --tr-amber:        #ffb347;  /* quest / objective */
    --tr-red:          #ff4757;  /* errors / warnings */
    --tr-muted:        #6a7580;  /* hints, timestamps, dim text */
    --tr-white:        #ffffff;  /* headers, emphasis */
    --tr-scanline:     rgba(0, 255, 159, 0.03);
}

/* --- Container & scanline CRT effect --- */
.terminal-menu-container {
    height: 100%;
    width: 100%;
    background: var(--tr-bg);
    color: var(--tr-fg);
    font-family: 'Roboto Mono', 'Courier New', Consolas, monospace;
    font-size: 12.5px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 8px;
    box-sizing: border-box;
}

.terminal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px 14px;
    background: var(--tr-bg-panel);
    color: var(--tr-fg);
    font-family: inherit;
    font-size: 12.5px;
    position: relative;
    z-index: 1;
    cursor: text;
    box-sizing: border-box;
    min-height: 0;
    width: 100%;
    box-shadow: inset 0 0 40px rgba(0, 255, 159, 0.06),
                inset 0 0 4px rgba(0, 255, 159, 0.15);
    overflow: hidden;
}
.terminal-content.active { display: flex; }

/* CRT scanlines overlay */
.terminal-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background-image: repeating-linear-gradient(
        0deg,
        var(--tr-scanline) 0,
        var(--tr-scanline) 1px,
        transparent 1px,
        transparent 3px
    );
    opacity: 0.8;
}
/* Subtle screen flicker */
.terminal-content::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.35) 100%);
}

/* --- Output area --- */
#terminal-output {
    flex: 1;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 8px;
    line-height: 1.5;
    min-height: 0;
    padding: 4px 8px 16px 4px;
    width: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    color: var(--tr-fg);
    position: relative;
    z-index: 2;
}
#terminal-output::-webkit-scrollbar { width: 8px; }
#terminal-output::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
#terminal-output::-webkit-scrollbar-thumb { background: var(--tr-prompt); border-radius: 4px; opacity: 0.6; }
#terminal-output::-webkit-scrollbar-thumb:hover { background: var(--tr-pink); }

/* --- Input line --- */
.input-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 22px;
    padding: 4px 8px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 6;
    border-top: 1px solid rgba(0, 255, 159, 0.2);
    background: rgba(0, 255, 159, 0.03);
}
.prompt {
    color: var(--tr-prompt);
    font-family: inherit;
    font-size: 12.5px;
    white-space: nowrap;
    flex-shrink: 0;
    text-shadow: 0 0 6px rgba(0, 255, 159, 0.7);
    font-weight: 600;
}
#terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--tr-prompt);
    font-family: inherit;
    font-size: 12.5px;
    caret-color: var(--tr-prompt);
    min-width: 0;
    box-sizing: border-box;
    text-shadow: 0 0 4px rgba(0, 255, 159, 0.5);
    font-weight: 500;
}
#terminal-input:focus {
    outline: none;
    box-shadow: inset 0 -2px 0 var(--tr-prompt);
}
/* Blinking cursor after input when empty/unfocused, faked via ::after on input-line */
.input-line::after {
    content: '█';
    color: var(--tr-prompt);
    font-size: 12.5px;
    margin-left: -4px;
    opacity: 0.7;
    animation: cursor-blink 1.1s steps(2, start) infinite;
    text-shadow: 0 0 6px rgba(0, 255, 159, 0.6);
    pointer-events: none;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* --- Terminal lines (game output) --- */
.terminal-line {
    margin: 2px 0;
    line-height: 1.45;
    min-height: 1.45em;
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
    display: block;
    transition: opacity 0.15s ease-in;
}

/* --- Semantic coloring (replaces 4x duplicated rules in old files) --- */
.terminal-line.error,      .error-message,  .access-denied    { color: var(--tr-red);    text-shadow: 0 0 4px rgba(255, 71, 87, 0.4); font-style: italic; }
.terminal-line.success,    .boot-success,   .objective-complete { color: var(--tr-lime); text-shadow: 0 0 6px rgba(127, 255, 127, 0.6); font-weight: 700; }
.terminal-line.system,     .boot-sequence,  .system-message   { color: var(--tr-cyan);   text-shadow: 0 0 3px rgba(0, 221, 255, 0.4); font-style: italic; }
.terminal-line.command                                         { color: var(--tr-lime);   font-weight: 600; }
.terminal-line.story                                           { color: #b8d4e3;          text-shadow: 0 0 2px rgba(184, 212, 227, 0.3); }
.terminal-line.location,   .exit-location                      { color: var(--tr-white);  text-shadow: 0 0 3px rgba(255, 255, 255, 0.35); }
.terminal-line.command-output                                  { color: var(--tr-fg); }
.terminal-line.matrix                                          { color: var(--tr-prompt); text-shadow: 0 0 4px rgba(0, 255, 159, 0.5); font-weight: 600; }
.terminal-line.section-header                                  { color: var(--tr-prompt); text-shadow: 0 0 3px rgba(0, 255, 159, 0.4); font-weight: 700; }
/* .zork-intro is used as a banner title span — center only when used as inline/header,
   NOT when used as a container class for full welcome blocks. Container form is left-aligned. */
.terminal-line.zork-intro                                      { color: var(--tr-white);  font-weight: 700; text-align: left; display: block; margin: 10px 0; font-size: 13px; text-shadow: 0 0 8px rgba(255,255,255,0.5); letter-spacing: 1px; }
/* When .zork-intro is used as an INLINE span for the banner title only, it gets centered display */
span.zork-intro {
    display: block;
    text-align: center;
    font-size: 16px;
    letter-spacing: 2px;
    margin: 4px 0 12px 0;
}

/* --- Dialog system (from zork-fix.js, now static) --- */
.npc-name           { color: var(--tr-amber);  font-weight: 700; }
.npc-dialog         { color: var(--tr-white); }
.npc-action         { color: var(--tr-muted);  font-style: italic; }
.player-dialog      { color: var(--tr-lime);   font-weight: 700; }
.player-response    { color: #dcf4dc; }
.dialog-options-header { color: var(--tr-amber); font-weight: 700; display: block; margin-top: 10px; }
.dialog-option      { color: var(--tr-cyan);   display: block; margin-left: 12px; }
.choice-prompt      { color: var(--tr-amber);  font-weight: 700; display: block; margin: 10px 0; }
.quest-update       { color: var(--tr-amber);  font-weight: 700; display: block; margin: 10px 0; text-shadow: 0 0 6px rgba(255, 179, 71, 0.5); }
.status-label       { color: var(--tr-amber);  font-weight: 700; }
.status-value       { color: var(--tr-white); }
.command-hint       { color: var(--tr-muted);  font-style: italic; }
.exit-arrow         { color: var(--tr-pink); }
.exit-entry         { color: var(--tr-lime); }
.highlight          { color: var(--tr-white);  text-shadow: 0 0 10px rgba(255,255,255,0.7); font-weight: 700; }
.cherry-blossom     { color: #ff69b4; }

/* --- ASCII art --- */
/* --- ASCII art (decorative, centered by default) --- */
.ascii-art,
.terminal-line.ascii-art {
    color: var(--tr-prompt);
    font-family: 'Courier New', Consolas, 'Lucida Console', monospace;
    white-space: pre;
    line-height: 1.2;
    font-size: 12px;
    display: block;
    margin: 12px auto;
    text-shadow: 0 0 5px rgba(0, 255, 159, 0.5);
    letter-spacing: 0;
    text-align: center;
    tab-size: 8;
    width: fit-content;
    max-width: 100%;
}
.ascii-art.centered { text-align: center; margin: 15px auto; width: fit-content; max-width: 100%; }
.ascii-bootup {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    margin: 20px auto;
    padding: 10px;
    white-space: pre;
    display: block;
    color: var(--tr-prompt);
    text-shadow: 0 0 5px rgba(0, 255, 159, 0.7);
    width: fit-content;
    max-width: 100%;
}

/* --- Status indicators --- */
.status-secure    { color: var(--tr-lime);  text-shadow: 0 0 3px var(--tr-lime); }
.status-monitored { color: var(--tr-amber); text-shadow: 0 0 3px var(--tr-amber); }
.status-encrypted { color: var(--tr-red);   text-shadow: 0 0 3px var(--tr-red); }
.status-away      { color: #ffff66;         text-shadow: 0 0 3px #ffff66; }

/* --- Menu + cyber elements --- */
.menu-header {
    color: var(--tr-white);
    text-shadow: 0 0 8px rgba(0, 221, 255, 0.8);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding: 8px 0;
    margin: 10px 0;
}
.menu-option {
    color: var(--tr-prompt);
    padding: 4px 0;
    cursor: pointer;
    transition: color 0.2s, text-shadow 0.2s;
}
.menu-option:hover { color: var(--tr-pink); text-shadow: 0 0 8px rgba(255, 58, 160, 0.7); }
.menu-instruction  { color: var(--tr-muted); font-size: 12px; margin-top: 10px; font-style: italic; }

.cyber-border {
    color: var(--tr-cyan);
    text-shadow: 0 0 5px rgba(0, 221, 255, 0.7);
    font-weight: 700;
    white-space: pre;
    display: block;
    animation: cyber-pulse 3s ease-in-out infinite;
}
.cyber-output {
    font-family: inherit;
    line-height: 1.3;
    margin: 10px 0;
    white-space: pre-wrap;
    animation: matrix-fade 0.4s ease-out;
}
.cyber-prompt { margin-top: 15px; padding: 10px 0; font-weight: 700; text-align: left; }

@keyframes cyber-pulse {
    0%, 100% { text-shadow: 0 0 5px currentColor; }
    50%      { text-shadow: 0 0 10px currentColor, 0 0 15px currentColor; }
}
@keyframes matrix-fade {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- Tab content visibility (moved from #empty-content rules) --- */
#empty-content {
    display: none;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#empty-content.active {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- File/settings entries --- */
.settings-section { color: var(--tr-cyan);  font-weight: 700; margin: 10px 0 5px 0; }
.setting-option,
.system-info,
.network-info,
.tool-option,
.file-entry       { margin: 3px 0; padding-left: 10px; }
.file-entry:hover { color: var(--tr-white); text-shadow: 0 0 3px rgba(255,255,255,0.4); transition: all 0.15s ease; }
.file-list,
.network-status   { color: var(--tr-white); margin: 5px 0; font-weight: 700; }

/* --- Mobile --- */
@media (max-width: 768px) {
    .terminal-content { font-size: 13px; padding: 8px 10px; }
    .ascii-art { font-size: 10px; }
    .ascii-bootup { font-size: 10px; }
    .prompt, #terminal-input { font-size: 13px; }
}
@media (max-width: 480px) {
    .terminal-content { font-size: 12px; padding: 6px 8px; }
    .ascii-art { font-size: 9px; }
    .terminal-line.zork-intro { font-size: 14px; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .cyber-border, .cyber-output, .input-line::after {
        animation: none !important;
    }
}

/* --- Floating EC (Essential Commands) stack, top-right --- */
.cmd-hud {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 12;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 6px 8px;
    background: rgba(7, 9, 11, 0.85);
    border: 1px solid rgba(0, 255, 159, 0.3);
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5), inset 0 0 8px rgba(0, 255, 159, 0.05);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.cmd-hud.visible { opacity: 0.9; transform: translateY(0); pointer-events: auto; }
.cmd-hud:hover { opacity: 1; }
.cmd-hud-label {
    font-family: inherit;
    font-size: 9px;
    color: var(--tr-muted);
    letter-spacing: 0.1em;
    text-align: center;
    padding: 1px 0 3px 0;
    border-bottom: 1px solid rgba(0, 255, 159, 0.15);
    margin-bottom: 3px;
}
.cmd-hud-btn {
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--tr-prompt);
    background: transparent;
    border: 1px solid rgba(0, 255, 159, 0.2);
    border-radius: 2px;
    padding: 2px 10px;
    cursor: pointer;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    transition: all 0.15s ease;
    min-width: 56px;
    text-align: left;
}
.cmd-hud-btn:hover {
    background: rgba(0, 255, 159, 0.12);
    border-color: var(--tr-prompt);
    color: var(--tr-white);
}
.cmd-hud-btn:active { transform: translateY(1px); }
@media (max-width: 480px) {
    .cmd-hud { top: 6px; right: 6px; padding: 4px 6px; }
    .cmd-hud-btn { font-size: 10px; padding: 2px 8px; min-width: 48px; }
    .cmd-hud-label { font-size: 8px; }
}