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

.rival-onboarding-model {
  width: clamp(64.5px, 11vw, 94.5px);
  height: clamp(46.5px, 8vw, 69px);
  flex: 0 0 auto;
  margin-right: -6px;
  filter: drop-shadow(3px 3.75px 0 rgb(8 9 10 / 0.32));
}

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

.rival-onboarding-copy {
  padding: 5.25px 10.5px;
  border: 3px solid var(--turn-outline);
  border-radius: 749.25px;
  background: var(--rival-onboarding-color, var(--yellow));
  color: var(--turn-ink);
  box-shadow: 3px 3px 0 var(--turn-shadow-color);
  font-size: max(var(--turn-text-floor, 11px), clamp(0.5625rem, 2vw, 0.75rem));
  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%, 3.75px) scale(0.98);
}

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

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

  .rival-onboarding-model {
    width: 61.5px;
    height: 43.5px;
  }
}

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