.character {
  --anim-speed: 840ms;
  --hero-scale: 8;
  --hero-facing-scale-x: 1;
  --hero-turn-scale-x: 1;
  --hero-turn-skew-y: 0deg;
  position: relative;
  width: 40px;
  height: 40px;
  transform: skewY(var(--hero-turn-skew-y)) scaleX(calc(var(--hero-scale) * var(--hero-facing-scale-x) * var(--hero-turn-scale-x))) scaleY(var(--hero-scale));
  transform-origin: center;
  image-rendering: pixelated;
}

.character.facing-right {
  --hero-facing-scale-x: -1;
}

.part-wrap {
  position: absolute;
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}

.sprite-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 80px 80px;
  image-rendering: pixelated;
}

.color { background-image: url("/plugin-assets/hero/assets/body/body-color.png"); z-index: 1; }
.outline { background-image: url("/plugin-assets/hero/assets/body/body-outline.png"); z-index: 2; }

.body-piece { background-position: 0 0; }
.arm-piece { background-position: -40px 0; }
.head-piece { background-position: 0 -40px; }
.leg-piece { background-position: -40px -40px; }

.eye-layer {
  display: none;
  background-image: none;
  z-index: 75;
  pointer-events: none;
}

.eye-color {
  background-position: 0 -40px;
  z-index: 75;
}

.eye-outline {
  background-position: 0 0;
  z-index: 76;
}

.eye-closed {
  background-position: -40px -40px;
  z-index: 76;
}

.eyes-closed { display: none; }
.character.damaged .eyes-open,
.character.knockedOut .eyes-open,
.character.casting .eyes-open { display: none; }
.character.damaged .eyes-closed,
.character.knockedOut .eyes-closed,
.character.casting .eyes-closed { display: block; }

.face-acc-layer {
  display: none;
  background-image: none;
  background-position: 0 -40px;
  z-index: 78;
  pointer-events: none;
}

.hair-layer {
  display: none;
  pointer-events: none;
  background-image: none;
  background-size: 40px 40px;
}

.hair-unmasked {
  display: none;
}

.hair-color { z-index: 81; }
.hair-accent { z-index: 82; }
.hair-shading { z-index: 83; }
.hair-outline { z-index: 84; }
.hair-color-unmasked { z-index: 81; }
.hair-accent-unmasked { z-index: 82; }
.hair-shading-unmasked { z-index: 83; }
.hair-outline-unmasked { z-index: 84; }

.hair-piece { background-position: 0 0; }

.shoe-layer {
  display: none;
  background-image: none;
  pointer-events: none;
}

.shoe-color {
  background-position: 0 -40px;
  z-index: 71;
}

.shoe-outline {
  background-position: 0 0;
  z-index: 72;
}

.armor-layer {
  display: none;
  background-image: none;
  pointer-events: none;
}

.armor-color {
  z-index: 73;
}

.armor-outline {
  z-index: 74;
}

.armor-body-piece { background-position: 0 0; }
.armor-arm-piece { background-position: -40px 0; }
.armor-leg-piece { background-position: -40px -40px; }

.back-acc-layer {
  display: none;
  background-image: none;
  pointer-events: none;
}

.back-acc-color {
  background-position: 0 0;
  z-index: 0;
}

.back-acc-outline {
  background-position: -40px 0;
  z-index: 0.5;
}

.hat-layer {
  pointer-events: none;
  transform-origin: center center;
}

.hat-hair-mask {
  background-image: none;
  background-position: -40px -40px;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
}

.hat-color {
  background-image: none;
  background-position: -40px 0;
  z-index: 85;
}

.hat-outline {
  background-image: none;
  background-position: 0 -40px;
  z-index: 86;
}

.mannequin-dummy:not(.dummy-show-eyes) .eye-layer,
.mannequin-dummy:not(.dummy-show-face-acc) .face-acc-layer,
.mannequin-dummy:not(.dummy-show-hair) .hair-layer,
.mannequin-dummy:not(.dummy-show-hat) .hat-layer,
.mannequin-dummy:not(.dummy-show-shoes) .shoe-layer,
.mannequin-dummy:not(.dummy-show-armor) .armor-layer,
.mannequin-dummy:not(.dummy-show-back-acc) .back-acc-layer {
  display: none !important;
}

.item-card-dummy {
  --hero-scale: 2;
}

.emote-preview-dummy {
  --hero-scale: 2.2;
  transform: skewY(var(--emote-character-skew-y, var(--hero-turn-skew-y))) scaleX(calc(var(--hero-scale) * var(--hero-facing-scale-x) * var(--emote-character-scale-x, var(--hero-turn-scale-x)))) scaleY(var(--hero-scale)) translate(var(--emote-character-x, 0px), var(--emote-character-y, 0px));
  translate: 0 -7px;
}

.emote-preview-dummy .body-wrap {
  transform: translate(var(--emote-body-x, 0px), var(--emote-body-y, 0px)) rotate(var(--emote-body-r, 0deg));
}

.emote-preview-dummy .head-wrap {
  transform: translate(var(--emote-head-x, 0px), var(--emote-head-y, 0px)) rotate(var(--emote-head-r, 0deg));
}

.emote-preview-dummy .front-arm-wrap {
  transform: translate(var(--emote-front-arm-x, 0px), var(--emote-front-arm-y, 0px)) rotate(var(--emote-front-arm-r, 0deg));
}

.emote-preview-dummy .back-arm-wrap {
  transform: translate(var(--emote-back-arm-x, 0px), var(--emote-back-arm-y, 0px)) rotate(var(--emote-back-arm-r, 0deg));
}

.emote-preview-dummy .front-leg-wrap {
  transform: translate(var(--emote-front-leg-x, 0px), var(--emote-front-leg-y, 0px)) rotate(var(--emote-front-leg-r, 0deg));
}

.emote-preview-dummy .back-leg-wrap {
  transform: translate(var(--emote-back-leg-x, 0px), var(--emote-back-leg-y, 0px)) rotate(var(--emote-back-leg-r, 0deg));
}

.eye-preview-dummy {
  --hero-scale: 6.75;
  translate: 10px 10px;
}

.face-acc-preview-dummy {
  --hero-scale: 6.75;
  translate: 10px 10px;
}

.face-acc-preview-dummy .face-acc-layer {
  display: block;
  background-image: var(--face-acc-preview-url);
}

.hair-preview-dummy {
  --hero-scale: 5.35;
  translate: 8px 18px;
}

.hair-preview-dummy .head-wrap {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.5) 62%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.5) 62%,
    transparent 100%
  );
}

.armor-preview-dummy {
  --hero-scale: 5.25;
  translate: 0 -28px;
}

.armor-preview-dummy .head-wrap {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 39%,
    rgba(0, 0, 0, 0.18) 42%,
    rgba(0, 0, 0, 0.82) 46%,
    #000 52%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 39%,
    rgba(0, 0, 0, 0.18) 42%,
    rgba(0, 0, 0, 0.82) 46%,
    #000 52%,
    #000 100%
  );
}

.back-acc-preview-dummy {
  --hero-scale: 5.25;
  translate: -34px -8px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 23%,
    rgba(0, 0, 0, 0.16) 34%,
    rgba(0, 0, 0, 0.72) 47%,
    #000 60%,
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    transparent 23%,
    rgba(0, 0, 0, 0.16) 34%,
    rgba(0, 0, 0, 0.72) 47%,
    #000 60%,
    #000 100%
  );
}

.back-acc-preview-dummy .head-wrap {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 39%,
    rgba(0, 0, 0, 0.18) 42%,
    rgba(0, 0, 0, 0.82) 46%,
    #000 52%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 39%,
    rgba(0, 0, 0, 0.18) 42%,
    rgba(0, 0, 0, 0.82) 46%,
    #000 52%,
    #000 100%
  );
}

.shoes-preview-dummy {
  --hero-scale: 4.6;
  translate: 0 -34px;
  visibility: visible !important;
}

.shoes-preview-dummy .back-leg-wrap,
.shoes-preview-dummy .front-leg-wrap {
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.28) 16%,
    rgba(0, 0, 0, 0.82) 32%,
    #000 44%,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.28) 16%,
    rgba(0, 0, 0, 0.82) 32%,
    #000 44%,
    #000 100%
  );
}

.shoes-preview-dummy .back-leg-wrap,
.shoes-preview-dummy .front-leg-wrap {
  display: block !important;
}

.shoes-preview-dummy .leg-piece {
  display: none !important;
}

.mannequin-dummy:not(.dummy-skin-ready) {
  visibility: hidden;
}

.mannequin-dummy.dummy-show-eyes .eyes-closed {
  display: none !important;
}

.body-wrap { left: 0; top: 0; z-index: 30; transform-origin: 20px 20px; }
.head-wrap { left: 0; top: 0; z-index: 40; transform-origin: 20px 20px; }
.back-arm-wrap { left: -3px; top: 2px; z-index: 10; transform-origin: 20px 17px; }
.back-leg-wrap { left: -3px; top: -1px; z-index: 20; transform-origin: 20px 13px; }
.front-leg-wrap { left: 0; top: 0; z-index: 50; transform-origin: 20px 13px; }
.front-arm-wrap { left: 2px; top: 3px; z-index: 60; transform-origin: 20px 17px; }

.character.armor-above-head:not(.armor-above-leg) .body-wrap { z-index: 45; }
.character.armor-above-leg .body-wrap { z-index: 55; }
.character.armor-above-leg:not(.armor-above-head) .head-wrap { z-index: 57; }