/* ============================================================
 * 「生日的一天」—— 浪漫星空夜色主题
 * 深蓝紫夜空 + 星光 + 烫金文字，零图片依赖
 * ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: #eef0ff;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(124, 92, 255, .28), transparent 60%),
    radial-gradient(900px 600px at 12% 108%, rgba(59, 130, 246, .20), transparent 60%),
    radial-gradient(700px 500px at 50% 55%, rgba(255, 158, 195, .07), transparent 65%),
    linear-gradient(180deg, #070b21 0%, #0b1030 42%, #140b2e 78%, #1a0f2e 100%);
  background-attachment: fixed;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

#bg-canvas, #fx-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
#bg-canvas { z-index: 1; }
#fx-canvas { z-index: 6; }

#app {
  position: relative; z-index: 10;
  height: 100dvh; min-height: 100vh;
  transition: opacity .38s ease;
}
#app.fading { opacity: 0; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
}
.topbar.hidden { display: none; }
.topbar-right { display: flex; gap: 10px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(245, 212, 137, .35);
  background: rgba(10, 14, 40, .55);
  color: #f5d489; font-size: 19px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.icon-btn:active { transform: scale(.9); box-shadow: 0 0 14px rgba(245, 212, 137, .45); }

/* ---------- 场景 ---------- */
.scene {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 22px calc(30px + env(safe-area-inset-bottom));
  text-align: center;
  overflow-y: auto;
}
.scene.narrow { justify-content: flex-start; }

.chapter-title {
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-size: clamp(24px, 6vw, 34px);
  color: #f5d489;
  text-shadow: 0 0 18px rgba(245, 212, 137, .45), 0 2px 12px rgba(0,0,0,.5);
  letter-spacing: .12em; font-weight: 600;
}
.chapter-title::after {
  content: ""; display: block; width: 56px; height: 1px; margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, rgba(245,212,137,.8), transparent);
}
.lead { margin-top: 14px; color: #c6cdf4; font-size: 15.5px; line-height: 1.9; max-width: 34em; }
.lead.dim { color: #8d96c9; }
.hint { margin-top: 10px; color: #8d96c9; font-size: 13px; letter-spacing: .06em; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 30px;
  border-radius: 999px; border: none; cursor: pointer;
  font-size: 16px; letter-spacing: .1em; font-family: inherit;
  color: #2a1c05;
  background: linear-gradient(135deg, #ffe9b0, #f3c86b 55%, #e2a94f);
  box-shadow: 0 4px 22px rgba(243, 200, 107, .35), inset 0 1px 0 rgba(255,255,255,.6);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s;
}
.btn:active { transform: scale(.96); }
.btn.ghost {
  background: rgba(12, 16, 46, .5); color: #e8d9a0;
  border: 1px solid rgba(245, 212, 137, .4);
  box-shadow: none; backdrop-filter: blur(6px);
}
.btn.small { min-height: 38px; padding: 8px 18px; font-size: 13.5px; }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn.link-like { background: none; border: none; box-shadow: none; color: #9aa3d4; font-size: 13.5px; min-height: 36px; padding: 6px 10px; text-decoration: underline; text-underline-offset: 4px; }

.continue-bar {
  position: fixed; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom));
  display: flex; justify-content: center; z-index: 30;
}
.continue-btn { animation: pulse 1.8s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 4px 22px rgba(243,200,107,.35); }
  50% { box-shadow: 0 6px 34px rgba(243,200,107,.65), 0 0 18px rgba(255,233,176,.4); }
}

/* ---------- 打字机 ---------- */
.typing::after {
  content: "▍"; color: #f5d489; animation: caret 1s steps(1) infinite;
  margin-left: 2px;
}
@keyframes caret { 50% { opacity: 0; } }

/* ---------- 通用入场动画 ---------- */
.fade-up { animation: fadeUp .7s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.pop-in { animation: popIn .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes popIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* ============================================================
 * 首页 / 菜单
 * ============================================================ */
.home-hero { position: relative; height: 190px; width: 100%; max-width: 420px; }
.moon {
  position: absolute; top: 18px; right: 34px;
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fffbe9, #ffe9ad 55%, #e9c976);
  box-shadow: 0 0 40px rgba(255, 231, 166, .55), 0 0 120px rgba(255, 231, 166, .25);
  animation: moonGlow 5s ease-in-out infinite;
}
@keyframes moonGlow { 50% { box-shadow: 0 0 56px rgba(255,231,166,.7), 0 0 150px rgba(255,231,166,.3); } }
.cloud {
  position: absolute; height: 10px; border-radius: 999px;
  background: rgba(120, 130, 220, .25); filter: blur(3px);
}
.home-title {
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-size: clamp(30px, 8vw, 44px); letter-spacing: .18em;
  color: #f5d489; font-weight: 700;
  text-shadow: 0 0 24px rgba(245,212,137,.5), 0 3px 14px rgba(0,0,0,.55);
}
.home-sub { margin-top: 14px; color: #aab3e6; font-size: 14.5px; letter-spacing: .14em; }
.home-sub b { color: #ffe1a6; font-weight: 600; }
.home-actions { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; align-items: center; }

.section-label {
  margin: 34px 0 14px; color: #8d96c9; font-size: 12.5px; letter-spacing: .34em;
}
.chapters-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; width: 100%; max-width: 430px;
}
.chapter-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 14px 16px; border-radius: 16px; text-align: left;
  background: rgba(16, 21, 58, .55);
  border: 1px solid rgba(255, 255, 255, .08);
  cursor: pointer; font-family: inherit; color: inherit;
  transition: transform .15s ease, border-color .2s, box-shadow .2s;
}
.chapter-card:active { transform: scale(.96); }
.chapter-card:hover { border-color: rgba(245, 212, 137, .5); box-shadow: 0 6px 24px rgba(124, 92, 255, .2); }
.chapter-card .cc-emoji { font-size: 26px; }
.chapter-card .cc-name { color: #f0e6c8; font-size: 15px; letter-spacing: .08em; }
.chapter-card .cc-desc { color: #8d96c9; font-size: 12px; line-height: 1.6; }
.home-foot { margin-top: 34px; color: #6f78a8; font-size: 12.5px; }
.home-foot a { color: #a8b2e8; text-decoration: none; border-bottom: 1px dashed rgba(168,178,232,.5); padding-bottom: 2px; }

/* ============================================================
 * 开场
 * ============================================================ */
.intro-for { color: #8d96c9; letter-spacing: .5em; font-size: 13px; margin-bottom: 18px; text-indent: .5em; }
.intro-name {
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-size: clamp(44px, 13vw, 76px); color: #ffe9b0; font-weight: 700;
  letter-spacing: .1em;
  text-shadow: 0 0 30px rgba(255, 223, 137, .55), 0 4px 18px rgba(0,0,0,.5);
}
.intro-date { margin-top: 16px; color: #aab3e6; letter-spacing: .3em; font-size: 14px; }
.intro-tap {
  margin-top: 66px; color: #8d96c9; font-size: 13.5px; letter-spacing: .2em;
  animation: softBlink 2.2s ease-in-out infinite;
}
@keyframes softBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ============================================================
 * 章节 1：吹灭蜡烛前
 * ============================================================ */
.cake-scene { margin-top: 12px; display: flex; flex-direction: column; align-items: center; }
.cake-wrap { position: relative; width: min(78vw, 320px); padding-top: 74px; }
.candles-row {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 5vw, 26px);
}
.candle { position: relative; width: 11px; height: 58px; border-radius: 4px 4px 2px 2px;
  background: repeating-linear-gradient(135deg, #fff 0 6px, #ffb1cf 6px 12px);
  box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: pointer;
}
.candle::after { content: ""; position: absolute; top: -6px; left: 50%; width: 2px; height: 7px; margin-left: -1px; background: #5a4632; }
.flame {
  position: absolute; top: -26px; left: 50%; width: 16px; height: 22px;
  margin-left: -8px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 72%, #fff8dd 0%, #ffd35e 42%, #ff8c2b 78%, rgba(255,120,40,0) 100%);
  opacity: 0; transform: scale(.2); transform-origin: 50% 100%;
  transition: opacity .3s, transform .35s cubic-bezier(.2,1.6,.4,1);
  pointer-events: none;
}
.candle.lit .flame { opacity: 1; transform: scale(1); animation: flicker .28s ease-in-out infinite alternate; }
@keyframes flicker {
  from { transform: scale(1) rotate(-2deg); }
  to   { transform: scale(1.12, .94) rotate(2.5deg); }
}
.candle.lit { cursor: default; }
.smoke {
  position: absolute; top: -30px; left: 50%; width: 10px; height: 10px; border-radius: 50%;
  background: rgba(200, 205, 230, .5); filter: blur(3px);
  animation: smokeRise 1.6s ease-out forwards; pointer-events: none;
}
@keyframes smokeRise {
  from { opacity: .8; transform: translate(-50%, 0) scale(.6); }
  to   { opacity: 0; transform: translate(-50%, -56px) scale(2.2); }
}
.cake { position: relative; width: 100%; }
.plate {
  height: 22px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, #dfe6ff, #97a2d8 70%, #6b76ab);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  margin-top: -10px;
}
.layer { margin: 0 auto; border-radius: 12px; position: relative; }
.layer.bottom {
  width: 100%; height: 74px;
  background: linear-gradient(180deg, #b06a7e, #8d4a63 55%, #733b56);
  box-shadow: inset 0 -12px 22px rgba(0,0,0,.28);
}
.layer.mid {
  width: 78%; height: 62px; margin-top: -6px;
  background: linear-gradient(180deg, #c98ba0, #a35f7c 60%, #8d4a63);
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.25);
}
.frosting {
  position: absolute; top: -8px; left: 0; right: 0; height: 22px;
  background:
    radial-gradient(14px 14px at 12% 100%, #fff6ef 98%, transparent),
    radial-gradient(14px 14px at 30% 100%, #fff6ef 98%, transparent),
    radial-gradient(14px 14px at 48% 100%, #fff6ef 98%, transparent),
    radial-gradient(14px 14px at 66% 100%, #fff6ef 98%, transparent),
    radial-gradient(14px 14px at 84% 100%, #fff6ef 98%, transparent),
    linear-gradient(#fff6ef, #ffe9dc);
  border-radius: 12px 12px 0 0;
}
.wish-phase .scene-dim { opacity: .55; filter: saturate(.7); }

.blow-ui { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.blow-ring { position: relative; width: 96px; height: 96px; }
.blow-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.blow-ring .ring-bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 5; }
.blow-ring .ring-fg { fill: none; stroke: #ffd98e; stroke-width: 5; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255,217,142,.8)); transition: stroke-dashoffset .1s linear; }
.blow-ring .blow-center {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 34px; pointer-events: none;
}
.blow-ring button { position: absolute; inset: 0; border-radius: 50%; background: transparent; border: none; cursor: pointer; }
.mode-switch { margin-top: 2px; }

/* ============================================================
 * 章节 2：问答挑战
 * ============================================================ */
.progress-hearts { display: flex; gap: 8px; margin-bottom: 22px; font-size: 18px; }
.progress-hearts .heart { opacity: .25; filter: grayscale(.6); transition: all .4s; }
.progress-hearts .heart.done { opacity: 1; filter: none; transform: scale(1.15); text-shadow: 0 0 12px rgba(255,140,170,.8); }
.quiz-card { width: 100%; max-width: 480px; margin: 0 auto; }
.q-emoji { font-size: 40px; margin-bottom: 14px; }
.q-text {
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-size: clamp(19px, 5vw, 24px); color: #f4f1ff; line-height: 1.8; letter-spacing: .05em;
  min-height: 2.4em;
}
.options { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }
.opt-btn {
  min-height: 52px; padding: 13px 20px; border-radius: 14px;
  background: rgba(22, 28, 70, .6); color: #dfe3ff;
  border: 1px solid rgba(255,255,255,.12); cursor: pointer;
  font-size: 16px; font-family: inherit; letter-spacing: .04em;
  transition: transform .15s, border-color .2s, background .2s;
}
.opt-btn:hover { border-color: rgba(245,212,137,.55); }
.opt-btn:active { transform: scale(.97); }
.opt-btn.correct { background: rgba(74, 222, 128, .16); border-color: rgba(110, 231, 150, .7); color: #c8ffd9; }
.opt-btn.wrong { background: rgba(255, 120, 120, .13); border-color: rgba(255, 150, 150, .5); color: #ffd4d4; animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.answer-input {
  width: 100%; min-height: 52px; margin-top: 26px; padding: 12px 18px;
  border-radius: 14px; text-align: center; font-size: 17px; font-family: inherit;
  background: rgba(22, 28, 70, .6); color: #f4f1ff;
  border: 1px solid rgba(255,255,255,.16); outline: none;
}
.answer-input:focus { border-color: rgba(245,212,137,.6); box-shadow: 0 0 0 3px rgba(245,212,137,.12); }
.reveal-card {
  margin-top: 26px; padding: 20px 22px; border-radius: 18px;
  background: rgba(255, 224, 178, .08);
  border: 1px solid rgba(245, 212, 137, .35);
  animation: fadeUp .6s ease both;
}
.reveal-card .rv-tag { color: #f5d489; font-size: 12.5px; letter-spacing: .3em; margin-bottom: 10px; }
.reveal-card .rv-answer { font-size: 19px; color: #ffe9b0; font-weight: 600; margin-bottom: 10px; }
.reveal-card .rv-note { color: #c6cdf4; font-size: 14.5px; line-height: 1.9; }
.score-line { margin-top: 8px; color: #aab3e6; font-size: 14px; letter-spacing: .08em; }

/* ============================================================
 * 章节 3：回忆星图
 * ============================================================ */
.starmap-wrap { position: relative; width: 100%; max-width: 480px; height: min(66vh, 480px); margin-top: 6px; }
canvas.starmap { width: 100%; height: 100%; display: block; }
.memory-card {
  width: min(86vw, 340px); border-radius: 20px; overflow: hidden;
  background: rgba(13, 18, 52, .92);
  border: 1px solid rgba(245, 212, 137, .3);
  box-shadow: 0 18px 60px rgba(0,0,0,.6), 0 0 40px rgba(124, 92, 255, .15);
  animation: popIn .5s cubic-bezier(.2, 1.3, .4, 1) both;
}
.memory-card .m-photo { width: 100%; height: 210px; object-fit: cover; display: block; background: #0a0e2a; }
.memory-card .m-emoji-card {
  height: 210px; display: flex; align-items: center; justify-content: center; font-size: 74px;
  background: radial-gradient(circle at 50% 40%, rgba(124,92,255,.35), rgba(10,14,42,.4));
}
.memory-card .m-body { padding: 18px 22px 22px; }
.memory-card .m-date { color: #f5d489; font-size: 13px; letter-spacing: .28em; margin-bottom: 8px; }
.memory-card .m-text { color: #e2e6ff; font-size: 15.5px; line-height: 1.9; }

/* ---------- 覆盖层 / 弹窗 ---------- */
.overlay-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(4, 6, 20, .72); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 26px;
  animation: ovIn .3s ease both;
}
@keyframes ovIn { from { opacity: 0; } }
.overlay-actions { margin-top: 20px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: rgba(13, 18, 52, .95); color: #ffe9b0;
  border: 1px solid rgba(245,212,137,.4); border-radius: 999px;
  padding: 10px 22px; font-size: 14px; z-index: 60; white-space: nowrap;
  animation: toastIn .3s ease both;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ============================================================
 * 章节 4：理想的小日子
 * ============================================================ */
.act-dots { display: flex; gap: 8px; margin: 16px 0 6px; }
.act-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); transition: all .3s; }
.act-dots i.on { background: #ffd98e; box-shadow: 0 0 10px rgba(255,217,142,.9); }
.act-area { width: 100%; max-width: 420px; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.big-emoji { font-size: 88px; line-height: 1.1; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.big-emoji.bounce { animation: bounce .9s ease infinite alternate; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-14px) rotate(-3deg); } }
.hearts-float { position: relative; width: 100%; height: 40px; }
.hearts-float span {
  position: absolute; left: 50%; bottom: 0; font-size: 20px;
  animation: heartUp 1.6s ease-out forwards;
}
@keyframes heartUp {
  from { opacity: 1; transform: translate(0, 0) scale(.7); }
  to { opacity: 0; transform: translate(var(--dx, 0px), -110px) scale(1.3); }
}
.garden { display: flex; gap: 26px; align-items: flex-end; padding-bottom: 6px; }
.stem { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.stem .plant { font-size: 44px; transition: transform .5s cubic-bezier(.2,1.6,.4,1); }
.stem.grown .plant { animation: bloom .7s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes bloom { 0% { transform: scale(.4) rotate(-14deg); } 100% { transform: scale(1) rotate(0); } }
.stem .pot { width: 44px; height: 22px; border-radius: 4px 4px 10px 10px; background: linear-gradient(#c98a63, #96603f); }
.bubble {
  margin-top: 6px; padding: 10px 16px; border-radius: 14px;
  background: rgba(255, 224, 178, .12); border: 1px solid rgba(245,212,137,.4);
  color: #ffe9b0; font-size: 14px; max-width: 300px; line-height: 1.8;
  animation: popIn .5s ease both;
}
.mini-cake-stage { position: relative; width: min(80vw, 300px); }
.toppings { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; justify-content: center; }
.topping-btn {
  width: 54px; height: 54px; border-radius: 50%; font-size: 24px;
  background: rgba(22, 28, 70, .6); border: 1px solid rgba(255,255,255,.14);
  cursor: pointer; transition: transform .15s;
}
.topping-btn:active { transform: scale(.88); }
.topping-on-cake { position: absolute; font-size: 22px; animation: dropIn .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-40px) scale(1.6); } to { opacity: 1; transform: none; } }

/* ============================================================
 * 章节 5：解谜寻宝
 * ============================================================ */
.keyring { display: flex; gap: 10px; margin: 4px 0 26px; font-size: 24px; }
.keyring .key { opacity: .18; filter: grayscale(1); transition: all .45s; }
.keyring .key.got { opacity: 1; filter: none; text-shadow: 0 0 14px rgba(255,217,142,.9); transform: rotate(-8deg) scale(1.12); }
.clue-card {
  width: 100%; max-width: 460px; padding: 26px 24px; border-radius: 20px;
  background: rgba(16, 21, 58, .6); border: 1px solid rgba(255,255,255,.1);
}
.clue-idx { color: #f5d489; font-size: 12.5px; letter-spacing: .3em; margin-bottom: 12px; }
.clue-text { color: #f4f1ff; font-size: 17px; line-height: 1.95; }
.answer-form { margin-top: 22px; display: flex; gap: 10px; width: 100%; }
.answer-form input { flex: 1; }
.try-hint { margin-top: 14px; color: #9aa3d4; font-size: 13.5px; min-height: 1.6em; }
.try-hint.hint-on { color: #ffd98e; }
.chest { font-size: 96px; cursor: pointer; transition: transform .2s; }
.chest:active { transform: scale(.94); }
.chest.open { animation: chestPop .7s cubic-bezier(.2,1.5,.4,1) both; cursor: default; }
@keyframes chestPop { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(4deg); } 100% { transform: scale(1); } }
.gift-place {
  margin-top: 20px; padding: 16px 24px; border-radius: 16px; display: inline-block;
  background: rgba(255, 217, 142, .1); border: 1px dashed rgba(245, 212, 137, .55);
  color: #ffe9b0; font-size: 17px; letter-spacing: .05em;
  animation: fadeUp .7s ease both;
}

/* ============================================================
 * 终章
 * ============================================================ */
.finale-title {
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  font-size: clamp(30px, 8.5vw, 50px); color: #ffe9b0; font-weight: 700; letter-spacing: .14em;
  text-shadow: 0 0 34px rgba(255, 217, 142, .6), 0 4px 20px rgba(0,0,0,.5);
}
.photo-stack { position: relative; width: min(78vw, 340px); aspect-ratio: 4/5; margin: 26px auto 0; }
.photo-stack img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 18px; opacity: 0; transition: opacity 1.1s ease;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.photo-stack img.show { opacity: 1; }
.finale-msg {
  margin: 26px auto 0; max-width: 34em; color: #e2e6ff; font-size: 16px; line-height: 2.15;
  white-space: pre-wrap; letter-spacing: .04em; text-align: left;
}
.voice-btn { margin-top: 26px; }
.signature { margin-top: 30px; color: #aab3e6; font-size: 14.5px; letter-spacing: .2em; }
.finale-actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ============================================================
 * 向导页 wizard.html
 * ============================================================ */
body.wizard-body { overflow-y: auto; }
.wizard-shell { max-width: 760px; margin: 0 auto; padding: 26px 18px 120px; }
.wz-head { text-align: center; padding: 14px 0 6px; }
.wz-head h1 { font-family: "Noto Serif SC", "Songti SC", "SimSun", serif; color: #f5d489; font-size: 26px; letter-spacing: .2em; font-weight: 600; }
.wz-head p { color: #8d96c9; font-size: 13px; margin-top: 8px; letter-spacing: .1em; }
.wz-steps { display: flex; gap: 8px; overflow-x: auto; padding: 16px 2px 10px; scrollbar-width: none; }
.wz-steps::-webkit-scrollbar { display: none; }
.wz-step-chip {
  flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; font-size: 13px;
  background: rgba(16, 21, 58, .6); color: #9aa3d4;
  border: 1px solid rgba(255,255,255,.1); cursor: pointer; white-space: nowrap;
}
.wz-step-chip.on { color: #2a1c05; background: linear-gradient(135deg, #ffe9b0, #e2a94f); border-color: transparent; font-weight: 600; }
.wz-panel { display: none; animation: fadeUp .4s ease both; }
.wz-panel.on { display: block; }
.wz-panel h2 { color: #f0e6c8; font-size: 19px; margin: 18px 0 6px; letter-spacing: .1em; }
.wz-panel .wz-tip { color: #8d96c9; font-size: 13px; line-height: 1.9; margin-bottom: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; color: #c6cdf4; font-size: 14px; margin-bottom: 8px; letter-spacing: .05em; }
.field label em { color: #f5d489; font-style: normal; margin-left: 4px; }
.field input[type=text], .field input[type=date], .field textarea, .field select {
  width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 15px; font-family: inherit;
  background: rgba(16, 21, 58, .7); color: #f4f1ff;
  border: 1px solid rgba(255,255,255,.14); outline: none;
}
.field textarea { min-height: 110px; line-height: 1.9; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: rgba(245,212,137,.6); }
.field .sub-tip { color: #72789f; font-size: 12px; margin-top: 6px; line-height: 1.7; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border-radius: 14px; background: rgba(16,21,58,.5); border: 1px solid rgba(255,255,255,.08); margin-bottom: 16px; }
.switch-row .sw-label { color: #e2e6ff; font-size: 15px; }
.switch { position: relative; width: 52px; height: 30px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; z-index: 2; margin: 0; }
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.15); transition: background .25s; }
.switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #cfd5f5; transition: transform .25s, background .25s;
}
.switch input:checked + .track { background: rgba(243, 200, 107, .8); }
.switch input:checked + .track::after { transform: translateX(22px); background: #fff; }
.item-card {
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
  background: rgba(16, 21, 58, .45); padding: 16px; margin-bottom: 14px;
}
.item-card .item-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.item-card .item-idx { color: #f5d489; font-size: 13px; letter-spacing: .2em; }
.item-card .item-del { background: none; border: none; color: #ff9b9b; font-size: 13px; cursor: pointer; padding: 4px 6px; }
.opt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.opt-row input[type=radio] { accent-color: #f3c86b; width: 18px; height: 18px; flex: 0 0 auto; }
.opt-row input[type=text] { flex: 1; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-family: inherit;
  background: rgba(10, 14, 40, .7); color: #f4f1ff; border: 1px solid rgba(255,255,255,.12); outline: none; }
.add-btn { width: 100%; padding: 12px; border-radius: 12px; border: 1px dashed rgba(245,212,137,.5);
  background: none; color: #e8d9a0; font-size: 14px; cursor: pointer; font-family: inherit; }
.photo-thumb-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.photo-thumb { position: relative; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb .del {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,.65); color: #ff9b9b; border: none; font-size: 11px; cursor: pointer; line-height: 1;
}
.photo-thumb .move { position: absolute; bottom: 3px; left: 3px; right: 3px; display: flex; justify-content: space-between; }
.photo-thumb .move button { background: rgba(0,0,0,.55); color: #ffe9b0; border: none; border-radius: 6px; font-size: 10px; padding: 2px 6px; cursor: pointer; }
.rec-ui { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.rec-time { color: #ffd98e; font-size: 15px; min-width: 52px; font-variant-numeric: tabular-nums; }
.rec-note { color: #72789f; font-size: 12px; margin-top: 10px; line-height: 1.8; }
.wz-bottom {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  background: rgba(7, 10, 30, .92); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: center; gap: 12px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
}
.wz-bottom .btn { min-width: 130px; }
.size-meter { text-align: center; color: #72789f; font-size: 12px; margin-top: 14px; }
.size-meter.warn { color: #ffb28c; }

/* ---------- 桌面端微调 ---------- */
@media (min-width: 700px) {
  body { user-select: text; -webkit-user-select: text; }
  .scene { padding-top: 80px; }
}