/*
 * Die Comic-Sprache: Panels, Knöpfe, Stempel, Sprechblasen, Bildplätze.
 * Alles funktioniert ohne eine einzige Bilddatei.
 */

/* --- Panel ---------------------------------------------------------------- */

.panel {
    position: relative;
    padding: var(--bm-gap-4);
    background: var(--bm-ink-2);
    border: var(--bm-border-fat) solid var(--bm-ink);
    box-shadow: var(--bm-shadow);
}

/* Die Tuschekante: eine zweite, minimal verschobene Kontur macht den Rand unruhig. */
.panel::before {
    content: '';
    position: absolute;
    inset: -1px -2px 1px -1px;
    border: 1px solid rgba(232, 220, 192, 0.14);
    pointer-events: none;
}

/* --- Knöpfe --------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bm-gap-1);
    padding: 0.62em 1.15em;
    min-height: 44px; /* Daumengröße: jeder Spieler sitzt an einem eigenen Gerät. */
    font-family: var(--bm-font-amt);
    font-size: 0.98rem;
    font-weight: 500;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    color: var(--bm-ink);
    background: var(--bm-paper);
    border: var(--bm-border) solid var(--bm-ink);
    box-shadow: var(--bm-shadow-sm);
    cursor: pointer;
    transition: transform var(--bm-schnell), box-shadow var(--bm-schnell);
}

.btn:hover:not(:disabled) {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--bm-ink);
}

.btn:active:not(:disabled) {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--bm-ink);
}

.btn:disabled {
    color: var(--bm-soot);
    background: var(--bm-ink-3);
    border-color: var(--bm-ink-3);
    box-shadow: none;
    cursor: not-allowed;
}

.btn--primary {
    color: var(--bm-paper);
    background: var(--bm-signal);
    border-color: var(--bm-ink);
}

.btn--ghost {
    color: var(--bm-paper-dim);
    background: transparent;
    border-color: var(--bm-ink-3);
    box-shadow: none;
}

.btn--ghost:hover:not(:disabled) {
    color: var(--bm-paper);
    border-color: var(--bm-soot);
    box-shadow: none;
    transform: none;
}

/* --- Stempel -------------------------------------------------------------- */

.stamp {
    display: inline-block;
    padding: 0.15em 0.5em;
    font-family: var(--bm-font-amt);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bm-signal);
    border: 2px solid var(--bm-signal);
    transform: rotate(-7deg);
    opacity: 0.9;
}

.stamp--gold {
    color: var(--bm-gold);
    border-color: var(--bm-gold);
}

/* --- Kleine Marken -------------------------------------------------------- */

.tag {
    font-family: var(--bm-font-amt);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.1em 0.45em;
    border: 1px solid currentColor;
}

.tag--host {
    color: var(--bm-gold);
}

.tag--away {
    color: var(--bm-soot);
}

/* --- Bildplatz ------------------------------------------------------------ */

/*
 * Jedes Comic-Panel liegt als Hintergrundbild auf einer Fläche, die auch ohne
 * Datei schon etwas zeigt: Halbtonraster, Farbverlauf der Rollenfarbe und der
 * Titel des Panels. Erscheint die PNG, deckt sie den Platzhalter zu – ohne dass
 * sich am Layout etwas verschiebt.
 */
.art {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: var(--art-ratio, 16 / 9);
    overflow: hidden;
    background-color: var(--bm-ink-2);
    background-image: var(--art-src, none);
    background-size: cover;
    background-position: center;
    border: var(--bm-border-fat) solid var(--bm-ink);
    box-shadow: var(--bm-shadow);
}

.art::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at center, rgba(232, 220, 192, 0.09) 1px, transparent 1.4px),
        linear-gradient(145deg, var(--art-accent, var(--bm-signal-deep)) 0%, transparent 70%);
    background-size: var(--bm-halftone-size) var(--bm-halftone-size), 100% 100%;
}

/* Sobald ein Bild gesetzt ist, verschwindet die gezeichnete Ersatzfläche. */
.art[style*='--art-src']::before,
.art[data-loaded='1']::before {
    display: none;
}

/*
 * Die Schleife.
 *
 * Deckt die ganze Fläche und liegt UNTER allem, was auf dem Panel steht –
 * Ortsmarke, Titel, Storyboard-Rahmen. `object-fit: cover` macht dasselbe wie
 * `background-size: cover` beim Standbild, damit ein Panel nicht springt, wenn
 * eines Nachts eine Bewegtdatei dazukommt.
 *
 * Sie ist reine Fläche und kein Bedienelement: keine Steuerung, kein Ton, kein
 * Fokus. Wer mit der Tastatur durch die Station geht, stolpert nicht darüber.
 */
.art__schleife {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.art__label {
    position: relative;
    padding: var(--bm-gap-2) var(--bm-gap-3);
    font-family: var(--bm-font-amt);
    font-size: 0.78rem;
    letter-spacing: var(--bm-tracking-amt);
    text-transform: uppercase;
    text-align: center;
    color: var(--bm-paper-dim);
    border: 2px dashed rgba(232, 220, 192, 0.24);
}

.art[data-loaded='1'] .art__label {
    display: none;
}

/* --- Meldung -------------------------------------------------------------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: clamp(1rem, 4vh, 2.5rem);
    z-index: 40;
    transform: translateX(-50%);
    max-width: min(92vw, 34rem);
    padding: var(--bm-gap-2) var(--bm-gap-3);
    font-family: var(--bm-font-doc);
    text-align: center;
    color: var(--bm-paper);
    background: var(--bm-signal-deep);
    border: var(--bm-border) solid var(--bm-ink);
    box-shadow: var(--bm-shadow);
    animation: toast-in var(--bm-schnell);
}

.toast[data-kind='good'] {
    color: var(--bm-ink);
    background: var(--bm-role-codeknacker);
}

@keyframes toast-in {
    from {
        transform: translate(-50%, 40%);
        opacity: 0;
    }
}