/* Profilbilder einheitlich als Raute (wie Endbildschirm, Rangliste und Chat).
   clip-path statt Drehung: der Layout-Kasten jeder Stelle bleibt unveraendert,
   Bild und Initialen bleiben aufrecht. Der Goldrand ist der Hintergrund des
   Kastens; Bild bzw. dunkle Fuellflaeche (::before) liegen eingerueckt als
   zweite Raute darueber. Eine Raute fuellt nur die halbe Flaeche ihres Kastens,
   deshalb leicht vergroessert (scale), damit sie nicht kleiner wirkt als vorher.
   :is() uebernimmt die hoechste Spezifitaet der Liste (.msg-avatar.has-img), so
   schlagen diese Regeln die aelteren Kreis-/Quadrat-Stile an allen Stellen. */
:is(.sideAvatar, .ptAvatar, .pmAvatar, .msg-avatar, .msg-avatar.has-img, .friendChip, .adm-av, .rk-av,
    .effectRailHeaderAvatar, .effectRailHeaderKristall) {
  --av-rim: 1.5px;
  position: relative;
  isolation: isolate;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: var(--mp-gold-3, #8a6a2e);
  color: var(--mp-gold-1, #d8b15a);
  font-family: var(--mp-serif, Georgia, serif);
  scale: 1.12;
}
:is(.sideAvatar, .ptAvatar, .pmAvatar, .msg-avatar, .friendChip, .adm-av, .rk-av,
    .effectRailHeaderAvatar, .effectRailHeaderKristall)::before {
  content: '';
  position: absolute;
  inset: var(--av-rim);
  z-index: -1;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: linear-gradient(135deg, #2a313e, #14171f);
}
:is(.sideAvatar, .ptAvatar, .pmAvatar, .msg-avatar, .msg-avatar.has-img, .friendChip, .adm-av, .rk-av,
    .effectRailHeaderAvatar, .effectRailHeaderKristall) > img {
  position: absolute;
  inset: var(--av-rim);
  width: calc(100% - 2 * var(--av-rim));
  height: calc(100% - 2 * var(--av-rim));
  padding: 0;
  border-radius: 0;
  object-fit: cover;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
/* Gaeste: Kristall statt Bild, ganz sichtbar in der Mitte der Raute. */
.effectRailHeaderKristall > img.effectRailHeaderImg { object-fit: contain; padding: 18%; }