.rival-onboarding {
  position: absolute;
  z-index: 35;
  left: 50%;
  top: 20%;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.97);
  transition: opacity 150ms ease, transform 190ms cubic-bezier(0.2, 0.85, 0.3, 1.16);
}

.rival-onboarding-model {
  width: clamp(86px, 11vw, 126px);
  height: clamp(62px, 8vw, 92px);
  flex: 0 0 auto;
  margin-right: -8px;
  filter: drop-shadow(4px 5px 0 rgb(8 9 10 / 0.32));
}

.rival-onboarding-model canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.rival-onboarding-copy {
  padding: 7px 14px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: var(--rival-onboarding-color, var(--yellow));
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: clamp(0.75rem, 2vw, 1rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transform: rotate(-2deg);
}

.rival-onboarding.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.rival-onboarding.is-leaving {
  opacity: 0;
  transform: translate(-50%, 5px) scale(0.98);
}

.rival-onboarding.is-model-unavailable .rival-onboarding-model {
  display: none;
}

@media (max-height: 430px) {
  .rival-onboarding {
    top: 16%;
  }

  .rival-onboarding-model {
    width: 82px;
    height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rival-onboarding,
  .rival-onboarding.is-visible,
  .rival-onboarding.is-leaving {
    transform: translateX(-50%);
    transition: opacity 120ms linear;
  }
}