/* 向导三屏：活动(2×2 大卡 wizard-D 定稿) → 子项/时间(流式糖果 pill, design-review P1A)
 * 选中弹跳打勾 + stagger 弹入（Task 7 review 延迟到本任务落地）。
 * 逐行移植 prototype wizard-D.html 的 <style>，色值全部经 tokens.css 的 var() 引用。
 * 手账元素（washi/锯齿/红章）只出现在开场 + 片单票根，不扩散到糖果屏。
 */

.screen-wizard {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 26px;
  background: var(--cream);
  overflow: hidden;
}

/* 装饰糖果碎屑（wizard-D） */
.sprinkle {
  position: absolute;
  border-radius: var(--radius-pill);
  opacity: .55;
  pointer-events: none;
}
.sprinkle.s1 { width: 42px; height: 12px; background: var(--candy-light); top: 70px; left: -14px; transform: rotate(-28deg); }
.sprinkle.s2 { width: 34px; height: 11px; background: var(--mint-light);  top: 130px; right: -10px; transform: rotate(34deg); }
.sprinkle.s3 { width: 30px; height: 10px; background: var(--lavender-light); bottom: 90px; left: -8px; transform: rotate(20deg); }

/* ---- 顶栏：返回 + 圆形进度点 ---- */
.wz-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}
.wz-back {
  font-family: var(--font-candy);
  font-size: 16px;
  color: var(--ink-faint);
  background: var(--white);
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  min-height: 44px;                  /* a11y P7：触控 ≥44px */
  box-shadow: 0 4px 0 var(--line), 0 8px 16px var(--shadow-soft);
  cursor: pointer;
  transition: transform .12s var(--ease-bounce), box-shadow .12s;
}
.wz-back:active { transform: scale(.92) translateY(2px); box-shadow: 0 2px 0 var(--line); }

.wz-dots { display: flex; align-items: center; gap: 9px; }
.wz-dots .dot {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--line);
  box-shadow: inset 0 2px 3px var(--shadow-deep);
}
.wz-dots .dot.on {
  background: var(--candy-pink);
  width: 30px;
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 0 var(--candy-deep);
  animation: dotPop .5s var(--ease-bounce);
}
@keyframes dotPop {
  0% { transform: scale(.4); }
  70% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.wz-step-label {
  font-size: 13px;                    /* a11y：装饰小字 ≥12px + 对比 ≥4.5:1 */
  color: var(--ink-faint);
  letter-spacing: 1px;
  margin-top: 10px;
  text-align: center;
}

/* ---- 标题 ---- */
.wz-title-wrap {
  text-align: center;
  margin: 10px 0 22px;
  z-index: 2;
  position: relative;
}
.wz-title {
  font-family: var(--font-candy);
  font-size: 34px;
  color: var(--ink);
  letter-spacing: 2px;
  text-shadow: 0 3px 0 var(--white);
}
.wz-subtitle {
  font-size: 15px;
  color: var(--ink-faint);
  margin-top: 8px;
}
/* 已选回显小签（design-review P1A：子项/时间屏顶部保留「正在选什么」标题 + 已选活动回显） */
.wz-echo {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 14px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: 2px 2px 0 var(--ink-shadow);
  transform: rotate(-1deg);
  font-family: var(--font-candy);
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 1px;
}

/* ---- 活动屏：2×2 大糖果卡（wizard-D 定稿） ---- */
.wz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1;
  align-content: center;
  position: relative;
  z-index: 2;
}
.card {
  position: relative;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-card);
  padding: 26px 10px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-candy);
  transition: transform .18s var(--ease-bounce), box-shadow .18s;
  animation: popIn var(--dur-pop) var(--ease-bounce) backwards;   /* stagger 弹入 */
}
.card:nth-child(1) { animation-delay: .06s; }
.card:nth-child(2) { animation-delay: .12s; }
.card:nth-child(3) { animation-delay: .18s; }
.card:nth-child(4) { animation-delay: .24s; }

.card .emoji {
  font-size: 46px;
  line-height: 1;
  filter: drop-shadow(0 4px 0 var(--shadow-deep));
  animation: breathe 3.2s var(--ease-inout) infinite;
}
.card .name { font-size: 21px; color: var(--ink); letter-spacing: 2px; }
.card:active { transform: scale(.9); }

.card.pink     { background: var(--candy-light);     box-shadow: 0 7px 0 var(--candy-pink), 0 16px 26px var(--candy-shadow); }
.card.yellow   { background: var(--yellow-soft);     box-shadow: 0 7px 0 var(--butter-yellow), 0 16px 26px var(--shadow-soft); }
.card.mint     { background: var(--mint-light);      box-shadow: 0 7px 0 var(--mint), 0 16px 26px var(--mint-shadow); }
.card.lavender { background: var(--lavender-light);  box-shadow: 0 7px 0 var(--lavender), 0 16px 26px var(--shadow-soft); }

.card.selected {
  animation: popSelect .55s var(--ease-bounce);
  transform: scale(1.05);
  outline: 4px solid var(--white);
  outline-offset: -8px;
}
@keyframes popSelect {
  0% { transform: scale(.88); }
  60% { transform: scale(1.1); }
  100% { transform: scale(1.05); }
}
.check-badge {
  position: absolute;
  top: -10px; right: -10px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--candy-deep);
  color: var(--white);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 0 var(--candy-deep), 0 8px 14px var(--candy-shadow);
  animation: badgeIn .5s var(--ease-bounce);
  font-family: var(--font-body);
}
@keyframes badgeIn {
  0% { transform: scale(0) rotate(-90deg); }
  70% { transform: scale(1.25) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.04); }
}

/* ---- 子项/时间屏：流式糖果 pill（design-review P1A：轻快，flex-wrap 自适应 2-5 选） ---- */
.wz-pills {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 16px;
  padding: 8px 0;
  position: relative;
  z-index: 2;
}
.pill {
  position: relative;
  border: none;
  cursor: pointer;
  font-family: var(--font-candy);
  font-size: 19px;
  letter-spacing: 2px;
  color: var(--ink);
  padding: 14px 24px;
  min-height: 48px;                  /* a11y P7：触控 ≥44px */
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .15s var(--ease-bounce);
  animation: popIn var(--dur-pop) var(--ease-bounce) backwards;   /* stagger 弹入 */
}
.pill:nth-child(1) { animation-delay: .05s; }
.pill:nth-child(2) { animation-delay: .1s; }
.pill:nth-child(3) { animation-delay: .15s; }
.pill:nth-child(4) { animation-delay: .2s; }
.pill:nth-child(5) { animation-delay: .25s; }
.pill:nth-child(6) { animation-delay: .3s; }

.pill.pink     { background: var(--candy-light);     box-shadow: 0 5px 0 var(--candy-pink), 0 8px 16px var(--candy-shadow); }
.pill.yellow   { background: var(--yellow-soft);     box-shadow: 0 5px 0 var(--butter-yellow), 0 8px 16px var(--shadow-soft); }
.pill.mint     { background: var(--mint-light);      box-shadow: 0 5px 0 var(--mint), 0 8px 16px var(--mint-shadow); }
.pill.lavender { background: var(--lavender-light);  box-shadow: 0 5px 0 var(--lavender), 0 8px 16px var(--shadow-soft); }
.pill:active { transform: scale(.92); }

.pill.selected {
  animation: pillPop .4s var(--ease-bounce);
  transform: scale(1.06);
  outline: 3px solid var(--white);
  outline-offset: -4px;
}
@keyframes pillPop {
  0% { transform: scale(.85); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1.06); }
}
.pill .pill-check {
  font-size: 14px;
  color: var(--candy-deep);
}

/* 弹入入场（stagger pop-in） */
@keyframes popIn {
  from { opacity: 0; transform: translateY(16px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.wz-hint {
  text-align: center;
  font-size: 13px;                   /* a11y：对比 ≥4.5:1 */
  color: var(--ink-faint);
  margin-top: 18px;
  z-index: 2;
  position: relative;
}