/*
 * Die Bildröhre.
 *
 * Der eine neue Block dieses Hauses und die einzige Fläche, auf der Phosphor
 * stehen darf: Terminal, Zählwerk, Freigabe. Ein Haus, in dem alles grün
 * leuchtet, hat keinen Akzent mehr.
 *
 * SIE LEUCHTET DURCH KONTRAST. Kein Glow, kein Schein, kein Weichzeichner,
 * kein Flackern – die Bibel verbietet das erste, und eine flackernde Fläche
 * ist auf einem Telefon nach zwanzig Minuten Körperverletzung. Was die Röhre
 * ausmacht, sind vier Dinge: ein ertränkter Grund, harte Kanten, weite
 * Laufweite und die Zeilenmaske als Auflage.
 *
 * Die Maske liegt NUR hier. Über einer ganzen Ansicht wäre sie ein Effekt
 * statt eines Gegenstands.
 *
 * Geladen NACH `game.css`: Was hier steht, ist der Schirm des Code-Knackers
 * und schlägt die Stationsregeln absichtlich.
 */

.terminal {
    position: relative;
    padding: var(--wr-gap-3);
    font-family: var(--wr-font-mono);
    font-size: 0.95rem;
    letter-spacing: var(--wr-tracking-mono);
    color: var(--wr-phosphor);
    background: var(--wr-phosphor-tief);
    border: var(--wr-border-fat) solid var(--wr-ink);
}

/* Die Zeilenmaske. Eine Auflage, die nichts anfassen kann. */
.terminal::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--wr-zeilen);
    pointer-events: none;
}

/* Alles, was auf der Röhre steht, liegt über der Maske. */
.terminal > * {
    position: relative;
    z-index: 1;
}

.terminal h2,
.terminal h3 {
    color: var(--wr-phosphor);
}

.terminal label {
    color: var(--wr-phosphor);
    opacity: 0.75;
}

/*
 * Ein Feld auf der Röhre ist eine Vertiefung im Phosphor, kein Blatt Papier:
 * Es gibt in einem Rechenzentrum nichts, worauf man schreiben könnte.
 */
.terminal input,
.terminal textarea {
    font-family: var(--wr-font-mono);
    letter-spacing: var(--wr-tracking-mono);
    color: var(--wr-phosphor);
    background: var(--wr-feld-dunkel);
    border-color: var(--wr-phosphor);
    box-shadow: none;
    min-height: 44px;
}

.terminal input::placeholder,
.terminal textarea::placeholder {
    color: rgba(62, 224, 106, 0.45);
}

/* Was das Register gerade NICHT annimmt – und warum. */
.terminal__sperre {
    margin: 0 0 var(--wr-gap-2);
    max-width: var(--wr-mass);
    font-family: var(--wr-font-amt);
    font-size: 0.8rem;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
    color: var(--wr-bernstein);
}

.terminal__masken {
    display: grid;
    gap: var(--wr-gap-2);
    justify-items: start;
}

.terminal__maske {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--wr-gap-2);
    width: 100%;
}

.terminal__maske label {
    margin-bottom: 0;
}

.terminal__maske label span {
    display: block;
    margin-bottom: var(--wr-gap-1);
}

/*
 * Das Protokoll. Jede Zeile eine Abfrage, darüber die Frage in Halbhelligkeit
 * – wer eine Antwort vorliest, muss sagen können, worauf sie lautete.
 */
.terminal__protokoll {
    margin-top: var(--wr-gap-3);
    padding-top: var(--wr-gap-2);
    font-size: 0.9rem;
    border-top: 1px solid rgba(62, 224, 106, 0.35);
}

.terminal__protokoll li {
    margin-bottom: var(--wr-gap-2);
    overflow-wrap: anywhere;
}

.terminal__frage {
    display: block;
    color: var(--wr-phosphor);
    opacity: 0.6;
}

/*
 * Das Zählwerk. Zwei Ziffern, tabellarisch gesetzt, ohne Trennstrich: Diese
 * Zahl wird über den Tisch gerufen, und ein Bindestrich darin wäre eine Falle.
 */
.zaehlwerk {
    display: inline-block;
    padding: 0.1em 0.35em;
    font-family: var(--wr-font-mono);
    font-size: 2.1rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--wr-tracking-mono);
    hyphens: none;
    color: var(--wr-phosphor);
    background: var(--wr-ink);
    border: 2px solid var(--wr-phosphor-tief);
}

@media (prefers-reduced-motion: reduce) {
    /* Das feine Streifenraster steht still, kann aber auf hochauflösenden
       Schirmen moirén. Wer Bewegung nicht verträgt, bekommt die glatte Röhre. */
    .terminal::after {
        display: none;
    }
}