/* PHOSPHOR BBS - CRT shell */

:root {
    --green: #57ff87;
    --amber: #ffb454;
    --red: #ff5f5f;
    --grey: #7f8f7f;
    --bg: #050805;
}

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

html, body {
    height: 100%;
    background: #000;
    color: var(--green);
    font-family: "Cascadia Mono", "Consolas", "DejaVu Sans Mono", monospace;
    overflow: hidden;
}

body {
    display: grid;
    place-items: center;
}

.crt {
    position: relative;
    background: var(--bg);
    border: 1px solid #1f2a1f;
    border-radius: 10px;
    padding: 22px 26px 14px;
    box-shadow:
        0 0 80px rgba(87, 255, 135, 0.18),
        0 0 2px rgba(87, 255, 135, 0.35),
        inset 0 0 60px rgba(0, 0, 0, 0.9);
    overflow: hidden;
}

/* scanlines */
.crt::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.32) 3px,
        rgba(0, 0, 0, 0.32) 4px
    );
    pointer-events: none;
    z-index: 3;
}

/* vignette + glass */
.crt::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(87, 255, 135, 0.05) 0%, rgba(0, 0, 0, 0.55) 78%, rgba(0, 0, 0, 0.9) 100%);
    pointer-events: none;
    z-index: 4;
}

.screen {
    position: relative;
    z-index: 2;
    display: block;
    width: 674px;
    height: 388px;
    overflow: hidden;
    white-space: pre;
    font-family: inherit;
    font-size: 14px;
    line-height: 16.16px;
    letter-spacing: 0;
    text-shadow: 0 0 6px rgba(87, 255, 135, 0.35);
    outline: none;
    cursor: default;
}

.fg-green { color: var(--green); }
.fg-amber { color: var(--amber); text-shadow: 0 0 6px rgba(255, 180, 84, 0.35); }
.fg-red   { color: var(--red);   text-shadow: 0 0 6px rgba(255, 95, 95, 0.4); }
.fg-grey  { color: var(--grey);  text-shadow: none; }

.status {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 4px 8px 0;
    border-top: 1px solid #1c261c;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--grey);
}

#status { color: var(--green); }
#online { color: var(--amber); }

.instructions {
    position: relative;
    z-index: 5;
    margin-top: 10px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: #4a564a;
}

.instructions p { margin: 2px 0; }

@media (max-width: 760px) {
    .crt { transform: scale(0.86); transform-origin: center; }
}