/* Project Legend V0.46.42 — F1: Wappen und Nummer gehören ins Bild, nicht darauf

   GEMELDET, zweimal: „Wappen und Nummer sind immer noch nicht schattiert."

   WAS DER BILDBELEG ZEIGT. Das Porträt ist eine fast schwarze Silhouette mit
   einem warmen Streiflicht von links oben und einem kühlen Saum rechts. Die
   Brust liegt im tiefen Schatten. Wappen und Nummer stehen dagegen in voller
   Helligkeit und voller Sättigung - sie sind das Hellste im ganzen Bild. Genau
   daran erkennt das Auge den Aufkleber: Ein Aufdruck auf einem Trikot, das im
   Schatten liegt, liegt selbst im Schatten.

   WAS VORHER DA WAR. `keyArt()` in `v0420-screens.js` legt beide Marken als
   absolut positionierte Elemente über ein festes Bild. Die Gestaltung in
   `ui-v0420/screens.css:123-135` gibt ihnen einen Schlagschatten und Deckkraft
   0,88 - mehr nicht. Es fehlte vollständig: kein `mix-blend-mode`, keine
   Maske, keine Verzerrung entlang der Brustwölbung, keine Beziehung zur
   Beleuchtung.

   ------------------------------------------------------------------------
   V0.49.1 — NACHGEMESSEN STATT NACH GEFÜHL

   Erneut gemeldet: „Nummer und Wappen sollten noch besser eingearbeitet
   werden." Diesmal wurde das Porträt ausgemessen statt geschätzt. Die
   Luminanz der Brustpartie in `v0410-player-portrait.png` beträgt

       Brustmitte 7 · Brust rechts 8 · Brust links 34   (von 255)

   Das Trikot ist an der Stelle, an der die Marken sitzen, praktisch schwarz.
   Die bisherige Abdunklung auf `brightness(.46)` bildet ein weißes Wappen auf
   Luminanz ~117 ab - das Fünfzehnfache seiner Umgebung. Die Marke MUSSTE als
   Aufkleber lesen, egal wie sorgfältig Lichtkante und Perspektive waren.

   Die Bildaufnahme zeigte zusätzlich zwei Fehler, die keine Frage der
   Kalibrierung sind:

   1. Die Gewebeandeutung bestand aus Verläufen mit 1-Pixel-Periode. Bei realen
      Geräteskalierungen trifft dieses Raster nicht auf ganze Pixel und bricht
      in grobe Streifen auf. Um die Nummer lag deshalb ein sichtbares helles
      Rechteck mit Querstreifen - der auffälligste Aufkleber-Hinweis im ganzen
      Bild. Ein Raster, das feiner ist als ein Pixel, kann nicht dargestellt
      werden; es wird deshalb ersatzlos entfernt. Die Stofftextur des Porträts
      selbst übernimmt diese Aufgabe, sobald die Marke dunkel genug ist.

   2. Beide Marken trugen einen Schlagschatten. Ein Aufdruck wirft keinen
      Schatten auf den Stoff, auf dem er liegt - er liegt in dessen Ebene. Der
      Schlagschatten hob die Marken sichtbar von der Brust ab und war damit
      genau die gegenteilige Aussage. Er entfällt.

   Geändert wird ausschließlich Gestaltung. Die Marken behalten ihre
   Koordinaten (`--badge-x/y`, `--shirt-x/y` in `ui-v0420/screens.css`), damit
   die Abnahmeprüfung „Wappen und Nummer sitzen auf der Brust" unverändert
   greift. An der Spiellogik ändert sich nichts. */

.pl42-keyart{
  /* Lichtrichtung der Szene. Steht hier einmal, damit Wappen und Nummer nicht
     auseinanderlaufen können. */
  --keyart-licht:135deg;
  --keyart-licht-warm:rgba(255,232,190,.26);
  --keyart-schatten:rgba(0,0,0,.66);
  /* Wie stark die Marken abgedunkelt werden. Kleiner = tiefer im Schatten.
     Bezugsgröße ist die gemessene Trikotluminanz von 7-34 von 255: Ein weißes
     Wappen landet mit .20 bei ~51 und damit in der Größenordnung des Stoffs,
     statt fünfzehnfach darüber. */
  /* V0.49.1a nachgeschärft: .20 lag rechnerisch richtig, war in der Ansicht
     aber zu weit unten - das Wappen war eingearbeitet, aber kaum noch als
     Wappen zu erkennen. .30 hält den Mittelwert im Bereich des Stoffs und
     lässt die Vereinszeichnung wieder lesen. */
  --keyart-druck-helligkeit:.30;
  --keyart-druck-saettigung:.58;
}

/* ------------------------------------------------------------------ Wappen */

/* Der Rahmen bleibt unbehandelt, damit die Lichtkante darüber nicht selbst
   mitabgedunkelt wird - Filter wirken auch auf Pseudoelemente. Gefiltert wird
   deshalb nur das Wappen darin. */
.pl42-keyart-badge{
  opacity:1;
  /* Kein Schlagschatten: siehe Kopf, Punkt 2. */
  filter:none;
  transform:translate(-50%,-50%) perspective(260px) rotateY(-10deg) rotate(-2deg);
  /* Ausgefederter Rand. Der Übergang beginnt deutlich früher als zuvor (46 %
     statt 74 %), damit keine harte Scheibenkante entsteht - im Bildbeleg war
     genau dieser Kreisrand der Aufkleber. */
  -webkit-mask-image:radial-gradient(closest-side,#000 46%,rgba(0,0,0,.62) 74%,rgba(0,0,0,.22) 92%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 46%,rgba(0,0,0,.62) 74%,rgba(0,0,0,.22) 92%,transparent 100%);
}

/* Der Kontrast steht bewusst hoch, obwohl die Helligkeit tief liegt. Beides
   zusammen ist der Unterschied zwischen „dunkel" und „unlesbar": Ein bloß
   abgedunkeltes Wappen wird zu einem flachen grauen Fleck, in dem die eigene
   Zeichnung des Vereins verschwindet. Mit angehobenem Kontrast bleibt sie
   sichtbar, während der Mittelwert der Fläche im Bereich des Stoffs bleibt. */
.pl42-keyart-badge .pl42-badge{
  width:100%;height:100%;
  filter:saturate(var(--keyart-druck-saettigung))
         brightness(var(--keyart-druck-helligkeit))
         contrast(1.34);
}

/* Körperschattierung unter der Marke. Ohne sie liegt das Wappen als gleichmäßig
   helle Fläche auf einer gewölbten, ungleichmäßig beleuchteten Brust - der Fleck
   bleibt flach, auch wenn er dunkel ist. Multiplizieren dunkelt genau dort ab,
   wo auch das Porträt abdunkelt: nach rechts unten, vom Licht weg. */
.pl42-keyart-badge::before{
  content:'';position:absolute;inset:-5%;border-radius:50%;
  pointer-events:none;z-index:1;
  background:linear-gradient(var(--keyart-licht),
    rgba(255,255,255,1) 0%,
    rgba(228,222,211,1) 34%,
    rgba(176,169,159,1) 68%,
    rgba(136,130,122,1) 100%);
  mix-blend-mode:multiply;
}

/* Lichtkante. Liegt über dem Wappen, nicht darunter. Ohne Gewebeschicht -
   ein Raster unterhalb der Pixelgröße erzeugt Streifen statt Stoff. */
.pl42-keyart-badge::after{
  content:'';position:absolute;inset:-5%;border-radius:50%;
  pointer-events:none;
  background:linear-gradient(var(--keyart-licht),
    var(--keyart-licht-warm) 0%,
    rgba(255,232,190,.06) 26%,
    rgba(0,0,0,0) 48%,
    rgba(0,0,0,.30) 74%,
    var(--keyart-schatten) 100%);
  mix-blend-mode:soft-light;
}

/* ------------------------------------------------------------------ Nummer */

/* Die Nummer war flaches Gold in einer Farbe. Jetzt läuft ein Verlauf durch
   die Ziffern selbst - hell an der Lichtseite, dunkles Bronze im Schatten.
   Die Werte sind gegenüber V0.46.42 durchgehend abgesenkt: Auf einem Trikot
   mit Luminanz unter 35 ist auch die helle Seite einer Aufschrift dunkel. */
.pl42-keyart-number{
  color:transparent;
  background-image:linear-gradient(var(--keyart-licht),
    rgba(196,166,112,.86) 0%,
    rgba(140,112,64,.72) 38%,
    rgba(78,60,32,.60) 74%,
    rgba(44,33,17,.54) 100%);
  -webkit-background-clip:text;background-clip:text;
  text-shadow:none;
  /* Kein Schlagschatten: siehe Kopf, Punkt 2. */
  filter:none;
  transform:translate(-50%,-50%) perspective(260px) rotateY(-10deg) rotate(-2deg);
  opacity:.82;
}

/* Der Stoff über der Nummer. Vorher ein Rechteck mit Gewebemuster - das ergab
   im Bildbeleg ein sichtbares helles Kästchen mit Querstreifen. Jetzt ein
   weicher, randloser Abfall ohne Raster, der nur die Lichtrichtung trägt. */
.pl42-keyart-number::after{
  content:'';position:absolute;inset:-24% -28%;
  pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(255,232,190,.10) 0%,
    rgba(255,232,190,.04) 46%,
    rgba(0,0,0,0) 78%,
    rgba(0,0,0,0) 100%);
  mix-blend-mode:soft-light;
}

/* --------------------------------------------------------- kleine Varianten */

/* In den kleinen Fassungen (Kaderliste, Live-Ansicht) darf es weniger sein:
   Bei 96 px Breite fällt ein ausgefederter Rand kaum auf, ein zu dunkles
   Wappen aber schon. */
.pl42-keyart--compact{--keyart-druck-helligkeit:.34;--keyart-druck-saettigung:.58}
.pl42-keyart--live{--keyart-druck-helligkeit:.38;--keyart-druck-saettigung:.62}
.pl42-keyart--compact .pl42-keyart-badge,
.pl42-keyart--live .pl42-keyart-badge{
  transform:translate(-50%,-50%) perspective(300px) rotateY(-7deg) rotate(-1.5deg);
}
/* Bei rund 17 px Wappenbreite bleibt von der Zeichnung ohnehin wenig übrig.
   Die Körperschattierung wird deshalb hier flacher gehalten - sonst addiert
   sie sich mit der Abdunklung zu einem Fleck, in dem gar nichts mehr steht. */
.pl42-keyart--compact .pl42-keyart-badge::before,
.pl42-keyart--live .pl42-keyart-badge::before{
  background:linear-gradient(var(--keyart-licht),
    rgba(255,255,255,1) 0%,
    rgba(236,232,225,1) 40%,
    rgba(196,191,183,1) 76%,
    rgba(166,161,154,1) 100%);
}

/* Wer Bewegung reduziert haben will, bekommt keine Verzerrung - die
   Perspektive ist Gestaltung, nicht Information. */
@media (prefers-reduced-motion:reduce){
  .pl42-keyart-badge,.pl42-keyart-number{transform:translate(-50%,-50%)}
}

/* Hoher Kontrast: Wer den Systemschalter gesetzt hat, will Lesbarkeit vor
   Bildwirkung. Dann treten die Marken wieder hervor. */
@media (prefers-contrast:more){
  .pl42-keyart{--keyart-druck-helligkeit:.82;--keyart-druck-saettigung:.90}
  .pl42-keyart-badge::after,.pl42-keyart-number::after{opacity:.30}
  .pl42-keyart-number{opacity:.96}
}