/* ============================================================
   样式 —— 750px 设计稿基准（1rem = 100px @750）
   ============================================================ */

/* 霞鹜文楷：只保留 Regular 一个字重（Light 用不到，删掉省 260KB） */
@font-face{
  font-family:"WenKai";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/wenkai-regular.woff2?v=6") format("woff2");
}

:root{
  --bg:#070a16;
  --gold:#F2D492;
  --gold-deep:#C99B4E;
  --gold-dim:rgba(242,212,146,.42);
  --gold-faint:rgba(242,212,146,.18);
  --text:#F7EFDF;
  --text-dim:#BCAE93;
  --text-soft:#E6DAC2;
  --serif:"WenKai","Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html{
  /* 1rem = 100px @750 设计稿；同时跟随画面高度，保证在任何窗口都完整可见 */
  font-size: calc(min(100vw, 480px, 66.7dvh) / 7.5);
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--serif);
  overflow:hidden;
  height:100dvh;
}

/* ---------------- 背景 ---------------- */

.bg{ position:absolute; inset:0; z-index:0; background:var(--bg); overflow:hidden; }

/* 星环底图已移除：全站只用纯星空 + 环境光 */

/* 环境光：两团色光缓慢漂移，让画面"活"起来 */
.bg-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 32% 38%, rgba(118,162,255,.22), transparent 44%),
    radial-gradient(circle at 68% 62%, rgba(255,206,142,.18), transparent 42%);
  mix-blend-mode:screen;
  animation:glowDrift 15s ease-in-out infinite alternate;
}
@keyframes glowDrift{
  from{ transform:translate3d(-3.2%,0,0)   scale(1);    opacity:.55; }
  to  { transform:translate3d( 3.2%,-2.2%,0) scale(1.16); opacity:1;  }
}

/* 会呼吸的星点（由 JS 生成） */
.bg-stars{ position:absolute; inset:0; pointer-events:none; animation:starsIn 2.6s ease .7s both; }
@keyframes starsIn{ from{ opacity:0; } to{ opacity:1; } }

.bg-stars i,
.cover-stars i{
  position:absolute;
  border-radius:50%;
  background:rgba(255,246,222,.98);
  box-shadow:0 0 .14rem rgba(255,226,170,.85), 0 0 .32rem rgba(255,226,170,.35);
  opacity:0;
  will-change:opacity, transform;
  animation:twinkle var(--d,5s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
.bg-stars i.bright,
.cover-stars i.bright{
  box-shadow:0 0 .22rem rgba(255,240,200,.95),
             0 0 .6rem rgba(255,220,160,.65),
             0 0 1.1rem rgba(255,210,150,.35);
}
@keyframes twinkle{
  0%,100%{ opacity:.02; transform:translateY(.04rem) scale(.5); }
  50%    { opacity:.95; transform:translateY(-.06rem) scale(1.15); }
}

/* 偶尔划过的流星 */
.bg-stars::before,
.bg-stars::after{
  content:""; position:absolute;
  height:1.6px;
  background:linear-gradient(90deg,
      rgba(255,242,214,0) 0%,
      rgba(255,246,225,.55) 55%,
      rgba(255,255,244,1) 100%);
  filter:blur(.35px);
  border-radius:2px;
  box-shadow:0 0 .3rem rgba(255,238,200,.85), 0 0 .8rem rgba(255,220,160,.45);
  opacity:0;
  animation:shoot 11s linear infinite;
}
.bg-stars::before{ top:20%; left:-18%; width:8rem;   animation-delay:3.2s; }
.bg-stars::after { top:34%; left:-22%; width:5.6rem; animation-delay:8.6s; }
@keyframes shoot{
  0%  { opacity:0; transform:translate3d(0,0,0) rotate(28deg); }
  5%  { opacity:0; }
  7%  { opacity:1; }
  15% { opacity:.9; }
  22% { opacity:0; transform:translate3d(145vw,78vh,0) rotate(28deg); }
  100%{ opacity:0; transform:translate3d(145vw,78vh,0) rotate(28deg); }
}

/* 入场时的一下光晕爆发 */
.bg-flash{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 58% 46% at 50% 48%,
      rgba(190,215,255,.50) 0%,
      rgba(255,226,180,.26) 34%,
      rgba(255,220,170,0)   72%);
  mix-blend-mode:screen;
  opacity:0;
  animation:flashIn 2.2s cubic-bezier(.2,.72,.2,1) both;
}
@keyframes flashIn{
  0%  { opacity:0; transform:scale(.72); }
  16% { opacity:1; }
  100%{ opacity:0; transform:scale(1.55); }
}

.bg-scrim{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 62% 46% at 50% 50%,
      rgba(5,7,16,.70) 0%,
      rgba(5,7,16,.40) 42%,
      rgba(5,7,16,.10) 68%,
      rgba(5,7,16,0)   84%);
  transition:opacity .6s ease;
}
body[data-screen="cover"] .bg-scrim{ opacity:.50; }
body[data-screen="scan"]  .bg-scrim{
  opacity:1;
  background:linear-gradient(180deg,
      rgba(4,6,14,.90) 0%,
      rgba(4,6,14,.80) 28%,
      rgba(4,6,14,.78) 55%,
      rgba(4,6,14,.86) 80%,
      rgba(4,6,14,.94) 100%);
}
body[data-screen="quiz"]  .bg-scrim,
body[data-screen="result"] .bg-scrim{ opacity:.94; }

.bg-vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 78% 62% at 50% 50%,
      rgba(0,0,0,0) 48%, rgba(0,0,0,.26) 78%, rgba(0,0,0,.62) 100%);
}

/* ---------------- 舞台 ---------------- */

.app{
  position:relative; z-index:1;
  width:min(100vw, 480px, 66.7dvh);
  height:100dvh;
  margin:0 auto;
  overflow:hidden;
}

.screen{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none;
  transition:opacity .45s ease;
}
.screen.active{ opacity:1; pointer-events:auto; }

.pad-x{ padding-left:.62rem; padding-right:.62rem; }

/* 逐字/逐块上浮 */
.rise{ opacity:0; transform:translateY(.18rem); }
.screen.active .rise{
  animation:rise .85s cubic-bezier(.22,.68,.16,1) forwards;
}
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---------------- 封面 ---------------- */

#screen-cover{
  justify-content:center; align-items:center;
  padding:.8rem .7rem calc(.7rem + env(safe-area-inset-bottom));
  text-align:center;
}

.cover-inner{
  position:absolute;
  left:0; right:0;
  top:58%;
  transform:translateY(-50%);
  width:100%; display:flex; flex-direction:column; align-items:center;
}
.cover-inner > *{ position:relative; z-index:1; }

/* 开场：黑场 → 星点亮起 → 闪白 → 星河推入 */
.cover-floor{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background:#000;
}

.cover-img{
  position:absolute; inset:0;
  background:url("assets/cover-open.webp") center center / cover no-repeat;
  opacity:0;
  transform:scale(1.14);
  filter:saturate(.92);
  transition:opacity .78s cubic-bezier(.2,.7,.2,1),
             transform 2.9s cubic-bezier(.14,.7,.2,1);
  will-change:opacity, transform;
  backface-visibility:hidden;
}

/* 虚焦的一层：只做淡出，不逐帧算 blur，手机上更顺 */
.cover-img-soft{
  opacity:0;
  transform:scale(1.14);
  filter:blur(9px) brightness(1.5) saturate(.92);
  transition:none;
  will-change:opacity;
  pointer-events:none;
}
.cover-img-soft.revealed{ animation:softReveal 1.25s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes softReveal{
  0%  { opacity:1; transform:scale(1.14); }
  100%{ opacity:0; transform:scale(1.02); }
}
.cover-img.revealed{
  opacity:1;
  transform:scale(1);
  filter:saturate(.92);
}
.cover-img.revealed.live{ animation:coverBreathe 26s ease-in-out infinite; }
@keyframes coverBreathe{
  0%,100%{ transform:scale(1)     translate3d(0,0,0); }
  50%    { transform:scale(1.045) translate3d(0,-.7%,0); }
}

.cover-stars{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* 黑场星点：更细、更弱的光晕，冷白一点，跟后面星河的质感一致 */
.cover-stars i{
  background:rgba(255,252,246,.96);
  box-shadow:0 0 .06rem rgba(255,255,255,.70);
  will-change:auto;                 /* 150 颗不要各自开图层，手机上会卡 */
}
.cover-stars i.bright{
  box-shadow:0 0 .10rem rgba(255,255,255,.85),
             0 0 .26rem rgba(214,230,255,.35);
}

/* 那一下闪白：从星河中心亮起来 */
.cover-flash{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 39% 58%,
      rgba(255,255,255,.98) 0%,
      rgba(255,252,242,.92) 12%,
      rgba(255,246,228,.55) 30%,
      rgba(255,244,222,.18) 48%,
      rgba(255,240,220,0)   64%),
    radial-gradient(circle at 39% 58%,
      rgba(206,226,255,.30) 0%,
      rgba(206,226,255,0)   70%);
  mix-blend-mode:screen;
}

/* 真正"闪"的那一下：全屏一白，很短 */
.cover-blink{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:#fff;
  opacity:0;
  mix-blend-mode:screen;
}

.eyebrow{
  font-size:.16rem;
  letter-spacing:.40em; text-indent:.40em;
  color:#D8C49C;
  text-transform:uppercase;
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  text-shadow:0 1px .18rem rgba(0,0,0,.85);
  margin-bottom:.40rem;
}

.title{
  font-size:.40rem;
  font-weight:300;
  line-height:1.95;
  letter-spacing:.18em; text-indent:.18em;
  background:linear-gradient(180deg,
      rgba(255,252,240,.55) 0%,
      rgba(255,238,200,.92) 28%,
      rgba(246,212,150,.96) 60%,
      rgba(226,181,112,.94) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  opacity:.34;
  mix-blend-mode:screen;
  filter:blur(.22px) drop-shadow(0 0 .55rem rgba(255,220,160,.26));
  -webkit-mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.28) 8%,
      rgba(0,0,0,.62) 22%,
      rgba(0,0,0,.78) 40%,
      rgba(0,0,0,.78) 60%,
      rgba(0,0,0,.62) 78%,
      rgba(0,0,0,.28) 92%,
      transparent 100%);
  mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.28) 8%,
      rgba(0,0,0,.62) 22%,
      rgba(0,0,0,.78) 40%,
      rgba(0,0,0,.78) 60%,
      rgba(0,0,0,.62) 78%,
      rgba(0,0,0,.28) 92%,
      transparent 100%);
  margin-bottom:.42rem;
}

.subtitle{
  font-size:.285rem;
  letter-spacing:.09em;
  color:var(--text-soft);
  margin-bottom:.55rem;
}

.divider{
  display:flex; align-items:center; gap:.16rem;
  width:2.2rem; margin:0 auto .68rem;
  color:var(--gold-dim);
  opacity:.42;
  filter:blur(.2px);
}
.divider::before,.divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
}
.divider i{
  width:.07rem; height:.07rem; transform:rotate(45deg);
  background:var(--gold); opacity:.7; box-shadow:0 0 .12rem var(--gold);
}

.meta{
  font-size:.19rem;
  letter-spacing:.16em;
  color:#E2D3B4;
  text-shadow:0 1px .18rem rgba(0,0,0,.85);
  margin-bottom:.72rem;
}

.start{
  position:relative;
  border:0;
  background-color:transparent;
  /* 上下两条横线（比之前明显一点） */
  background-image:
    linear-gradient(90deg,
        rgba(242,212,146,0) 0%,
        rgba(242,212,146,.50) 16%,
        rgba(250,230,186,.82) 50%,
        rgba(242,212,146,.50) 84%,
        rgba(242,212,146,0) 100%),
    linear-gradient(90deg,
        rgba(242,212,146,0) 0%,
        rgba(242,212,146,.50) 16%,
        rgba(250,230,186,.82) 50%,
        rgba(242,212,146,.50) 84%,
        rgba(242,212,146,0) 100%);
  background-size:2.9rem 1.5px, 2.9rem 1.5px;
  background-position:center top, center bottom;
  background-repeat:no-repeat;
  color:rgba(255,249,235,.94);
  font-family:var(--serif);
  font-size:.42rem;
  letter-spacing:.42em; text-indent:.42em;
  padding:.30rem .24rem;
  border-radius:0;
  cursor:pointer;
  opacity:.58;
  text-shadow:0 1px .22rem rgba(5,7,14,.92), 0 0 .6rem rgba(5,7,14,.55);
  filter:blur(.15px);
  transition:opacity .3s ease, filter .3s ease, transform .2s ease;
}
/* 文字背后的柔光团 */
.start::before{
  content:""; position:absolute; inset:-.7rem -1.2rem; z-index:-1;
  background:radial-gradient(ellipse 50% 52% at 50% 48%,
      rgba(242,212,146,.22) 0%,
      rgba(242,212,146,.07) 58%,
      rgba(242,212,146,0) 80%);
  filter:blur(.45rem);
  pointer-events:none;
  animation:ctaBreath 3.8s ease-in-out infinite;
}
@keyframes ctaBreath{
  0%,100%{ opacity:.28; transform:scale(.90); }
  50%    { opacity:1;   transform:scale(1.12); }
}
.start:hover{
  opacity:.78;
  filter:blur(.1px) drop-shadow(0 0 .9rem rgba(255,220,160,.45));
}
.start:active{ transform:scale(.97); }

.cover-foot{
  margin-top:.55rem;
  font-size:.17rem; letter-spacing:.22em; color:#C9B892;
  text-shadow:0 1px .16rem rgba(0,0,0,.8);
  text-align:center;
}

/* ---------------- 解析过场 ---------------- */

#screen-scan{
  justify-content:center;
  padding:.9rem .72rem calc(.9rem + env(safe-area-inset-bottom));
}

.scan-sweep{
  position:absolute; left:0; right:0; top:6%; height:1.5px;
  background:linear-gradient(90deg, transparent, rgba(190,220,255,.55) 30%, rgba(210,232,255,.75) 50%, rgba(190,220,255,.55) 70%, transparent);
  box-shadow:0 0 .45rem rgba(160,200,255,.55), 0 0 1.4rem rgba(140,180,255,.3);
  opacity:0;
  pointer-events:none;
  z-index:2;
}
.scan-sweep.run{ animation:sweepOnce 6s linear forwards; }
@keyframes sweepOnce{
  0%  { top:6%;  opacity:0; }
  6%  { opacity:.85; }
  92% { opacity:.85; }
  100%{ top:96%; opacity:.5; }
}

.scan-inner{ width:100%; }

.scan-eyebrow{
  font-size:.14rem;
  letter-spacing:.42em; text-indent:.42em;
  text-align:center;
  color:rgba(190,176,150,.72);
  font-family:-apple-system,"PingFang SC",sans-serif;
  margin-bottom:.18rem;
}

.scan-title{
  font-size:.32rem;
  font-weight:400;
  letter-spacing:.12em; text-indent:.12em;
  text-align:center;
  color:rgba(247,239,223,.9);
  margin-bottom:.12rem;
}

.scan-sub{
  font-size:.18rem;
  letter-spacing:.20em; text-indent:.20em;
  text-align:center;
  color:rgba(188,174,147,.6);
  margin-bottom:.55rem;
}

.scan-list{ list-style:none; }

.scan-row{
  margin-bottom:.30rem;
  opacity:0;
  transform:translateY(.08rem);
  transition:opacity .55s ease, transform .55s ease;
}
.scan-row.on{ opacity:1; transform:none; }

.scan-meta{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:.08rem;
}
.scan-label{
  font-size:.205rem;
  letter-spacing:.06em;
  color:rgba(210,196,170,.85);
}
.scan-val{
  font-size:.19rem;
  color:rgba(242,212,146,.92);
  font-variant-numeric:tabular-nums;
}

.scan-track{
  position:relative;
  height:2px;
  background:rgba(242,212,146,.13);
  overflow:hidden;
}
.scan-track i{
  position:absolute; left:0; top:0; bottom:0;
  width:0;
  background:linear-gradient(90deg, rgba(242,212,146,.16), rgba(242,212,146,.85));
  box-shadow:0 0 .14rem rgba(242,212,146,.5);
  transition:width 1.05s cubic-bezier(.25,.8,.2,1);
}

.scan-foot{
  margin-top:.52rem;
  text-align:center;
  font-size:.18rem;
  letter-spacing:.22em; text-indent:.22em;
  color:rgba(188,174,147,.65);
}

/* 解析页退场：放慢、放柔 */
#screen-scan.leaving,
#screen-cover.leaving{
  animation:scanOut 1.2s cubic-bezier(.35,0,.2,1) forwards;
}
@keyframes scanOut{
  0%  { opacity:1; transform:scale(1);    filter:blur(0); }
  100%{ opacity:0; transform:scale(1.015); filter:blur(3px); }
}

/* 转场闪光：亮度更高、停留更久 */
.cut-flash{
  position:absolute; inset:0; z-index:5;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(ellipse 66% 54% at 50% 50%,
      rgba(228,240,255,.80) 0%,
      rgba(255,238,205,.52) 34%,
      rgba(255,226,180,.20) 58%,
      rgba(255,220,170,0)   76%);
  mix-blend-mode:screen;
}

/* ---------------- 结论转场 ---------------- */

.end-veil{
  position:absolute; inset:0; z-index:6;
  background:#020306;
  opacity:0;
  pointer-events:none;
}

/* 星球位置的一团光（对应 hero 图里那颗星球） */
.end-glow{
  position:absolute; inset:0; z-index:7;
  pointer-events:none;
  opacity:0;
  transform-origin:73% 19%;
  background:radial-gradient(circle at 73% 19%,
      rgba(255,248,232,.98) 0%,
      rgba(255,236,200,.86) 6%,
      rgba(255,214,158,.46) 16%,
      rgba(255,200,140,.15) 30%,
      rgba(255,196,130,0)   46%);
  mix-blend-mode:screen;
}

/* ---------------- 答题 ---------------- */

#screen-quiz{ padding-top:calc(.62rem + env(safe-area-inset-top)); }
/* 题目内容下面垫一层极淡的暗场，让字从星空里浮出来 */
#screen-quiz::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 94% 66% at 50% 46%,
      rgba(4,6,14,.62) 0%,
      rgba(4,6,14,.34) 58%,
      rgba(4,6,14,0)   88%);
}

.q-head{
  padding:0 .62rem;
  display:flex; flex-direction:column; gap:.18rem;
}

.q-top{ display:flex; align-items:baseline; justify-content:space-between; }

.q-index{
  font-size:.30rem; letter-spacing:.06em;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.q-index b{ font-weight:400; font-size:.30rem; }
.q-index span{ font-size:.19rem; color:var(--text-dim); margin-left:.06rem; }

.q-back{
  background:none; border:0; cursor:pointer;
  color:var(--text-dim); font-family:var(--serif);
  font-size:.19rem; letter-spacing:.12em;
  padding:.08rem 0;
  opacity:.75;
}
.q-back:active{ opacity:1; }

.bar{
  height:1px; width:100%;
  background:rgba(232,200,126,.16);
  position:relative; overflow:hidden;
}
.bar i{
  position:absolute; inset:0 auto 0 0;
  width:0%;
  background:linear-gradient(90deg, rgba(232,200,126,.35), var(--gold));
  box-shadow:0 0 .12rem rgba(232,200,126,.6);
  transition:width .5s cubic-bezier(.3,.7,.2,1);
}

.q-body{
  flex:1;
  display:flex; flex-direction:column; justify-content:center;
  padding:.6rem .62rem 1.4rem;
  min-height:0;
}

.q-text{
  font-size:.42rem;
  line-height:1.66;
  letter-spacing:.04em;
  text-align:center;
  color:var(--text);
  text-shadow:0 1px .22rem rgba(0,0,0,.75), 0 0 .7rem rgba(255,230,180,.10);
  margin-bottom:.58rem;
  padding:0 .1rem;
}

.opts{ list-style:none; display:flex; flex-direction:column; gap:.18rem; }

.opt{
  display:flex; align-items:center; gap:.22rem;
  width:100%;
  padding:.25rem .26rem;
  border:1px solid rgba(232,200,126,.18);
  border-radius:.18rem;
  background:linear-gradient(180deg, rgba(18,22,38,.52), rgba(8,10,20,.60));
  color:#E7DAC1;
  font-family:var(--serif);
  font-size:.27rem;
  line-height:1.55;
  text-align:left;
  cursor:pointer;
  transition:border-color .3s ease, background .3s ease, transform .18s ease, box-shadow .3s ease;
}
.opt .txt{ flex:1; }
.opt .tag{
  flex:0 0 auto;
  width:.42rem; height:.42rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid rgba(232,200,126,.35);
  color:var(--gold);
  font-size:.17rem;
  font-family:-apple-system,"PingFang SC",sans-serif;
  transition:background .3s ease, color .3s ease;
}
.opt:active{ transform:scale(.985); }
.opt:hover{
  border-color:rgba(232,200,126,.46);
  background:linear-gradient(180deg, rgba(32,36,54,.6), rgba(12,14,26,.7));
}
.opt.chosen{
  border-color:rgba(232,200,126,.85);
  background:linear-gradient(180deg, rgba(232,200,126,.20), rgba(232,200,126,.06));
  box-shadow:0 0 .35rem rgba(232,200,126,.32), inset 0 0 .3rem rgba(232,200,126,.12);
}
.opt.chosen .tag{ background:var(--gold); color:#1a1408; border-color:var(--gold); }

/* ---------------- 结果 ---------------- */

/* 结论页自带底（盖住通用星空底） */
#screen-result{ background:#04050a; }

.r-scroll{
  height:100dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 0 calc(1.1rem + env(safe-area-inset-bottom));
  scrollbar-width:none;
}
.r-scroll::-webkit-scrollbar{ display:none; }

/* 顶部主视觉：举着星球的人（结论页出现时才加载） */
.r-hero{
  position:relative;
  width:100%;
  aspect-ratio:1080 / 1323;
  min-height:5.2rem;
  overflow:hidden;
}
.r-hero::before{
  content:""; position:absolute; inset:0;
  background:none;
  filter:brightness(1.02) saturate(1.04);
}
#screen-result.hero-ready .r-hero::before{
  background:url("assets/result-hero.webp") center top / 100% auto no-repeat;
}
/* 底部融进黑里 */
.r-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
      rgba(4,5,10,0)   42%,
      rgba(4,5,10,.40) 68%,
      rgba(4,5,10,.86) 88%,
      #04050a         100%);
}

.r-inner{
  position:relative;
  max-width:none;
  margin:0 auto;
  padding:0 .66rem;
  text-align:center;
}

.r-eyebrow{
  font-size:.17rem; letter-spacing:.40em; text-indent:.40em;
  color:var(--text-dim);
  margin-bottom:.30rem;
}

.r-name{
  font-size:.60rem;
  letter-spacing:.12em;
  line-height:1.3;
  background:linear-gradient(178deg,#FFF7E2,#F0D69B 42%,#D9B36C 72%,#A87F3B);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 .22rem rgba(232,200,126,.25));
  margin-bottom:.14rem;
}

.r-sign{
  font-size:.235rem;
  letter-spacing:.26em; text-indent:.26em;
  color:var(--gold);
  opacity:.9;
  margin-bottom:.42rem;
}
.r-sign .dot{ opacity:.5; margin:0 .06rem; }
.r-sign.is-rare{
  color:#EBD6A6;
  letter-spacing:.42em; text-indent:.42em;
  opacity:1;
  text-shadow:0 0 .5rem rgba(242,212,146,.35);
}

.r-quote{
  font-size:.27rem;
  line-height:1.95;
  color:#D9C9A9;
  letter-spacing:.04em;
  margin-bottom:.48rem;
  padding:0 .1rem;
}

.r-line{
  width:.9rem; height:1px; margin:0 auto .48rem;
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
}

.r-body{
  font-size:.245rem;
  line-height:2.05;
  color:var(--text-soft);
  text-align:justify;
  text-justify:inter-ideograph;
  letter-spacing:.02em;
  margin-bottom:.5rem;
}

.cure{
  text-align:left;
  border:1px solid rgba(232,200,126,.20);
  border-radius:.18rem;
  padding:.32rem .30rem;
  background:linear-gradient(180deg, rgba(232,200,126,.07), rgba(232,200,126,.015));
  margin-bottom:.6rem;
}
.cure h4{
  font-weight:400;
  font-size:.215rem;
  letter-spacing:.18em;
  color:var(--gold);
  margin-bottom:.16rem;
}
.cure p{
  font-size:.235rem;
  line-height:1.95;
  color:#CFC0A4;
  text-align:justify;
}

.r-actions{ display:flex; flex-direction:column; gap:.24rem; align-items:center; }

.btn-ghost{
  background:none;
  border:1px solid rgba(232,200,126,.32);
  color:#DCCCAE;
  font-family:var(--serif);
  font-size:.22rem;
  letter-spacing:.24em; text-indent:.24em;
  padding:.2rem .58rem;
  border-radius:2rem;
  cursor:pointer;
  transition:border-color .3s ease, background .3s ease;
}
.btn-ghost:active{ background:rgba(232,200,126,.1); }

/* 生成分享图（主按钮） */
.btn-share{
  border:0;
  cursor:pointer;
  font-family:var(--serif);
  font-size:.22rem;
  letter-spacing:.20em; text-indent:.20em;
  padding:.2rem .64rem;
  border-radius:2rem;
  color:#1a1408;
  background:linear-gradient(180deg, rgba(244,216,152,.95), rgba(212,168,92,.95));
  box-shadow:0 0 .5rem rgba(242,212,146,.25);
  transition:opacity .3s ease, transform .2s ease, box-shadow .3s ease;
}
.btn-share:active{ transform:scale(.97); box-shadow:0 0 .8rem rgba(242,212,146,.45); }

/* 分享图浮层 */
.share-veil{
  position:absolute; inset:0; z-index:9;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:.22rem;
  background:rgba(3,4,10,.97);
  padding:.5rem .4rem calc(.5rem + env(safe-area-inset-bottom));
}
.share-veil.on{ display:flex; }
.share-img{
  max-width:86%; max-height:62vh;
  border-radius:.1rem;
  box-shadow:0 .2rem .8rem rgba(0,0,0,.65);
  background:#05060b;
}
.share-tip{
  font-size:.16rem; letter-spacing:.12em;
  color:rgba(188,174,147,.72);
}
.share-actions{ display:flex; gap:.18rem; }
.share-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-size:.20rem; letter-spacing:.14em; text-indent:.14em;
  padding:.16rem .32rem;
  border-radius:2rem;
  border:1px solid rgba(232,200,126,.42);
  color:#1a1408;
  background:linear-gradient(180deg, rgba(244,216,152,.95), rgba(212,168,92,.95));
  text-decoration:none;
  cursor:pointer;
}
.share-btn.ghost{
  background:none; color:#DCCCAE; border-color:rgba(232,200,126,.28);
}

.r-hint{
  font-size:.20rem;
  letter-spacing:.16em;
  color:rgba(198,186,162,.72);
  margin-top:.40rem;
}
.r-hint.is-rare{
  color:#D9544A;
  text-shadow:0 0 .55rem rgba(217,84,74,.40);
}

/* ---------------- 工具 ---------------- */

/* 声音开关（点开始旅程后出现） */
.sound-toggle{
  position:absolute;
  top:calc(.16rem + env(safe-area-inset-top));
  right:.18rem;
  z-index:7;
  width:.44rem; height:.44rem;
  display:none;
  align-items:center; justify-content:center;
  border-radius:50%;
  border:1px solid rgba(232,200,126,.26);
  background:rgba(6,8,14,.45);
  color:#CDBB92;
  font-size:.18rem;
  line-height:1;
  cursor:pointer;
  opacity:.72;
  transition:opacity .3s ease, border-color .3s ease, color .3s ease;
}
.sound-toggle.on{ display:flex; }
.sound-toggle .sound-wave{ font-family:-apple-system,"PingFang SC",sans-serif; transform:translateY(-.01rem); }
.sound-toggle.muted{ opacity:.45; color:rgba(205,187,146,.6); }
.sound-toggle.muted .sound-wave{ position:relative; }
.sound-toggle.muted .sound-wave::after{
  content:""; position:absolute; left:50%; top:50%;
  width:.02rem; height:.26rem;
  background:currentColor;
  transform:translate(-50%,-50%) rotate(45deg);
}

.hidden{ display:none !important; }

/* ---------------- 无障碍：减少动态 ---------------- */
@media (prefers-reduced-motion: reduce){
  .bg-img,.bg-glow,.bg-stars i,.start::before,.start::after,.screen.active .rise{
    animation:none !important;
  }
  .bg-stars i{ opacity:.45; }
}