/*
 * Akt 1, Der Lochkarten-Tresor: die Stanze auf Ebene drei.
 *
 * Nur die Blöcke DIESER Station. Was in mehr als einer Hürde vorkommt – Bank,
 * Nonius, Blatt, Tafel, Leuchtkasten, Terminal – steht in `game.css` und
 * `terminal.css` und wird hier nur ergänzt, nie nachgebaut.
 *
 * NAMENSRAUM `.wr-loch`. Ein Klassenname wird einmal vergeben: Vor jedem neuen
 * Block hier stand ein grep über jede `.css` unter `public/` und `shared/` –
 * `loch` kam nirgends vor.
 *
 * Alle Farben und Maße kommen aus `--wr-*`. Kein `border-radius`, kein
 * Weichzeichner, kein Verlauf als Fläche, kein Glow: Was hier leuchtet,
 * leuchtet durch Kontrast.
 */

/* ============================================== SCHRAUBER: die Stanzbank == */

.wr-loch__geraete {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--wr-gap-3);
    margin-bottom: var(--wr-gap-3);
}

.wr-loch__geraet {
    display: grid;
    justify-items: center;
    gap: var(--wr-gap-1);
    padding: var(--wr-gap-3);
    background: var(--wr-ink-2);
    border: var(--wr-border) solid var(--wr-ink-3);
}

/*
 * Vier mechanische Ziffernrollen. Ihre Zahl wird durch den Raum gerufen –
 * tabellarisch gesetzt, ohne Trennstrich: Ein Bindestrich in einer angesagten
 * Zahl ist eine Falle.
 */
.wr-loch__ziffer {
    font-family: var(--wr-font-mono);
    font-size: 2.6rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--wr-tracking-mono);
    hyphens: none;
    color: var(--wr-phosphor);
}

.wr-loch__karte {
    display: block;
    width: 100%;
    max-width: 15rem;
    color: var(--wr-paper-dim);
}

.wr-loch__zuarbeit {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wr-gap-2);
    align-items: center;
    margin-bottom: var(--wr-gap-3);
    padding: var(--wr-gap-3);
    background: var(--wr-ink-2);
    border: var(--wr-border) solid var(--wr-ink-3);
}

.wr-loch__zuarbeit .bank__marke {
    flex: 1 0 100%;
}

/* Lampe UND Wort. Farbe allein trägt in diesem Haus nie eine Auskunft. */
.wr-loch__lampe {
    padding: 0.45rem 0.9rem;
    font-family: var(--wr-font-amt);
    font-size: 0.82rem;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
    color: var(--wr-stahl);
    background: var(--wr-ink);
    border: 2px solid var(--wr-ink-3);
}

.wr-loch__lampe[data-belegt='1'] {
    color: var(--wr-ink);
    background: var(--wr-bernstein);
    border-color: var(--wr-ink);
}

.wr-loch__hebel {
    display: grid;
    justify-items: start;
    gap: var(--wr-gap-1);
    margin-top: var(--wr-gap-3);
    padding: var(--wr-gap-3);
    background: var(--wr-ink-2);
    border: var(--wr-border) solid var(--wr-ink-3);
}

.wr-loch__hebel .btn {
    min-width: 13rem;
}

/* ========================================== SCHMIERFINK: die Auftragswalze */

.wr-loch__walze {
    display: grid;
    justify-items: start;
    gap: var(--wr-gap-2);
    max-width: var(--wr-mass);
    margin-top: var(--wr-gap-4);
    padding: var(--wr-gap-3);
    background: var(--schirm-feld);
    /* Umgeschaltet wird an der Station, nie an der einzelnen Regel: Die Walze
       steht nur auf Ansgars Schirm, also ist --role-accent hier ohnehin seine
       Farbe – und bleibt es, wenn die Tabelle in game.css sich einmal ändert. */
    border-left: var(--wr-border-fat) solid var(--role-accent);
}

.wr-loch__walze label,
.wr-loch__auszug label {
    margin: 0;
    font-family: var(--wr-font-amt);
    font-size: 0.86rem;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
}

.wr-loch__walze input,
.wr-loch__auszug input {
    width: 100%;
    min-height: 44px;
}

.wr-loch__stand {
    font-family: var(--wr-font-doc);
    font-size: 0.92rem;
    color: var(--schirm-still);
}

/* ============================================== FÄLSCHER: das Durchlicht == */

.wr-loch__licht {
    display: grid;
    gap: var(--wr-gap-3);
}

.wr-loch__auszug {
    display: grid;
    justify-items: start;
    gap: var(--wr-gap-2);
    max-width: 26rem;
    padding: var(--wr-gap-3);
    background: var(--schirm-feld);
    border-left: var(--wr-border-fat) solid var(--role-accent);
}

.wr-loch__sicht {
    max-width: var(--wr-mass);
    margin: 0;
    padding: var(--wr-gap-3);
    background: var(--schirm-feld);
    border-left: var(--wr-border-fat) solid var(--role-accent);
}

/* Eine belegte Mattscheibe ist ein Befund und kein Signal: Die Kante wechselt
   die Farbe, der Satz darüber sagt dasselbe in Worten. */
.wr-loch__sicht[data-belegt='1'] {
    border-left-color: var(--wr-bernstein);
}

.wr-loch__satz {
    margin: 0;
    font-family: var(--wr-font-doc);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.wr-loch__randlochung {
    display: grid;
    justify-items: start;
    gap: var(--wr-gap-1);
    margin-top: var(--wr-gap-3);
}

/*
 * Die Silhouette. Sie steht groß da, weil sie beschrieben werden muss – und
 * ihr Name steht nirgends im Bild, sondern allein im aria-label.
 */
.wr-loch__form {
    display: block;
    width: 6rem;
    height: 6rem;
    padding: 0.6rem;
    color: var(--wr-bernstein);
    background: var(--wr-ink);
    border: var(--wr-border) solid var(--wr-ink-3);
}

.wr-loch__form svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

/* ========================================= CODE-KNACKER: der Kartenleser == */

.wr-loch__stammsatz {
    margin: 0 0 var(--wr-gap-3);
    padding: var(--wr-gap-2) var(--wr-gap-3);
    font-family: var(--wr-font-amt);
    font-size: 0.86rem;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
    color: var(--wr-phosphor);
    border: 2px solid var(--wr-phosphor-tief);
}

.wr-loch__stammsatz b {
    font-variant-numeric: tabular-nums;
    hyphens: none;
}

/* ================================================== Auf schmalen Geräten == */

@media (max-width: 30rem) {
    .wr-loch__geraet {
        padding: var(--wr-gap-2);
    }

    .wr-loch__ziffer {
        font-size: 2.1rem;
    }

    .wr-loch__form {
        width: 4.8rem;
        height: 4.8rem;
    }

    .wr-loch__hebel .btn {
        min-width: 0;
        width: 100%;
    }
}