/* =========================================================================
   主题舞台样式（片头 22 种 + 片尾 28 种）
   ========================================================================= */

/* --------------------------------- 舞台 --------------------------------- */

.th-stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #14131f;
}
.th-bg { position: absolute; inset: 0; z-index: 0; }
.th-bg img, .th-bg > img { width: 100%; height: 100%; object-fit: cover; }
.th-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.5)); pointer-events: none; }
.th-scrim--soft { background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.42)); }
.th-canvas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.th-layer { position: relative; z-index: 3; }
.th-layer.th-center,
.th-layer.th-scroll {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 32px 24px; text-align: center;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.th-layer.th-scroll { justify-content: flex-start; }
.th-bg2 { position: absolute; inset: 0; z-index: 1; }
.th-bg2 img { width: 100%; height: 100%; object-fit: contain; }

/* --------------------------------- 组件 --------------------------------- */

.th-card {
  max-width: 320px; padding: 20px 18px; border-radius: 16px;
  background: rgba(255,255,255,.9); color: #3a2a33;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  animation: thUp .7s cubic-bezier(.22,1,.36,1) both;
}
.th-card--paper { background: rgba(255,252,248,.96); }
.th-card--dark  { background: rgba(24,22,34,.62); color: #fff; backdrop-filter: blur(6px); }
/* 磨砂玻璃：用深色磨砂而非浅色，保证在任意底图（尤其浅色图）上白字都可读 */
.th-card--glass { background: rgba(26,22,38,.46); color: #fff; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.22); text-shadow: 0 1px 4px rgba(0,0,0,.35); }
/* 浅色底（樱花 / 生日等）专用：奶白底 + 深字，保证可读 */
.th-card--light { background: rgba(255,255,255,.88); color: #4a2b38; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 12px 32px rgba(180,90,120,.16); }
.th-card__title { font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.th-card__text  { font-size: 15px; line-height: 1.9; white-space: pre-wrap; }

.th-btn {
  padding: 11px 30px; border-radius: 999px; font-size: 15px;
  transition: transform .16s, box-shadow .16s;
}
.th-btn:active { transform: scale(.96); }
.th-btn--solid { background: linear-gradient(135deg,#ff7aa8,#e64340); color: #fff; box-shadow: 0 8px 22px rgba(230,67,64,.35); }
.th-btn--ghost { background: rgba(30,26,44,.34); color: #fff; border: 1px solid rgba(255,255,255,.38); backdrop-filter: blur(8px); }
/* 浅色底上的次级按钮：浅底 + 玫瑰色字 */
.th-btn--ghostlight { background: rgba(255,255,255,.82); color: #c1395f; border: 1px solid rgba(193,57,95,.3); }

.th-foot { position: absolute; left: 0; right: 0; bottom: 42px; z-index: 4; display: flex; justify-content: center; }
.th-foot--row { flex-direction: row; gap: 12px; }
/* 恒贴舞台底部：.th-stage 是纵向 flex，用 margin-top:auto 顶到底 */
.th-endbar {
  display: flex; gap: 12px; justify-content: center;
  padding: 0 20px 30px; margin-top: auto;
  position: relative; z-index: 4;
}
.th-tip { font-size: 13px; color: #fff; margin-top: 10px; animation: thPulse 2s ease-in-out infinite; text-shadow: 0 1px 5px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.4); }
.th-tip--light { color: rgba(255,255,255,.92); }
/* 白/浅底上的提示文字用深色 */
.th-tip--dark { color: rgba(120,78,94,.85); text-shadow: none; }

@keyframes thUp { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }
@keyframes thPulse { 0%,100% { opacity: .55 } 50% { opacity: 1 } }
@keyframes thFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes thBeat { 0%,100% { transform: scale(1) } 14% { transform: scale(1.16) } 28% { transform: scale(1) } 42% { transform: scale(1.12) } }
@keyframes thSpin { to { transform: rotate(360deg) } }
@keyframes thPop { from { opacity: 0; transform: scale(.4) } 70% { transform: scale(1.08) } to { opacity: 1; transform: scale(1) } }

/* -------------------------------- 红包 -------------------------------- */

.th-redbag { position: relative; width: 250px; display: flex; flex-direction: column; align-items: center; animation: thUp .8s both; }
.th-redbag__top { width: 250px; height: 250px; border-radius: 22px; background: linear-gradient(160deg,#ff6b6b,#d32f2f); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 18px 40px rgba(198,40,40,.4); }
.th-redbag__top img { width: 86%; height: 86%; object-fit: cover; border-radius: 14px; }
.th-redbag__glyph { font-size: 96px; color: #ffe08a; font-weight: 600; }
.th-redbag__open { margin-top: -34px; width: 130px; height: 130px; border-radius: 50%; background: linear-gradient(160deg,#ffd75e,#f0a500); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(240,165,0,.5); transition: transform .5s; }
.th-redbag__seal { font-size: 26px; font-weight: 600; color: #a33; }
.th-redbag__seal--big { position: absolute; top: 96px; font-size: 44px; color: #ffe08a; }
.th-redbag__tip { font-size: 11px; color: #7a3b00; margin-top: 2px; }
.th-redbag.is-open .th-redbag__open { transform: scale(.7) translateY(20px); opacity: 0; }
.th-redbag--bless { cursor: pointer; }
.th-redbag__cloud { position: absolute; inset: -20px; background: radial-gradient(circle at 30% 20%, rgba(255,224,138,.5), transparent 60%); pointer-events: none; }

/* ------------------------------- 擦黑板 ------------------------------- */

.th-board { position: relative; width: 100%; max-width: 340px; height: 300px; border-radius: 14px; border: 10px solid #6b4a2a; overflow: hidden; background: #3a4a42; box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.th-board__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; font-size: 17px; line-height: 2; color: #f4efe0; text-align: center; white-space: pre-wrap; font-family: "Kaiti SC", "STKaiti", "PingFang SC", serif; }
.th-board__dust { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }

/* -------------------------------- 蛋糕 -------------------------------- */

.th-cake { position: relative; width: 200px; height: 170px; animation: thUp .8s both; }
.th-cake__base { position: absolute; bottom: 0; left: 0; right: 0; height: 76px; border-radius: 12px 12px 16px 16px; background: linear-gradient(180deg,#fff1f5,#ffd9e4); box-shadow: 0 12px 26px rgba(230,67,64,.22); }
.th-cake__base::after { content: ''; position: absolute; top: 22px; left: 0; right: 0; height: 12px; background: #ff9ec4; }
.th-cake__top { position: absolute; bottom: 68px; left: 16px; right: 16px; height: 54px; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg,#fff6f9,#ffe0ea); }
.th-cake__candles { position: absolute; bottom: 118px; left: 0; right: 0; display: flex; justify-content: center; gap: 30px; }
.th-cake__candles i { width: 7px; height: 32px; border-radius: 4px; background: repeating-linear-gradient(180deg,#ff7aa8 0 6px,#fff 6px 12px); position: relative; }
.th-cake__candles i::after { content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 9px; height: 13px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 70%,#fff2a8,#ff9b2f); box-shadow: 0 0 12px rgba(255,170,60,.9); animation: thPulse 1.4s infinite; }
.th-cake.is-blow .th-cake__candles i::after { opacity: 0; transform: translateX(-50%) translateY(-8px); transition: all .6s; box-shadow: none; }

/* -------------------------------- 信封 -------------------------------- */

.th-env { position: relative; width: 260px; height: 330px; cursor: pointer; }
.th-env__letter { position: absolute; left: 14px; right: 14px; bottom: 40px; top: 90px; border-radius: 10px; background: #fffdf8; padding: 18px 16px; box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(90px) scale(.94); opacity: 0; transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .5s; overflow: hidden; }
.th-env.is-open .th-env__letter { transform: translateY(-30px); opacity: 1; }
.th-env__title { font-size: 16px; font-weight: 600; margin-bottom: 8px; color: #8a2740; }
.th-env__text { font-size: 13.5px; line-height: 1.85; color: #5a4a50; white-space: pre-wrap; max-height: 120px; overflow: hidden; }
.th-env__pic { width: 100%; height: 70px; object-fit: cover; border-radius: 6px; margin-top: 8px; }
.th-env__front { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; border-radius: 12px; background: linear-gradient(160deg,#ffe0c2,#f7c49a); box-shadow: 0 12px 28px rgba(180,120,60,.28); }
.th-env__flap { position: absolute; top: 0; left: 0; right: 0; height: 0; border-left: 130px solid transparent; border-right: 130px solid transparent; border-top: 92px solid #f0b47f; transition: transform .5s; transform-origin: top; }
.th-env.is-open .th-env__flap { transform: rotateX(180deg); }
.th-env__seal { position: absolute; top: 62px; left: 50%; transform: translateX(-50%); width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(160deg,#ff7a7a,#d32f2f); color: #ffe08a; font-size: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(198,40,40,.4); }

/* ------------------------------- 拖拽图 ------------------------------- */

.th-drag { position: relative; width: 100%; max-width: 330px; height: 330px; border-radius: 16px; overflow: hidden; }
.th-drag__hidden { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 22px; background: linear-gradient(160deg,#ffe9f2,#fff6fa); border-radius: 16px; }
.th-drag__cover { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg,#ffb3cd,#e64340); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; cursor: grab; touch-action: none; transition: opacity .5s; box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.th-drag__cover img { width: 100%; height: 100%; object-fit: cover; }
.th-drag__cover.is-away { opacity: 0; pointer-events: none; }

/* ------------------------------- 电脑信封 ------------------------------ */

.th-pc { width: 100%; max-width: 340px; animation: thUp .7s both; }
.th-pc__screen { border-radius: 12px; border: 10px solid #4a4a63; background: #101322; padding: 18px; min-height: 190px; box-shadow: 0 16px 36px rgba(0,0,0,.45); }
.th-pc__lines { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 2; color: #7ce0a8; white-space: pre-wrap; text-align: left; }
.th-pc__stand { width: 96px; height: 12px; margin: 0 auto; background: #4a4a63; border-radius: 0 0 6px 6px; }
.th-pc__stand::after { content: ''; display: block; width: 140px; height: 9px; margin-left: -22px; background: #565672; border-radius: 6px; }

/* -------------------------------- 微信 -------------------------------- */

.th-wx { flex: 1 1 auto; display: flex; flex-direction: column; z-index: 3; width: 100%; }
.th-wx__head { padding: 14px; text-align: center; font-size: 15px; color: #333; background: rgba(255,255,255,.9); border-bottom: 1px solid #eaeaea; }
.th-wx__list { flex: 1 1 auto; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.th-wx__row { display: flex; gap: 9px; align-items: flex-start; animation: thUp .45s both; }
.th-wx__row.is-me { flex-direction: row-reverse; }
.th-wx__ava { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex: none; background: #eee; }
.th-wx__bub { max-width: 74%; padding: 11px 14px; border-radius: 4px 14px 14px 14px; background: #fff; color: #222; font-size: 14.5px; line-height: 1.7; box-shadow: 0 3px 10px rgba(0,0,0,.07); white-space: pre-wrap; }
.th-wx__row.is-me .th-wx__bub { border-radius: 14px 4px 14px 14px; background: #95ec69; color: #15320a; }
.th-wx__ask { padding: 12px 14px 20px; display: flex; gap: 10px; background: rgba(255,255,255,.9); }

/* -------------------------------- 来电 -------------------------------- */

.th-call { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 3; }
.th-call__ava { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255,255,255,.5); animation: thBeat 1.8s infinite; }
.th-call__ava img { width: 100%; height: 100%; object-fit: cover; }
.th-call__name { color: #fff; font-size: 22px; font-weight: 500; }
.th-call__status { color: rgba(255,255,255,.66); font-size: 14px; }
.th-call__ring { font-size: 54px; animation: thBeat 1s infinite; }
.th-call .th-foot-row { display: flex; gap: 12px; justify-content: center; }

/* ------------------------------- 简约大标 ------------------------------ */

.th-big { font-size: 30px; line-height: 1.7; color: #fff; font-weight: 500; text-shadow: 0 3px 16px rgba(0,0,0,.35); white-space: pre-wrap; max-width: 300px; }

/* -------------------------------- 爱情树 ------------------------------ */

.th-tree { position: relative; width: 220px; height: 230px; }
.th-tree__trunk { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 90px; border-radius: 8px; background: linear-gradient(180deg,#b1834f,#8a5f33); }
.th-tree__crown { position: absolute; top: 0; left: 0; right: 0; height: 160px; }
.th-leaf { position: absolute; width: 46px; height: 46px; border-radius: 50% 0 50% 50%; background: radial-gradient(circle at 30% 30%,#ff9ec4,#e64340); transform-origin: center; animation: thPop .7s both; }
.th-leaf:nth-child(1){left:84px;top:20px}
.th-leaf:nth-child(2){left:38px;top:44px;animation-delay:.06s}
.th-leaf:nth-child(3){left:130px;top:44px;animation-delay:.12s}
.th-leaf:nth-child(4){left:14px;top:80px;animation-delay:.18s}
.th-leaf:nth-child(5){left:154px;top:80px;animation-delay:.24s}
.th-leaf:nth-child(6){left:60px;top:72px;animation-delay:.3s}
.th-leaf:nth-child(7){left:110px;top:72px;animation-delay:.36s}
.th-leaf:nth-child(8){left:36px;top:112px;animation-delay:.42s}
.th-leaf:nth-child(9){left:132px;top:112px;animation-delay:.48s}
.th-leaf:nth-child(10){left:84px;top:96px;animation-delay:.54s}
.th-leaf:nth-child(11){left:8px;top:116px;animation-delay:.6s}
.th-leaf:nth-child(12){left:162px;top:116px;animation-delay:.66s}
.th-leaf:nth-child(13){left:60px;top:126px;animation-delay:.72s}
.th-leaf:nth-child(14){left:112px;top:126px;animation-delay:.78s}

/* ------------------------------- 表情包 -------------------------------- */

.th-emoji { position: absolute; inset: 0; pointer-events: none; }
.th-emoji__item { position: absolute; width: 54px; height: 54px; object-fit: contain; border-radius: 14px; animation: thPop .55s both; filter: drop-shadow(0 6px 12px rgba(0,0,0,.14)); }

/* ------------------------------- 协议书 -------------------------------- */

.th-proto { width: 100%; max-width: 320px; border-radius: 14px; background: #fffdf8; padding: 20px 18px; box-shadow: 0 14px 34px rgba(0,0,0,.14); text-align: left; }
.th-proto__head { text-align: center; font-size: 17px; font-weight: 600; color: #8a4b1f; margin-bottom: 12px; letter-spacing: 4px; }
.th-proto__body { font-size: 13.5px; line-height: 2; color: #5a4a50; white-space: pre-wrap; min-height: 110px; }
.th-proto__sign { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; color: #8a4b1f; border-top: 1px dashed #e2d6c8; padding-top: 14px; cursor: pointer; }
.th-proto__check { width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid #d9b98c; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: transparent; }
.th-proto__check.is-on { background: #1d9e75; border-color: #1d9e75; color: #fff; }

/* -------------------------------- 信纸 -------------------------------- */

.th-letter { width: 100%; max-width: 320px; border-radius: 12px; background: #fffef9; padding: 24px 20px; box-shadow: 0 14px 34px rgba(0,0,0,.14); text-align: left; background-image: repeating-linear-gradient(180deg, transparent 0 27px, #f0e6d8 27px 28px); }
.th-letter__hd { font-size: 16px; font-weight: 600; color: #8a4b1f; margin-bottom: 10px; }
.th-letter__bd { font-size: 14px; line-height: 2; color: #4d4046; white-space: pre-wrap; }
.th-letter__pic { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; margin-top: 12px; }
.th-letter__sign { margin-top: 16px; text-align: right; font-size: 13px; color: #9a8878; }

/* ------------------------------- H5 祝福 ------------------------------- */

.th-h5 { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.th-h5__stage { position: relative; width: 250px; height: 250px; }
.th-h5__img { position: absolute; inset: 0; margin: auto; width: 130px; height: 130px; object-fit: cover; border-radius: 14px; opacity: 0; transform: scale(.7); box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.th-h5__img.is-fly { animation: thH5 1.6s both; }
@keyframes thH5 { 0% { opacity: 0; transform: scale(.7) } 35% { opacity: 1; transform: scale(1) } 80% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(1.06) } }

/* -------------------------------- 轮播 -------------------------------- */

.th-carousel { width: 100%; max-width: 320px; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 36px rgba(0,0,0,.3); background: #000; }
.th-carousel__track { display: flex; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.th-carousel__item { position: relative; flex: 0 0 100%; aspect-ratio: 3/4; }
.th-carousel__item img { width: 100%; height: 100%; object-fit: cover; }
.th-carousel__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 14px; font-size: 14px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.66)); text-align: center; }
.th-carousel__dots { display: flex; gap: 7px; justify-content: center; padding: 10px 0; }
.th-carousel__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.4); transition: all .3s; }
.th-carousel__dots i.is-on { width: 18px; border-radius: 4px; background: #ff7aa8; }

/* ------------------------------- 刮刮乐 -------------------------------- */

.th-scratch { position: relative; width: 100%; max-width: 320px; height: 190px; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 36px rgba(0,0,0,.28); }
.th-scratch__prize { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(140deg,#fff2d8,#ffd98f); }
.th-scratch__label { font-size: 13px; color: #a2731b; }
.th-scratch__val { font-size: 30px; font-weight: 600; color: #c0392b; }
.th-scratch__mask { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }

/* -------------------------------- 心跳 -------------------------------- */

.th-heartbeat { position: relative; width: 190px; height: 170px; display: flex; align-items: center; justify-content: center; }
.th-heartbeat--sm { width: 90px; height: 80px; margin-top: 10px; }
.th-heartbeat__shape { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%,#ff8fb1,#e64340); clip-path: path('M95 160 C30 118 0 84 0 56 C0 26 24 6 50 6 C70 6 88 18 95 36 C102 18 120 6 140 6 C166 6 190 26 190 56 C190 84 160 118 95 160 Z'); animation: thBeat 1.3s infinite; box-shadow: 0 0 40px rgba(230,67,64,.55); }
.th-heartbeat--sm .th-heartbeat__shape { animation-duration: 1.1s; }
.th-heartbeat__core { position: relative; z-index: 2; color: #fff; font-size: 15px; font-weight: 500; padding: 0 22px; text-align: center; line-height: 1.6; }

.th-wishes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.th-wishes span { padding: 7px 16px; border-radius: 999px; background: rgba(30,26,44,.34); color: #fff; font-size: 14px; border: 1px solid rgba(255,255,255,.38); backdrop-filter: blur(6px); animation: thPop .6s both; }
.th-wishes--low { margin-top: auto; padding-bottom: 6px; }

/* ------------------------------- 代码雨 -------------------------------- */

.th-term { width: 100%; max-width: 330px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(80,255,160,.3); background: rgba(3,20,12,.85); }
.th-term__bar { padding: 9px 12px; font-size: 12px; color: #4cd98a; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(80,255,160,.2); }
.th-term__body { padding: 18px 16px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 2; color: #b9ffd6; white-space: pre-wrap; text-align: left; }

/* -------------------------------- 雪景 -------------------------------- */

.th-gift { margin-top: 18px; font-size: 54px; cursor: pointer; animation: thFloat 2.4s infinite; display: flex; flex-direction: column; align-items: center; }
.th-gift.is-open { animation: none; }
.th-gift img { width: 150px; height: 150px; object-fit: contain; border-radius: 14px; }

/* ------------------------------ 竖向 / 时光轴 ------------------------------ */

.th-vitem { width: 100%; max-width: 320px; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.92); margin-bottom: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.2); animation: thUp .6s both; }
.th-vitem img { width: 100%; height: 150px; object-fit: cover; }
.th-vitem p { padding: 12px 14px; font-size: 14px; color: #4a3a42; line-height: 1.75; }

.th-tl { width: 100%; max-width: 330px; position: relative; padding: 8px 0; }
.th-tl::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.35); transform: translateX(-50%); }
.th-tl__row { position: relative; width: 50%; padding: 0 16px 18px 0; animation: thUp .6s both; }
.th-tl__row.is-r { margin-left: 50%; padding: 0 0 18px 16px; }
.th-tl__dot { position: absolute; right: -6px; top: 16px; width: 12px; height: 12px; border-radius: 50%; background: #ff7aa8; box-shadow: 0 0 0 4px rgba(255,122,168,.28); }
.th-tl__row.is-r .th-tl__dot { right: auto; left: -6px; }
.th-tl__card { border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.94); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.th-tl__card img { width: 100%; height: 86px; object-fit: cover; }
.th-tl__card p { padding: 8px 11px; font-size: 12.5px; color: #4a3a42; }

/* ------------------------------ 旋转星空 / 霓虹 ------------------------------ */

.th-ring { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.th-ring__i { position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); animation: thSpin 26s linear infinite; }
.th-ring__i:nth-child(2) { width: 290px; height: 290px; animation-duration: 40s; animation-direction: reverse; border-style: dashed; }
.th-ring__i:nth-child(3) { width: 130px; height: 130px; animation-duration: 18s; }

.th-neon { width: 190px; height: 175px; }
.th-neon__svg { width: 100%; height: 100%; }
.th-neon__glow { filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 24px currentColor); animation: thPulse 2.2s infinite; }

/* ------------------------------- 3D 爱心 ------------------------------- */

.th-heart3d { position: relative; width: 170px; height: 160px; display: flex; align-items: center; justify-content: center; }
.th-heart3d__a, .th-heart3d__b { position: absolute; width: 120px; height: 120px; background: linear-gradient(150deg,#ff8fb1,#c62828); transform: rotate(-45deg); border-radius: 0 0 0 12px; }
.th-heart3d__a { animation: thBeat 1.2s infinite; box-shadow: 0 14px 30px rgba(198,40,40,.45); }
.th-heart3d__b { background: linear-gradient(150deg,#ffd0de,#ff8fb1); transform: rotate(-45deg) translate(-8px,-8px); opacity: .55; }
.th-heart3d__a::before, .th-heart3d__a::after,
.th-heart3d__b::before, .th-heart3d__b::after { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: inherit; }
.th-heart3d__a::before, .th-heart3d__b::before { top: -60px; left: 0; }
.th-heart3d__a::after, .th-heart3d__b::after { top: 0; left: 60px; }
.th-heart3d__label { position: relative; z-index: 3; color: #fff; font-size: 14px; font-weight: 500; transform: rotate(0); }

/* ------------------------------- 3D 相册 ------------------------------- */

.th-cube { width: 190px; height: 190px; perspective: 800px; }
.th-cube__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: thSpin3D 16s linear infinite; }
@keyframes thSpin3D { to { transform: rotateY(360deg) rotateX(12deg) } }
.th-cube__face { position: absolute; width: 150px; height: 150px; left: 20px; top: 20px; border: 1px solid rgba(255,255,255,.35); overflow: hidden; border-radius: 8px; }
.th-cube__face img { width: 100%; height: 100%; object-fit: cover; }
.th-cube__face:nth-child(1) { transform: translateZ(75px) }
.th-cube__face:nth-child(2) { transform: rotateY(90deg) translateZ(75px) }
.th-cube__face:nth-child(3) { transform: rotateY(180deg) translateZ(75px) }
.th-cube__face:nth-child(4) { transform: rotateY(-90deg) translateZ(75px) }
.th-cube__face:nth-child(5) { transform: rotateX(90deg) translateZ(75px) }
.th-cube__face:nth-child(6) { transform: rotateX(-90deg) translateZ(75px) }

/* ------------------------------ 爱心触碰 ------------------------------ */

.th-touch { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.th-touch__h { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; background: radial-gradient(circle at 40% 35%,#ff9ec4,#e64340); clip-path: path('M13 24 C4 17 0 12 0 8 C0 3 4 0 7 0 C10 0 12 2 13 5 C14 2 16 0 19 0 C22 0 26 3 26 8 C26 12 22 17 13 24 Z'); animation: thTouchFade 1.1s both; }
@keyframes thTouchFade { 0% { opacity: 1; transform: scale(.5) } 100% { opacity: 0; transform: scale(1.5) translateY(-26px) } }

/* -------------------------------- 视频 -------------------------------- */

.th-video { width: 100%; max-width: 330px; border-radius: 14px; background: #000; box-shadow: 0 16px 36px rgba(0,0,0,.4); }

/* ------------------------------ 怦然心动 ------------------------------ */

.th-glow { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 320px; }
.th-glow span { font-size: 22px; font-weight: 600; color: #fff; text-shadow: 0 0 12px rgba(255,180,220,.9), 0 0 30px rgba(255,120,180,.7); animation: thPop .7s both; }

/* ------------------------------ 单图 / 双背景 ------------------------------ */

.th-single { width: 100%; max-width: 320px; height: 190px; object-fit: cover; border-radius: 14px; box-shadow: 0 14px 32px rgba(0,0,0,.3); }

/* ------------------------------- 录音贺卡 ------------------------------ */

.th-rec { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.th-rec__disc { width: 110px; height: 110px; border-radius: 50%; background: repeating-radial-gradient(circle, #2b2b3d 0 4px, #3b3b52 4px 8px); animation: thSpin 5s linear infinite; box-shadow: 0 0 0 8px rgba(255,255,255,.12); }
.th-rec__bars { display: flex; gap: 4px; align-items: flex-end; height: 40px; }
.th-rec__bars i { width: 4px; height: 8px; border-radius: 2px; background: #ff7aa8; transition: height .16s; }

/* ------------------------------ 满屏弹窗 ------------------------------ */

.th-pop { width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.th-pop__card { width: 100%; max-width: 300px; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.9); color: #3a2a33; font-size: 15px; line-height: 1.7; box-shadow: 0 10px 26px rgba(0,0,0,.2); animation: thPop .6s both; }

/* ------------------------------- 宇宙爱心 ------------------------------ */

.th-uni { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }
.th-uni__ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(180,160,255,.4); animation: thSpin 22s linear infinite; }
.th-uni__ring:nth-child(1) { width: 120px; height: 120px; }
.th-uni__ring:nth-child(2) { width: 170px; height: 170px; animation-duration: 34s; animation-direction: reverse; }
.th-uni__ring:nth-child(3) { width: 210px; height: 210px; animation-duration: 46s; }
.th-uni__heart { font-size: 44px; color: #ff8fb1; text-shadow: 0 0 22px rgba(255,140,190,.9); animation: thBeat 1.5s infinite; }

/* --------------------------- 全屏轮播 / 随机图文 --------------------------- */

.th-fs { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; }
.th-fs__track { flex: 1 1 auto; display: flex; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.th-fs__item { position: relative; flex: 0 0 100%; }
.th-fs__item img { width: 100%; height: 100%; object-fit: cover; }
.th-fs__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 18px; font-size: 16px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7)); text-align: center; }
.th-fs .th-carousel__dots { padding-bottom: 26px; }

.th-rand { position: absolute; inset: 0; z-index: 3; }
.th-rand__item { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; animation: thPop .6s both; }
.th-rand__item img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.th-rand__item span { font-size: 12px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); }

/* -------------------------------- 翻书 -------------------------------- */

.th-book { position: relative; width: 170px; height: 220px; perspective: 1200px; }
.th-book__page { position: absolute; inset: 0; border-radius: 6px 12px 12px 6px; overflow: hidden; background: #fffdf8; transform-origin: left center; transition: transform .85s cubic-bezier(.4,0,.3,1), opacity .6s; box-shadow: 0 10px 26px rgba(0,0,0,.3); }
.th-book__page img { width: 100%; height: 78%; object-fit: cover; }
.th-book__page p { padding: 10px 12px; font-size: 12.5px; color: #4a3a42; line-height: 1.6; }
.th-book__page.is-flip { transform: rotateY(-165deg); opacity: .25; }

/* ------------------------------ 通用输入框 ------------------------------ */

.th-input { flex: 1 1 auto; padding: 11px 14px; border-radius: 999px; background: #fff; font-size: 14px; color: #333; box-shadow: inset 0 0 0 1px #eee; }
.th-lock { display: flex; gap: 10px; margin-top: 14px; }

/* --------------------------------- 兜底 --------------------------------- */

.th-stage * { box-sizing: border-box; }

/* =========================================================================
   界面特效层
   ========================================================================= */

.fx-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.fx-canvas { position: absolute; inset: 0; z-index: 5; pointer-events: none; }

/* 飘动图 */
.fx-float__i, .fx-float__i--up {
  position: absolute; bottom: -80px; opacity: .9;
  animation: fxRise 7s linear infinite;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.2));
}
.fx-float__i--up { animation-name: fxRise, fxSway; animation-duration: 8s, 3s; animation-iteration-count: infinite, infinite; }
@keyframes fxRise { 0% { transform: translateY(0) } 100% { transform: translateY(calc(-100vh - 160px)) } }
@keyframes fxSway { 0%,100% { margin-left: -14px } 50% { margin-left: 14px } }

/* 点击特效 */
.fx-touch { z-index: 8; }
.fx-touch__txt {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 22px; color: #ff6b8a; text-shadow: 0 2px 10px rgba(255,107,138,.6);
  animation: fxTouch 1.1s ease-out both; white-space: nowrap;
}
.fx-touch__img {
  position: absolute; width: 46px; height: 46px; object-fit: contain;
  transform: translate(-50%, -50%);
  animation: fxTouch 1.1s ease-out both;
}
@keyframes fxTouch {
  0% { opacity: 1; scale: .5; translate: 0 0 }
  100% { opacity: 0; scale: 1.5; translate: 0 -34px }
}

/* 弹幕 */
.fx-barrage__i {
  position: absolute; left: 100%; white-space: nowrap;
  padding: 6px 16px; border-radius: 999px;
  background: rgba(30,26,44,.42); color: #fff; font-size: 14px;
  border: 1px solid rgba(255,255,255,.34); backdrop-filter: blur(4px);
  animation: fxBarrage 12s linear infinite;
}
.fx-barrage--v .fx-barrage__i { left: auto; top: 100%; animation: fxBarrageV 12s linear infinite; }
@keyframes fxBarrage { 0% { transform: translateX(0) } 100% { transform: translateX(calc(-100vw - 100%)) } }
@keyframes fxBarrageV { 0% { transform: translateY(0) } 100% { transform: translateY(calc(-100vh - 100%)) } }

/* 纪念日计时 */
.fx-anni { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 26px; z-index: 7; }
.fx-anni__title { font-size: 15px; color: #fff; opacity: .9; }
.fx-anni__names { font-size: 12px; color: #fff; opacity: .72; margin-top: 4px; }
.fx-anni__timer {
  margin-top: 8px; padding: 7px 18px; border-radius: 999px;
  font-family: ui-monospace, Menlo, monospace; font-size: 15px; letter-spacing: 1px;
  color: #fff; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(6px);
}