/* 3D-Spielfigur im Depot neben "Dein Lager ist wert". Der Platz behaelt seine Groesse auch
   ohne Skin: sonst wuerde die Werteleiste springen, sobald die Textur eintrifft. */
.depotfigur {
  flex: none;
  width: 84px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 6px 0 6px;
  background: var(--slot);
  box-shadow: inset 2px 2px 0 var(--slot-sh), inset -2px -2px 0 var(--slot-hl);
}
.profile-character {
  margin: 0;
  width: 60px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
}
.profile-character.has-skin:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 14%;
  width: 72%;
  height: 6px;
  background: #0006;
  border-radius: 50%;
}
.profile-character canvas {
  display: block;
  width: 60px;
  height: 120px;
  image-rendering: pixelated;
  position: relative;
  z-index: 1;
}
/* Die raeumliche Ansicht zeichnet bereits in Geraeteaufloesung und mit schraegen Kanten;
   harte Pixelvergroesserung wuerde sie nur ausfransen. */
.profile-character canvas.is-3d { image-rendering: auto; }
/* Ladezustand nur fuer Vorleseprogramme; der Platz bleibt ohnehin reserviert. */
.profile-skin-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 760px) {
  .depotfigur { width: 64px; }
  .profile-character,
  .profile-character canvas {
    width: 48px;
    height: 96px;
  }
}