:root{
  --bg:#F7F3EC;
  --paper:#FFFDF9;
  --ink:#2C2521;
  --sub:#8A7A6D;
  --accent:#8C2F2F;
  --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;
  padding:0 24px 34px;
  display:flex;
  flex-direction:column;
}

/* 顶部：一行小字，别的不放 */
.brand{
  text-align:center;
  padding:34px 0 22px;
  font-family:var(--serif);
  font-size:12.5px;
  letter-spacing:.18em;
  color:var(--sub);
}

/* 正文卡：一张白纸，没有多余装饰 */
.sheet{
  background:var(--paper);
  border-radius:3px;
  padding:30px 24px 26px;
  box-shadow:0 12px 34px -26px rgba(90,60,40,.46);
  animation:rise .5s cubic-bezier(.22,.8,.3,1) both;
}

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

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

.link{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:20px;
  font-size:14px;
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(140,47,47,.35);
  padding-bottom:2px;
}
.link:active{opacity:.65;}

/* 按钮 */
.acts{
  margin-top:20px;
  display:flex;flex-direction:column;gap:10px;
  animation:rise .5s .08s cubic-bezier(.22,.8,.3,1) both;
}
.btn{
  -webkit-appearance:none;appearance:none;
  border:0;border-radius:3px;
  height:50px;
  display:flex;align-items:center;justify-content:center;
  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;}
.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;}

/* 海报弹层 */
.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);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(86vh - 130px);
  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,.6);
  letter-spacing:.06em;margin:9px 0 0;
}

@keyframes rise{from{opacity:0;transform:translateY(12px);}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;}}