/* Choose-your-buddy wizard */

.choose-page {
  background:
    radial-gradient(circle at 10% 20%, #fff4cc 0 120px, transparent 121px),
    radial-gradient(circle at 92% 80%, #ffe3f0 0 160px, transparent 161px),
    var(--sky);
  min-height: 100vh;
}

.wizard { padding: 24px 0 120px; }

.dots {
  list-style: none; padding: 0; margin: 0 auto 24px;
  display: flex; justify-content: center; gap: 10px;
}
.dots li {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800;
  background: var(--white); color: #9fb0cf; border: 3px solid #d6e2f5;
  transition: all 0.3s var(--bounce);
}
.dots li.on { background: var(--orange); color: var(--white); border-color: var(--orange); transform: scale(1.15); }
.dots li.done { background: var(--green); color: var(--white); border-color: var(--green); }

.wizard-grid { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }

/* preview */
.preview { position: sticky; top: 90px; }
.preview-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 18px; text-align: center; box-shadow: var(--shadow-soft);
  border-bottom: 8px solid var(--pc, var(--blue-500));
  transition: border-color 0.3s;
}
.preview-img-wrap { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; background: var(--blue-100); }
.preview-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: filter 0.4s, transform 0.4s var(--bounce); }
.preview-img-wrap.mystery img { filter: brightness(0) opacity(0.25); }
.preview-img-wrap .q {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 6rem; font-weight: 800; color: var(--blue-300);
  transition: opacity 0.3s;
}
.preview-img-wrap:not(.mystery) .q { opacity: 0; }
.preview-img-wrap.swap img { transform: scale(0.85) rotate(-4deg); }
.preview-name { font-size: 1.6rem; font-weight: 800; margin-top: 10px; color: var(--blue-900); min-height: 2.2em; }
.preview-stage {
  display: inline-block; padding: 2px 14px; border-radius: 999px;
  background: var(--sky); color: var(--ink-soft); font-weight: 700;
}

/* panels */
.panels { position: relative; }
.panel {
  display: none;
  background: var(--white); border-radius: var(--radius-lg);
  padding: 32px 28px; box-shadow: var(--shadow-soft);
}
.panel.active { display: block; animation: slide-up 0.45s var(--bounce); }
.panel h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--blue-900); line-height: 1.3; }
.panel .hint { margin: 4px 0 22px; color: var(--ink-soft); font-size: 1.15rem; }

.name-input {
  width: 100%; font: inherit; font-size: 2rem; font-weight: 800;
  padding: 14px 22px; border-radius: var(--radius);
  border: 4px solid var(--blue-100); color: var(--blue-900);
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.name-input:focus { border-color: var(--blue-500); box-shadow: 0 0 0 6px rgba(30, 111, 224, 0.15); }

.name-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.name-suggest button {
  border: 2px solid var(--blue-100); background: var(--sky); color: var(--blue-800);
  border-radius: 999px; padding: 4px 14px; font-weight: 700; font-size: 1rem;
}
.name-suggest button:hover { border-color: var(--blue-300); }

.nav { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.nav.center { justify-content: center; }

/* pick cards */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pick-card {
  border: 5px solid transparent; background: var(--white); padding: 0;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-soft); text-align: center;
  transition: transform 0.3s var(--bounce), border-color 0.2s;
}
.pick-card img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; }
.pick-card span {
  display: block; padding: 12px 6px; font-size: 1.5rem; font-weight: 800;
  background: var(--c); color: var(--white);
}
.pick-card:hover { transform: translateY(-8px) rotate(-1.5deg); border-color: var(--c); }
.pick-card.selected { border-color: var(--c); transform: scale(1.04); }

.stage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.stage-grid .pick-card span { font-size: 1.05rem; padding: 8px 4px; }
.stage-grid .group-label {
  grid-column: 1 / -1; font-weight: 800; color: var(--ink-soft);
  border-bottom: 2px dashed #d6e2f5; padding-bottom: 4px; margin-top: 6px;
}

/* done */
.done { text-align: center; }
.gift {
  display: inline-block; margin-top: 4px;
  background: var(--yellow-soft); border: 3px dashed var(--yellow);
  padding: 10px 20px; border-radius: var(--radius); font-size: 1.2rem;
}

@media (max-width: 860px) {
  .wizard-grid { grid-template-columns: 1fr; }
  .preview { position: static; }
  .preview-card {
    display: grid; grid-template-columns: 96px 1fr; align-items: center;
    column-gap: 14px; text-align: right; padding: 12px;
  }
  .preview-img-wrap { grid-row: span 2; }
  .preview-stage { justify-self: start; }
  .preview-img-wrap .q { font-size: 3rem; }
  .preview-name { font-size: 1.3rem; margin: 0; min-height: 0; }
  .panel { padding: 24px 18px; }
  .name-input { font-size: 1.5rem; }
}