/* First steps and tutorial share the Deck Editor's engraved gold actions.
   Action styling lives with .deck-use-fantasy-btn in style.css. */

:is(#onboardingWizard, #resumeProgressPopup) {
  background: rgba(3, 5, 5, 0.86);
}

:is(#onboardingWizard, #resumeProgressPopup) .onboarding-wizard-card,
#tutorialOverlay .tutorial-card,
#pveTutorialHint .pve-tutorial-card {
  isolation: isolate;
  border: 1px solid rgba(207, 157, 62, 0.58) !important;
  border-radius: 5px !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(219, 168, 64, 0.12), transparent 35%),
    repeating-linear-gradient(115deg, rgba(255, 238, 195, 0.016) 0 1px, transparent 1px 8px),
    linear-gradient(155deg, rgba(18, 20, 19, 0.98), rgba(4, 7, 8, 0.99)) !important;
  color: #f7ecd1;
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.34),
    inset 0 0 0 4px rgba(236, 194, 105, 0.08),
    0 24px 70px rgba(0, 0, 0, 0.6) !important;
}

#onboardingWizard .onboarding-progress i {
  background: rgba(226, 187, 105, 0.14);
}

#onboardingWizard .onboarding-progress i.active {
  background: linear-gradient(90deg, #936315, #f3d889);
  box-shadow: 0 0 12px rgba(219, 168, 64, 0.45);
}

#onboardingWizard .eyebrow,
#tutorialOverlay .tutorial-progress {
  color: #d6a545;
}

#onboardingWizard .onboarding-step h2 {
  color: #f3d889;
  text-shadow: 0 2px 3px #000, 0 0 18px rgba(215, 163, 58, 0.18);
}

#onboardingWizard .onboarding-step > input {
  border: 1px solid rgba(218, 173, 82, 0.66);
  border-radius: 4px;
  background: linear-gradient(180deg, #151917, #090d0c);
  color: #f7ecd1;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}

#onboardingWizard .onboarding-step > input:focus-visible {
  border-color: #f3d889;
  outline: 2px solid rgba(255, 224, 133, 0.75);
  outline-offset: 3px;
  box-shadow: 0 0 16px rgba(219, 165, 53, 0.18);
}

#onboardingWizard .avatar-choice {
  border: 1px solid rgba(207, 157, 62, 0.38);
  border-radius: 5px;
  background: linear-gradient(160deg, #181b19, #060a0b);
  color: #f4dfaa !important;
  -webkit-text-fill-color: #f4dfaa !important;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.34);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 200ms ease;
}

#onboardingWizard .avatar-choice.selected,
#onboardingWizard .avatar-choice:hover:not(:disabled),
#onboardingWizard .avatar-choice:focus-visible {
  border-color: #f3d889;
  background:
    radial-gradient(circle at 18% 0%, rgba(236, 190, 91, 0.18), transparent 42%),
    linear-gradient(160deg, #2d2310, #080a0a);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.34), 0 0 22px rgba(215, 158, 42, 0.2);
}

#onboardingWizard .avatar-choice:focus-visible {
  outline: 2px solid rgba(255, 224, 133, 0.75);
  outline-offset: 3px;
}

#onboardingWizard .avatar-choice .unlockable-preview > img {
  background: rgba(3, 6, 5, 0.72);
}

#onboardingWizard .onboarding-step small a {
  color: #d6a545;
}

#onboardingWizard .onboarding-step small a:is(:hover, :focus-visible) {
  color: #fff0bd;
  text-decoration: underline;
}

#tutorialOverlay #tutorialCloseBtn,
#pveTutorialHint #pveTutorialCloseBtn {
  border: 1px solid rgba(218, 173, 82, 0.42);
  border-radius: 4px;
  background: linear-gradient(180deg, #292a25, #101413);
  color: #f4dfaa !important;
  -webkit-text-fill-color: #f4dfaa !important;
}

#tutorialOverlay #tutorialCloseBtn:is(:hover, :focus-visible),
#pveTutorialHint #pveTutorialCloseBtn:is(:hover, :focus-visible) {
  border-color: #ffe59a;
  background: linear-gradient(180deg, #78561c, #352105);
  box-shadow: 0 0 16px rgba(222, 166, 53, 0.2);
  outline: 2px solid rgba(255, 224, 133, 0.75);
  outline-offset: 2px;
}

#onboardingWizard .onboarding-gold-action,
#pveTutorialHint #pveTutorialOkBtn {
  min-height: 44px;
}

#campaignIntroOverlay #startAdventureBtn {
  max-width: 100%;
  padding: clamp(16px, 3vw, 24px) clamp(24px, 5vw, 48px);
  font-size: clamp(1.2rem, 3vw, 2rem);
}

/* Gold remains visible for disabled controls without playing the hover sweep. */
.onboarding-gold-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-gold-action,
  .onboarding-gold-action::after,
  #onboardingWizard .avatar-choice {
    transition: none !important;
  }
}