:root {
  --ink: #4a3d6b;
  --ink-soft: #6f6390;
  --purple: #6b4fbf;
  --lilac: #9b7bff;
  --lilac-soft: #e3d9ff;
  --pink: #ff5fa2;
  --pink-soft: #ffc2dc;
  --pink-pale: #ffe3f0;
  --card: rgba(255, 255, 255, .86);
  --bg: linear-gradient(170deg, #fde7f3 0%, #e9e4ff 48%, #dcefff 100%);
  --font: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #f3e9fb;
  background-image: var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
b { font-weight: 800; }
q { quotes: "「" "」"; }
.pink { color: var(--pink); }

/* 背景圆点 */
.sparkles {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.95) 1.4px, transparent 2px);
  background-size: 26px 26px; opacity: .55;
}

/* 顶部进度 */
.progress { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,.5); }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--lilac)); border-radius: 0 4px 4px 0; transition: width .5s ease; }

/* 幻灯片 */
.slide {
  position: fixed; inset: 0; z-index: 1;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden; transform: translateY(26px);
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.slide.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .5s ease, visibility 0s; z-index: 2; }
.slide__inner {
  position: relative;
  width: min(100%, 460px); min-height: 100%; margin: 0 auto;
  padding: max(36px, env(safe-area-inset-top)) 22px max(34px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: center;
}
.slide__inner.center { text-align: center; align-items: center; }

/* 逐个浮现 */
.js .r { opacity: 0; transform: translateY(16px); }
.slide.is-active .r { animation: rise .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * .14s + .15s); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* 文字 */
.eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: .22em; color: var(--lilac); font-weight: 700; }
h2 { margin: 0 0 14px; font-size: clamp(23px, 6.6vw, 28px); line-height: 1.4; color: var(--purple); font-weight: 800; }
p { margin: 0 0 12px; font-size: 16px; line-height: 1.85; }
.aside { font-size: 14px; color: var(--ink-soft); }
.center-text { text-align: center; }
.shout { font-size: clamp(30px, 9vw, 40px); font-weight: 900; color: var(--pink); letter-spacing: .04em; line-height: 1.3; }
.wish { font-size: clamp(21px, 6vw, 25px); font-weight: 800; color: var(--purple); line-height: 1.6; padding: 14px 18px; background: var(--card); border-radius: 18px; box-shadow: 0 4px 0 var(--lilac-soft); text-align: center; }
.big-num {
  margin: 6px 0 10px; font-size: clamp(72px, 22vw, 96px); font-weight: 900; line-height: 1;
  color: #fff; -webkit-text-stroke: 3px var(--lilac); text-shadow: 5px 5px 0 var(--pink-soft);
  font-variant-numeric: tabular-nums;
}
.big-num small { font-size: .5em; margin-left: 4px; }

/* 蕾丝、蝴蝶结 */
.lace { position: absolute; top: 0; left: 0; right: 0; height: 14px; margin: 0; background: radial-gradient(circle at 7px 0, #fff 7px, transparent 7.5px) 0 0/14px 14px repeat-x; }
.bow { font-size: 34px; text-align: center; margin: 0 0 6px; animation: wobble 2.6s ease-in-out infinite; }
@keyframes wobble { 50% { transform: rotate(-8deg) scale(1.06); } }

/* 按钮 */
.btn {
  align-self: center; margin-top: 18px;
  padding: 13px 30px; border: 0; border-radius: 999px;
  background: #fff; color: var(--pink); font-weight: 800; font-size: 16px;
  box-shadow: 0 6px 0 var(--pink-soft), 0 10px 24px rgba(255,95,162,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--pink-soft), 0 4px 12px rgba(255,95,162,.2); }
.btn--main { background: linear-gradient(90deg, #ff7cb4, #a98bff); color: #fff; box-shadow: 0 6px 0 #d9b8ff, 0 12px 26px rgba(155,123,255,.3); }
.skip { align-self: center; margin-top: 16px; background: none; border: 0; color: var(--ink-soft); font-size: 13px; padding: 8px; }

/* 打字机开场 */
.typewriter { min-height: 330px; }
.typewriter p { margin: 0 0 10px; font-size: 17px; }
.typewriter .tw-big { font-size: clamp(25px, 7.4vw, 30px); font-weight: 900; color: var(--purple); margin-bottom: 4px; }
.typewriter .tw-pink { color: var(--pink); font-weight: 800; }
.js .typewriter [data-line] { visibility: hidden; }
.js .typewriter [data-line].is-typed { visibility: visible; }
.caret::after { content: "▍"; color: var(--pink); animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 封面 */
.cover-title { margin: 6px 0 8px; font-size: clamp(44px, 14vw, 58px); line-height: 1.2; color: var(--purple); font-weight: 900; }
.cover-title span { display: inline-block; margin-top: 6px; font-size: .48em; color: #fff; background: linear-gradient(90deg, var(--pink), var(--lilac)); padding: 4px 14px; border-radius: 999px; }
.cover-sub { font-size: 18px; font-weight: 700; }
.meta { margin: 8px 0 0; width: 100%; max-width: 320px; background: var(--card); border-radius: 18px; padding: 8px 18px; box-shadow: 0 4px 0 var(--lilac-soft); }
.meta div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--lilac-soft); font-size: 14px; }
.meta div:last-child { border-bottom: 0; }
.meta dt { color: var(--ink-soft); }
.meta dd { margin: 0; font-weight: 800; text-align: right; }

/* 被折叠的朋友圈 */
.moment { background: #fff; border-radius: 18px; padding: 14px 16px 10px; margin-bottom: 10px; box-shadow: 0 4px 0 var(--lilac-soft); }
.moment__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.moment__avatar { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, var(--pink-soft), var(--lilac-soft)); font-size: 20px; }
.moment__head b { display: block; font-size: 15px; color: #576b95; }
.moment__head small { font-size: 12px; color: var(--ink-soft); }
.moment__body { position: relative; max-height: 4.6em; overflow: hidden; transition: max-height .9s cubic-bezier(.2,.8,.2,1); }
.moment__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em; background: linear-gradient(transparent, #fff); transition: opacity .5s ease; }
.moment__body p { margin: 0 0 8px; font-size: 15px; }
.moment__body .shout { font-size: 34px; margin: 2px 0 6px; }
.moment.is-open .moment__body { max-height: 640px; }
.moment.is-open .moment__body::after { opacity: 0; }
.moment__more { border: 0; background: none; padding: 4px 0; color: #576b95; font-size: 15px; font-weight: 700; }
.moment.is-open .moment__more { display: none; }
.moment:not(.is-open) .moment__more { animation: nudge 1.4s ease-in-out infinite; }

/* 引用气泡 */
.bubble-quote { position: relative; background: #fff; border-radius: 18px 18px 18px 4px; padding: 14px 16px; margin: 4px 0 16px; font-size: 17px; font-weight: 700; line-height: 1.7; box-shadow: 0 4px 0 var(--lilac-soft); }
.bubble-quote__date { display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); }

/* 卡片 */
.card { background: var(--card); border-radius: 18px; padding: 13px 16px; margin-bottom: 12px; box-shadow: 0 4px 0 var(--lilac-soft); }
.card p { margin: 0; font-size: 15px; line-height: 1.75; }
.card .card__title { font-weight: 800; margin-bottom: 4px; font-size: 16px; }

/* 列表 */
.list { margin: 0 0 14px; padding: 0; list-style: none; }
.list li { position: relative; padding: 8px 12px 8px 30px; margin-bottom: 8px; background: var(--card); border-radius: 14px; font-size: 15px; line-height: 1.6; }
.list li::before { content: "✦"; position: absolute; left: 11px; color: var(--pink); }
.comfy { margin: 0 0 16px; padding: 0; list-style: none; }
.comfy li { display: inline-block; margin: 0 6px 8px 0; padding: 7px 13px; background: #fff; border-radius: 999px; font-size: 14px; box-shadow: 0 3px 0 var(--pink-soft); }
.stats { margin: 0 0 16px; padding: 0; list-style: none; }
.stats li { display: flex; flex-direction: column; padding: 10px 14px; margin-bottom: 8px; background: var(--card); border-radius: 14px; border-left: 4px solid var(--lilac); }
.stats span { font-size: 12px; color: var(--ink-soft); }
.stats b { font-size: 15px; line-height: 1.6; }
.bushi { transition: opacity .4s ease; }
.slide.is-active .bushi { text-decoration: line-through; text-decoration-color: var(--pink); text-decoration-thickness: 3px; opacity: .45; transition-delay: 1.4s; }

/* 时间线 */
.timeline { margin: 0 0 14px; padding: 0 0 0 18px; list-style: none; border-left: 3px dotted var(--lilac); }
.timeline li { position: relative; margin-bottom: 14px; font-size: 15px; line-height: 1.7; }
.timeline li::before { content: ""; position: absolute; left: -27px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px #fff; }
.timeline span { display: block; font-size: 12px; font-weight: 800; color: var(--lilac); letter-spacing: .08em; }

/* flag */
.clocks { display: flex; flex-wrap: wrap; gap: 8px; }
.clocks span { background: #fff; padding: 6px 12px; border-radius: 12px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 3px 0 var(--lilac-soft); }
.meter { position: relative; height: 38px; margin: 6px 0 18px; border-radius: 999px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 2px var(--lilac-soft); }
.meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: repeating-linear-gradient(135deg, var(--pink-soft) 0 10px, var(--pink-pale) 10px 20px); }
.slide.is-active .meter i { animation: meter 2.4s 1s ease-in-out both; }
@keyframes meter { 0% { width: 0; } 55% { width: 72%; } 100% { width: 28%; } }
.meter span { position: relative; display: grid; place-items: center; height: 100%; font-size: 14px; font-weight: 800; }

/* 小测验 */
.quiz { display: grid; gap: 10px; }
.opt { text-align: left; border: 0; background: #fffc; border-radius: 16px; padding: 13px 16px; font-size: 17px; font-weight: 700; box-shadow: 0 3px 0 var(--lilac-soft); }
.opt.is-wrong { animation: shake .45s ease; background: #f1edf8; color: #a49bbd; }
.opt.is-right { background: var(--pink-pale); color: var(--pink); box-shadow: 0 3px 0 var(--pink-soft); }
.opt.is-right::after { content: " ✨"; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.quiz-hint { min-height: 26px; margin: 10px 0 0; }
.reveal-box { animation: rise .6s ease both; margin-top: 4px; display: flex; flex-direction: column; }
.reveal-box .btn { align-self: center; }

/* 泡泡 */
.bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 10px; margin: 6px 0 4px; }
.pop {
  width: 100px; height: 100px; border: 0; border-radius: 50%; padding: 6px;
  font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--purple);
  background: radial-gradient(circle at 32% 28%, #fff 0 12%, rgba(255,255,255,.55) 22%, rgba(220,205,255,.55) 62%, rgba(255,184,218,.75) 100%);
  box-shadow: inset -6px -8px 16px rgba(155,123,255,.25), 0 6px 16px rgba(155,123,255,.18);
  animation: bob 3s ease-in-out infinite;
}
.pop:nth-child(2n) { animation-delay: -.8s; animation-duration: 3.4s; }
.pop:nth-child(3n) { animation-delay: -1.6s; animation-duration: 2.8s; }
@keyframes bob { 50% { transform: translateY(-7px); } }
.pop.is-popped {
  width: 100%; height: auto; border-radius: 14px; padding: 10px 14px;
  background: #fff; color: var(--pink); font-size: 14px; text-align: left;
  box-shadow: 0 3px 0 var(--pink-soft); animation: burst .45s ease both; cursor: default;
}
@keyframes burst { 0% { transform: scale(1.25); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pop.is-popped small { display: block; color: var(--ink-soft); font-weight: 500; font-size: 12px; text-decoration: line-through; }

/* 结尾 */
.slide--final .shout { font-size: clamp(26px, 8vw, 34px); white-space: nowrap; text-align: center; }
.wishes { margin: 0 0 16px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wishes li { background: var(--card); border-radius: 14px; padding: 10px 12px; font-size: 15px; font-weight: 700; box-shadow: 0 3px 0 var(--lilac-soft); }
.signature { text-align: right; font-weight: 800; color: var(--purple); margin-top: 6px; }

/* 蛋糕仪式 */
.slide--cake::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 58%, rgba(255,190,110,.28) 0, rgba(30,18,52,0) 26%), rgba(24,14,44,.9);
  opacity: 0; transition: opacity 1.2s ease;
}
.slide--cake.is-dark::before { opacity: 1; }
.slide--cake.is-dark .cake-copy h2 { color: #fff3c9; }
.slide--cake.is-dark .cake-copy p, .slide--cake.is-dark .cake-copy .eyebrow, .slide--cake.is-dark .cut-hint { color: #e8dcff; }
.slide--cake.is-dark .skip { color: #cbbcf0; }

.cake-stage { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; --blow: 0; }
.cake-stage [data-for], .note, .cut-hint, .filling { display: none; }
.cake-stage[data-step="intro"] [data-for~="intro"],
.cake-stage[data-step="note"] [data-for~="note"],
.cake-stage[data-step="blow"] [data-for~="blow"],
.cake-stage[data-step="lit"] [data-for~="lit"],
.cake-stage[data-step="cut"] [data-for~="cut"] { display: block; animation: rise .55s ease both; }
.cake-stage[data-step="note"] .note { display: block; animation: rise .55s ease both; }
.cake-stage[data-step="note"] .note-actions { display: flex; flex-direction: column; align-items: center; }
.cake-stage[data-step="lit"] .cut-hint { display: block; animation: nudge 1.4s ease-in-out infinite; }
.cake-stage[data-step="cut"] .filling { display: block; }
.cake-copy { min-height: 128px; }
.cake-copy h2 { transition: color 1s ease; }
.cake-actions { position: relative; min-height: 76px; display: flex; flex-direction: column; align-items: center; }
@keyframes nudge { 50% { transform: translateY(-4px); } }

/* 愿望纸条 */
.note { width: 100%; max-width: 320px; margin: 0 auto 8px; padding: 14px 16px; background: #fffbe8; border-radius: 6px; color: #5a4a2a; text-align: left; box-shadow: 0 8px 22px rgba(0,0,0,.25); transform: rotate(-1.5deg); }
.note label { font-weight: 800; font-size: 15px; }
.note textarea { width: 100%; margin: 8px 0 6px; padding: 8px 0; border: 0; border-bottom: 2px dashed #e0cf9a; background: transparent; font: inherit; font-size: 16px; color: #3a3226; resize: none; outline: none; }
.note small { font-size: 12px; color: #8a7a5a; line-height: 1.5; display: block; }
.cake-stage .note.is-folding { display: block; animation: fold-away .9s ease-in forwards; }
@keyframes fold-away { 40% { transform: scale(.55, .2) rotate(8deg); border-radius: 50%; } 100% { transform: translate(0, 170px) scale(.05) rotate(220deg); opacity: 0; } }

/* 蛋糕本体 */
.cake-wrap { position: relative; width: 240px; height: 230px; margin: 6px auto 4px; touch-action: none; user-select: none; -webkit-user-select: none; }
.cake { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.cake::before { content: ""; position: absolute; left: 50%; top: 4px; width: 220px; height: 150px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 40%, rgba(255,205,120,.55), transparent 65%); opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.is-dark .cake::before { opacity: calc(1 - var(--blow)); }
.cake__plate { position: absolute; left: 13px; bottom: 2px; width: 214px; height: 24px; border-radius: 50%; background: #e9dcff; box-shadow: 0 8px 18px rgba(107,79,191,.16); }
.cake__body { position: absolute; left: 33px; bottom: 18px; width: 174px; height: 94px; border-radius: 10px 10px 28px 28px; background: linear-gradient(90deg, #f4a9cb, #ffd0e4 48%, #e996bd); box-shadow: inset -12px 0 22px rgba(160,60,110,.12), 0 16px 32px rgba(107,79,191,.14); overflow: hidden; }
.cake__dots { position: absolute; inset: 34px 0 0; background: radial-gradient(circle, #fff 3px, transparent 3.5px) 0 0/22px 22px; opacity: .75; }
.cake__necklace { position: absolute; left: 14px; right: 14px; top: 8px; height: 26px; border-bottom: 3px dotted #fff7c2; border-radius: 0 0 50% 50%; }
.cake__necklace i { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); font-style: normal; font-size: 16px; }
.cake__top { position: absolute; left: 33px; bottom: 94px; width: 174px; height: 42px; border-radius: 50%; background: #fff6fb; box-shadow: inset 0 -8px 0 #d9c9ff; }
.cake__icing { position: absolute; z-index: 2; left: 37px; bottom: 79px; width: 166px; height: 32px; background: radial-gradient(circle at 12px 0, #fff6fb 0 15px, transparent 16px) 0 0/34px 32px repeat-x; }
.cake__boba { position: absolute; z-index: 3; right: -2px; bottom: 6px; font-size: 34px; transform: rotate(8deg); }
.candle { position: absolute; z-index: 4; left: calc(50% + var(--x)); bottom: 120px; width: 13px; height: 52px; border-radius: 5px; transform: translateX(-50%); background: repeating-linear-gradient(135deg, #fff 0 7px, #b89cff 7px 14px); box-shadow: 0 2px 8px rgba(83,39,120,.18); }
.candle em { position: absolute; left: 50%; top: 56px; transform: translateX(-50%); font-style: normal; font-size: 11px; font-weight: 800; white-space: nowrap; color: var(--purple); background: #fff; padding: 1px 6px; border-radius: 999px; z-index: 5; }
.flame { position: absolute; left: 50%; bottom: 48px; width: 17px; height: 27px; border-radius: 60% 40% 55% 45%; transform: translateX(-50%) rotate(4deg); transform-origin: 50% 100%; background: radial-gradient(circle at 50% 70%, #fff7b5 0 22%, #ffbd52 24% 58%, #ff6f8f 62%); box-shadow: 0 0 18px #ffcc70, 0 0 35px rgba(255,170,91,.6); animation: flicker .85s ease-in-out infinite alternate; scale: calc(1 - var(--blow) * .85); opacity: calc(1 - var(--blow) * .5); }
.candle:nth-child(2) .flame { animation-delay: -.3s; }
.candle:nth-child(3) .flame { animation-delay: -.6s; }
.cake-stage.is-blowing .flame { animation-duration: .18s; }
.smoke { position: absolute; left: 50%; bottom: 58px; width: 8px; height: 8px; border: 2px solid rgba(200,190,220,.6); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; opacity: 0; }
@keyframes flicker { to { transform: translateX(-50%) rotate(-5deg) scale(.9, 1.08); } }
.cake-stage.is-out .flame { display: none; }
.cake-stage.is-out .smoke { animation: smoke 1.8s ease-out both; }
.cake-stage.is-out .candle:nth-child(2) .smoke { animation-delay: .15s; }
.cake-stage.is-out .candle:nth-child(3) .smoke { animation-delay: .3s; }
@keyframes smoke { 0% { opacity: 0; transform: translate(-50%,0) scale(.5); } 25% { opacity: .7; } 100% { opacity: 0; transform: translate(-70%,-70px) scale(2); } }

/* 愿望星星 */
.wish-star { position: absolute; z-index: 6; left: 50%; bottom: 60px; font-size: 22px; transform: translateX(-50%); opacity: 0; }
.wish-star.is-in { animation: star-in 1s ease both; }
@keyframes star-in { 0% { opacity: 0; transform: translate(-50%, -160px) scale(2.2) rotate(-90deg); } 70% { opacity: 1; } 100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); } }

/* 长按吹气按钮 */
.blow-hold { position: relative; overflow: hidden; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.blow-hold::before { content: ""; position: absolute; inset: 0; width: calc(var(--blow) * 100%); background: rgba(255,255,255,.4); }

/* 歌词 */
.lyrics { min-height: 34px; margin-top: 4px; font-size: 18px; font-weight: 800; color: var(--pink); }
.lyrics.is-swap { animation: rise .45s ease both; }

/* 切蛋糕 */
.cut-hint { margin: 0 0 6px; font-size: 14px; color: var(--ink-soft); }
.cake--half { pointer-events: none; }
.cake--left { clip-path: inset(-60px 50% 0 -40px); }
.cake--right { clip-path: inset(-60px -40px 0 50%); }
.cake-wrap.is-cut .cake--left { transform: translateX(-34px) rotate(-6deg); }
.cake-wrap.is-cut .cake--right { transform: translateX(34px) rotate(6deg); }
.cake-wrap::after { content: ""; position: absolute; z-index: 8; left: 50%; top: -10px; width: 3px; height: 0; background: linear-gradient(#fff, #d8ccff); border-radius: 2px; box-shadow: 0 0 10px #fff; transform: translateX(-50%); }
.cake-wrap.is-cutting::after { animation: knife .45s ease-in forwards; }
@keyframes knife { 0% { height: 0; opacity: 1; } 80% { height: 240px; opacity: 1; } 100% { height: 240px; opacity: 0; } }
.filling { position: absolute; z-index: 1; left: 50%; top: 92px; width: 120px; margin-left: -60px; padding: 10px 8px; border-radius: 14px; background: #fff; box-shadow: 0 4px 0 var(--pink-soft); font-size: 13px; line-height: 1.5; color: var(--ink); animation: burst .6s .35s ease both; }
.filling b { display: block; color: var(--pink); font-size: 16px; }

/* 报告卡片弹窗 */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: rgba(40,24,70,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: rise .35s ease both; }
.modal__box { width: min(100%, 380px); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; }
.modal__img { width: 100%; border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.35); -webkit-touch-callout: default; }
.modal__tip { margin: 14px 0 0; color: #fff; font-weight: 800; }
.modal .skip { color: #e8dcff; }

/* 彩带 */
.confetti { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 15px; border-radius: 3px; animation: fall var(--t, 2.6s) cubic-bezier(.25,.6,.4,1) forwards; }
@keyframes fall { to { transform: translate3d(var(--dx, 0), 110vh, 0) rotate(var(--rot, 540deg)); opacity: .9; } }

/* 音乐按钮 */
.sound-toggle { position: fixed; z-index: 25; top: max(14px, env(safe-area-inset-top)); right: 14px; display: flex; align-items: center; gap: 5px; padding: 7px 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--purple); font-size: 13px; font-weight: 700; box-shadow: 0 3px 0 var(--lilac-soft); }
.sound-toggle[aria-pressed="true"] span:first-child { display: inline-block; animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}