/* V4 — 五层背景 · 场景框架 · 共享组件 */

/* ── 场景页：Hero / Consultation / Loading / Result / Unlock ── */

.hero,
.consultation,
.loading,
.result,
.unlock {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  background-color: transparent;
  color: var(--color-text);
}

.hero__inner,
.consultation__inner,
.loading__inner,
.result__inner,
.unlock__inner {
  position: relative;
  z-index: 2;
}

/* 第五层：极淡八卦纹（Hero / Consultation / Loading 除外，各自独立背景） */
.result::before,
.unlock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/svg/bagua.svg") center / min(92vw, 420px) no-repeat;
  opacity: var(--opacity-faint);
}

/* ── 全局五层背景（body + #app） ── */

body {
  background-color: var(--color-bg);
}

/* 第二层：宣纸肌理 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/svg/paper.svg") center / 512px repeat;
  opacity: var(--opacity-subtle);
}

#app {
  position: relative;
  z-index: 1;
}

/* 第三层：终南山剪影 */
#app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/svg/mountain.svg") center bottom / cover no-repeat;
  opacity: var(--opacity-soft);
}

/* 第四层：星图 */
#app::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/svg/stars.svg") center / cover no-repeat;
  opacity: var(--opacity-subtle);
  animation: fx-stars var(--duration-stars) ease-in-out infinite alternate;
}

/* ── 共享字体 ── */

.fx-serif {
  font-family: var(--font-serif);
}

/* ── 古铜令牌 CTA ── */

.fx-token-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-fade) var(--ease-out);
}

.fx-token-cta:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* ── 宣纸卡片 ── */

.fx-paper-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-paper);
}

/* ── 标题装饰线 ── */

.fx-title-rule {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--color-border);
}

/* V35 · 页面级返回导航 */
.page-back { position:fixed; top:max(14px, env(safe-area-inset-top, 0px)); left:14px; z-index:30; min-height:38px; padding:8px 12px; border:1px solid rgba(201,157,71,.72); border-radius:999px; background:rgba(20,14,9,.82); color:#f5e8ce; font:13px var(--font-serif); letter-spacing:.04em; box-shadow:0 6px 18px rgba(0,0,0,.28); backdrop-filter:blur(8px); }
.page-back[hidden] { display:none; }
.page-back:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }