:root {
    --fg:       #00ee55;   /* main text — bright phosphor green */
    --fg-bright:#00ff88;   /* headings, labels                  */
    --fg-dim:   #228833;   /* empty cells, borders              */
    --fg-mid:   #44bb66;   /* secondary text, event log base    */
    --amber:    #ffcc00;
    --red:      #ff4444;
    --cyan:     #33eeff;
    --ship-c:   #00ff00;
    --star-c:   #ffff44;
    --danger-c: #ff4422;
    --solar-c:  #ffaa22;
    --bg:       #000000;
    --bg-panel: #010901;
    --font:     'Courier New', 'Lucida Console', 'Consolas', monospace;
    --term-w:   100ch;     /* fixed terminal width               */
    --map-w:    50ch;      /* left column (map + system info)     */
    --status-w: 46ch;      /* right column (ship status)          */
}

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

/* ── Base ─────────────────────────────────────────────────── */
html, body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.45;
    overflow-x: hidden;
}

/* ── Terminal wrapper ─────────────────────────────────────── */
#term {
    max-width: var(--term-w);
    margin: 0 auto;
    min-height: 100vh;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    /* subtle CRT phosphor glow on text */
    text-shadow: 0 0 3px rgba(0, 238, 85, 0.25);
}

/* CRT scanlines overlay */
#term::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.08) 2px,
        rgba(0,0,0,0.08) 4px
    );
    pointer-events: none;
    z-index: 9000;
}

/* CRT vignette — darkens edges like a real tube */
#term::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 55%,
        rgba(0, 0, 0, 0.4) 100%
    );
    pointer-events: none;
    z-index: 9001;
}

/* ── Banner ───────────────────────────────────────────────── */
#banner {
    color: var(--fg-bright);
    font-size: 14px;
    line-height: 1.3;
    white-space: pre;
    margin-bottom: 6px;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(0, 238, 85, 0.4),
                 0 0 2px rgba(0, 238, 85, 0.2);
}

/* ── Section headers (ASCII borders) ─────────────────────── */
.sec-hdr {
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg-dim);
    white-space: pre;
    line-height: 1.4;
    background: var(--bg);
    margin: 0;
    overflow: hidden;
}

/* ── Main two-column layout ───────────────────────────────── */
#main-row {
    display: flex;
    gap: 4ch;
    align-items: flex-start;
    margin-bottom: 0;
}

#map-col {
    flex: 0 0 var(--map-w);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#map-wrap {
    background: var(--bg-panel);
    padding: 2px 0;
}

#ascii-map {
    font-size: 14px;
    line-height: 1.25;
    white-space: pre;
    padding: 2px 4px;
    background: var(--bg-panel);
    color: var(--fg-dim);
}

/* Map character colors */
.ch-ship     { color: var(--ship-c);   font-weight: bold; }
.ch-star     { color: var(--star-c);   }
.ch-danger   { color: var(--danger-c); }
.ch-solar    { color: var(--solar-c);  }
.ch-scanned  { color: var(--cyan);     }
.ch-unscanned{ color: var(--fg-mid);   }
.ch-asteroid { color: var(--amber);    }
.ch-consumed { color: var(--fg-dim);   }
.ch-empty    { color: var(--fg-dim);   }

/* ── Status / info panels (right column) ─────────────────── */
#status-col {
    flex: 0 0 var(--status-w);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#ship-status {
    font-size: 13px;
    line-height: 1.6;
    white-space: pre;
    padding: 4px 8px;
    background: var(--bg-panel);
    color: var(--fg);
}

#system-info {
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 4px 8px;
    background: var(--bg-panel);
    color: var(--fg);
}

.scan-data {
    color: var(--fg-mid);
    font-style: italic;
}

/* Status sub-header dividers */
.status-divider {
    color: var(--fg-dim);
}

/* ── Memory log ───────────────────────────────────────────── */
#memory-log {
    background: var(--bg-panel);
    padding: 4px 8px;
}

.mem-line {
    font-family: var(--font);
    font-size: 13px;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}

.mem-step {
    color: var(--fg-dim);
}

/* ── ASCII bar colors ─────────────────────────────────────── */
.bar-e  { color: #3399ff; }   /* energy — blue   */
.bar-h  { color: #00cc44; }   /* hull   — green  */
.bar-f  { color: var(--red);  }   /* fear   — red    */
.bar-c  { color: var(--amber); }  /* conf   — amber  */
.bar-empty { color: #2a4a2a; }

/* ── Helpers ──────────────────────────────────────────────── */
.dim    { color: var(--fg-dim); }
.bright { color: var(--fg-bright); }
.amber  { color: var(--amber); }
.red    { color: var(--red); }
.cyan   { color: var(--cyan); }

/* blinking cursor */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}
.cursor { animation: blink 1s step-end infinite; }
.blink  { animation: blink 1.2s step-end infinite; }

/* ── Status bar ───────────────────────────────────────────── */
#statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font);
    font-size: 11px;
    color: var(--fg-mid);
    padding: 4px 0;
    border-top: 1px solid var(--fg-dim);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* status bar connection: dot + label, far right; dot blinks when connected, glow red when not */
.sb-dot { font-size: 0.85em; flex-shrink: 0; }
.sb-dot.connected .sb-dot-char {
    color: var(--fg-mid);
    animation: dot-blink 1.2s step-end infinite;
}
.sb-dot.connected .sb-conn-text { color: var(--fg-mid); }
.sb-dot.disconnected .sb-dot-char {
    color: var(--red);
    text-shadow: 0 0 6px var(--red), 0 0 10px var(--red);
}
.sb-dot.disconnected .sb-conn-text { color: var(--red); }
@keyframes dot-blink {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 0.2; }
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: var(--fg-dim); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-mid); }