/*
 * style.css — «зелёный фосфор» на чёрном: старая ЭВМ / CRT-терминал.
 *
 * Шрифт и размер меняются в блоке :root — одном месте.
 */

:root {
    /* --- шрифт и размер (подбираются позже) --- */
    --font-family: "DejaVu Sans Mono", "Liberation Mono", "Menlo", "Consolas", "Courier New", monospace;
    --font-size: 15px;
    --line-height: 1.45;

    /* --- цвета --- */
    --bg: #000000;
    --green: #33ff66;
    --green-bright: #b6ffd0;
    --green-dim: #1d7a3c;
    --green-mid: #25994a;

    --glow-text: 0 0 1px rgba(51, 255, 102, 0.55), 0 0 8px rgba(51, 255, 102, 0.22);
    --glow-soft: 0 0 6px rgba(51, 255, 102, 0.35);
}

* { box-sizing: border-box; }

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

body {
    color: var(--green);
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    text-shadow: var(--glow-text);
    -webkit-font-smoothing: antialiased;
}

/* ---------- каркас ---------- */

.crt {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.frame {
    position: relative;
    z-index: 2;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--green-dim);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 0 22px rgba(51, 255, 102, 0.10) inset;
    background: #010401;
}

/* ---------- верхняя панель ---------- */

.topbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px;
    border-bottom: 1px solid var(--green-dim);
    color: var(--green-mid);
    font-size: 0.82em;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
}

.topbar .ident b { color: var(--green); font-weight: normal; }
.topbar .sep { color: var(--green-dim); }
.topbar .grow { flex: 1; }

.led {
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--green);
    animation: led 1.6s steps(1, end) infinite;
}

@keyframes led {
    0%, 55% { opacity: 1; }
    56%, 100% { opacity: 0.15; }
}

/* ---------- экран ---------- */

.screen {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(0, 40, 15, 0.35), transparent 70%),
        #010401;
    scrollbar-width: thin;
    scrollbar-color: var(--green-dim) transparent;
}

.screen::-webkit-scrollbar { width: 10px; }
.screen::-webkit-scrollbar-track { background: rgba(0, 40, 15, 0.25); }
.screen::-webkit-scrollbar-thumb {
    background: var(--green-dim);
    box-shadow: 0 0 6px rgba(51, 255, 102, 0.3);
}

.out {
    margin: 0;
    font: inherit;
    white-space: pre-wrap;
    word-break: break-all;
    overflow-wrap: anywhere;
    color: var(--green);
    animation: flicker 5.5s infinite;
}

@keyframes flicker {
    0%, 96%, 100% { opacity: 1; }
    97% { opacity: 0.86; }
    98% { opacity: 0.97; }
    99% { opacity: 0.9; }
}

/* ---------- курсор ---------- */

.cursor {
    display: inline-block;
    width: 0.62em;
    height: 1.02em;
    vertical-align: -0.16em;
    background: var(--green);
    box-shadow: 0 0 8px rgba(51, 255, 102, 0.75);
    animation: blink 1.05s steps(1, end) infinite;
}

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

/* ---------- строка состояния ---------- */

.statusbar {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 22px;
    padding: 5px 10px;
    border-top: 1px solid var(--green-dim);
    color: var(--green-mid);
    font-size: 0.82em;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
}

.cell i {
    font-style: normal;
    color: var(--green-dim);
    margin-right: 6px;
}

.cell b {
    font-weight: normal;
    color: var(--green);
    text-shadow: var(--glow-soft);
}

.cell b.ok { color: var(--green-bright); }

/* ---------- накладки CRT ---------- */

.scanlines {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.30) 0px,
        rgba(0, 0, 0, 0.30) 1px,
        transparent 1px,
        transparent 3px
    );
}

.vignette {
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0) 45%,
        rgba(0, 0, 0, 0.55) 88%,
        rgba(0, 0, 0, 0.9) 100%);
}

/* ---------- мелкие экраны ---------- */

@media (max-width: 640px) {
    :root { --font-size: 13px; }
    .statusbar { gap: 0 12px; font-size: 0.76em; }
    .topbar { font-size: 0.72em; }
}