.combo {
  left: 50%;
  top: 18%;
  width: min(88%, 390px);
  padding: 22px 15px 13px;
  border: 2px solid var(--gold);
  border-radius: 12px;
  background: rgba(7, 8, 9, .94);
  color: #fff;
  font: 900 16px/1.22 Arial, sans-serif;
  font-style: normal;
  letter-spacing: .1px;
  text-align: left;
  text-shadow: none;
  box-shadow: 5px 5px 0 rgba(255, 210, 28, .88), 0 0 22px rgba(0, 0, 0, .55);
  transform: rotate(-2deg) scale(.88);
  z-index: 6;
  contain: layout style;
  will-change: transform, opacity;
}

.combo::before {
  content: 'GABBER YELLO';
  position: absolute;
  left: 12px;
  top: 5px;
  color: var(--gold);
  font: 900 9px/1 Arial, sans-serif;
  letter-spacing: 1.4px;
}

.combo::after {
  content: '';
  position: absolute;
  left: 26px;
  bottom: -12px;
  width: 18px;
  height: 18px;
  background: #08090a;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
}

.combo.show { animation: gabber-yello-pop 2.45s ease-out; }

@keyframes gabber-yello-pop {
  0% { opacity: 0; transform: rotate(-2deg) scale(.82) translateY(-5px); }
  10% { opacity: 1; transform: rotate(-2deg) scale(1.02) translateY(0); }
  82% { opacity: 1; transform: rotate(-2deg) scale(1); }
  100% { opacity: 0; transform: rotate(-1deg) scale(.98) translateY(-3px); }
}

html[data-hopper-render-profile="firefox-light"] .combo {
  will-change: opacity;
}

html[data-hopper-render-profile="firefox-light"] .combo.show {
  animation: gabber-yello-firefox-fade 2.45s linear;
}

@keyframes gabber-yello-firefox-fade {
  0% { opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 380px) {
  .combo { top: 20%; width: 90%; padding: 21px 12px 11px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .combo.show { animation: gabber-yello-fade 2.45s linear; }
  @keyframes gabber-yello-fade { 8%, 88% { opacity: 1; } 0%, 100% { opacity: 0; } }
}