.deck-avatar-rendered {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: visible;
}

.avatar-em.deck-avatar-leaderboard-badge {
  display: inline-flex;
  float: none;
  height: 1.6em;
  margin-right: 0.35em;
  vertical-align: middle;
  width: 1.6em;
}

/* The shared footer switch only draws icons for Sync and student names. */
#toggle-avatar-display .avatar-display-inner:before,
#toggle-avatar-display .avatar-display-inner:after {
  font-family: FontAwesome;
  font-size: 25px;
  color: white;
}

#toggle-avatar-display .avatar-display-inner:before {
  content: '\f1b0'; /* paw: Deckmate avatars */
  padding-left: 16px;
  border-bottom: 4px #4db53c solid;
}

#toggle-avatar-display .avatar-display-inner:after {
  content: '\f031'; /* font: two-letter initials */
  padding-right: 15px;
  text-align: right;
  border-bottom: 4px #1565c0 solid;
}

.minimized #toggle-avatar-display .avatar-display-inner:before {
  border-top: 6px #4db53c solid;
}

.minimized #toggle-avatar-display .avatar-display-inner:after {
  border-top: 6px #1565c0 solid;
}

.deck-avatar-rendered > svg {
  display: block;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  overflow: visible;
  width: 100%;
}

.avatar-em .deck-avatar-rendered,
.avatar .deck-avatar-rendered,
.avatar-initials-em.deck-avatar-rendered,
.avatar-initials.deck-avatar-rendered {
  height: 100%;
  line-height: 1;
  width: 100%;
}

.deck-avatar-rendered .avatar-face,
.deck-avatar-rendered .avatar-mark {
  pointer-events: none;
}

/* Games keep ownership of movement, physics and hit boxes. This presentation
 * layer only replaces the art once the student's full avatar is ready. */
.deck-avatar-playable-layer {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: 50% 85%;
  z-index: 1;
}

.deck-avatar-playable-layer > svg {
  display: block;
  height: 100%;
  max-height: none;
  max-width: none;
  overflow: visible;
  transform-origin: center;
  width: 100%;
}

.deck-avatar-playable-replaces-original > :not(.deck-avatar-playable-layer) {
  visibility: hidden !important;
}

.deck-avatar-playable-replaces-original > .deck-avatar-playable-layer {
  visibility: visible !important;
}

.deck-avatar-playable-layer[data-avatar-facing="left"] > svg {
  transform: scaleX(-1);
}

.deck-avatar-playable-layer.is-avatar-action-jump,
.deck-avatar-playable-layer.is-avatar-action-hop {
  animation: deck-avatar-playable-hop 260ms ease-out;
}

.deck-avatar-playable-layer.is-avatar-action-hurt {
  animation: deck-avatar-playable-hurt 260ms ease-out;
}

.deck-avatar-playable-layer.is-avatar-action-success,
.deck-avatar-playable-layer.is-avatar-action-win {
  animation: deck-avatar-playable-success 360ms ease-out;
}

.deck-avatar-active-token {
  display: block;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: left 180ms ease-out, top 180ms ease-out, opacity 120ms linear;
  z-index: 4;
}

.deck-avatar-active-token.is-avatar-token-ready.has-avatar-token-target {
  opacity: 1;
}

@keyframes deck-avatar-playable-hop {
  0%, 100% { transform: translateY(0) scaleY(1); }
  45% { transform: translateY(-12%) scaleY(1.04); }
}

@keyframes deck-avatar-playable-hurt {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7%); }
  65% { transform: translateX(7%); }
}

@keyframes deck-avatar-playable-success {
  0%, 100% { transform: rotate(0deg) scale(1); }
  35% { transform: rotate(-5deg) scale(1.08); }
  70% { transform: rotate(5deg) scale(1.04); }
}

.snap-drawer li > .js-nav-avatar-editing {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: block;
  line-height: 25px;
  padding: 5px 0;
  text-indent: 0;
}

.snap-drawer li.avatar-editing-paused-by-apps > .js-nav-avatar-editing {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .deck-avatar-active-token,
  .deck-avatar-rendered,
  .deck-avatar-rendered * {
    animation: none !important;
    transition: none !important;
  }
}