.player-entry__onboarding-intro {
  position: absolute;
  inset: 0;
  z-index: 20;
}

.player-entry__onboarding-intro[hidden] {
  display: none !important;
}

.onboarding-intro {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  isolation: isolate;
  color: #eeeae0;
  background: #071012;
  cursor: pointer;
  touch-action: manipulation;
}

.onboarding-intro__stage,
.onboarding-intro__scene {
  position: absolute;
  inset: 0;
  margin: 0;
}

.onboarding-intro__scene {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.onboarding-intro__scene.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: onboarding-intro-scene-in 260ms ease both;
}

.onboarding-intro__art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.onboarding-intro__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(2, 7, 9, 0.12) 0%,
    transparent 25%,
    transparent 66%,
    rgba(2, 7, 9, 0.6) 100%
  );
}

.onboarding-intro__copy {
  position: absolute;
  z-index: 3;
  left: max(26px, calc(18px + env(safe-area-inset-left)));
  right: max(82px, calc(64px + env(safe-area-inset-right)));
  bottom: calc(86px + env(safe-area-inset-bottom));
  margin: 0;
  max-width: 390px;
  color: rgba(242, 238, 228, 0.92);
  font-family: "PingFang SC", "Hiragino Sans GB", sans-serif;
  font-size: clamp(1.05rem, 4.6vw, 1.22rem);
  font-weight: 560;
  line-height: 1.45;
  letter-spacing: 0.015em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
}

.onboarding-intro__control,
.onboarding-intro__next {
  position: absolute;
  z-index: 4;
  min-width: 48px;
  min-height: 48px;
  border: 0;
  border-radius: 0;
  color: rgba(239, 236, 226, 0.78);
  background: transparent;
  font: 560 0.82rem/1 "PingFang SC", "Hiragino Sans GB", sans-serif;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.onboarding-intro__back {
  top: calc(16px + env(safe-area-inset-top));
  left: calc(16px + env(safe-area-inset-left));
}

.onboarding-intro__skip {
  top: calc(16px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
}

.onboarding-intro__next {
  right: calc(18px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  min-width: 76px;
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(199, 174, 135, 0.58);
  text-align: right;
}

.onboarding-intro__control:hover,
.onboarding-intro__next:hover,
.onboarding-intro__control:focus-visible,
.onboarding-intro__next:focus-visible {
  color: #fff;
}

.onboarding-intro__control:disabled,
.onboarding-intro__next:disabled {
  cursor: wait;
  opacity: 0.42;
}

.onboarding-intro__control:focus-visible,
.onboarding-intro__next:focus-visible,
.onboarding-intro:focus-visible {
  outline: 2px solid rgba(225, 197, 153, 0.94);
  outline-offset: -4px;
}

.onboarding-intro.is-transitioning {
  cursor: wait;
}

.onboarding-intro.is-complete {
  pointer-events: none;
}

@media (max-width: 360px) {
  .onboarding-intro__copy {
    left: max(22px, calc(14px + env(safe-area-inset-left)));
    right: max(66px, calc(52px + env(safe-area-inset-right)));
    bottom: calc(82px + env(safe-area-inset-bottom));
    font-size: 1rem;
  }
}

@media (max-width: 360px) and (max-height: 640px) {
  .onboarding-intro__scene--locker .onboarding-intro__art {
    object-position: 50% 24%;
  }
}

@keyframes onboarding-intro-scene-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-intro__scene {
    transition: none !important;
    animation: none !important;
  }
}