.mate-presence{width:36px;height:36px;margin:0 0 -3px 18px;position:relative;z-index:1;background-image:url('/presence-heads.png');background-size:800% 700%;background-repeat:no-repeat;pointer-events:none}
.mate-presence[hidden]{display:none!important}

.mate-presence.has-battlenet-presence{
  width:58px;
  height:58px;
  margin-left:12px;
  margin-bottom:-5px;
  overflow:hidden;
  border-radius:18px 18px 8px 8px;
  background:none!important;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
.mate-presence-battlenet{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
}
@media(max-width:700px){
  .mate-presence.has-battlenet-presence{
    width:50px;
    height:50px;
  }
}

.mate-presence.has-battlenet-presence{opacity:0;transform:translateY(10px) scale(.92);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.mate-presence.has-battlenet-presence.is-visible{opacity:1;transform:translateY(0) scale(1)}
.mate-presence.has-battlenet-presence.is-leaving{opacity:0;transform:translateY(8px) scale(.94)}

.mate-presence.is-dot-presence{
  width:12px;
  height:12px;
  margin:0 0 8px 18px;
  border-radius:50%;
  background:#77e36e!important;
  border:2px solid #0d1a25;
  box-shadow:0 0 0 2px rgba(119,227,110,.18),0 0 12px rgba(119,227,110,.55);
  opacity:0;
  transform:translateY(5px) scale(.7);
  transition:opacity .18s ease,transform .2s cubic-bezier(.2,.8,.2,1);
}
.mate-presence.is-dot-presence.is-visible{opacity:1;transform:translateY(0) scale(1)}
.mate-presence.is-dot-presence.is-leaving{opacity:0;transform:translateY(4px) scale(.75)}