/* 结果层（长图卡）
 *
 * 版式按 750 宽设计稿画的，这里换算成 rem：1rem = 100px @ 750。
 * 所以设计稿里的 26px 写成 .26rem，屏幕多宽都按比例缩放，不用写断点。
 * 首页只用 em，不受这里的 rem 影响。颜色变量收在 #result / #sheet 里，别覆盖首页的同名变量。
 * Chrome 61 的 flex 没有 gap、也没有 inset，间距一律用 margin，定位写四边。
 */
#result,#sheet{
  --paper:#F8F5EE; --paper-dark:#EFE9DC;
  --ink:#211C17; --ink-soft:#4A4038; --ink-faint:#8B7F70;
  --red:#B8412A; --rule:#C3B49B;
}
html{font-size:calc(100vw / 7.5);}
@media (min-width:751px){ html{font-size:100px;} }

/* 盖在首页之上的整屏滚动层；层级高过首页的纸纹颗粒（90/91），长图卡自带纸纹 */
#result{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:95;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  background:var(--paper-dark);
  visibility:hidden;opacity:0;transition:opacity .4s ease, visibility 0s linear .4s;
}
.show-result #result{visibility:visible;opacity:1;transition:opacity .4s ease;}

.card{position:relative;width:100%;max-width:750px;margin:0 auto;background:var(--paper);overflow:hidden;}
/* 纸纹：平铺 PNG + 普通 opacity。不用 mix-blend-mode，导图才不会掉效果 */
.card::before{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:50;
  background-image:url("../img/paper.png");background-repeat:repeat;background-size:2.56rem 2.56rem;
  opacity:.14;
}
.card::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:51;
  background:radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0) 55%, rgba(90,70,40,.13) 100%);
}
.card > *{position:relative;z-index:55;}

/* 插画满幅，底边渐隐进纸面。顶上空出容器浮层按钮的高度（--top-reserve 定义在 index.html），
   插画四边本来就羽化成透明，空出来的部分就是纸面 */
.hero{position:relative;width:100%;line-height:0;padding-top:var(--top-reserve, 88px);}
.hero img{width:100%;display:block;}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.8rem;
  background:linear-gradient(to bottom, rgba(248,245,238,0), var(--paper));}

/* 字号按 390 宽手机换算（1rem = 52px）：正文 .3rem ≈ 15.6px，辅助信息不低于 .2rem ≈ 10.4px */

/* 品种这一整块讲的是同一个人，段与段之间只靠留白分开。
 * 只在两处画线：标题区和分析之间一道虚线；品种和转生之间一道带字的分割线 */
.sec{padding:.56rem .62rem 0;}
.rule{height:0;border-top:.02rem dashed var(--rule);margin:.4rem .62rem 0;}
.rule + .sec{padding-top:.4rem;}
.part{display:flex;align-items:center;margin:.8rem .62rem 0;}
.part::before,.part::after{content:"";flex:1;height:.015rem;background:var(--ink);opacity:.32;}
.part::before{margin-right:.24rem;}
.part::after{margin-left:.24rem;}
.part span{font-size:.24rem;font-weight:700;letter-spacing:.12rem;text-indent:.12rem;color:var(--ink-soft);white-space:nowrap;}
.sec-head{display:flex;align-items:center;font-size:.25rem;font-weight:700;letter-spacing:.02rem;margin-bottom:.16rem;}
.sec-head i{margin-right:.12rem;width:.1rem;height:.1rem;background:var(--red);display:block;transform:rotate(45deg);flex:none;}

.head{padding:0 .62rem;text-align:center;}
.kicker{font-size:.21rem;letter-spacing:.08rem;color:var(--ink-faint);margin-bottom:.1rem;text-indent:.08rem;}
.name{font-size:.96rem;font-weight:900;letter-spacing:.2rem;line-height:1.08;text-indent:.2rem;text-shadow:.02rem .02rem 0 rgba(33,28,23,.13);}
.en{font-family:"Times New Roman",Georgia,serif;font-size:.24rem;letter-spacing:.1rem;color:var(--red);font-weight:700;margin-top:.04rem;text-indent:.1rem;}
.sign{font-size:.3rem;color:var(--ink-soft);margin-top:.2rem;letter-spacing:.01rem;}
.sign::before{content:"「";color:var(--ink-faint);}
.sign::after{content:"」";color:var(--ink-faint);}
.stat{margin-top:.2rem;font-size:.22rem;color:var(--ink-faint);letter-spacing:.01rem;
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}
.stat > * + *{margin-left:.12rem;}
.stat b{color:var(--red);font-weight:700;font-size:.26rem;font-family:"Times New Roman",serif;}
.stat s{text-decoration:none;color:var(--rule);}

.body-txt{font-size:.3rem;line-height:1.85;}
.body-txt.quiet{color:var(--ink-soft);}
#why{margin-bottom:.26rem;}

/* 五维压成一行一条：名字 · 条 · 等级 */
.dim{display:flex;align-items:center;margin-bottom:.16rem;}
.dim:last-child{margin-bottom:0;}
.dim-name{flex:none;width:.74rem;margin-right:.18rem;font-size:.26rem;font-weight:700;letter-spacing:.03rem;}
.dim-score{flex:none;width:.32rem;margin-left:.18rem;text-align:right;font-size:.25rem;font-weight:700;font-family:"Times New Roman",serif;}
.dim-score.H{color:var(--red);}
.dim-score.M{color:var(--ink-soft);}
.dim-score.L{color:var(--ink-faint);}
.bar{flex:1;height:.11rem;background:var(--paper-dark);border:.015rem solid var(--ink);display:flex;overflow:hidden;}
.bar i{display:block;height:100%;background:var(--ink);transition:width .5s cubic-bezier(.2,.8,.3,1);}
.bar.H i{background:var(--red);}

.rel{display:flex;}
.rel-box + .rel-box{margin-left:.2rem;}
.rel-box{flex:1;border:.02rem solid var(--ink);padding:.18rem .2rem;background:rgba(255,252,244,.45);}
.rel-box .lab{font-size:.2rem;letter-spacing:.03rem;color:var(--ink-faint);margin-bottom:.04rem;}
.rel-box .who{font-size:.34rem;font-weight:900;letter-spacing:.04rem;margin-bottom:.06rem;text-indent:.04rem;}
.rel-box.good .who{color:var(--red);}
.rel-box .why{font-size:.23rem;line-height:1.65;color:var(--ink-soft);}

/* ── 转生指南：纸缝里递出一张诗笺 ──
 * 纸缝是一道两头收尖的细缝（椭圆），下沿一条亮边，像纸面上划开的口子。
 * .mail 的上沿对齐缝的中线，overflow:hidden 把还没递出来的部分藏进缝里。
 * 投影用 filter 挂在 .paper 上，这样能跟着底部毛边的形状走。 */
.slot{position:relative;z-index:57;height:.07rem;margin:.44rem .4rem 0;border-radius:50%;
  background:linear-gradient(#0F0B08, #3A2E24);
  box-shadow:0 -.012rem 0 rgba(33,28,23,.18), 0 .018rem 0 rgba(255,255,255,.9);}
.mail{position:relative;z-index:56;margin:-.035rem .7rem 0;padding:0 .1rem .3rem;overflow:hidden;}
.paper{transform:translateY(-101%);transform-origin:50% 0;
  filter:drop-shadow(0 .05rem .06rem rgba(70,48,24,.16)) drop-shadow(0 .18rem .22rem rgba(70,48,24,.1));}
.mail.out .paper{animation:emerge 1.6s cubic-bezier(.22,.7,.28,1) forwards;}
.mail.in .paper{animation:retract .38s cubic-bezier(.55,0,.8,.3) forwards;}
/* 递出来到底后像挂着的纸一样轻轻晃两下再停住 */
@keyframes emerge{
  0%{transform:translateY(-101%);}
  64%{transform:translateY(1.2%);}
  80%{transform:translateY(0) rotate(.7deg);}
  92%{transform:rotate(-.3deg);}
  100%{transform:none;}
}
@keyframes retract{from{transform:none;}to{transform:translateY(-101%);}}
@media (prefers-reduced-motion:reduce){ .mail.out .paper,.mail.in .paper{animation:none;transform:none;} }

/* 羊皮纸：暖象牙底 + 两团若有若无的深浅 + 边缘略暗 + 纸纹；底边手撕毛边 */
.reborn{position:relative;padding:.66rem .5rem .5rem;text-align:center;
  background:
    radial-gradient(ellipse 70% 55% at 28% 18%, rgba(255,253,246,.75), rgba(255,253,246,0) 70%),
    radial-gradient(ellipse 60% 50% at 82% 88%, rgba(160,118,64,.1), rgba(160,118,64,0) 70%),
    linear-gradient(rgba(40,26,12,.2), rgba(40,26,12,0) .42rem),
    #F4EAD5;
  box-shadow:inset 0 0 .5rem rgba(140,100,52,.16);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - .12rem) no-repeat,
               url("../img/deckle.svg") bottom/100% .16rem no-repeat;
          mask:linear-gradient(#000,#000) top/100% calc(100% - .12rem) no-repeat,
               url("../img/deckle.svg") bottom/100% .16rem no-repeat;}
.reborn::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;
  background:url("../img/paper.png") repeat 0 0/2.56rem 2.56rem;opacity:.32;}
.reborn > *{position:relative;}

/* 排成一首诗：标题、斜体副题、一小截红线，正文居中短行，留白给足 */
.job{font-size:.54rem;font-weight:900;letter-spacing:.06rem;text-indent:.06rem;line-height:1.25;color:var(--ink);}
.job-en{margin-top:.1rem;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:.23rem;
  letter-spacing:.01rem;color:var(--ink-faint);}
.job-rule{width:.44rem;height:.02rem;margin:.34rem auto .36rem;background:var(--red);opacity:.85;}
.job-txt{font-size:.28rem;line-height:2.05;color:var(--ink-soft);text-wrap:balance;}
.job-txt p{margin-bottom:.2rem;}
.job-txt p:last-child{margin-bottom:0;}
.job-txt .up{margin-top:.36rem;color:var(--red);font-weight:700;}

/* 换方向：诗笺末尾一行小字链接，不要按钮框 */
.swap{margin-top:.54rem;padding:.1rem .2rem;border:0;background:none;font-family:inherit;cursor:pointer;
  font-size:.23rem;letter-spacing:.06rem;color:var(--ink-faint);}
.swap::before{content:"↻";margin-right:.1rem;font-size:.26rem;}
.swap span{padding-bottom:.04rem;border-bottom:.015rem solid rgba(139,127,112,.6);}
.single-job .swap{display:none;}

.btns{padding:.5rem .62rem 0;}
.btn-main{display:block;width:100%;border:0;font-family:inherit;cursor:pointer;
  background:var(--red);color:#F6EFE1;text-align:center;font-size:.32rem;font-weight:900;
  letter-spacing:.08rem;padding:.24rem;text-indent:.08rem;box-shadow:.06rem .06rem 0 rgba(33,28,23,.28);
  transition:transform .12s ease, box-shadow .12s ease;}
.btn-main:active{transform:translate(.03rem,.03rem);box-shadow:.03rem .03rem 0 rgba(33,28,23,.28);}
.btn-main[disabled]{opacity:.55;}
.btn-sub{display:block;width:100%;margin-top:.3rem;border:.02rem solid var(--ink);background:none;font-family:inherit;color:var(--ink);
  text-align:center;font-size:.27rem;font-weight:700;letter-spacing:.03rem;padding:.18rem;text-indent:.03rem;cursor:pointer;}

.foot{padding:.36rem .62rem .38rem;text-align:center;}
@supports (padding-bottom:env(safe-area-inset-bottom, 0px)){
  .foot{padding-bottom:calc(.38rem + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));}
}
.foot div{font-size:.22rem;font-weight:400;letter-spacing:.05rem;text-indent:.05rem;color:var(--ink-faint);}
.foot div+div{margin-top:.08rem;}
.foot .disclaimer{font-size:.2rem;letter-spacing:.02rem;text-indent:0;opacity:.85;}

/* ── 分享弹层：预览分享图，容器里给存相册 / 发笔记两个按钮 ── */
#sheet{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;
  /* 用不透明底色，淡入交给元素自己的 opacity 过渡。
     半透明黑压不住页面正文——暗部人眼很敏感，差 4/255 的字形照样看得出来 */
  background:#15110D;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--top-reserve, 88px) .4rem .5rem;opacity:0;pointer-events:none;transition:opacity .28s ease;
}
#sheet.on{opacity:1;pointer-events:auto;}
#sheet > * + *{margin-top:.3rem;}
/* 顶部让出容器按钮后，图、提示、两个按钮、关闭要在剩下的高度里放得下 */
#sheet img{max-width:100%;max-height:52vh;display:block;box-shadow:0 .1rem .4rem rgba(0,0,0,.45);}
#sheet .sheet-btns{width:100%;max-width:5.6rem;}
#sheet .sheet-btns .btn-main + .btn-main{margin-top:.2rem;}
#sheet .sheet-btns .btn-main[hidden]{display:none;}
#sheet .tip{color:#EFE7D8;font-size:.26rem;letter-spacing:.03rem;text-align:center;line-height:1.7;}
#sheet .close{border:.02rem solid #EFE7D8;background:none;color:#EFE7D8;font-family:inherit;
  font-size:.26rem;letter-spacing:.06rem;padding:.14rem .5rem;text-indent:.06rem;cursor:pointer;}


/* v2 actual answer score; allow decimals without squeezing bars. */
.dim-score{min-width:4.2em;text-align:right;font-size:.72em;}
.stat{flex-wrap:wrap;}