/* ============================================================
   scene3.css — 蛋糕 / 许愿 / 吹蜡烛 / 信
   ============================================================ */

.stage3 {
  background:
    radial-gradient(58% 30% at 50% 54%, rgba(255, 186, 106, 0.22) 0%, rgba(255, 150, 70, 0.07) 46%, rgba(255, 140, 60, 0) 72%),
    radial-gradient(80% 60% at 50% 46%, #2a1d14 0%, #140e0a 70%);
  display: grid;
  place-items: center;
  transition: background 1.2s ease;
}

.stage3.is-lit {
  background: radial-gradient(80% 60% at 50% 46%, #4a3320 0%, #241811 70%);
}

/* 由暗到亮的那一下 */
.stage3.is-celebrating {
  background: radial-gradient(90% 70% at 50% 42%, #6b4a2c 0%, #33221a 62%, #1b1310 100%);
}

/* ---------------- 蛋糕 ---------------- */
.cake-wrap {
  position: relative;
  width: min(84vw, 360px);
  transform: translateY(-2vh);
  transition: transform 1s var(--ease-soft);
}

.cake {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.92;
}

/* 蛋糕落在地上的影子 */
.cake::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -3%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 72%);
  filter: blur(7px);
  z-index: 0;
}

/* 盘子 */
.cake__plate {
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 4%;
  height: 9%;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #e9e1d5 62%, #cbc0af 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  z-index: 1;
}

/* 两层蛋糕体 */
.cake__tier {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 14px 14px 10px 10px;
  background:
    linear-gradient(90deg, rgba(186, 132, 86, 0.28) 0%, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0) 88%, rgba(186, 132, 86, 0.28) 100%),
    linear-gradient(180deg, #fff6e8 0%, #f7ddc0 46%, #e9c39c 100%);
  box-shadow:
    inset 0 -8px 18px rgba(190, 138, 98, 0.4),
    0 10px 22px rgba(0, 0, 0, 0.38);
  z-index: 1;
}

.cake__tier--bottom {
  bottom: 11%;
  width: 88%;
  height: 24%;
}

.cake__tier--top {
  bottom: 33%;
  width: 64%;
  height: 20%;
}

/* 顶面的奶油 */
.cake__top {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 51%;
  width: 64%;
  height: 7%;
  border-radius: 50%;
  background: linear-gradient(180deg, #fffdf7, #f8e7cf);
  box-shadow: inset 0 -3px 8px rgba(200, 150, 110, 0.35);
  z-index: 2;
}

/* 粉色淋面 */
.cake__drip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 43%;
  width: 64%;
  height: 9%;
  border-radius: 4px 4px 40% 40% / 3px 3px 60% 60%;
  background: linear-gradient(180deg, #f6b0a5, #e9908a);
  opacity: 0.95;
  z-index: 3;
}

.cake__drip::before,
.cake__drip::after {
  content: "";
  position: absolute;
  bottom: -9px;
  width: 16%;
  height: 16px;
  border-radius: 0 0 50% 50%;
  background: #ee9a90;
}

.cake__drip::before { left: 12%; }
.cake__drip::after { right: 18%; height: 22px; }

/* 樱桃/草莓点缀 */
.berry {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff9b8c, #d1493d 70%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* ---------------- 蜡烛 ---------------- */
.candles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 51%;
  height: 30%;
  pointer-events: none;
}

.candle {
  position: absolute;
  bottom: 0;
  width: 34px;
  height: 64px;
  margin-left: -17px;
  padding: 0;
  border: none;
  background: none;
  pointer-events: auto;
  cursor: pointer;
}

.candle__stick,
.candle__wick {
  left: 50%;
}

.candle__stick {
  width: 9px;
  margin-left: -4.5px;
}

.candle__wick {
  margin-left: -1px;
}

.candle__stick {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 9px;
  margin-left: -4.5px;
  height: 34px;
  border-radius: 4px;
  background: repeating-linear-gradient(
    -45deg,
    #fff5e6 0 5px,
    #f6c46a 5px 10px
  );
  box-shadow: inset -2px 0 4px rgba(160, 110, 40, 0.35);
}

.candle__wick {
  position: absolute;
  bottom: 33px;
  left: 50%;
  width: 2px;
  height: 5px;
  margin-left: -1px;
  background: #4a3a2a;
  border-radius: 1px;
}

.candle__flame {
  position: absolute;
  bottom: 36px;
  left: 50%;
  width: 16px;
  height: 26px;
  margin-left: -8px;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 68%, #ffffff 0%, #ffeaa8 26%, #ffc247 52%, rgba(255, 130, 40, 0.85) 74%, rgba(255, 110, 30, 0) 88%);
  filter: blur(0.6px);
  opacity: 0;
  transform: scale(0.2);
  transform-origin: 50% 100%;
  transition: opacity 0.35s ease, transform 0.5s var(--ease-pop);
  box-shadow: 0 0 22px 8px rgba(255, 180, 80, 0.45);
  pointer-events: none;
}

.candle.is-lit .candle__flame {
  opacity: 1;
  transform: scale(1);
  animation: flicker 1.7s ease-in-out infinite;
}

@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(-1.2deg); filter: blur(0.6px) brightness(1); }
  22% { transform: scale(1.06, 0.96) rotate(1.6deg); filter: blur(0.8px) brightness(1.08); }
  46% { transform: scale(0.95, 1.05) rotate(-1.8deg); filter: blur(0.5px) brightness(0.96); }
  70% { transform: scale(1.03, 0.98) rotate(1deg); filter: blur(0.7px) brightness(1.04); }
}

.candle.is-out .candle__flame {
  opacity: 0;
  transform: scale(0.15) translateY(-10px);
  transition: opacity 0.28s ease, transform 0.4s ease;
}

/* 一缕烟 */
.candle__smoke {
  position: absolute;
  bottom: 34px;
  left: 50%;
  width: 3px;
  height: 18px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(230, 225, 215, 0), rgba(220, 215, 205, 0.85));
  opacity: 0;
  filter: blur(1.2px);
}

.candle.is-out .candle__smoke {
  animation: smoke-rise 1.9s ease-out forwards;
}

@keyframes smoke-rise {
  0% { opacity: 0; transform: translateY(0) scaleY(0.5); }
  25% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-32px) scaleY(1.5) translateX(4px); }
}

/* 数字蜡烛 */
.number-candle {
  position: absolute;
  left: 50%;
  bottom: 51.5%;
  z-index: 4;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 2px;
  pointer-events: none;
}

.number-candle span {
  position: relative;
  display: block;
  font-size: 52px;
  line-height: 0.9;
  font-weight: 700;
  color: #6a5541;
  text-shadow: none;
  transition: color 0.8s ease, text-shadow 0.8s ease;
}

.number-candle::after {
  /* 小火焰 */
  content: "";
  position: absolute;
  left: 50%;
  top: -16px;
  width: 14px;
  height: 22px;
  margin-left: -7px;
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 68%, #ffffff 0%, #ffeaa8 26%, #ffc247 52%, rgba(255, 130, 40, 0.85) 74%, rgba(255, 110, 30, 0) 88%);
  opacity: 0;
  transform: scale(0.2);
  transform-origin: 50% 100%;
  transition: opacity 0.35s ease, transform 0.5s var(--ease-pop);
}

.number-candle.is-lit::after {
  opacity: 1;
  transform: scale(1);
  animation: flicker 1.9s ease-in-out infinite;
}

.number-candle.is-lit span {
  color: #ffe9a8;
  text-shadow:
    0 0 18px rgba(255, 200, 90, 0.85),
    0 0 42px rgba(255, 160, 60, 0.55);
}

.number-candle.is-out span {
  color: #6b5a48;
  text-shadow: none;
}

.number-candle.is-out::after {
  opacity: 0;
}

/* 点数提示 */
.blow-hint {
  position: absolute;
  left: 50%;
  bottom: -34px;
  transform: translateX(-50%);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  color: rgba(253, 246, 233, 0.55);
  white-space: nowrap;
  animation: hint-fade 3s ease-in-out infinite;
}

/* ---------------- 许愿遮罩 ---------------- */
.wish {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 55;
  display: grid;
  place-items: center;
  background: rgba(10, 7, 5, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}

.wish.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wish__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.wish__ring {
  position: relative;
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
}

.wish__ring::before,
.wish__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 214, 150, 0.5);
}

.wish__ring::after {
  inset: 22px;
  border-color: rgba(255, 214, 150, 0.28);
}

.wish.is-breathing .wish__ring::before {
  animation: ring-breathe 5s ease-in-out infinite;
}

.wish.is-breathing .wish__ring::after {
  animation: ring-breathe 5s ease-in-out 0.3s infinite;
}

@keyframes ring-breathe {
  0%, 100% { transform: scale(0.86); opacity: 0.4; }
  50% { transform: scale(1.12); opacity: 1; }
}

.wish__count {
  font-size: 30px;
  color: var(--gold-glow);
  letter-spacing: 0.08em;
  text-shadow: 0 0 20px rgba(255, 190, 90, 0.6);
  min-height: 38px;
}

.wish__text {
  font-size: var(--fs-lg);
  color: var(--cream);
  letter-spacing: 0.28em;
  padding-left: 0.28em;
}

.wish__btn {
  margin-top: 4px;
}

/* ---------------- 结尾信 ---------------- */
.letter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: calc(var(--sat) + 14px) 16px calc(var(--sab) + 14px);
  background: rgba(12, 8, 5, 0.72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s;
}

.letter.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.letter__card {
  position: relative;
  width: min(100%, 430px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 4px 6px 3px 5px;
  background:
    linear-gradient(180deg, #fffdf6 0%, #fbf3e2 100%);
  box-shadow:
    0 0 0 1px rgba(160, 130, 90, 0.25),
    0 30px 70px rgba(0, 0, 0, 0.55);
  transform: translateY(64px) scale(0.97);
  transition: transform 0.85s var(--ease-soft);
  overflow: hidden;
}

.letter.is-open .letter__card {
  transform: translateY(0) scale(1);
}

/* 信纸的横线 */
.letter__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(150, 120, 85, 0) 0 33px,
    rgba(150, 120, 85, 0.13) 33px 34px
  );
  opacity: 0.7;
}

.letter__head {
  position: relative;
  padding: 26px 24px 10px;
  text-align: center;
  flex: none;
}

.letter__title {
  font-size: var(--fs-lg);
  letter-spacing: 0.1em;
  color: var(--ink);
}

.letter__rule {
  margin: 14px auto 0;
  width: 54px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(150, 110, 70, 0.5), transparent);
}

.letter__body {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 26px 8px;
  font-size: 16.5px;
  line-height: 34px;
  color: #4d3d31;
  letter-spacing: 0.02em;
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  white-space: pre-wrap;
}

.letter__body p {
  margin: 0 0 17px;
}

.letter__sign {
  position: relative;
  padding: 6px 26px 20px;
  text-align: right;
  font-size: var(--fs-md);
  color: var(--ink-soft);
  flex: none;
}

.letter__foot {
  position: relative;
  flex: none;
  padding: 0 20px 20px;
}

.letter__timeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 16px;
  padding: 0 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tl-node {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.tl-node::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 3px rgba(242, 169, 160, 0.22);
}

.tl-node::after {
  content: "";
  position: absolute;
  top: 3px;
  left: calc(50% + 8px);
  right: calc(-50% + 8px);
  height: 1px;
  background: rgba(150, 120, 85, 0.28);
}

.tl-node:last-child::after {
  display: none;
}

/* 底部“读完了” */
.letter__done {
  width: 100%;
  min-height: 50px;
  opacity: 0.4;
  transition: opacity 0.4s ease;
}

.letter__done.is-ready {
  opacity: 1;
}

.letter__hint {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  min-height: 16px;
}

/* ---------------- 撒花 ---------------- */
#confetti {
  position: absolute;
  inset: 0;
  z-index: 78;
  pointer-events: none;
}

/* ============================================================
   蜡烛盒 / 火柴
   ============================================================ */

.toolbar {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sab) + 40px);
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 50;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.toolbar.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
}

.tool {
  position: relative;
  min-width: 96px;
  padding: 10px 14px 9px;
  border: none;
  border-radius: 16px 18px 15px 19px / 18px 15px 19px 16px;
  background: rgba(253, 246, 233, 0.1);
  box-shadow:
    inset 0 0 0 1.5px rgba(253, 246, 233, 0.3),
    0 8px 18px rgba(0, 0, 0, 0.35);
  color: var(--cream);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.18s var(--ease-pop), opacity 0.3s ease, box-shadow 0.3s ease;
}

.tool:active:not(:disabled) {
  transform: scale(0.94);
}

.tool:disabled {
  opacity: 0.35;
  cursor: default;
}

.tool.is-done {
  opacity: 0.3;
}

.tool__icon {
  position: relative;
  display: block;
  width: 34px;
  height: 26px;
}

/* 蜡烛盒 */
.tool__icon--box {
  border-radius: 3px;
  background: linear-gradient(180deg, #e8c9a0, #c69a6c);
  box-shadow: inset 0 0 0 1.5px rgba(90, 55, 25, 0.45);
}

.tool__icon--box::before,
.tool__icon--box::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: repeating-linear-gradient(-45deg, #fff5e6 0 3px, #f6c46a 3px 6px);
}

.tool__icon--box::before { left: 10px; }
.tool__icon--box::after { left: 20px; }

/* 火柴 */
.tool__icon--match {
  width: 34px;
  height: 26px;
}

.tool__icon--match::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 11px;
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: #e8d6bb;
  transform: rotate(-18deg);
  box-shadow: 0 0 0 1.2px rgba(90, 55, 25, 0.35);
}

.tool__icon--match::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ff9b6a, #c1442c);
}

/* 蜡烛未插上 / 已插上 */
.candle {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-26px) scale(0.7);
  transition:
    opacity 0.4s ease,
    transform 0.55s var(--ease-pop);
}

.candle.is-placed {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.number-candle {
  opacity: 0;
  transform: translateX(-50%) translateY(-26px) scale(0.7);
  transition: opacity 0.5s ease, transform 0.6s var(--ease-pop);
}

.number-candle.is-placed {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}