/* 思源宋体（Noto Serif SC）子集，只含页面用到的字，由 tools/build_font.py 生成 */
@font-face {
  font-family: "YS Serif";
  src: url("fonts/serif.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #F6F2EA;
  --card: #FCFAF6;
  --dusk-paper: #EEE8F0;
  --ink: #1F2B40;
  --ink-2: #4B5568;
  --muted: #8C92A1;
  --line: rgba(31, 43, 64, .14);
  --gold: #AE8F5B;
  --rose: #C48B87;
  --serif: "YS Serif", "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --wipe: cubic-bezier(.75, 0, .2, 1);
  /* 很淡的纸面细纹，叠在米白底上 */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.06'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
/* 1rem 由 index.html 头部的脚本按屏幕设置，这里是没跑脚本时的兜底 */
html {
  height: 100%;
  overflow: hidden;
  font-size: 10px;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  color-scheme: light;
}
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #E6E0D6;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
img { display: block; width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }
input, textarea { -webkit-user-select: text; user-select: text; }
a { color: inherit; text-decoration: none; }

/* 带字距的居中文字，用 padding-left 抵消末尾多出的字距 */
.eyebrow { font-size: 1.05rem; letter-spacing: .42em; padding-left: .42em; color: var(--ink-2); }
.label { font-size: 1.1rem; letter-spacing: .4em; padding-left: .4em; color: var(--gold); }
.sec-title { margin-top: 1rem; font-size: 2.8rem; font-weight: 500; line-height: 1.4; letter-spacing: .6em; padding-left: .6em; }

/* ---------- 整屏翻页 ---------- */
.deck, .petals {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 480px;
  margin: 0 auto;
}
.deck { overflow: hidden; background: #1C2133; box-shadow: 0 0 80px rgba(31, 43, 64, .1); }
.petals { z-index: 5; width: 100%; height: 100%; pointer-events: none; }

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  visibility: hidden;
  background: var(--grain), var(--paper);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.slide.current { visibility: visible; }
/* 翻页时压在下面那一屏逐渐变暗 */
.dim { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; height: 100%; background: #121826; opacity: 0; pointer-events: none; }

/* 普通屏的内容列：上下居中，左右最多 32rem 宽 */
.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(4.4rem + env(safe-area-inset-top)) max(2.8rem, calc(50% - 16rem)) calc(5.2rem + env(safe-area-inset-bottom));
  text-align: center;
}

/* ---------- 进场动画 ----------
   翻到某一屏时给它加 .active，带 data-a 的元素按 style 里的 --d 依次出现；
   离开后去掉 .active，元素瞬间复位，下次翻回来再播一遍。
   往回翻时加 .instant，直接显示成播完的样子。 */
.js [data-a] { opacity: 0; }
.js [data-a="up"] { transform: translate3d(0, 2.4rem, 0); }
.js [data-a="blur"] { transform: scale(1.12); filter: blur(.8rem); }
.js [data-a="grow"] { transform: scaleY(0); transform-origin: 50% 0; }
.js [data-a="char"] { display: inline-block; transform: translate3d(0, .5em, 0); filter: blur(.4rem); }
.js [data-split]:not(.split) { visibility: hidden; }
/* 照片和竖排文字用「揭开」的方式出现 */
.js [data-a^="wipe"] { opacity: 1; }
.js [data-a="wipe-r"] { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
.js [data-a="wipe-l"] { -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); }
.js [data-a="wipe-d"] { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); }
.js [data-a="wipe-u"] { -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); }
.js img[data-a^="wipe"], .js [data-a^="wipe"] > img { transform: scale(1.16); }

.js .active [data-a] {
  opacity: 1;
  transform: none;
  filter: none;
  -webkit-clip-path: inset(0);
  clip-path: inset(0);
  transition: opacity 1s var(--ease), transform 1.3s var(--ease), filter 1.2s var(--ease), -webkit-clip-path 1.3s var(--wipe), clip-path 1.3s var(--wipe);
  transition-delay: var(--d, 0s);
}
.js .active img[data-a^="wipe"], .js .active [data-a^="wipe"] > img {
  transform: none;
  transition: transform 2.6s var(--ease), -webkit-clip-path 1.3s var(--wipe), clip-path 1.3s var(--wipe);
  transition-delay: var(--d, 0s);
}
.js .active [data-a="char"] { transition-duration: .9s, 1.1s, 1s; }

/* 照片旁边错位的金线框：照片揭开后再滑出来 */
.framed { overflow: visible; background: none; isolation: isolate; }
.framed::before {
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid var(--gold);
  opacity: .55;
}
.framed-tl::before { top: -1.2rem; right: 1.2rem; bottom: 1.2rem; left: -1.2rem; }
.framed-br::before { top: 1.2rem; right: -1.2rem; bottom: -1.2rem; left: 1.2rem; }
.js .framed::before { opacity: 0; }
.js .framed-tl::before { transform: translate3d(1.2rem, 1.2rem, 0); }
.js .framed-br::before { transform: translate3d(-1.2rem, -1.2rem, 0); }
.js .active .framed::before {
  opacity: .55;
  transform: none;
  transition: opacity 1.2s var(--ease), transform 1.6s var(--ease);
  transition-delay: var(--d2, .6s);
}

.js .instant *, .js .instant *::before, .js .instant *::after { transition: none !important; animation: none !important; }

/* 照片 */
.ph { position: relative; }
.ph > img { position: relative; }
/* 叠在别的照片上的那张，加一圈纸色的边，像冲印出来的相片 */
.mat { padding: .5rem; background: var(--paper); box-shadow: 0 1.2rem 2.4rem rgba(31, 43, 64, .12); }

/* 双细线框，呼应纸质请柬的烫金边：封面和结尾照片上各一个 */
.frame {
  position: absolute;
  z-index: 1;
  top: calc(1.4rem + env(safe-area-inset-top));
  left: 1.4rem;
  right: 1.4rem;
  bottom: calc(1.4rem + env(safe-area-inset-bottom));
  border: 1px solid var(--frame);
  outline: 1px solid var(--frame-2);
  outline-offset: -.6rem;
  pointer-events: none;
}
.js .frame[data-a] { transition-duration: 2s; }
.s-cover .frame { --frame: rgba(174, 143, 91, .7); --frame-2: rgba(174, 143, 91, .4); }
.s-ending .frame { --frame: rgba(226, 204, 166, .6); --frame-2: rgba(226, 204, 166, .35); }

/* ---------- 1 封面 ---------- */
.s-cover { background: #C9D8E8; }
.cover-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
.s-cover.active .cover-img, .s-ending.active .ending-img { animation: drift 10s var(--ease) both; }
@keyframes drift { from { transform: scale(1.14); } to { transform: none; } }
.s-cover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(246, 242, 234, .62) 0%, rgba(246, 242, 234, .18) 30%, rgba(246, 242, 234, 0) 44%),
    linear-gradient(0deg, rgba(18, 26, 44, .4) 0%, rgba(18, 26, 44, 0) 22%);
}
.cover-text {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: calc(6.4rem + env(safe-area-inset-top));
  text-align: center;
}
.names {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.8rem;
  font-size: 3.8rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .16em;
}
.names span { padding-left: .16em; }
.names i { margin: 0 .7em; font-style: normal; font-weight: 300; font-size: .62em; color: var(--gold); }
.cover-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.4rem;
  font-size: 1.5rem;
  letter-spacing: .7em;
}
.cover-title::before, .cover-title::after { content: ""; width: 2.6rem; height: 1px; background: currentColor; opacity: .4; }
.cover-title::before { margin-right: 1.4rem; }
/* 末字后面自带 .7em 字距，右边的间隔扣掉这部分 */
.cover-title::after { margin-left: .35rem; }
.cover-date { margin-top: .8rem; font-size: 1.3rem; letter-spacing: .38em; padding-left: .38em; color: var(--ink-2); }

/* ---------- 2 邀请语 ---------- */
.s-hello .inner { padding-left: max(3.2rem, calc(50% - 15.6rem)); padding-right: max(3.2rem, calc(50% - 15.6rem)); }
.hello-lead { margin: 1.4rem 0 1.6rem; font-size: 2.6rem; font-weight: 600; line-height: 1.5; letter-spacing: .3em; padding-left: .3em; }
.hello-text p { font-size: 1.45rem; line-height: 2.2; letter-spacing: .1em; color: var(--ink-2); }
.hello-photo { margin: 3.6rem .4rem 0 1.2rem; }
.sign { margin-top: 3.4rem; font-size: 1.5rem; letter-spacing: .3em; padding-left: .3em; }
.sign small { display: block; margin-top: .2rem; font-size: 1.1rem; letter-spacing: .5em; padding-left: .5em; color: var(--muted); }

/* ---------- 3/4/6 照片章节 ---------- */
.chapter-rule {
  display: block;
  width: 1px;
  height: 3.6rem;
  margin: 0 auto 1.8rem;
  background: linear-gradient(rgba(174, 143, 91, 0), var(--gold));
}
.chapter-no { font-size: 1.2rem; letter-spacing: .3em; padding-left: .3em; color: var(--gold); }
.chapter-title { margin-top: .6rem; font-size: 3rem; font-weight: 500; line-height: 1.4; letter-spacing: .6em; padding-left: .6em; }
.chapter-en { margin-top: .4rem; font-size: 1rem; letter-spacing: .5em; padding-left: .5em; color: var(--muted); }

/* 两张照片错落叠放，空出来的一角放一句竖排的话 */
.collage { position: relative; height: 34rem; margin-top: 3.4rem; text-align: left; }
.collage .ph { position: absolute; }
.c-lake .p1 { left: 0; top: 0; width: 52%; }
.c-lake .p2 { right: 0; bottom: 0; width: 60%; }
.c-lake .vline { right: 9%; top: 1.6rem; }
.c-hill .p1 { right: 0; top: 0; width: 52%; }
.c-hill .p2 { left: 0; bottom: 0; width: 62%; }
.c-hill .vline { left: 10%; top: 1.4rem; }
.c-dusk .p1 { left: 0; top: 0; width: 72%; }
.c-dusk .p2 { right: 0; bottom: 0; width: 46%; }
.c-dusk .vline { left: 13%; top: 17.4rem; }
.c-dusk .vline p + p { margin-top: 1.2em; }

.vline {
  position: absolute;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .38em;
  color: var(--ink-2);
}
.vline p { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; }
.vline p + p { margin-right: 1.3rem; margin-top: 2.4em; }

/* ---------- 5 诗 ---------- */
.poem-row { display: flex; align-items: center; padding-left: 1.2rem; }
.poem-row .ph { flex: 0 0 64%; }
/* 竖排两列，从右往左读，第二列错落下移 */
.poem {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-start;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: .55em;
  color: var(--ink);
}
.poem p { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; }
.poem p + p { margin-right: 1.8rem; margin-top: 2.2em; }

.s-dusk { background: var(--grain), linear-gradient(180deg, var(--paper) 0%, var(--dusk-paper) 100%); }

/* ---------- 7 日期 ---------- */
.s-date { background: var(--grain), linear-gradient(180deg, var(--dusk-paper) 0%, var(--paper) 50%); }
/* 日历和回执卡片也用金色双细线，和封面的框是一套 */
.calendar {
  margin-top: 2.6rem;
  padding: 2.4rem 2.2rem 1.8rem;
  background: var(--card);
  border: 1px solid rgba(174, 143, 91, .4);
  outline: 1px solid rgba(174, 143, 91, .25);
  outline-offset: -.6rem;
  text-align: left;
}
.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 1.2rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.cal-month { font-size: 4.6rem; font-weight: 300; line-height: .9; }
.cal-meta { text-align: right; font-size: 1rem; line-height: 1.8; letter-spacing: .32em; color: var(--muted); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.cal-grid .wk { padding-bottom: .5rem; font-size: 1.1rem; color: var(--gold); }
.cal-grid .d { position: relative; height: 3.4rem; line-height: 3.4rem; font-size: 1.4rem; color: var(--ink-2); }
.cal-grid .d.on { color: var(--ink); font-weight: 700; }
.ring { position: absolute; left: 50%; top: 50%; width: 3.8rem; height: 3.8rem; margin: -1.9rem 0 0 -1.9rem; overflow: visible; }
.ring path {
  fill: none;
  stroke: var(--rose);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
}
.active .ring path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease) 1.5s; }
.cal-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: .16em;
  color: var(--ink-2);
}

.countdown { margin-top: 2.8rem; }
.cd-label { font-size: 1.2rem; letter-spacing: .3em; padding-left: .3em; color: var(--muted); }
/* 四组数字之间只用金色细竖线隔开 */
.cd { display: flex; justify-content: center; margin-top: 1.2rem; }
.cd div { width: 7.2rem; padding: .2rem 0; }
.cd div + div { border-left: 1px solid rgba(174, 143, 91, .35); }
.cd b { display: block; font-size: 3rem; font-weight: 300; line-height: 1.25; font-variant-numeric: tabular-nums; }
.cd span { font-size: 1rem; letter-spacing: .2em; padding-left: .2em; color: var(--muted); }

/* ---------- 8 宴请 ---------- */
.venue { display: flex; align-items: center; margin-top: 3.4rem; padding-left: 1.2rem; text-align: left; }
.venue .ph { flex: 0 0 47%; }
.details { flex: 1; padding-left: 2.2rem; }
.details > div + div { margin-top: 2.4rem; }
.details dt { font-size: 1.1rem; letter-spacing: .5em; color: var(--gold); }
.details dd { margin-top: .6rem; font-size: 1.6rem; line-height: 1.6; letter-spacing: .06em; }
.details small { display: block; margin-top: .4rem; font-size: 1.2rem; line-height: 1.7; letter-spacing: .04em; color: var(--ink-2); }

.actions { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1rem; margin-top: 4rem; }
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4.4rem;
  border: 1px solid var(--ink);
  background: transparent;
  font-size: 1.3rem;
  letter-spacing: .18em;
  padding-left: .18em;
  cursor: pointer;
}
.btn-solid { background: var(--ink); color: #fff; }
.btn:active { opacity: .7; }

/* ---------- 9 回执 ---------- */
.s-rsvp .scroll {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(4.6rem + env(safe-area-inset-bottom));
}
.rsvp-photo { flex: 1 0 15rem; position: relative; min-height: 15rem; background: #C9D8E8; }
.rsvp-photo img { position: absolute; top: 0; left: 0; height: 100%; object-fit: cover; object-position: 50% 62%; }
.rsvp-card {
  position: relative;
  flex: none;
  margin: -4rem 1.8rem 0;
  padding: 2.6rem 2.2rem 2.2rem;
  background: var(--card);
  box-shadow: 0 2rem 5rem rgba(31, 43, 64, .1);
  outline: 1px solid rgba(174, 143, 91, .3);
  outline-offset: -.9rem;
  text-align: center;
}
.s-rsvp .sec-title { margin-top: .4rem; font-size: 2.6rem; }
.rsvp-tip { margin-top: .6rem; font-size: 1.2rem; letter-spacing: .04em; color: var(--ink-2); }

.form { margin-top: 1.6rem; text-align: left; }
.row { display: flex; align-items: center; min-height: 4rem; }
.row + .row { margin-top: 1.1rem; }
.row-top { align-items: flex-start; }
.row-label { flex: 0 0 4.6rem; font-size: 1.3rem; line-height: 1.3; letter-spacing: .2em; color: var(--ink-2); }
.row-label small { display: block; margin-top: .2rem; font-size: 1rem; letter-spacing: .1em; color: var(--muted); }
.row-top .row-label { padding-top: .8rem; }
.row > :nth-child(2) { flex: 1; min-width: 0; }
.row-note { margin-left: 1.2rem; font-size: 1.1rem; color: var(--muted); }
.row .stepper { flex: none; }

.input {
  width: 100%;
  height: 4rem;
  padding: 0 .2rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-family: var(--sans);
  /* 输入框字号不能小于 16px，否则 iOS 聚焦时会自动放大页面 */
  font-size: max(16px, 1.5rem);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.input:focus { border-color: var(--ink); }
.input::placeholder { color: #B5B9C3; }
textarea.input { height: auto; padding: .8rem 1rem; border: 1px solid var(--line); line-height: 1.5; resize: none; }

.opt { position: relative; display: block; }
.opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.opt span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.8rem;
  border: 1px solid var(--line);
  font-size: 1.35rem;
  letter-spacing: .14em;
  padding-left: .14em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.opt input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; grid-gap: .8rem; }
.chips { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: .5rem; }
.chips .opt span { height: 3.2rem; border-radius: 1.6rem; font-size: 1.25rem; letter-spacing: .06em; padding-left: .06em; }

.stepper { display: flex; align-items: center; border: 1px solid var(--line); }
.stepper button { width: 4.2rem; height: 3.6rem; border: 0; background: transparent; font-family: var(--sans); font-size: 1.9rem; cursor: pointer; }
.stepper button:disabled { color: #C5C8D0; }
.stepper output {
  min-width: 4.8rem;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  line-height: 3.6rem;
  text-align: center;
  font-size: 1.7rem;
}

.form-msg { min-height: 1.8rem; margin-top: 1rem; text-align: center; font-family: var(--sans); font-size: 1.25rem; line-height: 1.8rem; color: #B0453F; }
.submit {
  display: block;
  width: 100%;
  height: 4.6rem;
  margin-top: .6rem;
  border: 0;
  background: var(--ink);
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: .5em;
  padding-left: .5em;
  cursor: pointer;
}
.submit:disabled { opacity: .6; }

.done { margin-top: 2.6rem; }
.done-mark { width: 5.2rem; height: 5.2rem; margin: 0 auto 1.8rem; }
.done-mark circle, .done-mark path { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.done-mark circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw 1s var(--ease) forwards; }
.done-mark path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .6s var(--ease) .7s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done-title { font-size: 2rem; letter-spacing: .2em; padding-left: .2em; }
.done-sum { margin-top: 1rem; font-family: var(--sans); font-size: 1.4rem; color: var(--ink-2); }
.done-links { display: flex; justify-content: center; margin-top: 2.6rem; }
.done-links .link + .link { margin-left: 2.4rem; }
.link {
  border: 0;
  background: none;
  font-size: 1.3rem;
  letter-spacing: .08em;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ---------- 10 结尾 ---------- */
.s-ending { background: #2A2F4A; color: #fff; }
.ending-img { position: absolute; top: 0; left: 0; height: 100%; object-fit: cover; object-position: 50% 70%; }
.s-ending::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(40, 36, 80, .3) 0%, rgba(40, 36, 80, 0) 40%, rgba(30, 34, 54, 0) 68%, rgba(30, 34, 54, .85) 100%);
}
.ending-text { position: absolute; z-index: 2; left: 0; right: 0; top: calc(13% + env(safe-area-inset-top)); text-align: center; }
.ending-big { font-size: 2.8rem; font-weight: 500; letter-spacing: .4em; padding-left: .4em; text-shadow: 0 2px 24px rgba(40, 30, 80, .35); }
.s-ending .eyebrow { margin-top: 1.2rem; color: rgba(255, 255, 255, .85); }
.ending-foot {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: calc(3.4rem + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: .3em;
  padding-left: .3em;
  color: rgba(255, 255, 255, .7);
}
.replay {
  margin-top: 1.4rem;
  padding: .6rem 1.8rem .6rem calc(1.8rem + .3em);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 2rem;
  background: none;
  font-size: 1.15rem;
  letter-spacing: .3em;
  color: #fff;
  cursor: pointer;
}

/* ---------- 音乐按钮、翻页提示、提示条 ---------- */
.music {
  position: fixed;
  z-index: 30;
  top: calc(2.8rem + env(safe-area-inset-top));
  right: max(2.8rem, calc(50vw - 240px + 2.8rem));
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: rgba(31, 43, 64, .28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
}
.music svg { width: 1.7rem; height: 1.7rem; }
.music.on svg { animation: spin 4s linear infinite; }
.music:not(.on)::after { content: ""; position: absolute; width: 2.1rem; height: 1px; background: #fff; transform: rotate(-45deg); }
@keyframes spin { to { transform: rotate(360deg); } }

.next-hint {
  position: fixed;
  z-index: 6;
  left: 50%;
  bottom: calc(1.4rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12rem;
  margin-left: -6rem;
  padding: .8rem 0;
  border: 0;
  background: none;
  color: var(--gold);
  cursor: pointer;
  opacity: 0;
  animation: fade 1s var(--ease) 2.4s forwards;
}
.next-hint span { display: none; margin-bottom: .6rem; font-size: 1.1rem; line-height: 1; letter-spacing: .4em; padding-left: .4em; }
.next-hint.first span { display: block; }
.next-hint svg { width: 2rem; height: 1.2rem; animation: nudge 2s ease-in-out infinite; }
.next-hint path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .next-hint { color: #fff; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nudge { 0%, 100% { transform: translateY(.3rem); opacity: .35; } 50% { transform: translateY(-.4rem); opacity: 1; } }

.toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: calc(9rem + env(safe-area-inset-bottom));
  padding: 1rem 1.8rem;
  border-radius: 4px;
  background: rgba(31, 43, 64, .92);
  color: #fff;
  font-family: var(--sans);
  font-size: 1.3rem;
  letter-spacing: .1em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .3s, transform .3s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

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