/* ══════════════════════════════════════════════════
   阳光主题：奶油白底 + 暖阳光晕 + 微信浅色气泡
   屏序：s1破冰对话 → s2悬念封面 → s3聊天记录 →
         s4邀请理由 → s5活动详情 → s6照片墙 → s7 RSVP → s8落款
   ══════════════════════════════════════════════════ */
:root{
  --bg:#faf6ee;         /* 奶油白背景 */
  --bg-deep:#f3ecdd;    /* 稍深一档（卡片底） */
  --text:#4a4438;       /* 暖深灰正文 */
  --dim:#a89f8d;        /* 次要文字 */
  --paper:#f6eeda;      /* 信纸奶油色 */
  --paper-dark:#eadfc3; /* 信封内里 */
  --seal:#d07a6a;       /* 火漆橘红 */
  --her:#ffffff;        /* 她的气泡（微信浅色白） */
  --me:#a8e07e;         /* 我的气泡（微信浅色绿） */
  --pink:#e87a90;       /* 强调粉 */
  --sun:#ffd9a0;        /* 阳光暖金 */
  --shadow:0 10px 30px rgba(120,100,70,.18);
}
*{margin:0;padding:0;box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none}
html,body{height:100%}
body{background:var(--bg);color:var(--text);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  overflow:hidden;overscroll-behavior:none}

/* 滚动容器：mandatory 硬吸附 + snap-stop——一滑一屏、边界清晰；
   不加 scroll-behavior:smooth（跟触摸惯性打架会卡顿） */
.snap{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.snap::-webkit-scrollbar{display:none}
.snap section{position:relative;min-height:100vh;min-height:100svh;
  scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:60px 26px;text-align:center}

/* 进屏浮现 */
.fx{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
section.on .fx{opacity:1;transform:none}
section.on .fx:nth-of-type(1){transition-delay:.1s}
section.on .fx:nth-of-type(2){transition-delay:.3s}
section.on .fx:nth-of-type(3){transition-delay:.5s}
section.on .fx:nth-of-type(4){transition-delay:.7s}
section.on .fx:nth-of-type(5){transition-delay:.9s}

.kai{font-family:Kaiti,"Kaiti SC",STKaiti,"KaiTi_GB2312",serif}

/* ══════════════ 微信外框（s1 破冰 & s3 记录共用） ══════════════ */
.phone{width:100%;max-width:400px;background:#ededed;border-radius:22px;
  border:1px solid #e0d8c4;box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column}
.phone-head{display:flex;align-items:center;justify-content:center;position:relative;
  padding:12px 16px;background:#f7f7f7;border-bottom:1px solid #e4e4e4;flex:none}
.ph-back{position:absolute;left:16px;color:#5f5f5f;font-size:21px;line-height:1;width:24px}
.ph-name{font-size:16px;font-weight:600;color:#1f1f1f}
.ph-more{position:absolute;right:16px;color:#5f5f5f;font-size:16px;letter-spacing:1px;width:24px;text-align:right}
.phone .chat{padding:16px 12px;background:#ededed}

/* ══════════════ 第3屏聊天记录 ══════════════
   边距只在这里给（section 不给 padding，避免多处规则打架）：
   框高随内容自然生长（消息越多框越高），只有超出可用高度才封顶、内部可滚 */
#s3{padding:0;justify-content:flex-start}
#s3 .phone{
  width:calc(100% - 24px);            /* 左右各 12px 边距 */
  max-width:400px;
  height:auto;                        /* 随内容长高 */
  max-height:calc(100svh - 16px);     /* 超过可用高度才封顶（顶部对齐） */
  margin:8px auto;
  box-shadow:0 10px 30px rgba(120,100,70,.18);
}
#s3 .phone .chat{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:auto;scrollbar-width:none;
  justify-content:flex-start;
  padding:14px 12px;
}
#s3 .phone .chat.bottom{justify-content:flex-end}
#s3 .phone .chat::-webkit-scrollbar{display:none}
@media (min-width:760px){
  #s3 .phone{width:min(500px,calc(100% - 24px));max-height:calc(100svh - 32px);margin:16px auto}
}

/* ══════════════ 聊天气泡（防聊天撑出屏幕，字号回调一档） ══════════════ */
.chat{width:100%;display:flex;flex-direction:column;gap:12px}
.time{font-size:12px;color:#b9b1a2;margin-bottom:2px;text-align:center}
.row{display:flex;align-items:flex-start;gap:9px}
.row.me{flex-direction:row-reverse}
.ava{width:30px;height:30px;border-radius:5px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff}
.row.her .ava{background:#c8b89a}
.row.me  .ava{background:#7cc45e}
.bub{max-width:78%;padding:8px 12px;border-radius:9px;font-size:15px;line-height:1.55;
  text-align:left;opacity:0;transform:translateY(10px);
  transition:opacity .4s ease,transform .4s ease;
  box-shadow:0 1px 3px rgba(120,100,70,.10)}
.row.her .bub{background:var(--her);border-top-left-radius:3px;border:1px solid #efe8d8}
.row.me  .bub{background:var(--me);border-top-right-radius:3px}
.row.show .bub{opacity:1;transform:none}
.bub.typing{padding:10px 13px}
.bub.typing i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#c4bba8;
  margin:0 2px;animation:dot 1.1s infinite}
.bub.typing i:nth-child(2){animation-delay:.18s}
.bub.typing i:nth-child(3){animation-delay:.36s}
@keyframes dot{0%,60%,100%{opacity:.3}30%{opacity:1}}

#s1 .ice .bub{font-size:15.5px;max-width:82%}
#s1 .ice-hint{margin-top:42px;font-size:13.5px;color:var(--dim);
  opacity:0;transition:opacity .8s ease}
#s1 .ice-hint.show{opacity:1;animation:floatY 1.8s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ══════════════ 第2屏 悬念封面 ══════════════ */
/* 阳光光晕：右上暖金大光斑 + 左下淡粉 */
#s2 .glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 42% at 82% 8%,rgba(255,205,130,.55),transparent 65%),
    radial-gradient(ellipse 45% 35% at 10% 90%,rgba(255,180,160,.30),transparent 60%)}
/* 阳光粒子（很轻） */
#s2 .spark{position:absolute;inset:0;pointer-events:none}
#s2 .spark::before{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:var(--sun);
  box-shadow:16vw 20vh rgba(255,200,120,.8),44vw 12vh rgba(255,200,120,.5),
   70vw 30vh rgba(255,190,110,.7),88vw 52vh rgba(255,200,120,.5),
   8vw 56vh rgba(255,190,110,.5),30vw 76vh rgba(255,200,120,.4),
   62vw 84vh rgba(255,190,110,.6),82vw 70vh rgba(255,200,120,.4);
  animation:floatUp 5s ease-in-out infinite alternate}
@keyframes floatUp{from{transform:translateY(6px)}to{transform:translateY(-10px)}}

#s2 h1{font-size:30px;font-weight:600;margin-bottom:10px}
#s2 .sub{font-size:14.5px;color:var(--dim);margin-bottom:40px;line-height:1.8}

/* 信封：奶油纸色，翻盖+火漆，开信后信纸探出 */
.env{position:relative;width:min(70vw,290px);aspect-ratio:4/2.8;cursor:pointer;
  filter:drop-shadow(0 14px 26px rgba(150,120,80,.30))}
.env .back{position:absolute;inset:0;border-radius:6px;background:var(--paper-dark);z-index:1}
.env .letter{position:absolute;left:6%;right:6%;top:12%;bottom:16%;z-index:2;
  background:#fffdf5;border-radius:4px;opacity:0;
  transform:translateY(0);transition:transform .7s ease .3s,opacity .4s ease .3s;
  display:flex;align-items:flex-start;justify-content:center;
  box-shadow:0 2px 8px rgba(150,120,80,.12)}
.env .letter span{color:#b08d55;font-size:14px;margin-top:16px}
.env .front{position:absolute;inset:0;z-index:3;border-radius:6px;
  background:var(--paper);
  clip-path:polygon(0 26%,50% 60%,100% 26%,100% 100%,0 100%)}
.env .flap{position:absolute;left:0;top:0;width:100%;height:55%;z-index:4;
  background:#f0e4c6;border-radius:6px 6px 0 0;
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top;
  transition:transform .65s ease,opacity .4s ease .25s}
.env .seal{position:absolute;left:50%;top:45%;z-index:5;
  width:40px;height:40px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--seal);color:#fff7f0;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;box-shadow:0 3px 10px rgba(180,90,70,.35);
  transition:opacity .25s ease}
/* 开信：盖子翻起同时淡出（不遮标题），信纸探出头 */
.env.open .flap{transform:rotateX(180deg);opacity:0}
.env.open .seal{opacity:0}
.env.open .letter{opacity:1;transform:translateY(-38%)}
#s2 .hint{margin-top:40px;font-size:13.5px;color:var(--dim);
  opacity:0;transition:opacity .8s ease 1.1s}
#s2.open .hint{opacity:1}

/* ══════════════ 第4屏 邀请理由（留言条） ══════════════ */
.note-card{position:relative;width:100%;max-width:430px;background:#fffdf6;border-radius:14px;
  padding:34px 28px;box-shadow:var(--shadow);border:1px solid #f0e6d2;
  text-align:left;transform:rotate(-1deg)}
.note-card::before{content:"";position:absolute;width:74px;height:22px;
  background:rgba(232,180,140,.45);left:-18px;top:14px;transform:rotate(-38deg);
  border-radius:2px}
.note-card .note-line{font-size:16px;line-height:2.1;color:var(--text)}
.note-card .note-line.dim{color:var(--dim);font-size:15px}

/* ══════════════ 第5屏 活动详情 ══════════════ */
.detail-card{width:100%;max-width:430px;display:flex;flex-direction:column;gap:16px;
  background:#fffdf6;border-radius:14px;padding:32px 28px;
  box-shadow:var(--shadow);border:1px solid #f0e6d2}
.d-row{display:flex;gap:10px;text-align:left;align-items:baseline}
.d-label{flex:none;font-weight:700;font-size:15px;color:var(--seal)}
.d-text{font-size:16px;line-height:1.9;color:var(--text)}

/* ══════════════ 第6屏 拍立得照片墙 ══════════════
   手机：三张错落重叠（紧凑不超屏，配文保留）
   电脑：横排三张、间距舒展
   点任意一张 → 灯箱放大（JS 控制） */
.board{position:relative;width:100%;max-width:430px;
  display:flex;flex-direction:row;justify-content:center;align-items:flex-start}
.polaroid{background:#fffdf5;padding:6px 6px 8px;border-radius:3px;
  width:36vw;max-width:150px;box-shadow:0 8px 22px rgba(120,100,70,.28);
  opacity:0;cursor:zoom-in;
  transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.3,1)}
/* 错落重叠：左右两张压向中间 */
.polaroid.l{transform:translateX(16px) rotate(-7deg) translateY(10px);z-index:1}
.polaroid.m{transform:translateY(-8px) rotate(1deg);z-index:3}
.polaroid.r{transform:translateX(-16px) rotate(7deg) translateY(18px);z-index:2}
.polaroid.show{opacity:1}
.polaroid.show.l{transform:translateX(16px) rotate(-4deg) translateY(10px)}
.polaroid.show.m{transform:translateY(-8px) rotate(0deg)}
.polaroid.show.r{transform:translateX(-16px) rotate(4deg) translateY(18px)}
.polaroid:active{transform:scale(.97)}
.polaroid img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:var(--bg-deep)}
.polaroid figcaption{color:#8a7a58;font-size:12.5px;margin-top:6px;line-height:1.5;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* 提示：点照片可放大 */
.board-hint{margin-top:26px;font-size:13px;color:var(--dim)}

/* 灯箱：点开看大图 + 完整配文 */
#lightbox{position:fixed;inset:0;z-index:80;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;
  background:rgba(38,32,24,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:30px 26px;animation:fadeIn .25s ease}
#lightbox[hidden]{display:none}
#lightbox img{max-width:86vw;max-height:66vh;background:#fffdf5;
  padding:10px 10px 14px;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
#lb-cap{color:#f3ead8;font-size:15px;text-align:center;line-height:1.8;
  font-family:Kaiti,"Kaiti SC",STKaiti,serif}
#lb-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 18px);right:18px;
  width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:16px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ══════════════ 第7屏 RSVP ══════════════ */
#s7 .ask{font-size:16px;color:var(--text);line-height:1.9;margin-bottom:36px}
.btn{border:none;cursor:pointer;font-family:inherit;border-radius:999px;transition:transform .25s ease}
.btn:active{transform:scale(.95)}
.btn-yes{font-size:16.5px;font-weight:700;padding:16px 40px;color:#fff;
  background:linear-gradient(135deg,#f5a0b2,#e87a90);
  box-shadow:0 8px 22px rgba(232,122,144,.35)}
.btn-no{display:block;margin-top:22px;font-size:13px;padding:8px 18px;
  background:transparent;border:1px solid #ddd2bc;color:var(--dim);
  transition:transform .25s ease}
/* 抖动后会自动归位（JS 控制），点得到、不跑走 */
#s7 .next-hint{margin-top:56px;font-size:13px;color:var(--dim)}
#doge{position:fixed;z-index:60;pointer-events:none;font-size:44px;opacity:0;
  transform:translate(-50%,-50%) scale(.4);transition:opacity .25s,transform .25s}
#doge.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#doge .ai{position:absolute;left:50%;top:-22px;transform:translateX(-50%);
  font-size:15px;color:var(--pink);white-space:nowrap}

/* ── 点【准了】之后：本屏内联回应（不换页，滑动能继续） ── */
.yes-inline{margin-top:34px;display:flex;flex-direction:column;gap:10px;align-items:center;
  animation:fadeUp .6s ease}
.yes-inline[hidden]{display:none}
.yes-big{font-size:24px;line-height:1.9;color:var(--text)}
.yes-tip{font-size:15px;color:var(--dim);margin-top:2px}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ══════════════ 第8屏 结尾落款（全页最重的一句，字要够大） ══════════════ */
#s8 .end-line{font-size:21px;line-height:2.15;color:var(--text);letter-spacing:.02em}
#s8 .end-sign{margin-top:34px;font-size:16px;color:var(--dim);letter-spacing:.04em}

/* 音乐按钮：开信后才出现 */
#music{position:fixed;top:calc(env(safe-area-inset-top,0px) + 16px);right:16px;z-index:70;
  width:38px;height:38px;border-radius:50%;border:1px solid #e8ddc6;
  background:rgba(255,255,255,.8);color:#8a7a58;font-size:14px;
  display:none;align-items:center;justify-content:center}
#music.playing{animation:spin 7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

#fx{position:fixed;inset:0;z-index:55;pointer-events:none;display:none}

/* ══════════════════════════════════════════════════
   响应式
   ① 电脑端（≥760px）：照片墙横排舒展、卡片加宽（大字不动）
   ② 矮屏手机（≤700px 高，如 iPhone SE）：只收紧布局间距，字号不降
   ══════════════════════════════════════════════════ */
@media (min-width:760px){
  .phone{max-width:500px}
  #s1 .ice .bub{font-size:17px}
  .env{width:320px}
  .chat{gap:16px}
  .bub{font-size:16px;padding:11px 15px}
  .ava{width:34px;height:34px;font-size:15px}
  .note-card{max-width:520px;padding:40px 36px}
  .note-card .note-line{font-size:17px}
  .detail-card{max-width:520px;padding:38px 34px}
  .d-label{font-size:16px}
  .d-text{font-size:17px}
  .board{max-width:720px}
  .polaroid{width:200px;padding:9px 9px 11px}
  .polaroid.l{transform:translateX(0) rotate(-6deg) translateY(0)}
  .polaroid.m{transform:rotate(1deg) translateY(-6px)}
  .polaroid.r{transform:translateX(0) rotate(6deg) translateY(8px)}
  .polaroid.show.l{transform:rotate(-3.5deg)}
  .polaroid.show.m{transform:rotate(0deg) translateY(-6px)}
  .polaroid.show.r{transform:rotate(2.5deg) translateY(8px)}
  .polaroid figcaption{font-size:14.5px;-webkit-line-clamp:none}
  .board-hint{margin-top:34px;font-size:14px}
  #s7 .ask{font-size:17px}
  .btn-yes{font-size:18px;padding:18px 52px}
  .btn-no{font-size:13.5px;padding:9px 22px}
  .yes-big{font-size:25px}
  #s8 .end-line{font-size:24px}
  #s8 .end-sign{font-size:17px}
}
@media (max-height:700px){
  .snap section{padding:34px 22px}
  .phone{max-width:340px}
  .phone .chat{padding:11px 10px}
  #s1 .ice{gap:14px}
  #s1 .ice-hint{margin-top:26px}
  #s2 .sub{margin-bottom:26px}
  .env{width:min(58vw,225px)}
  #s2 .hint{margin-top:24px}
  .chat{gap:9px}
  .bub{padding:7px 11px;line-height:1.5}
  .ava{width:26px;height:26px;font-size:12px}
  #s3{padding:0}
  #s3 .phone{width:calc(100% - 20px);max-height:calc(100svh - 12px);margin:6px auto}
  .note-card{padding:24px 22px}
  .detail-card{gap:12px;padding:24px 22px}
  .polaroid{width:32vw}
  #s7 .ask{margin-bottom:22px}
  #s7 .next-hint{margin-top:32px}
  .btn-yes{padding:14px 36px}
}
/* 电脑+矮屏同时命中时，照片墙维持横排 */
@media (min-width:760px) and (max-height:700px){
  .polaroid{width:170px}
}