/* 庆祝完成页：糖果庆典（celebration-J.html 移植）
 * 纯 CSS 彩带纸屑 + 弹跳「好呀！」+ 糖果徽章 + 气泡 wiggle。
 * 色值全部经 tokens.css 的 var() 引用（本层不出现字面色值）；
 * 透明度合成用 color-mix(in srgb, var(--x) n%, transparent)，不写裸色值。
 * 装饰动效由 tokens.css 的 prefers-reduced-motion 全局规则关停；此处再显式隐藏纯装饰件。
 */

.screen-celebration {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 28px calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 12% 8%,  color-mix(in srgb, var(--candy-pink) 18%, transparent), transparent 32%),
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--lavender) 20%, transparent), transparent 30%),
    radial-gradient(circle at 20% 88%, color-mix(in srgb, var(--mint) 18%, transparent), transparent 34%),
    radial-gradient(circle at 84% 84%, color-mix(in srgb, var(--butter-yellow) 22%, transparent), transparent 30%),
    var(--cream);
  overflow: hidden;
}

/* ===== 糖果彩带纸屑（celebration-J confetti） ===== */
.confetti {
  position: absolute;
  top: -40px;
  pointer-events: none;
  animation: fall linear infinite;
}
.confetti.rect { width: 10px; height: 16px; border-radius: 3px; }
.confetti.dot { width: 11px; height: 11px; border-radius: 50%; }
@keyframes fall {
  0%   { transform: translateY(-40px) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(860px) rotate(640deg); opacity: 0; }
}
.c1  { left: 6%;  background: var(--candy-pink);    animation-duration: 3.4s; animation-delay: 0s; }
.c2  { left: 14%; background: var(--butter-yellow); animation-duration: 4.2s; animation-delay: .6s; }
.c3  { left: 22%; background: var(--mint);          animation-duration: 3.8s; animation-delay: 1.2s; }
.c4  { left: 30%; background: var(--lavender);      animation-duration: 4.6s; animation-delay: .3s; }
.c5  { left: 38%; background: var(--candy-pink);    animation-duration: 3.6s; animation-delay: 1.8s; }
.c6  { left: 46%; background: var(--butter-yellow); animation-duration: 4.4s; animation-delay: .9s; }
.c7  { left: 54%; background: var(--mint);          animation-duration: 3.9s; animation-delay: .2s; }
.c8  { left: 62%; background: var(--lavender);      animation-duration: 4.1s; animation-delay: 1.5s; }
.c9  { left: 70%; background: var(--candy-pink);    animation-duration: 3.5s; animation-delay: .7s; }
.c10 { left: 78%; background: var(--butter-yellow); animation-duration: 4.5s; animation-delay: 1.1s; }
.c11 { left: 86%; background: var(--mint);          animation-duration: 3.7s; animation-delay: .4s; }
.c12 { left: 93%; background: var(--lavender);      animation-duration: 4.3s; animation-delay: 1.6s; }
.c13 { left: 11%; background: var(--mint);          animation-duration: 4.8s; animation-delay: 2.1s; }
.c14 { left: 49%; background: var(--candy-pink);    animation-duration: 4.0s; animation-delay: 2.4s; }
.c15 { left: 73%; background: var(--butter-yellow); animation-duration: 3.9s; animation-delay: 2.0s; }

/* ===== 四角星星（twinkle） ===== */
.sparkle {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 26px;
  height: 26px;
  opacity: .8;
  animation: twinkle 2.2s ease-in-out infinite;
}
.sparkle::before,
.sparkle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--butter-yellow);
  border-radius: 2px;
}
.sparkle::before { width: 4px; height: 100%; }
.sparkle::after { width: 100%; height: 4px; }
@keyframes twinkle {
  0%, 100% { transform: scale(.6) rotate(0deg); opacity: .35; }
  50%      { transform: scale(1.1) rotate(45deg); opacity: .9; }
}
.s1 { top: 12%; left: 8%;  animation-delay: .2s; }
.s2 { top: 16%; right: 10%; animation-delay: 1s; }
.s3 { bottom: 22%; left: 14%; animation-delay: .6s; }
.s4 { bottom: 30%; right: 12%; animation-delay: 1.4s; }

/* ===== 内容层 ===== */
.stage {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 大号「好呀！」：popIn 入场 + bounce 持续 */
.hooray {
  font-family: var(--font-candy);
  font-size: clamp(88px, 26vw, 120px);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--candy-pink);
  text-shadow:
    0 6px 0 var(--butter-yellow),
    0 12px 0 color-mix(in srgb, var(--lavender) 55%, transparent),
    0 18px 30px color-mix(in srgb, var(--candy-pink) 35%, transparent);
  animation: popIn .9s cubic-bezier(.34, 1.9, .5, 1) both, bounce 2.4s ease-in-out 1s infinite;
}
@keyframes popIn {
  0%   { transform: scale(.2) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.02); }
}

.sub-cheer {
  margin-top: 14px;
  font-size: 18px;
  letter-spacing: .35em;
  text-indent: .35em;
  color: var(--ink);
  opacity: .65;
  animation: fadeUp .7s ease .35s both;
}

/* 方案糖果徽章（大 pill + 三色圆点） */
.badge {
  margin-top: 36px;
  padding: 16px 30px;
  background: var(--white);
  border: 4px solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-candy);
  font-size: 24px;
  color: var(--ink);
  box-shadow: 0 8px 0 var(--ink-shadow), inset 0 -6px 0 color-mix(in srgb, var(--butter-yellow) 35%, transparent);
  transform: rotate(-2deg);
  animation: fadeUp .7s cubic-bezier(.34, 1.6, .5, 1) .55s both;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.badge .dotd {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--candy-pink);
  box-shadow: 18px 0 0 var(--butter-yellow), 36px 0 0 var(--mint);
  margin-right: 40px;
}

/* 逃逸彩蛋气泡（wiggle） */
.bubble {
  position: relative;
  margin-top: 34px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 22px 22px 22px 4px;
  padding: 14px 20px;
  font-family: var(--font-candy);
  font-size: 17px;
  color: var(--ink);
  box-shadow: 0 6px 0 var(--ink-shadow);
  transform: rotate(1.5deg);
  animation: fadeUp .7s ease .8s both, wiggle 3.2s ease-in-out 1.6s infinite;
}
.bubble::after {
  content: '';
  position: absolute;
  left: 14px;
  bottom: -14px;
  width: 20px;
  height: 20px;
  background: var(--white);
  border-left: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(-45deg);
  border-bottom-left-radius: 6px;
}
@keyframes wiggle {
  0%, 100% { transform: rotate(1.5deg); }
  50%      { transform: rotate(-1deg) translateY(-3px); }
}
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(24px) scale(.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 底部小字：notified=true → 已通知；false → 答复已记录 */
.footer {
  position: absolute;
  bottom: calc(22px + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: .15em;
  color: var(--ink);
  opacity: .5;
  z-index: 2;
  animation: fadeUp .8s ease 1.05s both;
}
.footer .hearts {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .6em;
  text-indent: .6em;
  opacity: .8;
}

/* a11y：纯装饰件在 reduced-motion 下直接隐藏；标题/徽章/气泡内容仍完整展示
 * （tokens.css 全局规则已把动画时长压到 0.01ms，此处兜底隐藏静态纸屑） */
@media (prefers-reduced-motion: reduce) {
  .confetti,
  .sparkle {
    display: none;
  }
}