.xp-float-notice{
  position:fixed;
  z-index:11050;
  pointer-events:none;
  user-select:none;
  transform:translate(-50%,0);
  color:var(--groovy-orange);
  font-size:14px;
  font-weight:850;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,.72),0 0 12px rgba(255,100,24,.22);
  animation:groovy-xp-float 1.35s cubic-bezier(.2,.78,.24,1) forwards
}
.xp-float-notice.has-label{
  white-space:pre-line;
  text-align:center;
  line-height:1.18
}
.xp-float-notice.is-negative{
  color:#b9b9bf;
  text-shadow:0 2px 8px rgba(0,0,0,.72)
}
@keyframes groovy-xp-float{
  0%{opacity:0;transform:translate(-50%,3px) scale(.92)}
  14%{opacity:1;transform:translate(-50%,-3px) scale(1)}
  72%{opacity:1;transform:translate(-50%,-28px) scale(1)}
  100%{opacity:0;transform:translate(-50%,-44px) scale(.98)}
}
@media screen and (max-width:760px){
  .xp-float-notice{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .xp-float-notice{animation:groovy-xp-fade .8s ease-out forwards}
  @keyframes groovy-xp-fade{
    0%{opacity:0}
    20%{opacity:1}
    75%{opacity:1}
    100%{opacity:0}
  }
}