[data-primary-view-panel="pet"] {
  position: relative;
}

.pet-onboarding[hidden] {
  display: none !important;
}

[data-primary-view-panel="pet"][data-pet-onboarding-open="true"] > [data-pet-root] {
  visibility: hidden;
  pointer-events: none;
}

.pet-onboarding {
  --pet-accent: #aeb2b8;
  position: absolute;
  inset: 0;
  /* Keep the selection stage below the fixed primary navigation. On short
     mobile viewports the panel can reach the nav edge, which must stay visible
     and tappable instead of being covered by this overlay. */
  z-index: 8;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 14px 16px 16px;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--pet-accent) 6%, transparent), transparent 46%),
    #0d0f12;
  overflow: auto;
  overscroll-behavior: contain;
}

.pet-onboarding-card {
  position: relative;
  width: min(100%, 430px);
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 20px;
  padding: 18px 14px 14px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 2%), transparent 22%),
    #14171b;
  box-shadow: 0 18px 56px rgb(0 0 0 / 38%);
  overflow: hidden;
}

.pet-onboarding-back {
  position: absolute;
  z-index: 6;
  top: 10px;
  left: 10px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 50%;
  background: rgb(9 11 14 / 88%);
  color: #f4f4f4;
  box-shadow: 0 3px 14px rgb(0 0 0 / 35%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pet-onboarding-back[hidden] { display: none !important; }
.pet-onboarding-back svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pet-onboarding-back:focus-visible { outline: 2px solid var(--pet-accent); outline-offset: 3px; }

.pet-onboarding-kicker {
  margin: 0;
  color: var(--faction-accent, #f4f4f4);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pet-onboarding h1 {
  max-width: 330px;
  margin: 6px auto 10px;
  font-size: clamp(1.85rem, 7.4vw, 2.55rem);
  line-height: .92;
  text-align: center;
  text-transform: uppercase;
}

.pet-onboarding-chooser {
  position: relative;
  height: 340px;
  margin: 0 -9px 8px;
  overflow: visible;
  transition: height 560ms cubic-bezier(.22,.8,.24,1), margin 420ms ease;
}

.pet-onboarding-choice {
  --choice-accent: #d8dadd;
  position: absolute;
  top: 0;
  width: 50%;
  height: 164px;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: visible;
  transform: translateX(0) translateY(0) scale(1);
  transform-origin: center 62%;
  transition:
    top 560ms cubic-bezier(.22,.8,.24,1),
    transform 440ms cubic-bezier(.2,.78,.2,1),
    opacity 360ms ease;
  will-change: transform, opacity;
}

.pet-onboarding-choice[data-pet-index="0"] { left: 0; --choice-accent: #bb68ff; }
.pet-onboarding-choice[data-pet-index="1"] { left: 50%; --choice-accent: #c8f5ff; }
.pet-onboarding-choice[data-pet-index="2"] { left: 25%; top: 50%; --choice-accent: #d5a91b; }

.pet-onboarding-choice::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 43%;
  width: 120px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--choice-accent) 32%, transparent), color-mix(in srgb, var(--choice-accent) 9%, transparent) 42%, transparent 72%);
  opacity: .34;
  filter: blur(14px);
  transform: translate(-50%, -50%) scale(.88);
  transition: opacity 200ms ease, transform 300ms cubic-bezier(.2,.78,.2,1);
  pointer-events: none;
}

.pet-onboarding-choice:focus-visible {
  outline: 2px solid var(--choice-accent);
  outline-offset: -3px;
  border-radius: 18px;
}

.pet-onboarding-choice-art {
  position: absolute;
  z-index: 1;
  inset: 0 4px 25px;
  display: grid;
  place-items: center;
  overflow: visible;
}

.pet-onboarding-choice-art img {
  display: block;
  width: min(132px, 92%);
  max-width: none;
  max-height: 126px;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  user-select: none;
  pointer-events: none;
  transform: translateY(0) scale(1);
  transform-origin: center 78%;
  animation: pet-starter-wiggle 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--choice-accent) 52%, transparent));
}

.pet-onboarding-choice[data-pet-glow="hexicacti"] img {
  filter: drop-shadow(0 0 7px rgb(185 72 255 / 62%)) drop-shadow(0 0 17px rgb(143 48 255 / 38%));
}

.pet-onboarding-choice[data-pet-glow="skelepurr"] img {
  filter: drop-shadow(0 0 8px rgb(207 247 255 / 82%)) drop-shadow(0 0 17px rgb(83 205 255 / 44%));
}

.pet-onboarding-choice[data-pet-glow="telechirp"] img {
  filter: drop-shadow(0 0 9px rgb(184 139 17 / 72%)) drop-shadow(0 0 19px rgb(112 83 8 / 50%));
}

.pet-onboarding-choice-name {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  bottom: 0;
  color: #f7f4ff;
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .025em;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 2px 8px #000, 0 0 8px color-mix(in srgb, var(--choice-accent) 32%, transparent);
}

@keyframes pet-starter-wiggle {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-4px) rotate(1.2deg); }
}

/* The aura, lift, and selected CTA already communicate selection. A detached checkmark
   made the character stage feel like form chrome, so keep it semantically present but invisible. */
.pet-onboarding-choice-check {
  display: none;
}

.pet-onboarding[data-selected-pet] .pet-onboarding-choice:not(.is-selected) {
  opacity: .58;
  transform: translateY(6px) scale(.92);
}

.pet-onboarding-choice.is-selected {
  z-index: 3;
  transform: translateY(-7px) scale(1.075);
}

.pet-onboarding-choice.is-selected::before {
  opacity: .98;
  transform: translate(-50%, -50%) scale(1.15);
}

.pet-onboarding-choice.is-selected .pet-onboarding-choice-art img {
  animation-duration: 2.4s;
}

.pet-onboarding[data-step="transition"] .pet-onboarding-chooser,
.pet-onboarding[data-step="name"] .pet-onboarding-chooser {
  height: 218px;
  margin-bottom: 4px;
}

.pet-onboarding[data-step="transition"] .pet-onboarding-choice,
.pet-onboarding[data-step="name"] .pet-onboarding-choice {
  height: 204px;
}

.pet-onboarding[data-step="transition"] .pet-onboarding-choice-art,
.pet-onboarding[data-step="name"] .pet-onboarding-choice-art {
  inset: 4px 0 24px;
}

.pet-onboarding[data-step="transition"] .pet-onboarding-choice-art img,
.pet-onboarding[data-step="name"] .pet-onboarding-choice-art img {
  width: min(145px, 90%);
  max-height: 164px;
}

.pet-onboarding[data-step="transition"] .pet-onboarding-choice.is-selected,
.pet-onboarding[data-step="name"] .pet-onboarding-choice.is-selected {
  z-index: 5;
  opacity: 1;
  top: 0;
  transform: translateX(var(--pet-hero-shift)) translateY(-2px) scale(1.29);
  transition: top 560ms cubic-bezier(.22,.8,.24,1), transform 560ms cubic-bezier(.22,.8,.24,1), opacity 360ms ease;
  pointer-events: none;
}

.pet-onboarding[data-step="transition"] .pet-onboarding-choice.is-selected .pet-onboarding-choice-art img {
  animation-play-state: paused;
}

.pet-onboarding[data-step="transition"] .pet-onboarding-choice-name,
.pet-onboarding[data-step="name"] .pet-onboarding-choice-name {
  animation: none;
}

.pet-onboarding[data-step="transition"] .pet-onboarding-choice.is-selected::before,
.pet-onboarding[data-step="name"] .pet-onboarding-choice.is-selected::before {
  opacity: .72;
  transform: translate(-50%, -48%) scale(1.08);
}

.pet-onboarding[data-step="transition"] .pet-onboarding-choice.is-leaving {
  opacity: 0;
}

.pet-onboarding[data-step="transition"] .pet-onboarding-choice.is-leaving[data-pet-index="0"] {
  transform: translateX(-78%) translateY(18px) scale(.7);
}

.pet-onboarding[data-step="transition"] .pet-onboarding-choice.is-leaving[data-pet-index="1"] {
  transform: translateY(28px) scale(.68);
}

.pet-onboarding[data-step="transition"] .pet-onboarding-choice.is-leaving[data-pet-index="2"] {
  transform: translateX(78%) translateY(18px) scale(.7);
}

.pet-onboarding[data-step="name"] .pet-onboarding-choice:not(.is-selected) {
  opacity: 0;
  pointer-events: none;
}

.pet-onboarding-enter {
  width: 100%;
  min-height: 50px;
  border: 1px solid color-mix(in srgb, var(--pet-accent) 70%, white 10%);
  border-radius: 14px;
  background: var(--pet-accent);
  color: #090b0e;
  font: inherit;
  font-weight: 950;
  letter-spacing: .055em;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 10%),
    0 0 18px color-mix(in srgb, var(--pet-accent) 18%, transparent);
  transition: opacity 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}

.pet-onboarding-enter:active:not(:disabled) {
  transform: translateY(1px);
}

.pet-onboarding-enter:disabled {
  border-color: rgb(255 255 255 / 8%);
  background: #777b80;
  box-shadow: none;
  opacity: .44;
}

.pet-onboarding-name-step {
  margin-top: 0;
  opacity: 0;
  transform: translateY(12px);
}

.pet-onboarding-name-step[hidden] {
  display: none !important;
}

.pet-onboarding.is-name-ready .pet-onboarding-name-step {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(.2,.78,.2,1);
}

.pet-onboarding-name-step label {
  display: block;
  margin: 0 0 6px;
  color: color-mix(in srgb, var(--pet-accent) 74%, white 26%);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
}

.pet-onboarding-name-step input {
  width: 100%;
  min-height: 50px;
  margin: 0 0 8px;
  border: 1px solid color-mix(in srgb, var(--pet-accent) 38%, rgb(255 255 255 / 18%));
  border-radius: 14px;
  padding: 0 15px;
  background: #0b0d10;
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 800;
  text-align: center;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--pet-accent) 5%, transparent);
}

.pet-onboarding-name-step input:focus {
  outline: 2px solid var(--pet-accent);
  outline-offset: 1px;
}

.pet-onboarding-hearts {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: visible;
}

.pet-onboarding-heart {
  position: absolute;
  left: var(--heart-x, 50%);
  top: 55%;
  color: #ff829f;
  font-size: 1.2rem;
  line-height: 1;
  opacity: 0;
  transform: translate(-50%, 0) scale(var(--heart-scale, 1));
  text-shadow: 0 0 10px rgb(255 130 159 / 42%);
  animation: pet-heart-float 1.1s ease-out forwards;
}

@keyframes pet-heart-float {
  0% {
    opacity: 0;
    transform: translate(-50%, 4px) scale(calc(var(--heart-scale, 1) * .65));
  }
  18% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--heart-drift, 0px)), -82px) scale(var(--heart-scale, 1));
  }
}

@media (max-width: 360px) {
  .pet-onboarding { padding-inline: 12px; }
  .pet-onboarding-card { padding-inline: 11px; }
  .pet-onboarding-chooser { height: 300px; margin-inline: -7px; }
  .pet-onboarding-choice { height: 146px; }
  .pet-onboarding-choice-art { inset-inline: -14px; }
  .pet-onboarding-choice-art img { width: min(116px, 92%); max-height: 112px; }
}

@media (max-height: 700px) {
  .pet-onboarding { align-items: start; padding-top: 8px; }
  .pet-onboarding-card { padding-top: 13px; }
  .pet-onboarding h1 { margin-bottom: 6px; font-size: clamp(1.65rem, 6.5vw, 2.15rem); }
  .pet-onboarding-chooser { height: 230px; margin-bottom: 5px; }
  .pet-onboarding-choice { height: 112px; }
  .pet-onboarding-choice-art img { max-height: 86px; width: min(98px, 90%); }
  .pet-onboarding[data-step="transition"] .pet-onboarding-chooser,
  .pet-onboarding[data-step="name"] .pet-onboarding-chooser { height: 184px; }
}

@media (max-height: 700px) {
  .pet-onboarding-card { height: auto; min-height: 100%; }
}

@media (max-height: 620px) {
  .pet-onboarding,
  .pet-onboarding[data-keyboard-open="true"] {
    align-items: start;
    padding: 5px 10px 6px;
  }
  .pet-onboarding-card,
  .pet-onboarding[data-keyboard-open="true"] .pet-onboarding-card {
    padding: 8px 10px 8px;
    border-radius: 16px;
  }
  .pet-onboarding[data-step="name"] .pet-onboarding-kicker,
  .pet-onboarding[data-step="transition"] .pet-onboarding-kicker,
  .pet-onboarding[data-keyboard-open="true"] .pet-onboarding-kicker {
    display: none;
  }
  .pet-onboarding[data-step="name"] h1,
  .pet-onboarding[data-step="transition"] h1,
  .pet-onboarding[data-keyboard-open="true"] h1 {
    margin: 0 auto 2px;
    font-size: clamp(1.3rem, 5.8vw, 1.65rem);
    line-height: .9;
  }
  .pet-onboarding[data-step="name"] .pet-onboarding-chooser,
  .pet-onboarding[data-step="transition"] .pet-onboarding-chooser,
  .pet-onboarding[data-keyboard-open="true"] .pet-onboarding-chooser {
    height: 104px;
    margin: 0 -4px 2px;
  }
  .pet-onboarding[data-step="name"] .pet-onboarding-choice,
  .pet-onboarding[data-step="transition"] .pet-onboarding-choice,
  .pet-onboarding[data-keyboard-open="true"] .pet-onboarding-choice {
    height: 100px;
  }
  .pet-onboarding[data-step="name"] .pet-onboarding-choice-art,
  .pet-onboarding[data-step="transition"] .pet-onboarding-choice-art,
  .pet-onboarding[data-keyboard-open="true"] .pet-onboarding-choice-art {
    inset: 0 -6px 2px;
  }
  .pet-onboarding[data-step="name"] .pet-onboarding-choice-art img,
  .pet-onboarding[data-step="transition"] .pet-onboarding-choice-art img,
  .pet-onboarding[data-keyboard-open="true"] .pet-onboarding-choice-art img {
    width: 68px;
    max-height: 70px;
  }
  .pet-onboarding[data-step="name"] .pet-onboarding-choice.is-selected,
  .pet-onboarding[data-step="transition"] .pet-onboarding-choice.is-selected,
  .pet-onboarding[data-keyboard-open="true"] .pet-onboarding-choice.is-selected {
    transform: translateX(var(--pet-hero-shift)) translateY(0) scale(1.08);
  }
  .pet-onboarding-name-step label { margin-bottom: 3px; font-size: .65rem; }
  .pet-onboarding-name-step input { min-height: 41px; margin-bottom: 5px; font-size: .95rem; }
  .pet-onboarding-enter { min-height: 41px; }
}

.pet-onboarding[data-keyboard-open="true"] {
  align-items: start;
}

.pet-onboarding[data-keyboard-open="true"] .pet-onboarding-card {
  max-height: var(--pet-visible-height, 100%);
}

@media (prefers-reduced-motion: reduce) {
  .pet-onboarding-choice,
  .pet-onboarding-choice::before,
  .pet-onboarding-choice::after,
  .pet-onboarding-choice-art img,
  .pet-onboarding-choice-name,
  .pet-onboarding-name-step {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .pet-onboarding-choice-art img { animation: none !important; }

  .pet-onboarding-heart {
    animation: pet-heart-pop-reduced 450ms ease-out forwards;
  }

  @keyframes pet-heart-pop-reduced {
    0% { opacity: 0; }
    20%, 75% { opacity: 1; }
    100% { opacity: 0; }
  }
}