/* Efeito gema sobre o outfit (include/gema_effect.php) */

/* Wrapper: mantem a linha da tabela com 27px e ancora o outfit 64x64
   no canto inferior esquerdo, sem margem negativa. */
.outfitWrap {
  position: relative;
  width: 64px;
  height: 27px;
  margin: 0;
  padding: 0;
}
.outfitWrap .outfitImg {
  position: absolute;
  left: 0;
  bottom: 0;
}

.outfitImg {
  background-position: right bottom;
  background-repeat: no-repeat;
  width: 64px; height: 64px;
  position: relative;
}
/* Outfit pintado numa camada acima dos spans -> gema aparece atras do
   personagem (sprite tem fundo transparente). background: inherit copia a
   imagem inline do .outfitImg. */
.outfitImg::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: inherit;
  z-index: 20;
  pointer-events: none;
}
.gemaEffect {
  position: absolute;
  font-size: 10px; font-weight: bold;
  font-family: Verdana;
  pointer-events: none;
  z-index: 10;
  animation: gemaFloat 1.2s infinite;
  text-shadow: 0 0 2px currentColor, 1px 1px 1px #000;
}
.gema1 { left: 50px; top: 45px; }
.gema2 { left: 60px; top: 35px; animation-delay: .1s; }
.gema3 { left: 54px; top: 25px; animation-delay: .2s; }
.gema4 { left: 60px; top: 15px; animation-delay: .3s; }
.gema5 { left: 48px; top: 48px; animation-delay: .4s; }
.gema6 { left: 62px; top: 38px; animation-delay: .5s; }
.gema7 { left: 56px; top: 28px; animation-delay: .6s; }
.gema8 { left: 60px; top: 18px; animation-delay: .7s; }
@keyframes gemaFloat {
  0%   { opacity: 0; transform: translateY(5px); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px); }
}