:root{
  --bg:#EFE8DC;
  --paper:#FFFCF7;
  --ink:#2C2521;
  --sub:#7C6B5F;
  --line:#E2D4C0;
  --accent:#8C2F2F;
  --accent-soft:#F3E4DC;
  --serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif SC",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:flex;
  justify-content:center;
  min-height:100vh;
}

/* 固定手机画框 */
.phone{
  width:430px;
  max-width:100vw;
  min-height:100vh;
  background:
    radial-gradient(120% 60% at 50% 0%, #FBF6EC 0%, rgba(251,246,236,0) 60%),
    var(--bg);
  padding:0 22px;
  display:flex;
  flex-direction:column;
}
@media (min-width:520px){
  .phone{box-shadow:0 0 0 1px rgba(0,0,0,.04),0 24px 60px -30px rgba(60,40,30,.35);}
}

/* ---------- 顶部 ---------- */
.hd{padding:38px 0 0;text-align:center;}
.hd-kicker{
  font-size:12.5px;
  letter-spacing:.42em;
  text-indent:.42em;
  color:var(--accent);
  font-weight:500;
}
.hd-rule{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:14px 0 12px;
}
.hd-rule span{display:block;width:38px;height:1px;background:linear-gradient(90deg,rgba(140,47,47,0),rgba(140,47,47,.45));}
.hd-rule span:last-child{background:linear-gradient(270deg,rgba(140,47,47,0),rgba(140,47,47,.45));}
.hd-rule i{display:block;width:4px;height:4px;border-radius:50%;background:rgba(140,47,47,.6);}
.hd-brand{
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:.16em;
  color:var(--sub);
}

/* ---------- 文案卡 ---------- */
.sheet{
  position:relative;
  margin-top:26px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  padding:34px 26px 28px;
  box-shadow:0 18px 40px -28px rgba(80,55,40,.5);
  animation:rise .55s cubic-bezier(.22,.8,.3,1) both;
}
.sheet::before,
.sheet::after{
  content:"";position:absolute;width:16px;height:16px;
  border:1px solid rgba(140,47,47,.28);
}
.sheet::before{top:9px;left:9px;border-right:0;border-bottom:0;}
.sheet::after{bottom:9px;right:9px;border-left:0;border-top:0;}

.title{
  font-family:var(--serif);
  font-size:27px;
  line-height:1.52;
  font-weight:700;
  letter-spacing:.02em;
  margin:0 0 20px;
  color:#241D19;
}
.title .em{color:var(--accent);}

.body p{
  font-size:15.5px;
  line-height:1.94;
  color:#4B403A;
  margin:0 0 10px;
  letter-spacing:.01em;
}
.body p:last-child{margin-bottom:0;}

.link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:22px;
  padding:9px 15px 9px 16px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:13.5px;
  letter-spacing:.04em;
  text-decoration:none;
  font-weight:500;
}
.link:active{opacity:.7;}

/* ---------- 按钮 ---------- */
.acts{
  margin-top:22px;
  display:flex;flex-direction:column;gap:11px;
  animation:rise .55s .1s cubic-bezier(.22,.8,.3,1) both;
}
.btn{
  -webkit-appearance:none;appearance:none;
  border:0;border-radius:3px;
  height:52px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:15.5px;font-family:var(--sans);
  letter-spacing:.06em;
  cursor:pointer;
  transition:transform .12s ease,opacity .12s ease,background .2s;
}
.btn:active{transform:scale(.985);}
.btn-main{background:var(--accent);color:#FFF8F2;box-shadow:0 10px 24px -14px rgba(140,47,47,.9);}
.btn-main.done{background:#3F6B4A;}
.btn-sub{background:transparent;color:var(--accent);border:1px solid rgba(140,47,47,.42);}
.btn[disabled]{opacity:.6;pointer-events:none;}

.tip{
  text-align:center;
  font-size:12px;
  color:#9A8A7E;
  letter-spacing:.08em;
  margin:16px 0 0;
  padding-bottom:18px;
}
.safe{height:env(safe-area-inset-bottom);}

/* ---------- 海报弹层 ---------- */
.modal{
  position:fixed;inset:0;z-index:99;
  display:none;
  align-items:center;justify-content:center;
}
.modal.on{display:flex;}
.modal-mask{position:absolute;inset:0;background:rgba(28,20,16,.66);backdrop-filter:blur(3px);animation:fade .25s both;}
.modal-body{
  position:relative;
  width:min(88vw,384px);
  display:flex;flex-direction:column;
  animation:pop .3s cubic-bezier(.22,.9,.3,1.05) both;
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2px 10px;
  color:#F4EBE0;
  font-size:12.5px;letter-spacing:.1em;
}
.modal-x{
  background:none;border:0;color:#F4EBE0;padding:4px;margin:-4px;
  display:flex;opacity:.75;cursor:pointer;
}
.poster-wrap{
  width:100%;
  aspect-ratio:3 / 4;
  max-height:calc(88vh - 132px);
  border-radius:3px;overflow:hidden;
  background:#EFE8DC;
}
.poster-wrap img{
  width:100%;height:100%;display:block;
  object-fit:contain;
}
.btn-download{
  margin-top:12px;height:46px;border:0;border-radius:3px;
  background:var(--accent);color:#FFF8F2;
  font-size:14.5px;letter-spacing:.08em;
  font-family:var(--sans);
  cursor:pointer;
}
.btn-download:active{opacity:.82;}
.btn-download.hide{display:none;}
.modal-hint{
  text-align:center;font-size:11.5px;color:rgba(244,235,224,.62);
  letter-spacing:.06em;margin:9px 0 0;
}

@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes pop{from{opacity:0;transform:scale(.95) translateY(10px);}to{opacity:1;transform:none;}}