/* ===================================================================
   Matrix Arena · Abnutzung für die Retrotasten
   ===================================================================
   Zehn Muster, damit nicht jede Taste aussieht wie frisch aus der
   Presse. Jede Taste bekommt eines fest zugeteilt — berechnet aus
   ihrer Beschriftung, nicht gewürfelt: eine Taste, die bei jedem
   Seitenaufbau anders aussieht, wirkt kaputt, nicht benutzt.

   Global und nicht seitengebunden, weil dieselben Muster im Menüband,
   in der Seitenleiste und im Kontrollpult gebraucht werden. Die Form
   der Taste — Fase, Verlauf, Druckpunkt — bleibt dagegen im jeweiligen
   scoped Stylesheet; hier liegt nur die Patina.

   Aufbau: `.retro-flaeche` legt eine Schicht über die Taste,
   `.retro-w1` bis `.retro-w10` füllen sie. Alles aus Verläufen, keine
   Bilder — das kostet keine Anfrage und skaliert mit jeder Grösse.
   =================================================================== */

.retro-flaeche {
    position: relative;
}

.retro-flaeche > .retro-patina {
    position: absolute;
    inset: 0;
    pointer-events: none;

    /* Grundrauschen für alle: die feine Zeilenstruktur einer Röhre. */
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.022) 0 1px,
            transparent 1px 3px);
}

/* ---- 1 · Kratzer quer, oben links abgegriffen ---------------------- */
.retro-w1 > .retro-patina {
    background-image:
        linear-gradient(103deg, transparent 34%, rgba(255, 255, 255, 0.05) 34.4%, transparent 35%),
        linear-gradient(97deg, transparent 61%, rgba(0, 0, 0, 0.22) 61.3%, transparent 62%),
        radial-gradient(120% 90% at 8% 12%, rgba(255, 245, 220, 0.05), transparent 55%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

/* ---- 2 · Ecke unten rechts angestossen ----------------------------- */
.retro-w2 > .retro-patina {
    background-image:
        linear-gradient(315deg, rgba(0, 0, 0, 0.4) 0 4px, transparent 4px),
        radial-gradient(70% 60% at 92% 88%, rgba(0, 0, 0, 0.2), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

/* ---- 3 · Fleckig, wie oft angefasst -------------------------------- */
.retro-w3 > .retro-patina {
    background-image:
        radial-gradient(38% 62% at 26% 58%, rgba(0, 0, 0, 0.16), transparent 70%),
        radial-gradient(30% 48% at 72% 34%, rgba(255, 240, 210, 0.035), transparent 70%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

/* ---- 4 · Ein langer Kratzer diagonal -------------------------------- */
.retro-w4 > .retro-patina {
    background-image:
        linear-gradient(74deg, transparent 22%, rgba(255, 255, 255, 0.07) 22.3%, transparent 23%),
        linear-gradient(74deg, transparent 23.6%, rgba(0, 0, 0, 0.28) 23.9%, transparent 24.4%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

/* ---- 5 · Oben abgegriffen, Lack dünn -------------------------------- */
.retro-w5 > .retro-patina {
    background-image:
        linear-gradient(180deg, rgba(255, 245, 220, 0.06) 0 22%, transparent 46%),
        radial-gradient(90% 40% at 50% 4%, rgba(255, 255, 255, 0.045), transparent 70%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

/* ---- 6 · Zwei kurze Kerben links ------------------------------------ */
.retro-w6 > .retro-patina {
    background-image:
        linear-gradient(88deg, rgba(0, 0, 0, 0.3) 0 2px, transparent 2px) 6% 30% / 14% 12% no-repeat,
        linear-gradient(88deg, rgba(0, 0, 0, 0.26) 0 2px, transparent 2px) 9% 68% / 11% 10% no-repeat,
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

/* ---- 7 · Rand rundum stumpf ----------------------------------------- */
.retro-w7 > .retro-patina {
    background-image:
        radial-gradient(120% 140% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.22) 100%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

/* ---- 8 · Feiner Kratzerfächer rechts -------------------------------- */
.retro-w8 > .retro-patina {
    background-image:
        linear-gradient(112deg, transparent 70%, rgba(255, 255, 255, 0.045) 70.3%, transparent 71%),
        linear-gradient(108deg, transparent 78%, rgba(255, 255, 255, 0.04) 78.3%, transparent 79%),
        linear-gradient(116deg, transparent 84%, rgba(0, 0, 0, 0.2) 84.3%, transparent 85%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

/* ---- 9 · Unten dunkel, wie eingestaubt ------------------------------ */
.retro-w9 > .retro-patina {
    background-image:
        linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.24) 100%),
        radial-gradient(60% 30% at 30% 96%, rgba(0, 0, 0, 0.2), transparent 70%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

/* ---- 10 · Fast neu, nur ein Hauch ------------------------------------ */
.retro-w10 > .retro-patina {
    background-image:
        radial-gradient(80% 70% at 62% 26%, rgba(255, 250, 235, 0.03), transparent 65%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
}

/* Gedrückt wird die Patina einen Hauch dunkler — die Hand liegt drauf. */
.retro-flaeche:active > .retro-patina {
    filter: brightness(0.88);
}

/* Wer Bewegung reduziert haben will, bekommt trotzdem die Patina: sie
   bewegt sich nicht, sie liegt nur da. Nichts zu tun. */