/* ═══════════════ 卜鲁鲁的答案之书 · H5 ═══════════════ */
:root {
  --gold-1: #ffe9b8;
  --gold-2: #f0c169;
  --gold-3: #c98f3a;
  --ink: #3a2a18;
  --paper: #f6efdd;
  --stage-ratio: 0.4613;               /* 1179/2556 */
  --stage-w: min(calc(100dvh * 0.4613), 100vw);
  --p1-w: min(calc(100dvh * 0.4613), 100vw);       /* 页1宽度（桌面默认：1179:2556画幅随屏高锁定） */
  --pw: min(calc(var(--stage-w) * 0.45), 196px);   /* 书页宽（封面宽高比0.6469；0.45为两侧纸层+壳边预留空间） */
  --serif: "Songti SC", "STSong", "STZhongsong", "SimSun", "Noto Serif CJK SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; }
/* 根页面彻底锁死：html/body双向overflow hidden + body fixed定位，iOS橡皮筋不再露出页面外白区；
   滚动转移到页1内部容器（body.touch #page1），保留惯性滚动与视差 */
html, body { height: 100%; overflow: hidden; }
body { position: fixed; inset: 0; width: 100%; }
body {
  font-family: var(--sans);
  color: #f5edd8;
  background: #0b0a1f url("../assets/stars-nomoon.webp") center / cover no-repeat fixed;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}
body.locked { overflow: hidden; }      /* 页2/页3（fixed单屏）激活时禁止滚动 */
/* 手机/触摸模式：页1宽度基准（满屏宽），高度按比例自然延伸、纵向滚动 */
body.touch { --p1-w: min(100vw, 860px); }
img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }

/* ── 全局 Canvas 星空（页2/页3） ── */
#cosmos {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100dvh;
  opacity: 0; transition: opacity 1.2s ease;
}
#cosmos.on { opacity: 1; }

/* ── 页面容器 ── */
.page { position: fixed; inset: 0; display: none; }
.page.active { display: block; }
#page1 { z-index: 10; }
/* 手机/触摸模式：页1=内部滚动容器（根页面已锁死），内容在容器内上下滚动；
   -webkit-overflow-scrolling保留iOS惯性，overscroll-behavior:contain防止橡皮筋链式穿透到根页面 */
body.touch #page1 { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#page2 { z-index: 20; background: url("../assets/bg-page2.webp") center / cover no-repeat; }
#page3 { z-index: 30; background: url("../assets/bg-page3.webp") center / cover no-repeat; perspective: 1400px; }  /* 透视容器：魔法阵落位rotateX(60°)成俯视椭圆 */

/* ── 加载帷幕 ── */
#loader {
  position: fixed; inset: 0; z-index: 99;
  background: #0b0a1f;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; transition: opacity .8s ease;
}
#loader.hide { opacity: 0; pointer-events: none; }
.loader-star {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold-1);
  box-shadow: 0 0 18px 6px rgba(255, 224, 150, .8);
  animation: loaderPulse 1.4s ease-in-out infinite;
}
#loader p { font-size: 13px; letter-spacing: .35em; color: rgba(245,237,216,.7); text-indent: .35em; }
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.6); opacity: 1; }
}

/* ── Toast ── */
#toast {
  position: fixed; top: 14%; left: 50%; transform: translate(-50%, -8px);
  z-index: 100; padding: 10px 22px; border-radius: 999px;
  background: rgba(20, 16, 45, .85); border: 1px solid rgba(240,193,105,.45);
  color: var(--gold-1); font-size: 13px; letter-spacing: .12em;
  opacity: 0; pointer-events: none; transition: all .35s ease;
  backdrop-filter: blur(8px);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ═══════════ 页面1 · 星空书房 ═══════════ */
.stage {
  position: absolute; inset: 0; margin: auto;    /* 桌面：1179:2556画幅，整屏居中 */
  width: var(--p1-w);
  height: min(100dvh, calc(100vw / 0.4613));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.2%, #000 98.8%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 1.2%, #000 98.8%, transparent 100%);
  -webkit-mask-repeat: no-repeat;       /* 禁平铺：防止大图溢出舞台时被周期图案切成条纹 */
          mask-repeat: no-repeat;
}
/* 手机/触摸模式：宽度等比缩放，高度自然延伸（1179:2556） */
/* 手机端舞台=屏宽，关闭边缘羽化：书桌两侧为纯净素材，无"白边" */
body.touch .stage { -webkit-mask-image: none; mask-image: none; }
body.touch .stage { position: relative; margin: 0 auto; height: calc(var(--p1-w) / 0.4613); }
.layer { position: absolute; inset: 0; will-change: transform; }
.layer-stars { overflow: visible; }   /* 解除裁切：133.93%大图溢出可见，视差移动时始终盖住舞台 */
.layer-stars .flow-zoom {
  position: absolute; inset: 0;
  animation: starVoyage 22s ease-in-out infinite;   /* 提速：36s→22s，移动感更明显 */
  will-change: transform;
}
@keyframes starVoyage {
  /* 缩放幅度较原缩小20%（跨度0.18→0.144：1.08~1.224）；新增左右横漂±2.4%（较原增强），纵向±1.2%。
     安全核算：最小缩放1.08时四边余量±22.3%，横漂峰值2.4%+视差满偏4.6%=7.0%，远小于余量，不露边 */
  0%, 100% { transform: scale(1.08) translate(0, 0); }
  30%      { transform: scale(1.145) translate(-2.3%, -1.2%); }
  62%      { transform: scale(1.224) translate(2.4%, 1.0%); }
  82%      { transform: scale(1.145) translate(-1.2%, -0.6%); }
}
/* 中远景 · 弯月（星空之上、书柜之下，陀螺仪视差 + 漂浮发光） */
.layer-moon { pointer-events: none; }
.layer-moon .moon {
  position: absolute; top: 12.5%; right: 11%;
  width: 17%; aspect-ratio: 800 / 852;
  background: url("../assets/moon.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(255, 216, 130, .55)) drop-shadow(0 0 44px rgba(255, 200, 110, .30));
  animation: moonFloat 9s ease-in-out infinite;
  will-change: transform;
}
@keyframes moonFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-1.2deg); }
}
/* 星空完整素材img 1579×2916：以133.93%×114.08%显示（与素材同比例，无裁切无变形），
   核心区对齐舞台；超出舞台部分为运动余量，随视差/漂移进入视野 */
.layer-stars .flow {
  position: absolute; left: 50%; top: 50%;
  width: 133.93%; height: 114.08%;
  translate: -50% -50%;                 /* 独立属性居中，与starFlow的transform动画互不干扰 */
  animation: starFlow 48s ease-in-out infinite;
  will-change: transform;
}
@keyframes starFlow {              /* 横向缓慢往返漂移，±5%舞台宽，与视差满偏叠加仍余量充足 */
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-5%); }
}
/* 星层闪烁星点 */
.sky-sparkles { position: absolute; inset: 0; pointer-events: none; }
.sky-sparkle {
  position: absolute;
  width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,240,200,.9) 40%, transparent 75%);
  animation: skyTwinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite;
}
@keyframes skyTwinkle {
  0%, 100% { opacity: .1; transform: scale(.5); }
  50%      { opacity: 1; transform: scale(1.25); }
}
/* 切图1419×2796完整渲染（含透明区）：img以120.36%×109.39%显示（与素材同比例），
   核心构图区1179×2556对齐舞台，四边120px扩展区随视差平移进入视野 */
.layer-shelf .full-img, .layer-otter .full-img {
  position: absolute; left: 50%; top: 50%;
  width: 120.36%; height: 109.39%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* 书柜加宽素材1579×2796：宽133.93%（左右各200px扩展区），核心区1179×2556仍居中对齐，水平余量±16.97% */
.layer-shelf .full-img { width: 133.93%; }

/* 书本金色流光 */
.book-glow {
  position: absolute; left: 32%; top: 57.5%;
  width: 46%; aspect-ratio: 1.05;
  pointer-events: none; mix-blend-mode: screen;
}
.glow-core {
  position: absolute; inset: 12%;
  background: radial-gradient(ellipse at center,
    rgba(255, 226, 150, .95) 0%, rgba(255, 196, 90, .45) 38%, transparent 70%);
  filter: blur(6px);
  animation: glowPulse 4.2s ease-in-out infinite;
}
.glow-rays {
  position: absolute; inset: -28%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255, 214, 130, .34) 22deg, transparent 55deg,
    transparent 110deg, rgba(255, 214, 130, .26) 140deg, transparent 175deg,
    transparent 235deg, rgba(255, 214, 130, .3) 265deg, transparent 300deg,
    transparent 360deg);
  filter: blur(12px);
  animation: glowSpin 22s linear infinite, glowPulse 5.5s ease-in-out infinite;
}
@keyframes glowSpin { to { transform: rotate(360deg); } }
@keyframes glowPulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* 金色流光粒子飘带画布（背景层在卡片之下，前景层在卡片之上，交错缠绕） */
#fxCanvas, #fxCanvasFg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#fxCanvas { z-index: 2; }
#fxCanvasFg { z-index: 4; }

/* 从书中飘出的治愈便签（JS驱动S型上升） */
#notes { position: absolute; inset: 0; z-index: 3; pointer-events: none; perspective: 1000px; }
.note {
  position: absolute; left: 0; top: 0;
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  opacity: 0;
}
.note.fade-out { transition: opacity .6s ease; opacity: 0 !important; }
/* 便签边缘柔和反光（沿PNG轮廓的双层金色泛光） */
.note img { width: 100%; display: block; filter: drop-shadow(0 0 9px rgba(255, 222, 150, .7)) drop-shadow(0 0 22px rgba(255, 200, 110, .42)); }
/* 便签底部金色光晕：与光带连接处加强的能量光池 */
.note::after {
  content: ""; position: absolute; left: 50%; bottom: -16%;
  width: 132%; height: 46%;
  transform: translateX(-50%);
  background: radial-gradient(50% 56% at 50% 62%, rgba(255, 216, 135, .72), rgba(255, 190, 100, .26) 56%, transparent 78%);
  filter: blur(6px);
  mix-blend-mode: screen;
  pointer-events: none;
}
/* 卷曲/侧翻时的纸面光影 */
.note .shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(70, 40, 15, var(--sh, 0)) 0%, transparent 42%,
    transparent 58%, rgba(70, 40, 15, var(--sh, 0)) 100%);
  mix-blend-mode: multiply;
}
.note span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  white-space: nowrap;          /* 硬保证：任何情况下都不换列（不出现两行文案） */
  font-family: var(--serif);
  font-weight: 700; letter-spacing: .18em;
  color: #6b4a1f;
  padding: 12% 0;
}

/* 页眉 & 底部按钮区 */
.p1-header {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 4.5%);
  left: 0; right: 0; text-align: center; z-index: 5; pointer-events: none;
}
.p1-header h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(20px, calc(var(--p1-w) * 0.062), 28px);
  letter-spacing: .34em; text-indent: .34em;
  color: var(--gold-1);
  text-shadow: 0 0 18px rgba(255, 205, 110, .65), 0 2px 10px rgba(0,0,0,.5);
}
.p1-header p {
  margin-top: 10px; font-size: 11px; letter-spacing: .42em; text-indent: .42em;
  color: rgba(245, 237, 216, .62);
}
/* 底部CTA：固定悬浮于视口底部安全区，不随页面滚动（页1触屏可滚动场景始终可点）；
   未激活页面display:none会连带隐藏其fixed子按钮，三页互不串扰 */
.p1-bottom, .p2-bottom, .p3-bottom {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 34px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  z-index: 40;
}
.p1-bottom { width: var(--p1-w); }
.p2-bottom, .p3-bottom { width: var(--stage-w); }

/* 金色主按钮 */
.btn-gold {
  position: relative;
  padding: 15px 46px; border-radius: 999px;
  font-size: 16px; letter-spacing: .3em; text-indent: .3em; font-weight: 600;
  color: #4a2c12;
  background: linear-gradient(135deg, #ffe9b8 0%, #f0c169 45%, #dfa348 100%);
  box-shadow: 0 0 24px rgba(240, 193, 105, .55), 0 6px 18px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .25s ease, box-shadow .25s ease;
  animation: btnBreath 3.2s ease-in-out infinite;
}
.btn-gold:active { transform: scale(.95); }
@keyframes btnBreath {
  0%, 100% { box-shadow: 0 0 18px rgba(240,193,105,.45), 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7); }
  50% { box-shadow: 0 0 34px rgba(240,193,105,.85), 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7); }
}

/* ═══════════ 页面2 · 冥想引导 ═══════════ */
#page2 { z-index: 20; }
/* 星空背景层：30秒一轮的明显位移+缩放呼吸（6%出血边兜底，平移缩放全程不露边） */
.p2-sky { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.p2-sky img {
  position: absolute; inset: -6%; width: 112%; height: 112%;
  object-fit: cover; will-change: transform;
  animation: p2SkyDrift 30s ease-in-out infinite alternate;
}
@keyframes p2SkyDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.06); }
  33%  { transform: translate3d(2.6%, 1.8%, 0) scale(1.14); }
  67%  { transform: translate3d(-2%, 3%, 0) scale(1.18); }
  100% { transform: translate3d(3%, -1.6%, 0) scale(1.09); }
}
/* 慢速流星层：背景之上、呼吸环/文字/按钮之下 */
#meteorCanvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.breath-ring {
  z-index: 2;
  position: absolute; left: 50%; top: 42%;
  width: calc(var(--stage-w) * .58); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(240, 193, 105, .58);
  background: radial-gradient(circle, rgba(240, 193, 105, .08) 0%, rgba(160, 120, 255, .06) 55%, transparent 72%);
  box-shadow: 0 0 90px rgba(160, 120, 255, .32), inset 0 0 90px rgba(160, 120, 255, .22), 0 0 26px rgba(240, 193, 105, .28);
  animation: breathe 8s ease-in-out infinite;
  pointer-events: none;
}
.breath-ring::after {
  content: ""; position: absolute; inset: 12%;
  border-radius: 50%; border: 1px dashed rgba(240, 193, 105, .4);
}
@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .88; }
  46% { transform: translate(-50%, -50%) scale(1.27); opacity: 1; }
}
.meditate-text {
  position: absolute; left: 0; right: 0; top: 42%;
  transform: translateY(-50%);
  text-align: center; z-index: 2;
}
.m-line {
  font-family: var(--serif);
  font-size: clamp(17px, calc(var(--stage-w) * 0.05), 22px);
  letter-spacing: .3em; text-indent: .3em;
  color: rgba(245, 237, 216, .92);
  text-shadow: 0 0 16px rgba(190, 160, 255, .45);
  margin: 2.1em 0;
  opacity: 0; filter: blur(6px);
}
/* ── 呼吸云团：文案背后的能量雾场（无硬边矩形，有机blob形态，提升可读性） ── */
.m-mist {
  position: absolute; left: 50%; top: 50%;
  width: 138%; aspect-ratio: 1 / .72;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: -1;
}
.m-mist::before {                /* 主雾团：四层错位径向渐变合成不规则有机形态 */
  content: ""; position: absolute; inset: -10%;
  background:
    radial-gradient(38% 46% at 37% 43%, rgba(70, 56, 136, .85), transparent 71%),
    radial-gradient(44% 40% at 63% 53%, rgba(54, 50, 120, .78), transparent 73%),
    radial-gradient(30% 35% at 52% 35%, rgba(90, 74, 156, .62), transparent 70%),
    radial-gradient(48% 44% at 48% 59%, rgba(46, 44, 106, .72), transparent 75%);
  border-radius: 50%;
  filter: blur(14px);
  animation: mistBreath 6s cubic-bezier(.37, 0, .63, 1) infinite;
}
@keyframes mistBreath {          /* 缓慢呼吸：scale .985~1.025，opacity .24~.34，6秒 sine */
  0%, 100% { transform: scale(.985); opacity: .24; }
  50%      { transform: scale(1.025); opacity: .34; }
}
.mist-core {                     /* 内层淡紫暖白微光：与主呼吸错相的轻微脉冲 */
  position: absolute; inset: 10% 16%;
  background: radial-gradient(52% 44% at 50% 48%, rgba(255, 238, 224, .46), rgba(214, 188, 255, .20) 56%, transparent 76%);
  border-radius: 50%;
  filter: blur(9px);
  animation: mistCore 6s cubic-bezier(.37, 0, .63, 1) -2.1s infinite;
}
@keyframes mistCore {
  0%, 100% { transform: scale(1.012); opacity: .55; }
  50%      { transform: scale(.990); opacity: .9; }
}
.mist-drift {                    /* 次雾团：反向缓慢漂移，制造边缘 organic 流动感（不变形主体） */
  position: absolute; inset: -2%;
  background:
    radial-gradient(40% 37% at 43% 47%, rgba(86, 70, 150, .38), transparent 72%),
    radial-gradient(34% 39% at 59% 53%, rgba(66, 60, 130, .34), transparent 71%);
  border-radius: 50%;
  filter: blur(20px);
  animation: mistDrift 11s cubic-bezier(.37, 0, .63, 1) infinite;
}
@keyframes mistDrift {
  0%, 100% { transform: translate(-6px, 3px) scale(1); opacity: .7; }
  50%      { transform: translate(7px, -4px) scale(1.03); opacity: .95; }
}
.mist-halo {                     /* 极淡星轨同心环纹理，极缓慢旋转 */
  position: absolute; inset: 4%;
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 33px, rgba(255, 255, 255, .05) 33px 34px, transparent 34px 68px);
  border-radius: 50%;
  opacity: .45;
  animation: mistHalo 36s linear infinite;
}
@keyframes mistHalo { to { transform: rotate(1turn); } }

/* ═══════════ 页面3 · 魔法阵召唤 ═══════════ */
.magic-wrap {
  position: absolute; left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  width: min(calc(var(--stage-w) * .88), 380px); aspect-ratio: 1;
  pointer-events: none; z-index: 2;
  opacity: 0;
}
/* 法阵线条独立小范围柔和光晕（两层近光，不与光柱/放射光糊在一起） */
#magicCircle {
  width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 5px rgba(255, 222, 145, .9)) drop-shadow(0 0 13px rgba(255, 196, 96, .45));
}
/* 旋转由JS驱动（McSpin，svgOrigin "300 300" 严格绕盘心）：出现时快速、落位后平滑减速至慢速 */
.mc-core {   /* 中心圆点高亮爆光 */
  fill: #fff3d0;
  filter: drop-shadow(0 0 6px rgba(255, 235, 170, 1)) drop-shadow(0 0 20px rgba(255, 200, 100, .9));
  animation: mcCore 1.8s ease-in-out infinite;
}
@keyframes mcCore { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.mc-star { animation: mcStar 2.6s ease-in-out infinite; }
.mc-star:nth-child(odd) { animation-delay: -1.3s; }
@keyframes mcStar { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* 外圈放射状金色光芒：沿黄道环刻度斜向散开，亮度比中心光柱低30%，
   环带遮罩让光带与中心光柱之间留出星空空隙，分层清晰不重叠 */
.rays {
  position: absolute; inset: -17%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 208, 120, .5) 0 2.2deg, rgba(255, 208, 120, 0) 2.2deg 10deg);
  -webkit-mask-image: radial-gradient(circle, transparent 56%, #000 66%, #000 85%, transparent 93%);
          mask-image: radial-gradient(circle, transparent 56%, #000 66%, #000 85%, transparent 93%);
  filter: blur(2.5px);
  opacity: 0;
}
/* 落位后（.live）：44s旋转 + 4s微弱脉动（负延迟与中心光柱峰值错开） */
#rays.live { animation: raysSpin 44s linear infinite, raysPulse 4s ease-in-out -2s infinite; }
@keyframes raysSpin { to { transform: rotate(1turn); } }
@keyframes raysPulse { 0%, 100% { opacity: .34; } 50% { opacity: .5; } }

/* 中心圆柱形能量束：上下同粗的竖直柱体（非梯形），体积感来自——
   三层横向余弦衰减（核心亮柱→中层柔光→外层雾化）+ 底部椭圆光盘（柱脚截面）
   + 柱内纵向流光与金粉。独立竖直不随盘倾斜，亮度全场最高 */
.beam {
  position: absolute; left: 50%; top: 50%; height: 20%;
  width: 240px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
  mix-blend-mode: screen;
  pointer-events: none; z-index: 2;
}
.beam i { position: absolute; display: block; pointer-events: none; }
.b-haze {   /* 外层：淡金雾化光晕（最宽最淡，模糊外溢） */
  left: 50%; bottom: 0; width: 100%; height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(to top, rgba(255, 205, 115, .32), rgba(255, 205, 115, .10) 58%, transparent 90%);
  filter: blur(14px);
}
.b-mid {    /* 中层：半透明金色柔光（柱体主宽，水平衰减出圆柱弧面） */
  left: 50%; bottom: 0; width: 66%; height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(to right,
    transparent 0%, rgba(255, 214, 130, .10) 16%, rgba(255, 216, 134, .36) 50%, rgba(255, 214, 130, .10) 84%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 58%, transparent 96%);   /* 纵向：底部实、向上渐隐 */
          mask-image: linear-gradient(to top, #000 58%, transparent 96%);
  filter: blur(5px);
}
.b-core {   /* 中心：最亮暖金核心光（窄柱，能量轴心） */
  left: 50%; bottom: 0; width: 30%; height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(to right,
    transparent 0%, rgba(255, 236, 180, .46) 28%, #ffeebc 50%, rgba(255, 236, 180, .46) 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 64%, transparent 97%);
          mask-image: linear-gradient(to top, #000 64%, transparent 97%);
  filter: blur(2px);
}
.b-base {   /* 底部椭圆光盘：圆柱扎在法阵中心的截面（60°俯视扁椭圆），体积感关键 */
  left: 50%; bottom: -19px; width: 66%; height: 38px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, #fff3cf 0%, rgba(255, 222, 150, .72) 34%, rgba(255, 200, 110, .26) 66%, transparent 78%);
  filter: blur(2.5px);
}
#beam.live { animation: beamBreath 2s ease-in-out infinite; }
@keyframes beamBreath { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }

/* 纵向流光：光柱内上升的星光丝（JS生成，--du/--dd/--lx 注入） */
.b-stream {
  position: absolute; bottom: 0; left: var(--lx, 50%); width: 2px; height: 46%;
  background: linear-gradient(to top, transparent, rgba(255, 246, 214, .9) 50%, transparent);
  filter: blur(.6px);
  opacity: 0; pointer-events: none;
  animation: streamUp var(--du, 2.8s) linear var(--dd, 0s) infinite;
}
@keyframes streamUp {
  0%   { transform: translateY(60px); opacity: 0; }
  18%  { opacity: .85; }
  68%  { opacity: .5; }
  100% { transform: translateY(-210px); opacity: 0; }
}

/* 法阵中心能量亮盘：中心区域更亮、向外圈逐渐减弱（随法阵60°透视成椭圆） */
.mc-glow {
  position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 224, 155, .5) 0%, rgba(255, 202, 118, .17) 42%, transparent 68%);
}

/* 光柱内上浮金粉与星光丝：与光柱同圆柱区域，粒子垂直向上流动（与放射光粒子轨迹分离） */
.beam-dust {
  position: absolute; left: 50%; top: 50%; height: 20%; width: 240px;
  transform: translateX(-50%);
  pointer-events: none; z-index: 2;
}
.bd {
  position: absolute; bottom: 2%; width: 3.5px; height: 3.5px; border-radius: 50%;
  background: #ffefc0; box-shadow: 0 0 6px 1.5px rgba(255, 226, 150, .95);
  opacity: 0; animation: bdRise var(--du, 3s) linear var(--dd, 0s) infinite;
}
@keyframes bdRise {
  0%   { transform: translateY(0) scale(.8); opacity: 0; }
  12%  { opacity: 1; }
  75%  { opacity: .7; }
  100% { transform: translateY(-175px) scale(.5); opacity: 0; }
}

/* 放射光粒子：法阵平面内沿光带向外飘散（随盘透视，与光柱粒子轨迹分离） */
.rays-dust { position: absolute; inset: 0; pointer-events: none; }
.rd {
  position: absolute; width: 2.6px; height: 2.6px; border-radius: 50%;
  background: #ffd98c; box-shadow: 0 0 5px 1px rgba(255, 205, 115, .85);
  opacity: 0; animation: rdOut var(--du, 4s) ease-out var(--dd, 0s) infinite;
}
@keyframes rdOut {
  0%   { transform: translate(0, 0) scale(.7); opacity: 0; }
  18%  { opacity: .8; }
  100% { transform: translate(var(--dx, 30px), var(--dy, 30px)) scale(.35); opacity: 0; }
}

/* 包裹书本两侧的光幕：自法阵两侧斜向上，半透明金色光幕，柔和羽化（收敛模糊半径，避免糊团） */
.side-glow {
  position: absolute; top: 36%; width: 58px; height: 42%;
  z-index: 4; pointer-events: none; mix-blend-mode: screen;
  filter: blur(10px); opacity: 0;
  background: linear-gradient(to top, rgba(255, 205, 115, .55), rgba(255, 205, 115, .16) 55%, transparent 88%);
  border-radius: 50%;
}
.side-glow.left  { left: calc(50% - var(--pw) * 1.02); transform: rotate(-15deg); }
.side-glow.right { right: calc(50% - var(--pw) * 1.02); transform: rotate(15deg); }

/* 书本底部轮廓光（三层分明）：贴边高亮金边 + 向下宽厚柔光晕衔接法阵光柱 + 向上漫射封面下沿 */
.book-glow {
  position: absolute; left: 50%; top: calc(42% + var(--pw) / 1.4375);   /* 书底边：书中心42% + 半高(pw/0.6469×0.9)/2 */
  transform: translate(-50%, -50%);
  width: calc(var(--pw) * 1.06); height: calc(var(--pw) * 0.72);
  z-index: 5; pointer-events: none; opacity: 0;
}
.book-glow i { position: absolute; left: 50%; display: block; pointer-events: none; }
.bg-edge {   /* 紧贴书页底边的高亮金边（亮白核心+暖金外延，不被光柱淹没） */
  top: 50%; transform: translate(-50%, -50%);
  width: 102%; height: 9px; border-radius: 50%;
  background: linear-gradient(to right, transparent, rgba(255, 240, 190, .95) 14%, #fff9e2 50%, rgba(255, 240, 190, .95) 86%, transparent);
  filter: blur(2px); mix-blend-mode: screen;
}
.bg-halo {   /* 向下宽厚通透柔光晕，边缘羽化，与法阵光柱自然衔接 */
  top: 50%; transform: translateX(-50%);
  width: 152%; height: 100%;
  background: radial-gradient(50% 60% at 50% 0%, rgba(255, 218, 140, .9), rgba(255, 190, 100, .34) 58%, transparent 80%);
  filter: blur(10px); mix-blend-mode: screen;
}
.bg-up {     /* 向上轻微漫射到书本封面下沿 */
  bottom: 50%; transform: translateX(-50%);
  width: 94%; height: 42%;
  background: linear-gradient(to top, rgba(255, 228, 158, .55), transparent);
  filter: blur(7px); mix-blend-mode: screen;
}

/* 细碎金粉星光：集中在书本底边两侧，缓慢漂浮闪烁（圣光包裹的魔法质感） */
#dustField { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.dust {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #ffe3a0; box-shadow: 0 0 7px 1.5px rgba(255, 212, 125, .95);
  opacity: 0; animation: gdFloat var(--du, 4s) ease-in-out var(--dd, 0s) infinite;
}
@keyframes gdFloat {
  0%, 100% { transform: translateY(0); opacity: .12; }
  50%      { transform: translateY(-13px); opacity: .9; }
}

/* ═══════════ 页面3 · 答案之书 ═══════════ */
.book-scene {
  position: absolute; left: 0; right: 0; top: 42%;
  transform: translateY(-50%);
  display: flex; justify-content: center;
  perspective: 1800px; z-index: 3;
}
.book {
  position: relative;
  width: calc(var(--pw) * 2);          /* 始终为双页展开盒，封面位于右半 */
  height: calc(var(--pw) / 0.6469 * 0.9);   /* 书本高度减少10% */
  transform-style: preserve-3d;
  transform: rotateX(6deg);
}
/* 合上书时的书页厚度（右侧书口） */
.book::after {
  content: ""; position: absolute; top: 1.2%; right: -9px;
  width: 10px; height: 97.6%;
  background: repeating-linear-gradient(to right, #e9e0c9 0 2px, #c9bb9b 2px 3px);
  border-radius: 0 2px 2px 0;
  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
  transition: opacity .4s ease;
}
.book.open::after { opacity: 0; }
/* 书悬浮阴影 */
.book::before {
  content: ""; position: absolute; left: -20%; bottom: -16%;
  width: 140%; height: 22px;
  background: radial-gradient(ellipse, rgba(0,0,0,.5), transparent 70%);
  filter: blur(5px); z-index: -1;
}

/* 翻开定格后：深藏青书壳——仅两侧超出书页露出（顶底与书页平齐），颜色与封面一致 */
.book-shell {
  position: absolute;
  top: 0; bottom: 0; left: -16px; right: -16px;     /* 两侧壳边露出约7px（纸层9px之外） */
  background: linear-gradient(150deg, #232f55 0%, #131c3a 55%, #1c2748 100%);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 205, 128, .32),     /* 烫金包边 */
    inset 0 -10px 18px rgba(0, 0, 0, .55),
    inset 0 4px 10px rgba(255, 226, 160, .10),
    0 12px 26px rgba(0, 0, 0, .45);
  z-index: -1; opacity: 0; transition: opacity 0s;                 /* 消失（复位/再次翻阅）：立即隐去，平移途中绝不残留 */
}
.book.open .book-shell { opacity: 1; transition: opacity .8s ease .2s; }   /* 出现（封面完全翻开后）：缓慢淡入 */
/* 左右书页层：密实纸张叠放质感——极细密低对比纸纹 + 外侧自然压暗 */
.pstack {
  position: absolute; display: block; pointer-events: none;
  top: .8%; height: 98.4%; width: 9px;
  z-index: 6; opacity: 0; transition: opacity 0s;                 /* 消失：立即 */
}
.book.open .pstack { opacity: 1; transition: opacity .8s ease .2s; }   /* 出现：缓慢淡入 */
.ps-l {
  left: -9px; border-radius: 3px 0 0 3px;
  background:
    linear-gradient(to right, rgba(96, 64, 22, .34), rgba(255, 253, 244, .42) 55%, rgba(96, 64, 22, .10)),
    repeating-linear-gradient(to bottom, #f8f1de 0 1px, #eadfc4 1px 1.6px);
  box-shadow: inset -1px 0 1.5px rgba(120, 90, 40, .28);
}
.ps-r {
  right: -9px; border-radius: 0 3px 3px 0;
  background:
    linear-gradient(to left, rgba(96, 64, 22, .34), rgba(255, 253, 244, .42) 55%, rgba(96, 64, 22, .10)),
    repeating-linear-gradient(to bottom, #f8f1de 0 1px, #eadfc4 1px 1.6px);
  box-shadow: inset 1px 0 1.5px rgba(120, 90, 40, .28);
}

/* 封面 */
.cover {
  position: absolute; left: var(--pw); top: 0;
  width: var(--pw); height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  z-index: 8;
}
.cover > div { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px 6px 6px 2px; }
.cover-front {
  background: url("../assets/cover.webp") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,220,150,.25);
}
.cover > .cover-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #efe5cd, #e2d4b4);
  border-radius: 0;                  /* 去圆弧角：须压过 .cover>div 基础规则的 2px 6px 6px 2px */
  overflow: hidden;
}
.cover-back .pg-num { display: none; }   /* 封面背面不印页码 */

/* 翻动中的书页 */
.sheets { position: absolute; inset: 0; transform-style: preserve-3d; z-index: 9; }
.sheet {
  position: absolute; left: var(--pw); top: 0;
  width: var(--pw); height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
}
.sheet > div {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(105deg, #fbf6e8 0%, #f1e9d2 100%);
  overflow: hidden;
}
/* 背面带与静态左页相同的书脊内阴影：翻落左侧后阴影随页落定自然显现，
   帽页淡出交接静态左页时两者光影一致，杜绝"平面突然卡进书脊"的突兀跳变 */
.sheet .s-back { transform: rotateY(180deg); box-shadow: inset -14px 0 22px -14px rgba(90, 60, 20, .45); }
/* 书页内页文案：翻页过程中每一页都印着真实答案（帽页除外），还原真实答案之书 */
.sheet .pg-wrap, .cover-back .pg-wrap {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 15% 12%;                       /* 底部留页码位，文字区整体微偏上 */
  text-align: center;
}
.sheet .pg-cn, .cover-back .pg-cn {
  font-family: var(--serif); font-weight: 700;
  font-size: calc(var(--pw) * 0.062); line-height: 1.7;
  letter-spacing: .1em; color: #2c2318;
}
.sheet .pg-en, .cover-back .pg-en {
  margin-top: .7em;
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: calc(var(--pw) * 0.04); line-height: 1.5; color: #6d5c40;
}
.sheet .pg-num, .cover-back .pg-num {
  position: absolute; bottom: 7.5%; left: 0; right: 0;
  text-align: center; font-family: var(--serif);
  font-size: calc(var(--pw) * 0.048); letter-spacing: .25em; text-indent: .25em; color: #4d3f2a;
}
.sheet > div::after {  /* 翻动光影 */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,0,0,var(--shA, 0)) 0%, rgba(0,0,0,0) 45%);
}

/* 展开后的左右页面 */
.bpage {
  position: absolute; top: 0;
  width: var(--pw); height: 100%;
  background: linear-gradient(105deg, #faf5e7 0%, #f0e8d1 100%);
  opacity: 0;
  font-size: calc(var(--pw) * 0.088);
  overflow: hidden;
}
.bpage.left-page  { left: 0; border-radius: 5px 1px 1px 5px; box-shadow: inset -14px 0 22px -14px rgba(90, 60, 20, .45); }
.bpage.right-page { left: var(--pw); border-radius: 1px 5px 5px 1px; box-shadow: inset 14px 0 22px -14px rgba(90, 60, 20, .45); }

/* 复古角花（素材为左上单角，翻转得到其余三角；小巧对称布局，与上下花边留出间距） */
.corner { position: absolute; width: 21.6%; aspect-ratio: 1; background: url("../assets/corner.webp") center / contain no-repeat; opacity: .92; }
.corner.c-tl { top: 2.2%; left: 3.5%; }
.corner.c-tr { top: 2.2%; right: 3.5%; transform: scaleX(-1); }
.corner.c-bl { bottom: 2.2%; left: 3.5%; transform: scaleY(-1); }
.corner.c-br { bottom: 2.2%; right: 3.5%; transform: scale(-1, -1); }

/* 上下花边 */
.hborder {
  position: absolute; left: 27.6%; width: 44.8%; height: 3.22%;   /* 尺寸缩小30%：宽64→44.8、高4.6→3.22，居中不变 */
  background: url("../assets/border-h.webp") center / 100% 100% no-repeat;
  opacity: .9;
}
.hborder.h-top { top: 1.8%; }
.hborder.h-bottom { bottom: 1.8%; transform: scaleY(-1); }

/* 左页 · 魔法帽 */
.left-page .hat, .hat-face .hat { display: block; width: 38%; margin: 58% auto 0; }
.left-page .page-divider, .hat-face .page-divider { display: block; width: 62%; margin: 9% auto 0; }

/* 右页 · 答案（初始隐藏，翻书定格后由revealAnswer淡入，不再提前露出/闪没） */
.answer-box, .bpage .page-num { opacity: 0; }
.answer-box { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.answer-cn {
  margin-top: 52%;
  font-family: var(--serif); font-weight: 700;
  font-size: 1.55em; letter-spacing: .12em;
  color: #2c2318; text-align: center; padding: 0 8%;
  line-height: 1.5;
}
.answer-en {
  margin-top: .9em;
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  font-size: .82em; color: #6d5c40; text-align: center; padding: 0 9%;
  line-height: 1.4;
}
.right-page .page-divider { width: 66%; margin-top: 1.4em; }
.page-num {
  position: absolute; bottom: 7.5%; left: 0; right: 0;
  text-align: center; font-family: var(--serif);
  font-size: .8em; letter-spacing: .25em; text-indent: .25em; color: #4d3f2a;
}

/* 书脊流光 */
.spine-light {
  position: absolute; left: var(--pw); top: -4%;
  width: 26px; height: 108%;
  transform: translateX(-50%);
  background: linear-gradient(to top, transparent, rgba(255, 224, 150, .95), transparent);
  filter: blur(7px); mix-blend-mode: screen;
  opacity: 0; z-index: 9; pointer-events: none;
}

/* 答案展示后的漂浮星光 */
.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.sparkle {
  position: absolute; bottom: 30%;
  width: var(--s, 5px); height: var(--s, 5px); border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--gold-1) 45%, transparent 75%);
  animation: sparkleRise var(--t, 5s) ease-in var(--d, 0s) infinite;
  opacity: 0;
}
@keyframes sparkleRise {
  0% { transform: translateY(0) scale(.4); opacity: 0; }
  18% { opacity: .95; }
  100% { transform: translateY(-34vh) scale(1); opacity: 0; }
}

/* 长按进度环 */
.btn-longpress { display: flex; align-items: center; gap: 10px; padding: 13px 34px; }
.btn-longpress .ring { width: 22px; height: 22px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 2.6; }
.ring-bg { stroke: rgba(74, 44, 18, .25); }
.ring-fg {
  stroke: #4a2c12; stroke-linecap: round;
  stroke-dasharray: 97.39; stroke-dashoffset: 97.39;
}
.btn-longpress.holding { animation: none; transform: scale(.97); }

/* 结果操作按钮：高度×1.2（padding-y 11→15）、宽度×1.35（padding-x 20→38）、间距12→24拉开 */
.result-actions { display: none; gap: 24px; }
.result-actions.show { display: flex; }
.btn-ghost {
  padding: 15px 38px; border-radius: 999px;
  font-size: 13px; letter-spacing: .18em; text-indent: .18em;
  color: var(--gold-1);
  border: 1px solid rgba(240, 193, 105, .55);
  background: rgba(30, 24, 60, .45);
  backdrop-filter: blur(6px);
  box-shadow: 0 0 14px rgba(240, 193, 105, .18);
  transition: transform .2s ease;
}
.btn-ghost:active { transform: scale(.93); }

/* 书本上方魔法提示（答案是参考…）：锚定书本顶边上方108px居中 */
.book-tip {
  position: absolute; left: 0; right: 0;
  top: calc(42% - var(--pw) / 0.6469 * 0.45 - 82px);   /* 书中心42% − 半高 − 82px：文字底边距书顶≈54px（较初版拉近50%） */
  display: flex; justify-content: center;
  opacity: 0; pointer-events: none; z-index: 5;
}
.tip-svg { overflow: visible; display: block; }
.tip-svg text { font-family: var(--serif); font-size: 26px; letter-spacing: .12em; text-anchor: middle; }
/* 文字本体：固定浅白，无金色填充、无大范围金色光晕 */
.tip-base { fill: #F8F8FA; }

/* 减少动态偏好 */
@media (prefers-reduced-motion: reduce) {
  .glow-rays, .btn-gold, .breath-ring, .p2-sky img { animation: none !important; }
}

/* ─────────── Flutter 客户端适配 ─────────── */
/* 返回按钮：默认隐藏，仅在 Flutter WebView 环境（body.in-client-app）显示；刘海屏安全区适配 */
.client-back-button {
  position: fixed;
  top: max(16px, calc(env(safe-area-inset-top, 0px) + 10px));
  left: 14px;
  z-index: 100;
  width: 44px; height: 44px; border-radius: 50%;
  display: none; place-items: center;
  background: rgba(216, 179, 106, .28);
  border: 1px solid rgba(216, 179, 106, .4);
  color: #d8b36a;
  cursor: pointer; padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, transform .15s ease;
  box-shadow: 0 4px 16px rgba(216, 179, 106, .2);
}
body.in-client-app .client-back-button { display: grid; }
/* App 内书本限宽：WebView 全屏无浏览器栏，100dvh 撑满使 --stage-w=100vw，书本翻开≈90vw 过大；
   客户端环境书页宽改取 40vw → 翻开后整书宽 = 2×--pw ≈ 80vw（书高/光晕/提示文字均随 --pw 联动缩放） */
body.in-client-app { --pw: min(calc(100vw * 0.4), 196px); }
/* 安卓WebView返回按钮避让状态栏：env(safe-area-inset-top)普遍为0，默认按28px状态栏+12px余量下移；
   更精确做法：Flutter侧注入 document.documentElement.style.setProperty('--app-inset-top', MediaQuery顶部padding+'px') */
body.platform-android .client-back-button { top: calc(var(--app-inset-top, 28px) + 12px); }
.client-back-button:hover { background: rgba(216, 179, 106, .36); }
.client-back-button:active { background: rgba(216, 179, 106, .48); transform: scale(.94); }

/* 版权声明：页1内容尾部（单屏无滚动流，定位于首屏底部安全区上方） */
.copyright-footer {
  position: absolute; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  text-align: center;
  color: rgba(246, 240, 232, .38);
  font-size: 11px; line-height: 1.5;
  pointer-events: none;
}
#page2 {
}
#page3 {
}
.corner {
}