/* ═══════════════════════════════════════════════════════════
   表白版 Romance CSS
   配色：甜玫瑰红 × 奶油白 × 蜜桃金 × 紫棕
   动效：心跳脉冲 · 光斑呼吸 · 粒子飘落 · 拍立得相框
   ═══════════════════════════════════════════════════════════ */

/* ─── 基础配色覆盖 ─── */
:root {
  --ink: #4a2d3d;
  --paper: #fff8fa;
  --warm: #ffeaf2;
  --red: #e07096;
  --soft: #a88296;
  --line: rgba(74, 45, 61, .10);
  --gold: #eeaa88;
  --rose-deep: #c05078;
  --rose-light: #fff5f8;
}

/* ─── 全局背景氛围 ─── */
body {
  background:
    radial-gradient(ellipse 90% 70% at 10% 20%, rgba(255, 232, 242, .75) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 90% 80%, rgba(255, 230, 222, .55) 0%, transparent 50%),
    var(--paper);
  color: var(--ink);
}

/* ─── 背景光斑装饰 ─── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(224, 112, 150, .06) 0%, transparent 42%),
    radial-gradient(circle at 75% 15%, rgba(238, 170, 136, .05) 0%, transparent 35%),
    radial-gradient(circle at 65% 85%, rgba(224, 112, 150, .06) 0%, transparent 48%);
  animation: ambientGlow 10s ease-in-out infinite alternate;
}

@keyframes ambientGlow {
  0%   { opacity: .7; transform: scale(1); }
  50%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: .8; transform: scale(1.02); }
}

/* ─── 爱心粒子层 ─── */
.hearts-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.heart-particle {
  position: absolute;
  color: rgba(224, 112, 150, .18);
  font-size: 13px;
  animation: heartFloat linear infinite;
  filter: blur(.3px);
}

.heart-particle:nth-child(1)  { left: 6%;  animation-duration: 14s; animation-delay: 0s;   font-size: 11px; }
.heart-particle:nth-child(2)  { left: 18%; animation-duration: 18s; animation-delay: 2.5s; font-size: 15px; }
.heart-particle:nth-child(3)  { left: 28%; animation-duration: 12s; animation-delay: 5s;   font-size: 9px; }
.heart-particle:nth-child(4)  { left: 38%; animation-duration: 16s; animation-delay: 1.2s; font-size: 13px; }
.heart-particle:nth-child(5)  { left: 48%; animation-duration: 13s; animation-delay: 3.8s; font-size: 11px; }
.heart-particle:nth-child(6)  { left: 58%; animation-duration: 19s; animation-delay: 0.7s; font-size: 16px; }
.heart-particle:nth-child(7)  { left: 68%; animation-duration: 15s; animation-delay: 5.5s; font-size: 10px; }
.heart-particle:nth-child(8)  { left: 78%; animation-duration: 20s; animation-delay: 2.2s; font-size: 12px; }
.heart-particle:nth-child(9)  { left: 86%; animation-duration: 11s; animation-delay: 6.5s; font-size: 12px; }
.heart-particle:nth-child(10) { left: 94%; animation-duration: 14s; animation-delay: 1.8s; font-size: 14px; }
.heart-particle:nth-child(11) { left: 10%; animation-duration: 21s; animation-delay: 7.2s; font-size: 9px; }
.heart-particle:nth-child(12) { left: 90%; animation-duration: 17s; animation-delay: 4.2s; font-size: 15px; }

@keyframes heartFloat {
  0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
  12%  { opacity: .35; }
  50%  { opacity: .22; }
  88%  { opacity: .15; }
  100% { transform: translateY(-12vh) rotate(280deg); opacity: 0; }
}

/* ─── 加载页 ─── */
.loading-screen {
  background: linear-gradient(160deg, #4a2a3d 0%, #3d2435 40%, #5a3045 100%);
  position: relative;
  overflow: hidden;
}

.loading-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(224, 112, 150, .18) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(238, 170, 136, .13) 0%, transparent 45%);
  animation: loadingPulse 4s ease-in-out infinite;
}

.heart-draw {
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 8;
}

.heart-draw svg {
  height: 100%;
  width: 100%;
}

.laser-path {
  fill: none;
  filter: url(#laserGlow);
  stroke: #ff9a7a;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.18;
}

.laser-top { stroke-dasharray: 1; stroke-dashoffset: 1; }
.laser-bottom { stroke-dasharray: 1; stroke-dashoffset: 1; }

.heart-draw.drawing .laser-top {
  animation: laserTrace 2s cubic-bezier(.28, .06, .3, 1) forwards;
}

.heart-draw.drawing .laser-bottom {
  animation: laserTrace 2.25s cubic-bezier(.28, .06, .3, 1) 2.25s forwards;
}

@keyframes laserTrace {
  0%   { stroke-dashoffset: 1; opacity: .15; }
  8%   { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes loadingPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.03); }
}

.loading-screen .eyebrow {
  color: rgba(255, 232, 242, .6);
  font-size: 12px;
  letter-spacing: .2em;
}

.hero {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.hero > :not(.hero-memory-layer) {
  position: relative;
  z-index: 1;
}

.hero-memory-layer {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.hero-memory {
  border: 3px solid rgba(255, 255, 255, .72);
  box-shadow: 0 10px 28px rgba(77, 36, 54, .13);
  height: auto;
  left: var(--left);
  max-height: 38svh;
  object-fit: contain;
  opacity: 0;
  position: absolute;
  top: var(--top);
  transform: rotate(var(--rotate)) scale(.9);
  width: var(--width);
  will-change: opacity, transform;
  animation: heroMemoryFloat var(--duration) ease-in-out forwards;
}

@keyframes heroMemoryFloat {
  0%   { opacity: 0; transform: translate(0, 8px) rotate(var(--rotate)) scale(.9); }
  18%  { opacity: .15; }
  68%  { opacity: .15; transform: translate(var(--drift-x), var(--drift-y)) rotate(var(--rotate)) scale(1); }
  100% { opacity: 0; transform: translate(var(--drift-x), var(--drift-y)) rotate(var(--rotate)) scale(1.04); }
}

.loading-screen h1 {
  text-shadow: 0 0 60px rgba(224, 112, 150, .28);
  position: relative;
  z-index: 1;
}

.cursor {
  color: #ff9ab0;
  animation: blink 1s step-end infinite;
}

.start-button {
  border-color: rgba(255, 248, 250, .5);
  border-radius: 50px;
  padding: 16px 32px;
  font-size: 14px;
  letter-spacing: .08em;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(4px);
  transition: all .4s cubic-bezier(.23, 1, .32, 1);
}

.start-button::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(224, 112, 150, .4), rgba(238, 170, 136, .3));
  z-index: -1;
  opacity: 0;
  transition: opacity .4s;
}

.start-button:hover {
  background: rgba(255, 248, 250, .95);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(224, 112, 150, .25);
}

.start-button:hover::before {
  opacity: 1;
}

/* ─── 导航栏 ─── */
.site-header {
  mix-blend-mode: difference;
  color: #fff;
}

.save-mark {
  filter: drop-shadow(0 0 8px rgba(224, 112, 150, .45));
  transition: transform .35s cubic-bezier(.23, 1, .32, 1);
}

.save-mark:hover {
  transform: rotate(20deg) scale(1.25);
}

/* ─── 主内容层保证在背景之上 ─── */
main#story {
  position: relative;
  z-index: 1;
}

/* ─── Hero 区域 ─── */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

.hero .eyebrow {
  color: var(--soft);
  font-size: 11px;
  letter-spacing: .22em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.hero h1 {
  color: var(--ink);
  text-shadow: 0 4px 30px rgba(74, 45, 61, .08);
  line-height: 1.08;
  max-width: 900px;
}

.hero em {
  color: var(--rose-deep);
  font-style: normal;
  position: relative;
}

.hero em::after {
  content: '';
  position: absolute;
  left: -2%;
  bottom: 8%;
  width: 104%;
  height: 26%;
  background: linear-gradient(120deg, rgba(224, 112, 150, .18), rgba(238, 170, 136, .12));
  border-radius: 4px;
  z-index: -1;
  transform: rotate(-1.5deg);
}

.intro {
  color: #7a5a6a;
  font-size: clamp(17px, 2.1vw, 23px);
  line-height: 2;
  max-width: 560px;
  margin-top: 8px;
}

.scroll-hint {
  color: var(--soft);
  opacity: .75;
  animation: bounceHint 2.2s ease-in-out infinite;
  font-size: 10px;
  letter-spacing: .12em;
}

@keyframes bounceHint {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50%      { transform: translateY(10px); opacity: .4; }
}

/* ─── 章节 ─── */
.chapter {
  border-top: 1px solid var(--line);
  position: relative;
}

.chapter-meta {
  color: var(--soft);
  font-size: 10px;
  letter-spacing: .18em;
  margin-bottom: 55px;
  text-transform: uppercase;
  opacity: .85;
}

.chapter-number {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--red);
  margin: 0 0 12px;
  letter-spacing: .08em;
}

.chapter h2 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1.08;
  color: var(--ink);
}

.chapter-copy {
  color: #6a5060;
  font-size: clamp(16px, 1.9vw, 21px);
  line-height: 1.95;
}

/* ─── 消息卡片 ─── */
.message-card {
  background: rgba(255, 255, 255, .55) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(214, 90, 130, .12);
  border-radius: 20px;
  box-shadow:
    0 4px 24px rgba(61, 36, 53, .06),
    0 1px 3px rgba(61, 36, 53, .04);
  transform: rotate(-1.5deg);
  transition: transform .5s cubic-bezier(.23, 1, .32, 1), box-shadow .5s;
}

.message-card:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow:
    0 12px 40px rgba(61, 36, 53, .1),
    0 4px 12px rgba(214, 90, 130, .08);
}

.message-card p {
  font-size: clamp(22px, 3.5vw, 38px);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}

.message-card span {
  color: var(--soft);
  font-size: 11px;
  letter-spacing: .08em;
}

.chat-stat-panel{background:linear-gradient(135deg,#fffaf9,#f7e5ea);border:1px solid rgba(214,90,130,.12);border-radius:22px;box-shadow:0 18px 45px rgba(112,52,77,.1);color:#4a2a3d;display:grid;gap:1px;grid-template-columns:1.1fr .9fr;margin:clamp(70px,11vw,130px) auto 0;max-width:820px;overflow:hidden}.chat-stat-main,.chat-stat-compare{min-height:280px;padding:clamp(30px,5vw,54px)}.chat-stat-main{background:linear-gradient(150deg,rgba(255,159,190,.3),rgba(255,255,255,.28) 60%,transparent)}.chat-stat-main p,.chat-stat-compare p{font-family:var(--mono);font-size:10px;letter-spacing:.12em;margin:0;opacity:.65}.chat-stat-main strong{display:block;font-size:clamp(28px,4vw,44px);font-weight:500;margin:22px 0 2px}.chat-stat-main b{color:#c64f78;display:block;font-family:var(--mono);font-size:clamp(58px,9vw,98px);font-weight:500;letter-spacing:-.1em;line-height:1}.chat-stat-main b em{font-family:var(--serif);font-size:20px;font-style:normal;letter-spacing:0;margin-left:8px}.chat-stat-main small,.chat-stat-compare small{display:block;font-family:var(--mono);font-size:10px;line-height:1.6;margin-top:16px;opacity:.62}.chat-stat-compare{background:rgba(214,90,130,.07);display:flex;flex-direction:column;justify-content:center}.chat-stat-compare strong{font-family:var(--mono);font-size:clamp(32px,5vw,53px);font-weight:500;letter-spacing:-.06em;margin:14px 0 18px}.stat-bars{align-items:flex-end;display:flex;gap:8px;height:54px}.stat-bars i{background:linear-gradient(180deg,#f2a0b7,#d85f88);border-radius:4px 4px 0 0;display:block;width:26%}.stat-bars i:nth-child(1){height:100%}.stat-bars i:nth-child(2){height:85%}.stat-bars i:nth-child(3){height:77%}@media(max-width:600px){.chat-stat-panel{grid-template-columns:1fr}.chat-stat-main,.chat-stat-compare{min-height:0}.chat-stat-main{padding-bottom:34px}.chat-stat-compare{padding-top:30px}.stat-bars{height:40px}}
.chat-echo {
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(224, 112, 150, .12);
  border-radius: 26px;
  box-shadow:
    0 18px 48px rgba(112, 52, 77, .07),
    0 0 0 1px rgba(255, 255, 255, .5) inset;
  margin: clamp(70px, 11vw, 130px) auto 0;
  max-width: 720px;
  padding: clamp(40px, 7vw, 74px);
  text-align: center;
  position: relative;
  backdrop-filter: blur(10px);
}

.chat-echo p {
  color: #a67689;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  margin: 0;
  text-transform: uppercase;
}

.chat-echo strong {
  color: var(--rose-deep);
  display: block;
  font-size: clamp(34px, 6vw, 62px);
  font-weight: 500;
  letter-spacing: -.06em;
  margin: 32px 0 22px;
  line-height: 1.12;
}

.chat-echo span {
  color: #765365;
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.9;
}

.fate-panel {
  border: 0;
  border-top: 1px solid rgba(188, 98, 132, .32);
  background: transparent;
  box-shadow: none;
  margin: clamp(70px, 11vw, 130px) auto 0;
  max-width: 760px;
  padding: clamp(26px, 4vw, 42px) clamp(4px, 2vw, 18px) 0;
  text-align: left;
}

.fate-facts {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  margin-bottom: clamp(22px, 4vw, 34px);
}

.fate-facts span {
  color: #9d4766;
  font-family: var(--mono);
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 500;
  letter-spacing: .14em;
}

.fate-facts i {
  color: #e08ba7;
  font-size: 13px;
  font-style: normal;
}

.fate-story {
  margin: 0;
  max-width: 610px;
}

.fate-story p {
  color: #674354;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 2;
  margin: 0 0 clamp(18px, 3vw, 26px);
}

.fate-story p + p {
  margin-left: clamp(22px, 7vw, 82px);
}

.fate-story p:last-of-type {
  margin-bottom: 0;
}

.fate-story strong {
  color: var(--rose-deep);
  display: block;
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.65;
  margin-top: clamp(26px, 4vw, 36px);
  text-align: right;
}

@media (max-width: 600px) {
  .fate-facts { gap: 12px; }
  .fate-facts span { font-size: 14px; }
  .fate-story p { line-height: 1.95; }
  .fate-story p + p { margin-left: 24px; }
}

/* ─── 后台重构：独立滚动层 ─── */
body.admin-open { overflow: hidden; position: fixed; width: 100%; }
.admin-modal { align-items: center; padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); }
.admin-panel { display: flex; flex-direction: column; height: min(760px, calc(100svh - 28px)); max-width: 540px; overflow: hidden; padding: 0 !important; }
.admin-panel-bar { align-items: center; border-bottom: 1px solid rgba(132,81,101,.14); display: flex; flex: 0 0 auto; justify-content: space-between; min-height: 72px; padding: 15px 20px 13px 24px; }
.admin-panel-bar .eyebrow { color: #b44f75; font-size: 10px; margin: 0 0 4px; }
.admin-panel-bar span { color: #997381; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; }
.admin-panel-bar .close { color: #825667; flex: 0 0 auto; position: static; }
.admin-panel-scroll { -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 26px 24px calc(28px + env(safe-area-inset-bottom)); touch-action: pan-y; }
.admin-panel h2 { font-size: clamp(29px, 8vw, 38px); line-height: 1.12; margin: 0 0 12px; }
.admin-panel form { margin-top: 27px; }
.admin-dashboard-heading { border-bottom: 1px solid rgba(132,81,101,.12); margin-bottom: 20px; padding-bottom: 19px; }
.admin-dashboard-heading .admin-description { margin-bottom: 0; }
.admin-section { border: 1px solid rgba(181,94,130,.16); border-radius: 18px; margin: 16px 0; overflow: hidden; padding: 0; }
.admin-section-title { align-items: center; background: rgba(255,226,237,.42); color: #745060; display: flex; font-family: var(--mono); font-size: 11px; justify-content: space-between; letter-spacing: .1em; padding: 13px 15px; }
.admin-section-title small { color: #bd6284; font-size: 9px; letter-spacing: .14em; }
.admin-live-section .live-visitors { border: 0; border-radius: 0; margin: 0; }
.live-visitors { align-items: stretch; display: grid; gap: 0; grid-template-columns: 102px 1fr; }
.live-visitors > div:first-child { background: rgba(255,247,250,.82); display: flex; flex-direction: column; justify-content: center; min-height: 92px; padding: 15px; }
.live-visitors strong { color: #bd5278; font-family: "Noto Serif SC", serif; font-size: 28px; font-weight: 500; margin-top: 5px; }
.live-visitor-list { align-content: center; display: grid; gap: 7px; max-height: 132px; overflow-y: auto; padding: 13px; }
.live-visitor { background: rgba(255,246,249,.72); border-radius: 8px; color: #805767; font-family: var(--mono); font-size: 10px; line-height: 1.4; padding: 7px 8px; }
.presentation-settings { padding: 0 15px; }
.presentation-settings > small { display: none; }
.presentation-settings label { border-bottom: 1px solid rgba(132,81,101,.1); margin: 0; min-height: 53px; }
.presentation-settings label:last-child { border-bottom: 0; }
.presentation-settings .lottery-mode { padding: 9px 0; }
.answer-record { border: 0; border-radius: 0; margin: 0; min-height: 92px; padding: 15px; }
.answer-entry { border-bottom: 1px solid rgba(132,81,101,.1); padding: 12px 0; }
.answer-entry:first-child { padding-top: 0; }
.answer-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.admin-actions { background: linear-gradient(to bottom, rgba(254,249,246,0), rgba(254,249,246,.97) 22%); display: grid; gap: 9px; grid-template-columns: 1fr 1fr; margin: 22px 0 0; padding-top: 14px; position: sticky; bottom: -28px; }
.admin-actions button { margin: 0; min-width: 0; }
@media (max-width: 420px) { .admin-panel-scroll { padding-left: 17px; padding-right: 17px; } .admin-panel-bar { padding-left: 19px; } .live-visitors { grid-template-columns: 88px 1fr; } .admin-actions { grid-template-columns: 1fr; } }

/* ─── 和你有关的小故事：持续累积的散落照片 ─── */
.asset-loader { align-items: center; background: radial-gradient(circle at 22% 18%, rgba(255,255,255,.7), transparent 30%), radial-gradient(circle at 77% 78%, rgba(238,174,200,.48), transparent 38%), #f8e5ea; display: flex; flex-direction: column; inset: 0; justify-content: center; padding: 32px; position: fixed; text-align: center; transition: opacity .52s ease, visibility .52s ease; z-index: 300; }
.asset-loader.is-complete { opacity: 0; visibility: hidden; }
.asset-loader .eyebrow { color: #a85b77; margin: 0 0 17px; }
.asset-loader h1 { color: #563444; font-family: "Noto Serif SC", serif; font-size: clamp(32px, 9vw, 47px); font-weight: 500; letter-spacing: -.07em; margin: 0; }
.asset-loader-track { background: rgba(130,76,99,.16); border-radius: 999px; height: 3px; margin-top: 32px; max-width: 260px; overflow: hidden; width: min(70vw, 260px); }
.asset-loader-track i { background: linear-gradient(90deg, #d36a91, #ed9fba); border-radius: inherit; display: block; height: 100%; transition: width .24s ease; width: 0; }
#chapter-four { overflow: hidden; }
.our-memories-wall { background: radial-gradient(circle at 18% 18%, rgba(255,255,255,.86), transparent 28%), radial-gradient(circle at 78% 73%, rgba(241,193,211,.43), transparent 34%), rgba(255,238,244,.36); border-radius: 24px; isolation: isolate; margin-top: clamp(34px, 8vw, 72px); min-height: min(116svh, 950px); overflow: hidden; position: relative; }
.our-memories-backdrop { inset: 0; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; transition: opacity 1.4s ease; z-index: 0; }
.our-memories-backdrop.is-visible { opacity: .19; }
.our-memories-row { align-items: center; display: flex; height: clamp(64px, 10svh, 92px); left: 0; overflow: hidden; position: absolute; width: 100%; }
.our-memories-row:nth-child(1) { top: 6%; }
.our-memories-row:nth-child(2) { top: 18%; }
.our-memories-row:nth-child(3) { bottom: 18%; }
.our-memories-row:nth-child(4) { bottom: 6%; }
.our-memories-track { animation: memoriesRowMove var(--row-duration) linear var(--row-delay) infinite; display: flex; flex: 0 0 max-content; will-change: transform; }
.our-memories-row.is-reverse .our-memories-track { animation-direction: reverse; }
.our-memories-row-set { display: flex; flex: 0 0 auto; gap: 10px; padding-right: 10px; }
.our-memories-row-set img { background: transparent; border: 0; border-radius: 5px; box-shadow: 0 7px 18px rgba(99,53,71,.12); display: block; height: clamp(58px, 9svh, 84px); max-width: clamp(120px, 36vw, 180px); object-fit: contain; width: auto; }
.our-memories-ring { inset: 0; pointer-events: none; position: absolute; transform-origin: 50% 50%; z-index: 20; }
.our-memory { background: #fffdfd; box-shadow: 0 9px 22px rgba(91,46,65,.18); left: var(--left); margin: 0; opacity: 0; padding: 4px 4px 12px; pointer-events: none; position: absolute; top: var(--top); transform: translateY(22px) rotate(var(--rotate)) scale(.88); transition: left 1.1s cubic-bezier(.22,1,.36,1), top 1.1s cubic-bezier(.22,1,.36,1), width 1.1s cubic-bezier(.22,1,.36,1), opacity .62s ease, transform 1.1s cubic-bezier(.22,1,.36,1); width: clamp(86px, var(--width), 172px); will-change: left, top, transform, width; z-index: var(--depth); }
.our-memory img { display: block; height: auto; max-height: 210px; object-fit: cover; pointer-events: none; width: 100%; }
.our-memory.visible { opacity: 1; transform: translateY(0) rotate(var(--rotate)) scale(1); }
.our-memories-wall.is-settling .our-memory { opacity: .94; transform: translateY(0) rotate(var(--settle-rotate)) scale(.94); }
.our-memories-wall.is-gathering .our-memory { left: var(--gather-left); top: var(--gather-top); transform: translate(-50%, -50%) rotate(var(--gather-rotate)) scale(.94); transition-delay: var(--gather-delay); width: clamp(48px, 12vw, 84px); }
.our-memories-wall.is-stacking .our-memory { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--stack-rotate)) scale(.86); transition-delay: var(--stack-delay); width: min(38vw, 158px); }
.our-memories-wall.is-stacking .our-memory.memory-highlight { box-shadow: 0 18px 34px rgba(91,46,65,.28); z-index: 100; }
.our-memories-message { color: #714456; font-family: "Noto Serif SC", serif; font-size: clamp(21px, 5.8vw, 31px); font-weight: 500; left: 50%; letter-spacing: -.045em; line-height: 1.32; margin: 0; opacity: 0; pointer-events: none; position: absolute; text-align: center; top: 50%; transform: translate(-50%, -47%) scale(.96); transition: opacity .85s ease .42s, transform .9s cubic-bezier(.22,1,.36,1) .42s; white-space: nowrap; width: max-content; z-index: 80; }
.our-memories-message span { color: #bc6686; display: block; font-family: "Great Vibes", cursive; font-size: clamp(17px, 4.8vw, 25px); font-weight: 400; letter-spacing: .01em; line-height: 1.1; margin-top: 11px; }
.our-memories-wall.is-ringing .our-memory { left: var(--ring-left); top: var(--ring-top); transform: translate(-50%, -50%) rotate(var(--ring-rotate)) scale(1); transition-delay: var(--ring-delay); width: clamp(52px, 15vw, 102px); }
.our-memories-wall.is-ringing .our-memories-message { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.our-memories-wall.is-ring-settled .our-memories-ring { animation: memoriesRingTurn 150s linear infinite; will-change: transform; }
.our-memories-wall.is-ring-settled .our-memory { cursor: zoom-in; pointer-events: auto; touch-action: manipulation; }
.our-memories-wall.has-memory-focus .our-memories-ring { animation-play-state: paused; }
.our-memory.is-focus-source { opacity: 0 !important; transition: opacity .12s ease !important; }
.our-memory:focus-visible { outline: 2px solid rgba(195,83,125,.72); outline-offset: 4px; }
.memory-focus-overlay { background: rgba(255,239,245,0); inset: 0; pointer-events: none; position: absolute; transition: background .34s ease; z-index: 160; }
.memory-focus-card { background: #fffdfd; box-shadow: 0 24px 64px rgba(91,46,65,.32); left: 50%; margin: 0; max-width: 72%; opacity: .82; padding: 6px 6px 16px; position: absolute; top: 50%; transform: translate(-50%, -50%) translate(var(--focus-x), var(--focus-y)) scale(var(--focus-scale)) rotate(var(--focus-rotate)); transform-origin: 50% 50%; transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .26s ease; }
.memory-focus-card img { display: block; height: auto; max-height: 62svh; object-fit: contain; width: 100%; }
.memory-focus-overlay.is-visible { background: rgba(255,239,245,.66); }
.memory-focus-overlay.is-visible .memory-focus-card { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) scale(1) rotate(0deg); }
.memory-focus-overlay.is-visible.is-leaving { background: rgba(255,239,245,0); }
.memory-focus-overlay.is-visible.is-leaving .memory-focus-card { opacity: .76; transform: translate(-50%, -50%) translate(var(--focus-x), var(--focus-y)) scale(var(--focus-scale)) rotate(var(--focus-rotate)); }
@keyframes memoriesRingTurn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes memoriesRowMove { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .our-memories-wall.is-ring-settled .our-memories-ring { animation: none; } .memory-focus-card { transition-duration: .01ms; } }
@media (min-width: 700px) { .our-memories-wall { margin-left: auto; margin-right: auto; max-width: 760px; min-height: 850px; } .our-memory { width: clamp(112px, var(--width), 190px); } }

/* ─── 游戏面板 ─── */
.game-panel {
  background: linear-gradient(145deg, #5a3045, #7a4060) !important;
  border-radius: 24px;
  box-shadow:
    0 20px 60px rgba(90, 48, 69, .25),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  overflow: hidden;
}

.game-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .06) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(214, 90, 130, .1) 0%, transparent 50%);
}

.game-content {
  gap: 18px;
}

.game-content p,
.game-content small {
  color: rgba(255, 232, 240, .7);
  font-size: 10px;
  letter-spacing: .15em;
}

.game-content strong {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 500;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .2);
}

.status-dot {
  background: #7ee787;
  box-shadow: 0 0 12px rgba(126, 231, 135, .5);
  animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(126, 231, 135, .4); }
  50%      { box-shadow: 0 0 20px rgba(126, 231, 135, .7); }
}

.game-orbit {
  border-color: rgba(255, 232, 240, .15) !important;
}

/* ─── 暖色章节背景 ─── */
.warm {
  background: linear-gradient(135deg, #fff5f8, #ffeaf2) !important;
  position: relative;
}

.warm::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(238, 170, 136, .07) 0%, transparent 40%);
  pointer-events: none;
}

/* ─── 照片区域 ─── 拍立得风格 ─── */
.photo-grid {
  gap: 20px;
}

.photo-slot {
  background: #fff !important;
  border-radius: 12px;
  box-shadow:
    0 4px 16px rgba(61, 36, 53, .08),
    0 1px 4px rgba(61, 36, 53, .04);
  padding: 12px 12px 50px 12px;
  transition: transform .5s cubic-bezier(.23, 1, .32, 1), box-shadow .5s;
  overflow: hidden;
}

.photo-slot::before {
  border: none !important;
  background: linear-gradient(145deg, #f5e0e8, #f0d5e0);
  border-radius: 6px;
  inset: 12px 12px 50px 12px !important;
}

.photo-slot span {
  color: var(--soft);
  font-size: 11px;
  letter-spacing: .05em;
  z-index: 1;
}

.photo-slot figcaption {
  bottom: 14px;
  left: 16px;
  font-size: 12px;
  color: #7a5a6a;
  max-width: 200px;
  line-height: 1.5;
  font-style: italic;
}

.photo-slot:hover {
  transform: translateY(-6px) rotate(0deg) !important;
  box-shadow:
    0 16px 40px rgba(61, 36, 53, .12),
    0 4px 12px rgba(214, 90, 130, .1);
}

.photo-large {
  background: #fff !important;
}

.photo-large::before {
  background: linear-gradient(160deg, #e8c0d0, #f5ddd0) !important;
}

.tilted {
  transform: rotate(2deg);
}

/* ─── 成就列表 ─── */
.achievement-list {
  display: grid;
  gap: 16px;
}

.achievement-list article {
  background: rgba(255, 255, 255, .5);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  transition: transform .35s cubic-bezier(.23, 1, .32, 1), box-shadow .35s, background .35s;
  box-shadow: 0 4px 16px rgba(74, 45, 61, .04);
}

.achievement-list article:hover {
  background: rgba(255, 255, 255, .75);
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(112, 52, 77, .1);
}

.achievement-list article.locked {
  background: rgba(255, 255, 255, .25);
}

.achievement-list span {
  color: var(--red);
  font-size: 12px;
  background: rgba(224, 112, 150, .1);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.achievement-list h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 5px;
}

.achievement-list p {
  color: #7a5a6a;
  font-size: 14px;
  line-height: 1.7;
}

.achievement-list i {
  color: var(--red);
  font-size: 16px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: rgba(224, 112, 150, .1);
  border-radius: 50%;
}

.achievement-list .locked i {
  color: var(--soft);
  background: rgba(168, 130, 150, .1);
}

/* ─── 双语引文与情书 ─── */
.bilingual-line {
  display: grid;
  white-space: pre-line;
}

.bilingual-line > span {
  grid-area: 1 / 1;
}

.bilingual-measure {
  visibility: hidden;
}

.bilingual-section .bilingual-line,
.bilingual-section .bilingual-credit {
  opacity: 0;
}

.bilingual-section.is-playing .bilingual-line {
  opacity: 1;
  transition: opacity .28s ease;
}

.bilingual-credit {
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s ease;
}

.bilingual-section.is-complete .bilingual-credit {
  opacity: 1;
  transform: none;
}

.prince-quote {
  align-content: center;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .92), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(231, 146, 179, .2), transparent 36%),
    linear-gradient(155deg, #fffafc 0%, #fbeaf0 55%, #f6dce6 100%) !important;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
}

.prince-quote::before {
  color: rgba(197, 93, 131, .08);
  content: '“';
  font-family: "Noto Serif SC", serif;
  font-size: min(70vw, 620px);
  left: max(12px, 3vw);
  line-height: .75;
  pointer-events: none;
  position: absolute;
  top: clamp(80px, 14svh, 150px);
}

.prince-quote::after {
  background: url('./assets/decorations/one-and-only-rose.png') center / contain no-repeat;
  content: '';
  height: min(88svh, 760px);
  left: clamp(-28px, 1vw, 44px);
  opacity: .28;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(180px, 35vw, 460px);
  z-index: 0;
}
.prince-quote-inner {
  margin: auto;
  max-width: 980px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.prince-quote .bilingual-pair + .bilingual-pair {
  margin-top: clamp(26px, 5vw, 48px);
}

.prince-quote-cn {
  color: #5a3445;
  font-size: clamp(27px, 5.3vw, 54px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.62;
  margin: clamp(8px, 2vw, 15px) 0 0;
}

.prince-quote-en {
  color: #b65b7d;
  font-family: "Great Vibes", cursive;
  font-size: clamp(27px, 4.6vw, 46px);
  line-height: 1.28;
  margin: 0;
  max-width: 880px;
}

.prince-quote-credit {
  bottom: clamp(42px, 8svh, 84px);
  color: #916176;
  font-size: 14px;
  letter-spacing: .12em;
  position: absolute;
  right: max(24px, 8vw);
  z-index: 1;
}

/* ─── 第一束花 ─── */
.flower-memory {
  background:
    radial-gradient(circle at 84% 16%, rgba(194, 223, 246, .72), transparent 22%),
    radial-gradient(circle at 15% 82%, rgba(255, 255, 255, .9), transparent 30%),
    linear-gradient(150deg, #f7edf0 0%, #eaf2fa 52%, #f9e8ee 100%) !important;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
}
.flower-memory::before {
  background-image: radial-gradient(rgba(133, 103, 123, .2) .8px, transparent .8px);
  background-size: 16px 16px;
  content: '';
  inset: 0;
  opacity: .28;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}
.flower-memory-copy {
  margin: clamp(76px, 14svh, 130px) max(18px, 7vw) 0 auto;
  max-width: min(66vw, 620px);
  position: relative;
  text-align: right;
  z-index: 2;
}
.flower-memory-date,
.flower-memory-note {
  color: #9c6f85;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  margin: 0;
}
.flower-memory-copy h2 {
  color: #553544;
  font-size: clamp(28px, 5.1vw, 54px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.42;
  margin: clamp(14px, 2.6vw, 26px) 0;
}
.flower-memory-copy > p:last-child {
  color: #7b596a;
  font-size: clamp(14px, 2vw, 20px);
  line-height: 1.9;
  margin: 0;
}
.flower-memory-photo,
.flower-memory-chibi {
  height: auto;
  pointer-events: none;
  position: absolute;
  user-select: none;
}
.flower-memory-photo {
  bottom: clamp(-20px, -2vw, 0px);
  filter: drop-shadow(0 16px 24px rgba(71, 49, 60, .16));
  left: clamp(-58px, -4vw, -18px);
  transform: rotate(9deg);
  width: min(78vw, 610px);
  z-index: 1;
}
.flower-memory-chibi {
  right: clamp(-34px, -2vw, -10px);
  top: clamp(34px, 7svh, 78px);
  transform: rotate(-11deg);
  width: min(39vw, 300px);
  z-index: 1;
}
.flower-memory-note {
  bottom: max(28px, env(safe-area-inset-bottom));
  position: absolute;
  right: max(20px, 6vw);
  text-align: right;
  z-index: 2;
}
@media (max-width: 600px) {
  .flower-memory-copy { margin-top: max(104px, 17svh); max-width: 69vw; }
  .flower-memory-copy h2 { font-size: clamp(27px, 7.1vw, 34px); }
  .flower-memory-copy > p:last-child { font-size: 14px; line-height: 1.8; }
  .flower-memory-photo { bottom: -8px; left: -62px; width: 84vw; }
  .flower-memory-chibi { right: -22px; top: max(46px, 7svh); width: 42vw; }
  .flower-memory-note { font-size: 8px; max-width: 48vw; }
}

/* ─── 情书区域 ─── */
.letter {
  background: linear-gradient(155deg, #fff9fb 0%, #f9e7ee 52%, #f4dce7 100%) !important;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
}

.letter::before {
  z-index: 0;
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 30%, rgba(224, 112, 150, .1) 0%, transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(238, 170, 136, .08) 0%, transparent 40%);
  pointer-events: none;
}


.letter::after {
  background: url('./assets/decorations/future-flowers.png') center / contain no-repeat;
  bottom: clamp(-86px, -7svh, -28px);
  content: '';
  height: min(92svh, 920px);
  opacity: .34;
  pointer-events: none;
  position: absolute;
  right: clamp(-88px, -5vw, -24px);
  width: min(72vw, 700px);
  z-index: 0;
}
@media (max-width: 600px) {
  .letter::after { bottom: -48px; opacity: .3; right: -66px; width: 86vw; }
}.letter .eyebrow {
  color: #a96e87;
  position: relative;
  z-index: 1;
  letter-spacing: .2em;
}

.letter-copy {
  font-size: clamp(22px, 3.8vw, 48px);
  line-height: 1.68;
  color: #553544;
  font-weight: 400;
  letter-spacing: -.02em;
  position: relative;
  margin: clamp(7px, 1.4vw, 12px) 0 0;
  z-index: 1;
}


.letter-bilingual-copy {
  max-width: 1050px;
  position: relative;
  z-index: 1;
}

.letter-pair + .letter-pair {
  margin-top: clamp(17px, 2.8vw, 30px);
}

.letter-pair + .letter-pair-break {
  margin-top: clamp(40px, 6vw, 68px);
}

.letter-copy-en {
  color: #b65b7d;
  font-family: "Great Vibes", cursive;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.34;
  margin: 0;
  max-width: 980px;
}
.signature {
  color: #714657;
  margin: clamp(44px, 7vw, 70px) 0 0 auto;
  font-size: 18px;
  position: relative;
  letter-spacing: .1em;
  z-index: 1;
  text-align: right;
  width: max-content;
}

.signature span {
  color: #a96e87;
  font-size: 13px;
}

@media (max-width: 600px) {
  .prince-quote {
    padding-bottom: max(96px, 13svh);
    padding-top: max(96px, 13svh);
  }

  .prince-quote-cn {
    font-size: clamp(25px, 7.4vw, 34px);
    line-height: 1.68;
  }

  .prince-quote-en {
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.28;
  }

  .letter {
    padding-bottom: max(92px, 12svh);
    padding-top: max(92px, 12svh);
  }

  .letter-copy {
    font-size: clamp(21px, 6vw, 28px);
    line-height: 1.72;
  }

  .letter-copy-en {
    font-size: clamp(24px, 6.8vw, 31px);
    line-height: 1.32;
  }
}

/* ─── 表白区域 ─── */
.proposal {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 232, 242, .65) 0%, transparent 55%),
    radial-gradient(circle at 20% 85%, rgba(238, 170, 136, .08) 0%, transparent 40%);
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.proposal::before {
  content: '♥';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  font-size: clamp(160px, 38vw, 420px);
  color: rgba(224, 112, 150, .06);
  filter: blur(2px);
  animation: proposalHeartPulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes proposalHeartPulse {
  0%, 100% { transform: translate(-50%, -58%) scale(1); opacity: .55; }
  50%      { transform: translate(-50%, -58%) scale(1.06); opacity: .85; }
}

.proposal .eyebrow {
  color: var(--soft);
  letter-spacing: .22em;
  font-size: 10px;
  margin-bottom: 22px;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.proposal h2 {
  color: var(--ink);
  position: relative;
  z-index: 1;
  line-height: 1.08;
  text-shadow: 0 4px 30px rgba(74, 45, 61, .08);
}

.proposal h2::after {
  content: '';
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  border-radius: 3px;
}

.proposal em {
  color: var(--rose-deep);
  font-style: normal;
}

.proposal-note {
  color: #8a6a7a;
  font-size: 15px;
  margin-top: 46px;
  max-width: 460px;
  position: relative;
  z-index: 1;
}

/* ─── 按钮 ─── */
.choices {
  gap: 16px;
  margin-top: 58px;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
}

.choice {
  border-radius: 18px;
  border: 1.5px solid var(--line);
  padding: 22px 30px;
  font-size: 16px;
  transition: all .4s cubic-bezier(.23, 1, .32, 1);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(74, 45, 61, .05);
}

.choice:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(74, 45, 61, .1);
}

.choice span {
  transition: transform .3s;
}

.choice:hover span {
  transform: translateX(4px);
}

.choice.yes {
  background: linear-gradient(135deg, var(--rose-deep), var(--red)) !important;
  border: none;
  color: #fff;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 26px rgba(224, 112, 150, .35),
    0 0 0 1px rgba(255, 255, 255, .2) inset;
}

.choice.yes::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent);
  opacity: 0;
  transition: opacity .4s;
}

.choice.yes:hover::before {
  opacity: 1;
}

.choice.yes:hover {
  box-shadow:
    0 16px 44px rgba(224, 112, 150, .4),
    0 0 70px rgba(224, 112, 150, .18);
  transform: translateY(-5px) scale(1.02);
}

/* 心跳动画 — 只在表白按钮上 */
.choice.yes {
  animation: heartbeat 2.8s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.025); }
  24%      { transform: scale(1); }
  36%      { transform: scale(1.025); }
  48%      { transform: scale(1); }
}

.choice.yes:hover {
  animation: none;
}

.choice.later:hover {
  background: #fff5f8;
  border-color: rgba(224, 112, 150, .22);
}

.answer-response {
  font-size: 19px;
  color: var(--ink);
  line-height: 1.85;
  margin-top: 44px;
  padding: 32px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(224, 112, 150, .12);
  border-radius: 22px;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(112, 52, 77, .1);
  animation: fadeInUp .7s cubic-bezier(.23, 1, .32, 1) forwards;
  max-width: 520px;
  position: relative;
  z-index: 1;
}

.knight-screen { align-items: center; background: radial-gradient(circle at 50% 43%, rgba(255,216,228,.42), transparent 38%), linear-gradient(150deg,#fff8f7,#f7e1e9); color: #583447; display: flex; flex-direction: column; inset: 0; justify-content: center; overflow: hidden; padding: 42px 26px; position: fixed; text-align: center; transition:transform .85s cubic-bezier(.65,0,.35,1); z-index: 110; }
.knight-screen.is-leaving { transform:translateY(-100%); }
.knight-screen::before,.knight-screen::after { color: rgba(214,90,130,.18); content: '✦'; font-size: 28px; position: absolute; }
.knight-screen::before { left: 12%; top: 20%; }.knight-screen::after { bottom: 18%; right: 13%; }
.knight-screen .eyebrow { color: #ad788c; font-size: 10px; letter-spacing: .2em; margin: 0 0 38px; }
.knight-message { max-width: 760px; }
.knight-pair + .knight-pair { margin-top: 42px; }
.knight-cn { font-family: "Ma Shan Zheng","Noto Serif SC",serif; font-size: clamp(40px,7vw,76px); letter-spacing: .06em; line-height: 1.35; margin: 10px 0 0; min-height: 1.35em; }
.knight-en { color: #c55d83; font-family: "Great Vibes",cursive; font-size: clamp(31px,5.4vw,58px); line-height: 1.18; margin: 0; min-height: 1.18em; }
.lottery-screen { align-items: center; background: radial-gradient(circle at 50% 36%,rgba(255,215,229,.45),transparent 37%),linear-gradient(155deg,#fff9f8,#f8e4eb); color:#583447; display:flex; flex-direction:column; inset:0; justify-content:center; overflow:auto; padding:42px 26px; position:fixed; text-align:center; transform:translateY(100%); transition:transform .85s cubic-bezier(.65,0,.35,1); z-index:111; }
.lottery-screen.is-visible { transform:translateY(0); }
.lottery-screen .eyebrow { color:#ad788c; font-size:10px; letter-spacing:.2em; margin:0 0 17px; }
.lottery-screen h1 { font-family:"Noto Serif SC",serif; font-size:clamp(42px,8vw,76px); font-weight:500; letter-spacing:-.07em; line-height:1.08; margin:0; }
.lottery-screen h1 em { color:#cf6388; font-style:normal; }
.lottery-intro { color:#765365; font-size:15px; line-height:1.85; margin:20px 0 28px; }
.lottery-intro small { color:#aa7b8d; font-family:var(--mono); font-size:10px; }
.lottery-grid { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(72px,112px)); }
.lottery-box { aspect-ratio:1; background:linear-gradient(145deg,#f7b7cc,#d9658d); border:1px solid rgba(255,255,255,.75); border-radius:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 20px rgba(154,53,88,.15); color:#fff7f8; overflow:hidden; padding:0; position:relative; transition:transform .25s ease,box-shadow .25s ease,background .25s ease; }
.lottery-box::before,.lottery-box::after { background:rgba(255,255,255,.3); content:''; position:absolute; }
.lottery-box::before { height:100%; left:calc(50% - 4px); top:0; width:8px; }.lottery-box::after { height:8px; left:0; top:calc(50% - 4px); width:100%; }
.lottery-box span { font-family:var(--mono); font-size:10px; position:relative; z-index:1; }
.lottery-box:hover:not(:disabled) { box-shadow:0 13px 26px rgba(154,53,88,.22); transform:translateY(-4px) rotate(-1deg); }
.lottery-box:disabled { cursor:default; }
.lottery-box.is-opening { animation:lotteryBoxOpen .62s cubic-bezier(.4,0,.2,1) forwards; }
.lottery-box.is-opening::before,.lottery-box.is-opening::after { opacity:0; transition:opacity .28s ease; }
.lottery-box.is-picked { background:#fffaf9; box-shadow:inset 0 0 0 1px rgba(214,90,130,.2); color:#c65b81; }
.lottery-box.is-revealed { background:#fff5f7; box-shadow:inset 0 0 0 1px rgba(214,90,130,.14); color:#ae7087; }
.lottery-box.is-picked::before,.lottery-box.is-picked::after,.lottery-box.is-revealed::before,.lottery-box.is-revealed::after { display:none; }
.lottery-box.is-picked span,.lottery-box.is-revealed span { font-family:"Noto Serif SC",serif; font-size:13px; line-height:1.35; padding:8px; }
.lottery-box.is-picked img,.lottery-box.is-revealed img { height:100%; left:0; object-fit:cover; position:absolute; top:0; width:100%; }
.lottery-progress { color:#8c6878; font-family:var(--mono); font-size:11px; letter-spacing:.08em; margin:24px 0 0; }
.lottery-result { color:#c6577e; font-family:"Noto Serif SC",serif; font-size:18px; min-height:1.6em; margin:12px 0 0; }
.reveal-all-boxes { background:transparent; border:1px solid rgba(198,87,126,.45); border-radius:999px; color:#a95070; font-family:"Noto Serif SC",serif; font-size:14px; margin-top:18px; padding:10px 24px; transition:background .2s,color .2s; }.reveal-all-boxes:hover{background:#cf6388;color:#fff}
.lottery-prize-modal { align-items:center; background:rgba(72,39,55,.36); backdrop-filter:blur(8px); display:flex; inset:0; justify-content:center; padding:24px; position:fixed; z-index:120; }
.lottery-prize-card { background:#f8dbe5; border:1px solid rgba(255,255,255,.76); border-radius:28px; box-shadow:0 24px 65px rgba(69,31,49,.24); max-width:390px; padding:46px 22px 30px; position:relative; text-align:center; width:100%; }
.lottery-prize-card::before { display:none; }
.lottery-prize-card p { color:#9a7181; font-family:var(--mono); font-size:11px; letter-spacing:.16em; margin:0; }
.lottery-prize-image { display:block; filter:drop-shadow(0 14px 20px rgba(91,33,58,.2)); height:min(48vw,205px); margin:8px auto 0; object-fit:contain; width:min(48vw,205px); }
.lottery-prize-card strong { color:#bd5278; display:block; font-family:"Noto Serif SC",serif; font-size:clamp(28px,6vw,42px); font-weight:500; letter-spacing:-.045em; line-height:1.35; margin:22px 0 30px; }
.lottery-modal-close { background:rgba(255,255,255,.34); border:1px solid rgba(255,255,255,.55); border-radius:50%; color:#875466; font-size:23px; height:34px; line-height:1; padding:0; position:absolute; right:15px; top:15px; width:34px; }
.lottery-continue { background:linear-gradient(135deg,#d76b91,#bd4e75); border:0; border-radius:999px; box-shadow:0 8px 20px rgba(190,72,114,.2); color:#fff; font-family:"Noto Serif SC",serif; font-size:15px; padding:13px 29px; }
@keyframes lotteryBoxOpen { 0%{transform:scale(1) rotateX(0)}42%{transform:scale(.9) rotateX(14deg)}100%{transform:scale(1.04) rotateX(0)} }
@media(max-width:380px){.lottery-grid{gap:8px;grid-template-columns:repeat(3,82px)}.lottery-intro{margin-bottom:19px}.lottery-screen{padding:25px 20px}}

.answer-response::before {
  content: '♥';
  display: block;
  font-size: 28px;
  color: var(--red);
  margin-bottom: 12px;
  animation: tinyHeartbeat 1.4s ease-in-out infinite;
}

@keyframes tinyHeartbeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  .proposal::before {
    transform: translate(-50%, -52%);
  }
  .proposal h2 {
    max-width: 92vw;
  }
  .choices {
    max-width: 92vw;
  }
  .choice {
    padding: 20px 22px;
  }
}

/* TEMP_RING_TUNER — 确认最终圆环参数后连同后台调试入口一起删除 */
.ring-tuner-toggle { border: 0; cursor: pointer; margin: 0; text-align: left; width: 100%; }
.ring-tuner-toggle small::before { content: '＋'; margin-right: 5px; }
.ring-tuner-toggle[aria-expanded="true"] small::before { content: '－'; }
.ring-tuner-panel { background: rgba(255,250,252,.78); padding: 4px 15px 15px; }
.ring-tuner-control { border-bottom: 1px solid rgba(132,81,101,.1); display: block; padding: 14px 0 13px; }
.ring-tuner-control > span { align-items: center; color: #76505f; display: flex; font-family: var(--serif); font-size: 14px; justify-content: space-between; }
.ring-tuner-control output { color: #c4577d; font-family: var(--mono); font-size: 11px; }
.admin-panel .ring-tuner-control input[type="range"] { accent-color: #cf6388; background: transparent; border: 0; display: block; margin: 12px 0 0; padding: 0; width: 100%; }
.ring-tuner-panel > p { color: #a27c8b; font-size: 11px; line-height: 1.6; margin: 12px 0 0; }

/* ─── 页脚 ─── */
footer {
  background: linear-gradient(160deg, #4a2a3d, #3d2435) !important;
  color: rgba(255, 232, 240, .6) !important;
  font-size: 10px;
  letter-spacing: .12em;
  padding: 28px max(24px, 8vw);
}

/* ─── 管理后台 ─── */
.admin-modal {
  background: rgba(61, 36, 53, .7) !important;
  backdrop-filter: blur(12px);
}

.admin-panel {
  background: rgba(254, 249, 246, .97) !important;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(61, 36, 53, .2);
  backdrop-filter: blur(20px);
}

.admin-panel h2 {
  color: var(--ink);
}

.admin-description {
  color: #7a5a6a;
}

.admin-panel input {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .3s, box-shadow .3s;
}

.admin-panel input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(214, 90, 130, .1);
}

.admin-primary {
  background: linear-gradient(135deg, var(--rose-deep), var(--red)) !important;
  border-radius: 12px;
  font-weight: 500;
  transition: transform .2s, box-shadow .2s;
}

.admin-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(214, 90, 130, .3);
}

.answer-record {
  background: rgba(255, 232, 240, .6) !important;
  border-radius: 16px;
  border: 1px solid var(--line);
}

.live-visitors{background:rgba(255,255,255,.54);border:1px solid rgba(214,90,130,.15);display:grid;gap:12px;margin:20px 0;padding:16px}.live-visitors>div:first-child{align-items:baseline;display:flex;justify-content:space-between}.live-visitors small{color:#765365;font-family:var(--mono);font-size:10px}.live-visitors strong{color:#a43f64;font-size:20px}.live-visitor-list{display:flex;flex-wrap:wrap;gap:7px}.live-visitor{background:#fff;border-radius:999px;color:#5b3547;font-family:var(--mono);font-size:10px;padding:7px 9px}
.presentation-settings{background:rgba(255,255,255,.54);border:1px solid rgba(214,90,130,.15);display:grid;gap:12px;margin:20px 0;padding:16px}.presentation-settings>small{color:#765365;font-family:var(--mono);font-size:10px}.presentation-settings label{align-items:center;color:#5b3547;cursor:pointer;display:flex;font-size:14px;justify-content:space-between}.presentation-settings input{height:1px;opacity:0;position:absolute;width:1px}.presentation-settings i{background:#d5c7ce;border-radius:20px;height:22px;position:relative;transition:.2s;width:40px}.presentation-settings i::after{background:#fff;border-radius:50%;content:'';height:16px;left:3px;position:absolute;top:3px;transition:.2s;width:16px}.presentation-settings input:checked+i{background:#d65a82}.presentation-settings input:checked+i::after{transform:translateX(18px)}
.presentation-settings .lottery-mode select{background:#fff;border:1px solid rgba(214,90,130,.22);border-radius:7px;color:#5b3547;font:inherit;font-size:12px;padding:7px 9px}

.admin-danger {
  background: linear-gradient(135deg, #b04060, #d65a82) !important;
  border-radius: 12px;
  transition: transform .2s;
}

.admin-danger:hover {
  transform: translateY(-2px);
}

.admin-secondary {
  border-radius: 12px;
  border: 1.5px solid var(--line) !important;
  transition: all .2s;
}

.admin-secondary:hover {
  background: rgba(255, 232, 240, .5);
}

/* ─── Reveal 动画优化 ─── */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(.98);
  transition: opacity 1s cubic-bezier(.23, 1, .32, 1), transform 1s cubic-bezier(.23, 1, .32, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ─── 响应式 ─── */
@media (max-width: 600px) {
  .photo-slot {
    padding: 10px 10px 44px 10px;
  }

  .photo-slot::before {
    inset: 10px 10px 44px 10px !important;
  }

  .choice {
    padding: 18px 20px;
    font-size: 15px;
  }

  .answer-response {
    padding: 20px;
    font-size: 17px;
  }

  .admin-panel {
    padding: 30px 20px;
  }

  .heart-particle {
    font-size: 10px !important;
  }
}

/* ─── 精致度打磨（2026-07）：触感反馈 · 中文排印 · 细节氛围 ─── */

/* 手机点按时不再出现浏览器默认的灰色高亮块 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 文字选中色：玫瑰粉 */
::selection {
  background: rgba(224, 112, 150, .24);
}

/* 中文大标题：过紧的负字距会让相邻汉字笔画相碰，放宽一点更秀气 */
.hero h1,
.proposal h2,
.chapter h2,
.chat-echo strong,
.prince-quote-cn,
.our-memories-message,
.lottery-screen h1,
.lottery-prize-card strong,
.asset-loader h1 {
  letter-spacing: -.02em;
}

.hero h1,
.proposal h2,
.chapter h2 {
  line-height: 1.14;
}

/* 加载页：进度条微光流动，第一眼更精致 */
.asset-loader-track i {
  background: linear-gradient(90deg, #d36a91, #ed9fba, #f9d3de, #ed9fba, #d36a91);
  background-size: 200% 100%;
  animation: loaderShimmer 1.8s linear infinite;
}

.asset-loader .eyebrow::after {
  color: #d36a91;
  content: ' ♥';
  display: inline-block;
  animation: tinyHeartbeat 1.6s ease-in-out infinite;
}

@keyframes loaderShimmer {
  from { background-position: 0% 0; }
  to   { background-position: -200% 0; }
}

/* "进入故事"按钮：呼吸微光，引导最关键的一次点击 */
.start-button {
  animation: startButtonBreathe 2.8s ease-in-out infinite;
}

.start-button:hover {
  animation: none;
}

@keyframes startButtonBreathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 154, 176, 0), 0 6px 22px rgba(224, 112, 150, .16); }
  50%      { box-shadow: 0 0 26px 3px rgba(255, 154, 176, .3), 0 6px 28px rgba(224, 112, 150, .3); }
}

/* 手机按压反馈：轻轻下沉，代替浏览器默认灰闪
   （.start-button 有内联 transform，按压改用亮度变化） */
.choice:active,
.reveal-all-boxes:active,
.lottery-continue:active {
  transform: scale(.97);
}

.choice.yes:active {
  animation: none;
  transform: scale(.97);
}

.start-button:active {
  filter: brightness(.92);
}

.lottery-box:active:not(:disabled) {
  transform: translateY(-1px) scale(.95);
}

/* 键盘可见焦点，桌面访问也不丢焦点提示 */
.choice:focus-visible,
.start-button:focus-visible,
.reveal-all-boxes:focus-visible,
.lottery-continue:focus-visible {
  outline: 2px solid rgba(195, 83, 125, .72);
  outline-offset: 3px;
}

/* 骑士等待页：两颗星星轻轻漂浮 */
.knight-screen::before,
.knight-screen::after {
  animation: knightSparkle 3.6s ease-in-out infinite;
}

.knight-screen::after {
  animation-delay: 1.8s;
}

@keyframes knightSparkle {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(-10px); opacity: 1; }
}

/* 后台滚动条细化 */
.admin-panel-scroll::-webkit-scrollbar {
  width: 5px;
}

.admin-panel-scroll::-webkit-scrollbar-thumb {
  background: rgba(181, 94, 130, .28);
  border-radius: 999px;
}

.admin-panel-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* ─── 最终选择 · 下一章 ─── */
.proposal {
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 255, 255, .92), transparent 29%),
    radial-gradient(circle at 88% 86%, rgba(235, 157, 185, .25), transparent 34%),
    linear-gradient(150deg, #fffafc 0%, #f9e7ee 52%, #f5dfe8 100%) !important;
  display: grid;
  min-height: max(100svh, 760px);
  padding: max(48px, env(safe-area-inset-top)) max(20px, 5vw) max(48px, env(safe-area-inset-bottom));
  place-items: center;
}
.proposal::before {
  animation: none;
  border: 1px solid rgba(190, 106, 142, .15);
  border-radius: 48% 52% 47% 53% / 52% 44% 56% 48%;
  color: transparent;
  content: '';
  filter: none;
  height: min(74vw, 620px);
  left: auto;
  right: min(-13vw, -90px);
  top: min(-11vw, -70px);
  transform: rotate(-18deg);
  width: min(74vw, 620px);
}
.proposal::after {
  color: rgba(189, 96, 134, .25);
  content: '✦';
  font-size: clamp(36px, 6vw, 72px);
  left: max(28px, 8vw);
  position: absolute;
  top: clamp(54px, 9svh, 110px);
}
.proposal-card {
  background: rgba(255, 255, 255, .44);
  border: 1px solid rgba(190, 106, 142, .18);
  border-radius: 30px;
  box-shadow: 0 24px 70px rgba(105, 59, 78, .1), inset 0 1px rgba(255, 255, 255, .7);
  max-width: 630px;
  padding: clamp(40px, 7vw, 76px) clamp(24px, 6vw, 68px);
  position: relative;
  text-align: center;
  width: min(100%, 630px);
  z-index: 1;
}
.proposal-card::before,
.proposal-card::after {
  background: rgba(192, 105, 142, .5);
  content: '';
  height: 1px;
  position: absolute;
  top: 28px;
  width: 44px;
}
.proposal-card::before { left: 32px; }
.proposal-card::after { right: 32px; }
.proposal-date {
  color: #9b687e;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  margin: 0 0 18px;
}
.proposal .eyebrow {
  color: #bf6687;
  font-size: 10px;
  letter-spacing: .24em;
  margin: 0;
}
.proposal-title,
.proposal h2 {
  color: #553444;
  font-size: clamp(30px, 5.2vw, 56px);
  line-height: 1.38;
  margin: clamp(18px, 3vw, 30px) 0 0;
  text-shadow: none;
}
.proposal-title::after,
.proposal h2::after { display: none; }
.proposal em { color: #b3567d; }
.proposal-note {
  color: #7a5969;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.9;
  margin: clamp(22px, 4vw, 36px) 0 0;
  max-width: none;
}
.choices {
  display: grid;
  gap: 12px;
  margin: clamp(30px, 5vw, 46px) auto 0;
  max-width: 100%;
}
.choice {
  align-items: center;
  border-radius: 15px;
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  min-height: 64px;
  padding: 18px 22px;
  text-align: left;
  width: 100%;
}
.choice.yes {
  animation: none;
  background: linear-gradient(135deg, #bd5b80, #d7789a) !important;
  box-shadow: 0 10px 26px rgba(190, 91, 128, .28);
}
.choice.yes:hover { animation: none; transform: translateY(-3px); }
.choice.later {
  background: rgba(255, 255, 255, .54);
  border-color: rgba(167, 101, 129, .24);
  color: #704a60;
}
.choice.later:hover { background: rgba(255, 255, 255, .78); }
.answer-response { margin-top: 30px; text-align: left; }
@media (max-width: 600px) {
  .proposal { min-height: 100svh; padding-left: 18px; padding-right: 18px; }
  .proposal-card { border-radius: 24px; padding: 42px 22px 28px; }
  .proposal-card::before, .proposal-card::after { top: 21px; width: 30px; }
  .proposal-card::before { left: 24px; }
  .proposal-card::after { right: 24px; }
  .proposal-title, .proposal h2 { font-size: clamp(29px, 7.5vw, 36px); line-height: 1.38; }
  .proposal-note { font-size: 14px; }
  .choice { font-size: 15px; min-height: 60px; padding: 16px 18px; }
}
/* 最终选择 · 去除卡片，回到章节式留白排版 */
.proposal {
  display: flex;
  justify-content: center;
  padding-left: max(28px, 9vw);
  padding-right: max(28px, 9vw);
}
.proposal-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0 auto;
  max-width: 860px;
  padding: 0;
  text-align: left;
  width: 100%;
}
.proposal-card::before,
.proposal-card::after { display: none; }
.proposal-date {
  align-items: center;
  color: #a66d84;
  display: flex;
  gap: 12px;
  letter-spacing: .18em;
  margin-bottom: 14px;
}
.proposal-date::after {
  background: rgba(182, 92, 128, .42);
  content: '';
  height: 1px;
  width: min(15vw, 116px);
}
.proposal-reminisce {
  color: #8a6a7a;
  font-size: clamp(15px, 1.9vw, 18px);
  line-height: 2.15;
  margin: clamp(30px, 5vw, 50px) 0 clamp(34px, 5vw, 56px);
}
.proposal-reminisce p {
  margin: 0;
}
.proposal-reminisce p + p {
  margin-top: 4px;
}
.proposal .eyebrow { color: #c36e8f; letter-spacing: .2em; text-align: left; }
.proposal-title,
.proposal h2 {
  font-size: clamp(34px, 5.7vw, 66px);
  line-height: 1.32;
  margin-top: clamp(16px, 2.5vw, 28px);
  max-width: 760px;
  text-align: left;
}
.proposal-note {
  border-left: 2px solid rgba(195, 103, 141, .38);
  font-size: clamp(14px, 1.9vw, 19px);
  margin-top: clamp(28px, 4vw, 44px);
  padding-left: 18px;
  text-align: left;
}
.choices {
  margin-left: 0;
  max-width: 460px;
}
.answer-response { margin-left: 0; max-width: 520px; }
@media (min-width: 760px) {
  .proposal-card { padding-left: min(7vw, 90px); }
  .proposal .choices { margin-top: 54px; }
}
@media (max-width: 600px) {
  .proposal { align-items: center; padding-left: 28px; padding-right: 28px; }
  .proposal-card { width: 100%; }
  .proposal-date { font-size: 9px; }
  .proposal-reminisce { font-size: 14px; line-height: 2.05; margin: 28px 0 32px; }
  .proposal-title, .proposal h2 { font-size: clamp(31px, 8.2vw, 38px); line-height: 1.34; }
  .proposal-note { margin-top: 28px; padding-left: 14px; }
  .choices { margin-top: 38px; }
}
/* 第一束花 · 斜向文字路径，避开两束花 */
.flower-memory .chapter-meta {
  left: max(28px, 7vw);
  position: absolute;
  right: auto;
  top: max(52px, 8svh);
  width: min(48vw, 380px);
  z-index: 3;
}
.flower-memory-copy {
  margin: 0;
  max-width: min(58vw, 620px);
  position: absolute;
  right: max(24px, 8vw);
  text-align: right;
  top: clamp(260px, 33svh, 410px);
  z-index: 3;
}
.flower-memory-date { margin-left: auto; }
.flower-memory-copy h2 { margin-top: clamp(14px, 2.4vw, 24px); }
.flower-memory-copy > p:last-child {
  margin-left: auto;
  margin-top: clamp(24px, 4vw, 42px);
  max-width: min(48vw, 510px);
}
.flower-memory-photo {
  bottom: clamp(-14px, -1vw, 0px);
  left: clamp(-42px, -2vw, -10px);
  width: min(64vw, 510px);
}
.flower-memory-chibi {
  right: clamp(-22px, -1vw, -4px);
  top: clamp(72px, 10svh, 120px);
  width: min(28vw, 230px);
}
.flower-memory-note { right: max(24px, 8vw); z-index: 3; }
@media (max-width: 600px) {
  .flower-memory .chapter-meta { left: 28px; top: max(52px, 7svh); width: 54vw; }
  .flower-memory-copy { max-width: 62vw; right: 28px; top: max(282px, 35svh); }
  .flower-memory-copy h2 { font-size: clamp(28px, 7.4vw, 36px); }
  .flower-memory-copy > p:last-child { font-size: 13px; line-height: 1.82; margin-top: 24px; max-width: 54vw; }
  .flower-memory-photo { bottom: -4px; left: -48px; width: 68vw; }
  .flower-memory-chibi { right: -14px; top: max(72px, 9svh); width: 30vw; }
  .flower-memory-note { bottom: max(24px, env(safe-area-inset-bottom)); font-size: 8px; right: 24px; }
}
/* 第一束花 · 保留原始花束尺度，文字从左上斜向右下 */
.flower-memory .chapter-meta {
  left: max(28px, 7vw);
  top: max(52px, 8svh);
  width: min(54vw, 460px);
}
.flower-memory-copy {
  left: max(28px, 8vw);
  max-width: min(64vw, 650px);
  right: auto;
  text-align: left;
  top: clamp(230px, 29svh, 360px);
}
.flower-memory-date { margin-left: 0; }
.flower-memory-copy h2 { text-align: left; }
.flower-memory-copy > p:last-child {
  margin-left: min(28vw, 290px);
  max-width: min(50vw, 480px);
  text-align: right;
}
.flower-memory-photo {
  bottom: clamp(-20px, -2vw, 0px);
  left: clamp(-58px, -4vw, -18px);
  width: min(78vw, 610px);
}
.flower-memory-chibi {
  right: clamp(-34px, -2vw, -10px);
  top: clamp(34px, 7svh, 78px);
  width: min(39vw, 300px);
}
@media (max-width: 600px) {
  .flower-memory .chapter-meta { left: 28px; top: max(52px, 7svh); width: 57vw; }
  .flower-memory-copy { left: 28px; max-width: 66vw; right: auto; top: max(244px, 30svh); }
  .flower-memory-copy h2 { font-size: clamp(29px, 7.7vw, 37px); }
  .flower-memory-copy > p:last-child { margin-left: 25vw; max-width: 54vw; }
  .flower-memory-photo { bottom: -8px; left: -62px; width: 84vw; }
  .flower-memory-chibi { right: -22px; top: max(46px, 7svh); width: 42vw; }
}
/* 第一束花 · 心意文案微调 */
.flower-memory-copy > p:last-child {
  font-size: clamp(15px, 2vw, 20px);
  transform: translateX(12px);
}
@media (max-width: 600px) {
  .flower-memory-copy > p:last-child { font-size: 14px; transform: translateX(10px); }
}
/* 第一束花 · 等长心意文案 */
.flower-memory-copy > p:last-child {
  line-height: 2.05;
  text-align: left;
  text-wrap: nowrap;
}
.flower-memory-copy > p:last-child span {
  display: block;
  letter-spacing: .1em;
  text-align: justify;
  text-align-last: justify;
  width: 9em;
}
@media (max-width: 600px) {
  .flower-memory-copy > p:last-child { line-height: 2.15; }
}
/* 第一章 · 共享的落日 */
#chapter-one {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 215, 181, .46), transparent 24%),
    linear-gradient(155deg, #fffafc 0%, #fae8ec 52%, #f5e1e8 100%) !important;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}
#chapter-one::before {
  background: url('./assets/decorations/shared-sunset.png') right bottom / min(90vw, 940px) auto no-repeat;
  bottom: -2px;
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 1.6s ease;
  z-index: -1;
}
#chapter-one.sunset-visible::before {
  opacity: .48;
}
#chapter-one .chapter-meta,
#chapter-one .chapter-grid,
#chapter-one .chat-echo { position: relative; z-index: 1; }
#chapter-one .chapter-grid { max-width: 920px; }
#chapter-one .chat-echo {
  backdrop-filter: none;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(186, 105, 137, .44);
  border-radius: 0;
  box-shadow: none;
  margin: clamp(56px, 10vw, 130px) 0 0 auto;
  max-width: min(58vw, 600px);
  padding: 0 0 0 clamp(20px, 3vw, 32px);
  text-align: left;
}
#chapter-one .chat-echo p { color: #bd708c; }
#chapter-one .chat-echo strong {
  color: #a74f73;
  font-size: clamp(30px, 4.8vw, 54px);
  letter-spacing: -.03em;
  line-height: 1.28;
  margin: 18px 0 16px;
}
#chapter-one .chat-echo span { color: #765365; display: block; line-height: 1.95; }
#chapter-one .chat-echo.reveal {
  transition: opacity 1.5s cubic-bezier(.23, 1, .32, 1), transform 1.5s cubic-bezier(.23, 1, .32, 1);
}
@media (max-width: 600px) {
  #chapter-one::before { background-position: 62% bottom; background-size: 142vw auto; }
  #chapter-one.sunset-visible::before { opacity: .43; }
  #chapter-one .chat-echo { margin-top: 116px; max-width: 66vw; padding-left: 16px; }
  #chapter-one .chat-echo strong { font-size: clamp(29px, 7.3vw, 36px); }
  #chapter-one .chat-echo span { font-size: 14px; }
}