/* ============================================================
   七宗罪 × 七美德 · 内在圣殿  |  暗夜彩窗设计系统 v1
   无构建依赖 · 无外部字体 · 纯 transform/opacity 动画
   ============================================================ */

:root{
  --bg:#12141C; --bg2:#0C0E15; --panel:#1A1E2A; --panel2:#232839;
  --ink:#EFE7D5; --ink2:rgba(239,231,213,.68); --ink3:rgba(239,231,213,.42);
  --gold:#C9A96A; --gold-b:#E4C88F; --gold-d:#8A6F3F;
  --hair:rgba(239,231,213,.16); --hair2:rgba(239,231,213,.09);
  --serif:"Noto Serif SC","Source Han Serif SC","Source Han Serif CN","Songti SC","STSong","SimSun",serif;
  --latin:"Cormorant Garamond","Georgia","Times New Roman",serif;
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg2);
  background-image:radial-gradient(120% 60% at 50% 0%, #171A26 0%, var(--bg2) 70%);
  color:var(--ink); font-family:var(--serif); line-height:1.6;
  min-height:100svh;
}
button{ font-family:inherit; cursor:pointer; }
a{ color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(201,169,106,.35); }

.app{ max-width:430px; margin:0 auto; position:relative; }

/* ---------- 屏幕切换 ---------- */
.screen{ display:none; flex-direction:column; align-items:center; text-align:center;
  min-height:100svh; padding:calc(18px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); }
.screen.on{ display:flex; animation:fadeUp .34s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ---------- 公共元素 ---------- */
.cap{ font-family:var(--latin); font-size:11px; letter-spacing:.42em; text-indent:.42em;
  color:var(--gold); text-transform:uppercase; }
.cap2{ font-size:10px; letter-spacing:.52em; text-indent:.52em; color:var(--ink3); }
.rose circle{ stroke:var(--gold); fill:none; stroke-width:1; }
.rose line{ stroke:var(--gold); fill:none; stroke-width:1; }
.rose{ opacity:.85; filter:drop-shadow(0 0 12px rgba(201,169,106,.35)); }
.foot{ font-size:10.5px; color:var(--ink3); letter-spacing:.14em; line-height:2; }
.btn-gold{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; letter-spacing:.26em; text-indent:.26em; padding:13px 30px;
  border-radius:999px; border:1px solid var(--gold); background:var(--gold); color:#17120A;
  transition:transform .16s ease, filter .2s ease;
}
.btn-gold:active{ transform:scale(.97); filter:brightness(1.08); }
.btn-ghost{
  font-size:12px; letter-spacing:.22em; text-indent:.22em; padding:10px 22px;
  border-radius:999px; border:1px solid var(--hair); background:transparent; color:var(--ink2);
  transition:border-color .2s, color .2s;
}
.btn-ghost:active{ border-color:var(--gold); color:var(--gold); }
.hiddenx{ visibility:hidden; opacity:0; transition:opacity .4s ease; }
.hiddenx.show{ visibility:visible; opacity:1; }
.cursor{ display:inline-block; width:1px; height:1em; background:var(--gold);
  margin-left:3px; vertical-align:-2px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- 封面 ---------- */
.rose-hero{ width:148px; height:148px; margin:34px 0 18px; }
.title-xl{ font-size:36px; font-weight:600; letter-spacing:.18em; text-indent:.18em; line-height:1.12; }
.title-xl .amp{ display:block; font-size:13px; font-weight:400; color:var(--gold);
  letter-spacing:.5em; text-indent:.5em; margin:9px 0; }
.sub{ font-size:13px; color:var(--ink2); letter-spacing:.1em; line-height:1.9; margin:14px 0 0; }
.nums{ display:flex; gap:9px; align-items:center; justify-content:center;
  font-family:var(--latin); font-size:11px; color:var(--ink3); margin:22px 0 0; }
.nums i{ font-style:normal; }
.nums .dot{ width:2px; height:2px; background:var(--gold); border-radius:50%; opacity:.8; }
.candle{ margin-top:auto; }
.flame{ width:7px; height:7px; border-radius:50% 50% 50% 0; background:var(--gold-b);
  box-shadow:0 0 10px 2px rgba(228,200,143,.75); transform:rotate(-45deg);
  animation:flicker 1.3s ease-in-out infinite alternate; }
@keyframes flicker{ from{ transform:rotate(-45deg) scale(1); opacity:.85; }
  to{ transform:rotate(-45deg) scale(1.25) translateX(1px); opacity:1; } }

/* ---------- 引言屏 ---------- */
.rose-mid{ width:96px; height:96px; margin:22vh 0 26px; }
.quote{ font-size:16px; letter-spacing:.2em; line-height:2.2; min-height:4em; color:var(--ink); }
.quote-by{ font-size:10px; color:var(--ink3); letter-spacing:.4em; text-indent:.4em; margin:14px 0 0; }
#btn-begin{ margin-top:auto; }

/* ---------- 答题 ---------- */
#scr-quiz{ align-items:stretch; text-align:left; padding-left:22px; padding-right:22px; position:relative; }
.quiz-deco{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  opacity:calc(0.16 + var(--lit, 0) * 0.16); transition:opacity .8s ease; }
.quiz-deco .arch{ position:absolute; inset:0; width:100%; height:100%; }
.quiz-deco .arch path, .quiz-deco .arch line, .quiz-deco .arch circle{
  stroke:var(--gold); fill:none; stroke-width:1; vector-effect:non-scaling-stroke; }
/* 光层独立于线稿层：不被线稿层的低透明度连乘（v106 修复"洒光隐形"） */
.quiz-glow{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
  opacity:calc(0.55 + var(--lit, 0) * 0.45); transition:opacity .8s ease; }
.quiz-glow .shaft{ position:absolute; inset:0;
  background:radial-gradient(75% 46% at 50% 0%, rgba(210,178,116,.19), transparent 72%); }
.quiz-glow .beams{ position:absolute; inset:0;
  background:conic-gradient(at 50% 13%,
    transparent 148deg, rgba(210,178,116,.12) 160deg, transparent 172deg,
    transparent 173deg, rgba(210,178,116,.15) 181deg, transparent 190deg,
    transparent 191deg, rgba(210,178,116,.12) 202deg, transparent 214deg);
  -webkit-mask-image:linear-gradient(180deg, #000 38%, transparent 80%);
  mask-image:linear-gradient(180deg, #000 38%, transparent 80%); }
.quiz-glow .rose-halo{ position:absolute; left:50%; top:118px; width:300px; height:300px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(210,178,116,.17) 0%, rgba(210,178,116,.05) 40%, transparent 68%); }
.qhead,.ticks,#qbody,.qfoot{ position:relative; z-index:1; }
.qhead{ display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; }
.qno{ font-family:var(--latin); font-size:24px; font-weight:500; color:var(--gold); }
.qno small{ font-size:11px; color:var(--ink3); letter-spacing:.1em; margin-left:4px; }
.qtag{ font-size:9.5px; letter-spacing:.3em; color:var(--ink3); }
.ticks{ display:flex; gap:5px; margin:10px 0 22px; }
.ticks i{ flex:1; height:2px; background:var(--hair2); border-radius:2px; transition:background .4s ease; }
.ticks i.did{ background:var(--gold); }
#qbody{ display:flex; flex-direction:column; flex:1; }
#qbody.swap{ animation:fadeUp .3s ease both; }
.scene{ font-size:9.5px; letter-spacing:.3em; color:var(--gold); opacity:.85; }
.qtext{ font-size:16.5px; line-height:1.85; letter-spacing:.03em; font-weight:500; margin:10px 0 20px; }
.opts{ display:flex; flex-direction:column; gap:10px; }
.opt{
  display:flex; gap:11px; align-items:flex-start; text-align:left; width:100%;
  font-size:13.5px; line-height:1.65; color:var(--ink2); background:transparent;
  border:1px solid var(--hair); border-radius:12px; padding:12px 14px;
  transition:border-color .2s, background-color .2s, opacity .35s, color .2s, transform .12s;
}
.opt b{ font-family:var(--latin); font-style:italic; font-weight:500; font-size:16px;
  color:var(--ink3); line-height:1.2; flex:none; }
.opt:active{ transform:scale(.985); }
.opt.sel{ border-color:var(--gold); background:rgba(201,169,106,.12); color:var(--ink); }
.opt.sel b{ color:var(--gold); }
.opt.dim{ opacity:.32; }
.qfoot{ margin-top:auto; padding-top:18px; font-size:10px; color:var(--ink3);
  letter-spacing:.14em; text-align:center; }

/* ---------- 揭晓 loading ---------- */
.rose-spin{ width:120px; height:120px; margin:auto 0 30px; animation:spin 9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading-line{ font-size:13px; letter-spacing:.24em; color:var(--ink2); min-height:2em; margin-bottom:auto; }

/* ---------- 结果屏 ---------- */
#scr-result{ align-items:stretch; text-align:center; }
.windows{ display:flex; justify-content:center; gap:8px; margin:16px 0 6px; }
.win{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.win i{ width:13px; height:13px; transform:rotate(45deg); border:1px solid var(--hair);
  background:transparent; transition:background .5s ease, box-shadow .5s ease, border-color .5s ease; }
.win.lit i{ background:var(--c); border-color:var(--c); box-shadow:0 0 12px 1px var(--c); }
.win em{ font-style:normal; font-size:8.5px; letter-spacing:.02em; color:var(--ink3);
  white-space:nowrap; }
.win.lit em{ color:var(--ink2); }
.res-hint{ font-size:10px; letter-spacing:.3em; text-indent:.3em; color:var(--ink3); margin-bottom:14px; }

.seal-zone{ height:86px; display:flex; align-items:center; justify-content:center; margin:4px 0 10px; }
.seal-big{
  width:72px; height:72px; border-radius:46% 54% 52% 48% / 53% 47% 53% 47%;
  background:radial-gradient(circle at 35% 30%, var(--gold-b), var(--gold) 45%, var(--gold-d) 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.5), inset 0 -3px 5px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; transform:scale(1.9) rotate(-16deg);
  transition:opacity .28s ease, transform .45s cubic-bezier(.2,1.5,.35,1);
}
.seal-big.stamped{ opacity:1; transform:scale(1) rotate(-7deg); }
.seal-big b{ font-family:var(--latin); font-weight:600; font-size:14px; color:#2E2412; letter-spacing:.03em; }
.seal-big i{ font-style:normal; font-family:var(--latin); font-size:7px; letter-spacing:.16em; color:#2E2412; }
.seal-zone.ring::after{ content:""; position:absolute; width:84px; height:84px;
  border:1px solid var(--gold); border-radius:50%; animation:ringout .65s ease-out forwards; }
@keyframes ringout{ from{ opacity:.8; transform:scale(.8); } to{ opacity:0; transform:scale(2); } }

.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.show{ opacity:1; transform:none; }

/* ---------- 灵魂卡（海报） ---------- */
.poster{
  width:min(320px,86vw); aspect-ratio:3/4; margin:2px auto 0; position:relative;
  background:linear-gradient(170deg, #1B1F2C 0%, #141724 60%, #171A26 100%);
  border:1px solid rgba(201,169,106,.5); outline:1px solid var(--hair2); outline-offset:5px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:26px 18px 18px; overflow:hidden;
}
.poster::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(90% 46% at 50% 0%, rgba(201,169,106,.12), transparent 70%); pointer-events:none; }
.poster .cap{ font-size:9px; }
.poster .cap2{ font-size:8px; margin-top:4px; }
.poster-seal{ margin:10px 0 0; font-family:var(--latin); font-size:10px; letter-spacing:.18em;
  color:var(--gold); border:1px solid rgba(201,169,106,.65); border-radius:999px; padding:3px 12px; }
.lab{ display:block; font-size:8.5px; letter-spacing:.4em; text-indent:.4em; color:var(--ink3); margin-top:11px; }
.sin-v{ display:block; font-size:21px; font-weight:600; letter-spacing:.22em; text-indent:.22em; line-height:1.4; }
.sin-v i{ display:block; font-style:normal; font-family:var(--latin); font-size:8.5px;
  letter-spacing:.32em; font-weight:400; opacity:.8; }
.type-title{ display:block; font-size:15px; letter-spacing:.1em; margin-top:11px; }
.type-line{ display:block; font-size:9px; color:var(--ink3); letter-spacing:.24em; margin-top:3px; }
.p-badges{ display:flex; gap:7px; justify-content:center; margin-top:9px; }
.badge{ font-family:var(--latin); font-size:9px; letter-spacing:.24em; text-indent:.24em;
  color:#1C1608; background:linear-gradient(120deg, var(--gold-b), var(--gold));
  border-radius:999px; padding:3px 10px; }
.badge.ghost{ background:transparent; color:var(--gold); border:1px solid rgba(201,169,106,.6); }
.badge.epic{ background:linear-gradient(120deg, #E4C88F, #C48399 45%, #83AA93); color:#14100A; }
.p-bars{ width:100%; margin-top:auto; display:flex; flex-direction:column; gap:7px; padding:0 4px; }
.p-bar{ display:flex; align-items:center; gap:8px; font-size:9px; color:var(--ink2); letter-spacing:.1em; }
.p-bar em{ font-style:normal; width:44px; text-align:right; flex:none; }
.p-bar .bt{ flex:1; height:3px; background:var(--hair2); border-radius:3px; overflow:hidden; }
.p-bar .bt i{ display:block; height:100%; border-radius:3px; }
.p-bar b{ width:22px; font-weight:500; font-family:var(--latin); font-size:11px; color:var(--ink); text-align:left; }

/* ---------- 解读预览 ---------- */
.profiles{ display:flex; flex-direction:column; gap:12px; margin-top:18px; }
.prof{ text-align:left; border-left:2px solid var(--gold); padding:2px 0 2px 13px; }
.prof b{ display:block; font-size:11px; letter-spacing:.2em; color:var(--gold); margin-bottom:4px; }
.prof p{ font-size:12.5px; line-height:1.95; color:var(--ink2); letter-spacing:.04em; }

.axes{ display:flex; flex-direction:column; gap:8px; margin-top:18px;
  border:1px solid var(--hair2); border-radius:14px; padding:14px 16px; }
.axes .ax{ display:flex; align-items:center; gap:9px; font-size:10.5px; color:var(--ink2); }
.ax-name{ width:76px; text-align:left; letter-spacing:.06em; flex:none; }
.ax-track{ flex:1; height:3px; background:var(--hair2); border-radius:3px; overflow:hidden; }
.ax-track i{ display:block; height:100%; border-radius:3px; }
.ax-val{ width:64px; text-align:right; font-family:var(--latin); font-size:10.5px; color:var(--ink3); flex:none; }

/* ---------- 解锁区 ---------- */
.unlock{ margin-top:22px; border:1px solid rgba(201,169,106,.4); border-radius:16px;
  padding:20px 18px 18px; position:relative; overflow:hidden; }
.unlock::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(100% 60% at 50% 0%, rgba(201,169,106,.1), transparent 70%); pointer-events:none; }
.u-t{ display:block; }
.toc{ list-style:none; text-align:left; display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.toc li{ font-size:12px; color:var(--ink2); letter-spacing:.05em; padding-left:14px; position:relative; line-height:1.6; }
.toc li::before{ content:""; position:absolute; left:0; top:.66em; width:4px; height:4px;
  background:var(--gold); border-radius:50%; }
.toc li.lock::after{ content:"14 页"; position:absolute; right:0; top:0; font-family:var(--latin);
  font-size:10px; color:var(--ink3); letter-spacing:.1em; }
.price{ display:flex; align-items:baseline; justify-content:center; gap:9px; margin:16px 0 0; }
.price s{ font-family:var(--latin); font-size:12px; color:var(--ink3); }
.price b{ font-family:var(--latin); font-size:26px; font-weight:600; color:var(--gold); }
.price i{ font-style:normal; font-size:10px; color:var(--gold-b); letter-spacing:.1em; }
#btn-buy{ width:100%; margin-top:14px; }
.u-note{ font-size:10px; color:var(--ink3); letter-spacing:.1em; margin-top:10px; line-height:1.8; }
.actions{ display:flex; gap:10px; justify-content:center; margin-top:14px; }
#scr-result .foot{ margin-top:18px; text-align:center; }
.shot{ display:none; width:100%; margin-top:16px; border-radius:10px; border:1px solid var(--hair); }
.shot.show{ display:block; }

/* ---------- Toast ---------- */
.toast{ position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(8px);
  background:#242938; color:var(--ink); border:1px solid var(--hair); border-radius:999px;
  font-size:12px; letter-spacing:.06em; padding:9px 18px; opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease; z-index:99; max-width:86vw; text-align:center; }
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce){
  .rose-spin{ animation:none; }
  .flame{ animation:none; }
  .screen.on{ animation:none; }
  .seal-big, .reveal{ transition:none; }
  .cursor{ animation:none; }
}