/*
 * Die geteilte Grundsprache: Panel, Knopf, Stempel, Marke, Bildplatz, Meldung.
 *
 * Diese sechs Blöcke stehen in jeder Ansicht und kennen keine Rolle und keine
 * Hürde. Alles funktioniert ohne eine einzige Bilddatei – fehlt ein Panel,
 * steht ein gezeichneter Ersatz da und kein 404.
 */

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

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

/* Zweite, minimal versetzte Kontur: die Kante eines Blechs, nicht die einer
   Tuschelinie – kalt, dünn, oben heller als unten. */
.panel::before {
    content: '';
    position: absolute;
    inset: -1px -2px 1px -1px;
    border: 1px solid rgba(230, 220, 196, 0.12);
    pointer-events: none;
}

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

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

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

/* Der Druckpunkt eines Kippschalters: Er fällt, oder er fällt nicht. */
.btn:active:not(:disabled) {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--wr-ink);
}

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

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

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

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

/* --- Stempel und Marken --------------------------------------------------- */

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

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

.tag {
    font-family: var(--wr-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(--wr-gold);
}

.tag--away {
    color: var(--wr-stahl);
}

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

/*
 * Jedes Panel liegt als Hintergrundbild auf einer Fläche, die auch ohne Datei
 * schon etwas zeigt. Ein anderes Seitenverhältnis oder ein anderer Ersatzton
 * kommt über `--art-ratio` / `--art-accent` – am Element, nicht über eine neue
 * Klasse: `style="--art-ratio: 21 / 9"`.
 */
.art {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: var(--art-ratio, 16 / 9);
    overflow: hidden;
    background-color: var(--wr-ink-2);
    background-image: var(--art-src, none);
    background-size: cover;
    background-position: center;
    border: var(--wr-border-fat) solid var(--wr-ink);
    box-shadow: var(--wr-shadow);
}

.art::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at center, rgba(230, 220, 196, 0.08) 1px, transparent 1.4px),
        linear-gradient(145deg, var(--art-accent, var(--wr-blaupause)) 0%, transparent 70%);
    background-size: var(--wr-halftone-size) var(--wr-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. Sie ist Fläche und kein Bedienelement: kein Ton, kein Fokus, kein
 * Stolperstein für die Tastatur.
 */
.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(--wr-gap-2) var(--wr-gap-3);
    font-family: var(--wr-font-amt);
    font-size: 0.78rem;
    letter-spacing: var(--wr-tracking-amt);
    text-transform: uppercase;
    text-align: center;
    color: var(--wr-paper-dim);
    border: 2px dashed rgba(230, 220, 196, 0.22);
}

.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(--wr-gap-2) var(--wr-gap-3);
    font-family: var(--wr-font-doc);
    text-align: center;
    color: var(--wr-paper);
    background: var(--wr-signal-deep);
    border: var(--wr-border) solid var(--wr-ink);
    box-shadow: var(--wr-shadow);
    animation: toast-ein var(--wr-schnell);
}

/* Die einzige Quittung des Hauses, die Phosphor tragen darf: Sie sagt, dass
   das Register etwas angenommen hat. */
.toast[data-kind='good'] {
    color: var(--wr-phosphor);
    background: var(--wr-phosphor-tief);
    border-color: var(--wr-phosphor);
}

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