fateforge/static/style.css

/* ============================================================
   FateForge v2 — 墨韵主题 (宋·极简 · 调试用白底)
   ============================================================ */

* { -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Noto Serif SC', serif;
  /* 调试模式: 宣纸白 */
  background: #fafaf5;
  color: #1a1612;
  min-height: 100vh;
}
body.lang-en {
  font-family: 'Noto Serif', 'Noto Serif SC', serif;
}

/* ---------- 卷轴/场景容器 ---------- */
.scene {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* ---------- 烟雾层 (淡墨) ---------- */
.mist-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.mist-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(60, 50, 40, 0.06) 0%, rgba(60, 50, 40, 0) 70%);
  filter: blur(20px);
  animation: drift 28s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.mist-blob:nth-child(1) { width: 380px; height: 380px; top: 5%;  left: -10%; animation-duration: 32s; }
.mist-blob:nth-child(2) { width: 500px; height: 500px; top: 30%; left: 50%;  animation-duration: 38s; }
.mist-blob:nth-child(3) { width: 300px; height: 300px; top: 60%; left: 5%;   animation-duration: 26s; }
.mist-blob:nth-child(4) { width: 420px; height: 420px; top: 70%; left: 60%;  animation-duration: 40s; }
.mist-blob:nth-child(5) { width: 260px; height: 260px; top: 10%; left: 70%;  animation-duration: 30s; }
.mist-blob:nth-child(6) { width: 350px; height: 350px; top: 40%; left: 30%;  animation-duration: 34s; }
.mist-blob:nth-child(7) { width: 240px; height: 240px; top: 80%; left: 80%;  animation-duration: 28s; }
.mist-blob:nth-child(8) { width: 320px; height: 320px; top: 20%; left: 20%;  animation-duration: 36s; }
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1);     opacity: 0.55; }
  50%  { transform: translate(60px, -40px) scale(1.15); opacity: 0.85; }
  100% { transform: translate(-50px, 30px) scale(0.95); opacity: 0.6; }
}

/* ---------- 宣纸 (白底调试版) ---------- */
.ink-paper {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(180, 150, 110, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(120, 100, 80, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(248, 244, 235, 0.96) 100%);
  border: 1px solid rgba(120, 100, 80, 0.30);
  box-shadow:
    inset 0 0 20px rgba(120, 100, 80, 0.06),
    0 2px 12px rgba(80, 60, 40, 0.08);
  position: relative;
  color: #1a1612;
}
.ink-paper::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: multiply;
}

/* ---------- 宣纸 · 圆角软化 (文人书信感) ---------- */
.ink-paper-rounded {
  border-radius: 6px;
  box-shadow:
    inset 0 0 20px rgba(120, 100, 80, 0.06),
    0 2px 12px rgba(80, 60, 40, 0.08);
}

/* ---------- 滚动卡片 (卦象详解): 高度固定, 内容超出可滚, 不显示滚动条 ---------- */
.ink-paper-scrollable {
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/old Edge */
  scroll-behavior: smooth;
  position: relative;
}
.ink-paper-scrollable::-webkit-scrollbar {
  display: none;                    /* Chrome/Safari */
  width: 0;
  height: 0;
}

/* ---------- 乾坤志条目: hover 时青色边框 + 向外逐层晕染变浅 ---------- */
.book-entry {
  border: 1px solid rgba(120, 100, 80, 0.30);
  box-shadow:
    inset 0 0 20px rgba(120, 100, 80, 0.06),
    0 2px 12px rgba(80, 60, 40, 0.08);
  transition:
    border-color 0.5s ease,
    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.book-entry:hover {
  border-color: rgba(123, 168, 138, 0.85);   /* 青 (玉) 色边框 */
  /* 由内向外 4 层光晕, 半径逐渐扩大, 强度逐渐变浅 */
  box-shadow:
    inset 0 0 16px rgba(120, 100, 80, 0.05),
    0 0 0 1px rgba(123, 168, 138, 0.30),
    0 0 14px 0 rgba(123, 168, 138, 0.22),
    0 0 36px 6px rgba(123, 168, 138, 0.14),
    0 0 72px 18px rgba(123, 168, 138, 0.07);
  transform: translateY(-1px);
}

/* ---------- 宣纸 · 浮于纸面 (广域极淡投影, 颜色跟背景走) ---------- */
.ink-paper-floating {
  box-shadow:
    0 0 0 1px rgba(120, 100, 80, 0.18),
    0 2px 4px rgba(80, 60, 40, 0.05),
    /* 广域极淡的扩散阴影 —— 颜色随五行背景 */
    0 8px 24px -8px rgba(80, 60, 40, 0.18),
    0 24px 60px -20px rgba(80, 60, 40, 0.16),
    0 48px 120px -40px rgba(80, 60, 40, 0.14);
}
/* 凶页(火): 微微带焦红 */
.scene.bg-element-fire .ink-paper-floating {
  box-shadow:
    0 0 0 1px rgba(120, 100, 80, 0.18),
    0 2px 4px rgba(80, 60, 40, 0.05),
    0 8px 24px -8px rgba(140, 70, 50, 0.20),
    0 24px 60px -20px rgba(140, 70, 50, 0.16),
    0 48px 120px -40px rgba(140, 70, 50, 0.14);
}
/* 金页: 微微带金 */
.scene.bg-element-metal .ink-paper-floating {
  box-shadow:
    0 0 0 1px rgba(120, 100, 80, 0.18),
    0 2px 4px rgba(80, 60, 40, 0.05),
    0 8px 24px -8px rgba(160, 130, 50, 0.18),
    0 24px 60px -20px rgba(160, 130, 50, 0.14),
    0 48px 120px -40px rgba(160, 130, 50, 0.12);
}
/* 木页: 微微带青绿 */
.scene.bg-element-wood .ink-paper-floating {
  box-shadow:
    0 0 0 1px rgba(120, 100, 80, 0.18),
    0 2px 4px rgba(80, 60, 40, 0.05),
    0 8px 24px -8px rgba(70, 120, 100, 0.20),
    0 24px 60px -20px rgba(70, 120, 100, 0.16),
    0 48px 120px -40px rgba(70, 120, 100, 0.14);
}
/* 土页: 微微带焦土黄 */
.scene.bg-element-earth .ink-paper-floating {
  box-shadow:
    0 0 0 1px rgba(120, 100, 80, 0.18),
    0 2px 4px rgba(80, 60, 40, 0.05),
    0 8px 24px -8px rgba(150, 110, 60, 0.22),
    0 24px 60px -20px rgba(150, 110, 60, 0.18),
    0 48px 120px -40px rgba(150, 110, 60, 0.14);
}
/* 水页: 微微带蓝 */
.scene.bg-element-water .ink-paper-floating {
  box-shadow:
    0 0 0 1px rgba(120, 100, 80, 0.18),
    0 2px 4px rgba(80, 60, 40, 0.05),
    0 8px 24px -8px rgba(60, 110, 130, 0.20),
    0 24px 60px -20px rgba(60, 110, 130, 0.16),
    0 48px 120px -40px rgba(60, 110, 130, 0.14);
}

/* ---------- 水墨渗字 ---------- */
.ink-seep {
  animation: seep 3.5s ease-out both;
}
.ink-seep-loop {
  animation: seepLoop 2.5s ease-in-out infinite;
}
@keyframes seep {
  0%   { opacity: 0;   filter: blur(8px); transform: translateY(8px); }
  40%  { opacity: 0.4; filter: blur(4px); }
  100% { opacity: 0.95; filter: blur(0);  transform: translateY(0); }
}
@keyframes seepLoop {
  0%, 100% { opacity: 0.4; filter: blur(2px); }
  50%      { opacity: 0.95; filter: blur(0); }
}

.reading-text {
  font-family: 'KaiTi', 'STKaiti', serif;
  color: #1a1612;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
  animation: readingFade 0.6s ease-out both;
}
body.lang-en .reading-text {
  font-family: 'Noto Serif', serif;
}
@keyframes readingFade {
  0% { opacity: 0; filter: blur(3px); }
  100% { opacity: 1; filter: blur(0); }
}

/* 文字"打字机"式逐字显示 —— CSS 剪裁实现 (无需 JS) */
.typing-text {
  display: block;
  white-space: pre-wrap;
  position: relative;
  animation: typingReveal 1.6s steps(28, end) 0.1s both;
}
@keyframes typingReveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* 模糊的解卦正文 */
.reading-text-blurred {
  filter: blur(5px);
  opacity: 0.55;
  user-select: none;
}

/* ---------- 龟壳 ---------- */
.turtle-wrap {
  position: relative;
  width: 320px; height: 320px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s, filter 0.3s ease;
  /* 光从左上方照下, 阴影投在右下方 —— 用 drop-shadow 偏移到右下, 并略加横向模糊 */
  filter: drop-shadow(6px 10px 8px rgba(80, 60, 40, 0.28))
          drop-shadow(2px 4px 3px rgba(80, 60, 40, 0.18));
}
.turtle-wrap:hover { transform: scale(1.04); }
.turtle-wrap:active { transform: scale(0.96); }
.turtle-img {
  width: 100%; height: 100%;
  pointer-events: none;
}
.turtle-wrap.shake {
  animation: shake 0.6s ease-in-out;
}
@keyframes shake {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-12deg) translateY(-4px); }
  40% { transform: rotate(10deg)  translateY(2px); }
  60% { transform: rotate(-8deg)  translateY(-2px); }
  80% { transform: rotate(6deg)   translateY(1px); }
}
.click-hint {
  position: absolute;
  bottom: -36px; left: 50%;
  transform: translateX(-50%);
  font-family: 'KaiTi', serif;
  color: rgba(40, 30, 22, 0.5);
  font-size: 1rem;
  letter-spacing: 0.3em;
  animation: hintPulse 2.5s ease-in-out infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.85; }
}

/* ---------- 铜钱 (白底调试版 · 单面) ---------- */
.coin {
  width: 130px; height: 130px;
  position: relative;
  perspective: 800px;
  /* 光从左上方照下, 阴影投在右下方 —— 刚落地时短暂, 用 keyframe 配合 .flipped 入场 */
  filter: drop-shadow(4px 7px 5px rgba(80, 60, 40, 0.22))
          drop-shadow(1px 3px 2px rgba(80, 60, 40, 0.15));
  transition: filter 0.4s ease;
}
.coin-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  /* 关键: 入场即缩放一次, 避免 transform 与 .flipped 的 keyframes 冲突 */
  animation: coinEnter 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.coin.flipped .coin-inner {
  /* 注意: 不用 transform, 用 animation 的 from→to 自带 scale, 避免叠加抖动 */
  animation: coinFlip 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes coinEnter {
  0%   { transform: scale(0.5) rotateY(0deg); opacity: 0; }
  100% { transform: scale(1)   rotateY(0deg); opacity: 1; }
}
@keyframes coinFlip {
  0%   { transform: scale(0.6) rotateY(0deg);   }
  60%  { transform: scale(1.15) rotateY(360deg); }
  100% { transform: scale(1)   rotateY(720deg);  }
}
.coin-face {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Ma Shan Zheng', serif;
  font-size: 1.5rem;
  overflow: hidden;
  background: transparent;
  backface-visibility: visible;
  transform: translateZ(0);
  will-change: transform;
}
.coin-face img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  mix-blend-mode: multiply;
}

/* ---------- 六爻卦画 (阴爻间隙无阴影 · 卦画加宽 · ×○ 改纯黑) ---------- */
.hex-lines {
  display: flex;
  flex-direction: column-reverse;
  gap: 18px;
  margin: 1.5rem 0;
}
.hex-line {
  position: relative;
  width: 280px;
  height: 16px;
  background: linear-gradient(90deg, transparent 0%, #0a0805 12%, #0a0805 88%, transparent 100%);
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  animation: lineSeep 1.4s ease-out both;
}
.hex-line.yin {
  /* 中间留白: 不带阴影, 跟卡片背景融合 */
  background:
    linear-gradient(90deg,
      transparent 0%,
      #0a0805    10%,
      #0a0805    42%,
      transparent 42%,
      transparent 58%,
      #0a0805    58%,
      #0a0805    90%,
      transparent 100%);
  /* 阴爻中间留白不需要 box-shadow, 用 filter: drop-shadow 替代, 阴影只跟不透明部分走 */
  box-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.10));
}
.hex-line.moving {
  background:
    linear-gradient(90deg,
      transparent 0%,
      #0a0805    10%,
      #0a0805    42%,
      transparent 42%,
      transparent 58%,
      #0a0805    58%,
      #0a0805    90%,
      transparent 100%);
  box-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.10)) drop-shadow(0 0 10px rgba(220, 185, 90, 0.45));
  animation: lineSeep 1.4s ease-out both, pulseMoving 2.2s ease-in-out infinite;
}
.hex-line.moving.yang {
  background: linear-gradient(90deg, transparent 0%, #0a0805 12%, #0a0805 88%, transparent 100%);
}
.line-mark {
  position: absolute;
  left: 100%;
  margin-left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'KaiTi', serif;
  font-size: 1.6rem;
  color: #0a0805;
  font-weight: 600;
}
@keyframes lineSeep {
  0%   { opacity: 0; transform: scaleX(0.3); filter: blur(6px); }
  60%  { opacity: 0.6; transform: scaleX(0.85); filter: blur(2px); }
  100% { opacity: 1; transform: scaleX(1); filter: blur(0); }
}
@keyframes pulseMoving {
  0%, 100% { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.10)) drop-shadow(0 0 8px rgba(220, 185, 90, 0.40)); }
  50%      { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.10)) drop-shadow(0 0 18px rgba(220, 185, 90, 0.75)); }
}

/* ---------- 画面三 氛围色 (凶时微调) ---------- */
.scene.ominous-bad {
  background: radial-gradient(ellipse at center, rgba(160, 60, 40, 0.08) 0%, transparent 70%);
  animation: ominousPulse 6s ease-in-out infinite;
}
.scene.ominous-ice {
  background: radial-gradient(ellipse at center, rgba(60, 110, 130, 0.10) 0%, transparent 70%);
  animation: ominousPulse 6s ease-in-out infinite;
}
@keyframes ominousPulse {
  0%, 100% { background-size: 100% 100%; }
  50%      { background-size: 110% 110%; }
}
.scene.ominous-bad .mist-blob,
.scene.ominous-ice .mist-blob {
  animation-duration: 12s !important;
}

/* ---------- 七档吉凶 → 场景色调 ---------- */
.scene.tone-jade {
  background: radial-gradient(ellipse at center, rgba(100, 160, 130, 0.10) 0%, transparent 70%);
  transition: background 1.5s ease;
}
.scene.tone-jade .mist-blob {
  background: radial-gradient(circle, rgba(80, 150, 120, 0.08) 0%, rgba(80, 150, 120, 0) 70%);
  animation-duration: 40s !important;
}
.scene.tone-blood {
  background: radial-gradient(ellipse at center, rgba(140, 50, 30, 0.10) 0%, transparent 70%);
  transition: background 1.5s ease;
}
.scene.tone-blood .mist-blob {
  background: radial-gradient(circle, rgba(120, 40, 20, 0.08) 0%, rgba(120, 40, 20, 0) 70%);
  animation-duration: 14s !important;
}
.scene.tone-paper {
  /* 保持宣纸默认背景 */
}

/* ---------- 五行水墨晕染背景 (从中心向外渐变淡) ----------
   放在 .scene.tone-* 之后, 用 .scene.bg-element-* 提高优先级 */
.scene.bg-element-wood {
  background:
    radial-gradient(ellipse at center, rgba(180, 210, 200, 0.55) 0%, rgba(180, 210, 200, 0.30) 18%, rgba(180, 210, 200, 0.12) 40%, rgba(180, 210, 200, 0) 70%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(248, 244, 235, 0.96) 100%);
  transition: background 1.8s ease;
}
.scene.bg-element-earth {
  background:
    radial-gradient(ellipse at center, rgba(225, 200, 140, 0.50) 0%, rgba(225, 200, 140, 0.28) 18%, rgba(225, 200, 140, 0.10) 40%, rgba(225, 200, 140, 0) 70%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(248, 244, 235, 0.96) 100%);
  transition: background 1.8s ease;
}
.scene.bg-element-fire {
  background:
    radial-gradient(ellipse at center, rgba(220, 150, 130, 0.45) 0%, rgba(220, 150, 130, 0.25) 18%, rgba(220, 150, 130, 0.10) 40%, rgba(220, 150, 150, 0) 70%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(248, 244, 235, 0.96) 100%);
  transition: background 1.8s ease;
}
.scene.bg-element-metal {
  background:
    radial-gradient(ellipse at center, rgba(230, 205, 130, 0.45) 0%, rgba(230, 205, 130, 0.25) 18%, rgba(230, 205, 130, 0.10) 40%, rgba(230, 205, 130, 0) 70%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(248, 244, 235, 0.96) 100%);
  transition: background 1.8s ease;
}
.scene.bg-element-water {
  background:
    radial-gradient(ellipse at center, rgba(160, 200, 215, 0.50) 0%, rgba(160, 200, 215, 0.28) 18%, rgba(160, 200, 215, 0.10) 40%, rgba(160, 200, 215, 0) 70%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(248, 244, 235, 0.96) 100%);
  transition: background 1.8s ease;
}

/* ---------- 画面四 玉石光 (白底: 深绿色文字) ---------- */
.jade-glow {
  text-shadow:
    0 0 8px rgba(120, 170, 130, 0.5),
    0 0 24px rgba(80, 130, 100, 0.35);
  color: #3a6850;
}

/* ---------- 拂袖交互 (长滑轨 · 水墨晕染) ---------- */
.swipe-zone {
  position: relative;
  width: 100%;
  height: 48px;
  overflow: visible;
  background: transparent;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}

.swipe-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  transform: translateY(-50%);
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(140, 180, 200, 0)    0%,
      rgba(140, 180, 200, 0.55) 35%,
      rgba(140, 180, 200, 0.85) 50%,
      rgba(140, 180, 200, 0.30) 70%,
      rgba(140, 180, 200, 0)    100%);
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0%,
      transparent        var(--swipe-pct, 0%),
      rgba(0,0,0,0.5)    calc(var(--swipe-pct, 0%) + 1%),
      black              calc(var(--swipe-pct, 0%) + 2%),
      black              100%);
          mask-image: linear-gradient(90deg,
      transparent 0%,
      transparent        var(--swipe-pct, 0%),
      rgba(0,0,0,0.5)    calc(var(--swipe-pct, 0%) + 1%),
      black              calc(var(--swipe-pct, 0%) + 2%),
      black              100%);
  transition: -webkit-mask-image 0.08s linear;
  transition:         mask-image 0.08s linear;
}

.swipe-handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 50%,
    rgba(170, 210, 170, 0.65) 0%,
    rgba(170, 210, 170, 0.45) 35%,
    rgba(170, 210, 170, 0.15) 65%,
    rgba(170, 210, 170, 0) 100%);
  box-shadow:
    inset 0 0 12px rgba(140, 200, 150, 0.25),
    0 0 18px rgba(140, 200, 150, 0.18);
  transition: background 0.5s ease, box-shadow 0.5s ease, left 0s;
  will-change: left;
  --handle-hue: 0;
}
.swipe-handle-glyph {
  font-family: 'Ma Shan Zheng', serif;
  font-size: 0.85rem;
  color: rgba(60, 100, 70, 0.78);
  letter-spacing: 0.1em;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

/* ---------- 自定义水墨确认弹窗 ---------- */
.ink-modal-mask {
  background: rgba(40, 30, 22, 0.32);
  backdrop-filter: blur(3px);
}
.ink-modal {
  width: 100%;
  max-width: 420px;
  padding: 2rem 2.2rem 1.6rem;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(180, 150, 110, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(120, 100, 80, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, rgba(248, 244, 235, 0.98) 100%);
  border: 1px solid rgba(120, 100, 80, 0.30);
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(120, 100, 80, 0.10),
    0 8px 24px -8px rgba(80, 60, 40, 0.18),
    0 24px 60px -20px rgba(80, 60, 40, 0.16);
  font-family: 'KaiTi', 'STKaiti', serif;
  color: #2a241c;
  position: relative;
  animation: inkModalIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.ink-modal::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.4;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: multiply;
}
.ink-modal-text {
  position: relative;
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: center;
  color: #3a2e22;
  letter-spacing: 0.05em;
  margin-bottom: 1.6rem;
}
.ink-modal-actions {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 1.2rem;
}
.ink-modal-btn {
  font-family: 'Ma Shan Zheng', 'STKaiti', serif;
  font-size: 1.05rem;
  letter-spacing: 0.25em;
  padding: 0.55rem 1.6rem;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.ink-modal-btn-cancel {
  border: 1px solid rgba(120, 100, 80, 0.35);
  color: #5a4a36;
}
.ink-modal-btn-cancel:hover {
  border-color: rgba(80, 60, 40, 0.55);
  color: #1a1612;
  background: rgba(120, 90, 60, 0.04);
}
.ink-modal-btn-confirm {
  border: 1px solid rgba(122, 42, 26, 0.55);
  color: #7a2a1a;
}
.ink-modal-btn-confirm:hover {
  border-color: rgba(122, 42, 26, 0.85);
  color: #5a1810;
  background: rgba(122, 42, 26, 0.06);
}
@keyframes inkModalIn {
  0%   { opacity: 0; transform: scale(0.94) translateY(8px); filter: blur(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0);     filter: blur(0); }
}

/* ---------- 启程回归遮罩 (吉局 → 模糊覆盖 → 返回首页) ---------- */
.depart-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  /* 从左下角向外扩张: 用 clip-path polygon 实现 */
  background: rgba(250, 250, 245, 0.92);
  backdrop-filter: blur(8px);
  animation: departSweep 1.6s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes departSweep {
  0%   { clip-path: polygon(0 100%, 0 100%, 0 100%); opacity: 0.85; }
  60%  { clip-path: polygon(0 100%, 100% 100%, 0 100%); opacity: 1; }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
}

/* ---------- 终场雾散 (白底调试: 淡米色 + 墨字) ---------- */
.finale-overlay {
  position: fixed; inset: 0;
  z-index: 60;
  background: radial-gradient(ellipse at center, rgba(250, 250, 245, 0.97) 0%, rgba(245, 240, 230, 0.97) 100%);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  animation: fadeIn 2.5s ease-out;
}
.finale-quote {
  text-align: center;
  max-width: 600px;
  padding: 0 2rem;
}
.finale-line {
  font-family: 'Ma Shan Zheng', serif;
  color: #1a1612;
  font-size: 1.8rem;
  line-height: 2.4;
  letter-spacing: 0.3em;
  text-shadow: 0 0 8px rgba(60, 130, 90, 0.25);
  opacity: 0;
  animation: finaleLine 2s ease-out forwards;
  margin: 0.5rem 0;
}
.finale-line:nth-child(1) { animation-delay: 0.5s; }
.finale-line:nth-child(2) { animation-delay: 1.5s; }
.finale-line:nth-child(3) { animation-delay: 2.5s; }
.finale-line:nth-child(4) { animation-delay: 3.5s; }
.finale-line:nth-child(5) { animation-delay: 4.5s; }
@keyframes finaleLine {
  0%   { opacity: 0; filter: blur(8px); transform: translateY(20px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* ---------- 转场 ---------- */
.fade-slow-enter-active, .fade-slow-leave-active { transition: opacity 1.4s ease, transform 1.4s ease; }
.fade-slow-enter-from, .fade-slow-leave-to { opacity: 0; transform: translateY(8px); }
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.fadeIn { animation: fadeIn 1s ease-out both; }
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 滚动条隐藏 ---------- */
.scene.overflow-y-auto::-webkit-scrollbar { width: 0; }

/* ---------- Hex Seal (画面三的卦名) ---------- */
.hex-seal {
  text-align: center;
  padding: 1.5rem 2rem;
  border-top: 1px solid rgba(80, 60, 40, 0.35);
  border-bottom: 1px solid rgba(80, 60, 40, 0.35);
}

/* ---------- 输入框 placeholder 颜色 (焦茶) ---------- */
textarea::placeholder {
  color: rgba(90, 74, 54, 0.55) !important;   /* 焦茶色, 微微带点墨 */
  font-style: normal;
  font-weight: 400;
}

/* ---------- 首页 · textarea 样式 (去掉 Tailwind 的硬 utility) ---------- */
.yuanqi-textarea {
  width: 100%;
  max-width: 36rem;            /* 跟 max-w-2xl 对齐, 但更宽一些 */
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(120, 100, 80, 0.40);
  color: #1a1612;
  text-align: center;
  font-family: 'KaiTi', 'STKaiti', serif;
  font-size: 1.25rem;          /* 20px, 跟 placeholder 同步 */
  line-height: 1.6;
  outline: none;
  resize: none;
  padding: 0.75rem 0;
  transition: border-color 0.4s ease;
}
.yuanqi-textarea:focus {
  border-bottom-color: rgba(160, 200, 175, 0.85);    /* 浅绿下划线, 柔和不刺眼 */
  box-shadow: 0 1px 0 0 rgba(160, 200, 175, 0.35);   /* 微微外晕染, 让下划线有"光"感 */
}
body.lang-en .yuanqi-textarea {
  font-family: 'Noto Serif', serif;
}

/* ---------- 窥机页文字统一放大 ---------- */
.kuiji-text {
  font-size: 1.25rem;          /* 20px (相比旧 text-base 16px) */
  line-height: 1.6;
}
.kuiji-subtext {
  font-size: 1.0625rem;        /* 17px (相比旧 text-sm 14px) */
  line-height: 1.5;
}
.kuiji-number {
  font-size: 1.6rem;           /* 数字 0~6 醒目 */
  font-weight: 500;
}
.kuiji-section-title {
  font-size: 1.4rem;           /* "六爻已定 卦象初成" 等 */
  line-height: 1.6;
}
.hex-judgment-text {
  font-size: 1.2rem;           /* 卦辞稍大, 配行书 */
  line-height: 1.8;
  color: #3a2e22;              /* 焦茶色, 略浅于纯黑 */
}
.hex-card-text {
  font-size: 1.125rem;         /* 18px, 比旧 text-base 16px 略大 */
  line-height: 1.8;            /* 1.8 文人书信感 */
  color: #2a241c;              /* 焦墨色, 比纯黑淡一点 */
  overflow-wrap: break-word;   /* 英文长单词也能换行, 防止溢出 */
  word-break: normal;
}
body.lang-en .hex-card-text,
body.lang-en .hex-judgment-text {
  font-family: 'Noto Serif', serif;
}
body.lang-en .hex-card-text {
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ---------- 首页 · 推演按钮 (边框与背景同色, 字色同 placeholder) ---------- */
.cast-btn {
  position: relative;
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(180, 210, 200, 0.70);    /* 边框: 跟 bg-element-wood 接近的淡青/淡绿 */
  border-radius: 4px;
  color: rgba(90, 74, 54, 0.85);                  /* 默认: 跟 placeholder 同样深的焦茶色字 */
  cursor: pointer;
  overflow: visible;
  transition:
    color 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s ease;
  /* 与背景同色的浅晕染, 由内向外逐层变浅 */
  box-shadow:
    0 0 12px 0 rgba(180, 210, 200, 0.28),
    0 0 32px 6px rgba(180, 210, 200, 0.18),
    0 0 64px 18px rgba(180, 210, 200, 0.08);
}
.cast-btn.is-active {
  color: #3a2e22;                          /* 有输入时: 焦茶深色 */
  border-color: rgba(170, 215, 175, 0.95);
  box-shadow:
    0 0 14px 0 rgba(180, 210, 200, 0.42),
    0 0 36px 8px rgba(180, 210, 200, 0.24),
    0 0 72px 22px rgba(180, 210, 200, 0.12);
}
.cast-btn.is-disabled {
  color: rgba(90, 74, 54, 0.40);
  border-color: rgba(180, 210, 200, 0.45);
  cursor: not-allowed;
  box-shadow: none;
}
/* 悬浮/点击 (仅在 is-active 时): 晕染变明显, 颜色柔和, 不刺眼 */
.cast-btn.is-active:hover,
.cast-btn.is-active:active {
  color: #1a1612;
  border-color: rgba(170, 210, 180, 1);
  box-shadow:
    0 0 0 1px rgba(170, 210, 180, 0.45),
    0 0 20px 3px rgba(170, 210, 180, 0.38),
    0 0 52px 14px rgba(170, 210, 180, 0.20),
    0 0 104px 36px rgba(170, 210, 180, 0.08);
  transform: translateY(-1px);
}
.cast-btn.is-active:active {
  transform: translateY(0) scale(0.98);
}
.cast-btn-text {
  position: relative;
  z-index: 1;
}

/* ---------- "窥天机" 按钮 (浅黄边框 + 外晕染) ---------- */
.reveal-btn {
  position: relative;
  display: inline-block;
  background: transparent;
  border: 1px solid rgb(239, 230, 208);    /* 浅黄边框 */
  border-radius: 4px;
  color: #3a2e22;
  cursor: pointer;
  overflow: visible;
  transition:
    color 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s ease;
  box-shadow:
    0 0 12px 0 rgba(230, 210, 150, 0.16),
    0 0 32px 6px rgba(230, 210, 150, 0.08),
    0 0 64px 18px rgba(230, 210, 150, 0.04);
}
.reveal-btn:hover,
.reveal-btn:active {
  color: #1a1612;
  border-color: rgba(200, 175, 90, 1);
  box-shadow:
    0 0 0 1px rgba(200, 175, 90, 0.45),
    0 0 18px 2px rgba(220, 190, 110, 0.42),
    0 0 48px 12px rgba(220, 190, 110, 0.22),
    0 0 96px 32px rgba(220, 190, 110, 0.08);
  transform: translateY(-1px);
}
.reveal-btn:active {
  transform: translateY(0) scale(0.98);
}

/* ---------- "乾坤已定且乘势启程" 按钮 (浅金色边框 + 浅金外晕染, 跟 bg-element-metal 协调) ---------- */
.depart-btn {
  position: relative;
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(220, 190, 130, 0.85);    /* 浅金边框 */
  border-radius: 4px;
  color: #3a2e22;
  cursor: pointer;
  overflow: visible;
  transition:
    color 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s ease;
  /* 浅金色外晕染 */
  box-shadow:
    0 0 12px 0 rgba(220, 190, 130, 0.22),
    0 0 32px 6px rgba(220, 190, 130, 0.12),
    0 0 64px 18px rgba(220, 190, 130, 0.06);
}
.depart-btn:hover,
.depart-btn:active {
  color: #1a1612;
  border-color: rgba(180, 140, 60, 1);
  box-shadow:
    0 0 0 1px rgba(180, 140, 60, 0.50),
    0 0 18px 2px rgba(200, 160, 80, 0.48),
    0 0 48px 12px rgba(200, 160, 80, 0.28),
    0 0 96px 32px rgba(200, 160, 80, 0.10);
  transform: translateY(-1px);
}
.depart-btn:active {
  transform: translateY(0) scale(0.98);
}

/* ---------- 水墨晕染按钮 (ink-wash-btn) ----------
   按钮本身无边框, 下方垫一层焦茶/金 圆形/椭圆 水墨晕染.
   按下/悬停时, 晕染瞬间向外扩散、文字淡隐. */
.ink-wash-btn {
  position: relative;
  background: transparent;
  border: none;
  color: #1a1612;
  cursor: pointer;
  overflow: visible;
  transition: color 0.5s ease;
}
.ink-wash-btn.is-disabled {
  color: rgba(40, 30, 22, 0.30);
  cursor: not-allowed;
}
.ink-wash-btn .ink-wash-blot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 180%;
  transform: translate(-50%, -50%) scale(0.6);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(120, 90, 60, 0.40) 0%,
    rgba(120, 90, 60, 0.22) 30%,
    rgba(120, 90, 60, 0.08) 60%,
    rgba(120, 90, 60, 0)    100%);
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.6s ease,
              background 0.6s ease;
  opacity: 0.6;
  z-index: 0;
}
.ink-wash-btn:not(.is-disabled):hover .ink-wash-blot,
.ink-wash-btn:not(.is-disabled):active .ink-wash-blot {
  transform: translate(-50%, -50%) scale(1.6);
  opacity: 1;
  background: radial-gradient(ellipse at center,
    rgba(120, 90, 60, 0.65) 0%,
    rgba(120, 90, 60, 0.35) 25%,
    rgba(120, 90, 60, 0.12) 55%,
    rgba(120, 90, 60, 0)    100%);
}
.ink-wash-btn:not(.is-disabled):active .ink-wash-blot {
  transform: translate(-50%, -50%) scale(2.4);
  opacity: 0.95;
}
.ink-wash-btn:not(.is-disabled):active .ink-wash-text {
  opacity: 0.15;
  filter: blur(2px);
}
.ink-wash-btn .ink-wash-text {
  position: relative;
  z-index: 1;
  transition: opacity 0.5s ease, filter 0.5s ease;
}

/* "乾坤已定 且拂袖登程" 按钮: 用金色晕染 */
.ink-wash-btn-gold .ink-wash-blot {
  background: radial-gradient(ellipse at center,
    rgba(184, 146, 60, 0.35) 0%,
    rgba(184, 146, 60, 0.20) 30%,
    rgba(184, 146, 60, 0.08) 60%,
    rgba(184, 146, 60, 0)    100%);
  opacity: 0.55;
}
.ink-wash-btn-gold:not(.is-disabled):hover .ink-wash-blot,
.ink-wash-btn-gold:not(.is-disabled):active .ink-wash-blot {
  background: radial-gradient(ellipse at center,
    rgba(184, 146, 60, 0.65) 0%,
    rgba(184, 146, 60, 0.35) 25%,
    rgba(184, 146, 60, 0.12) 55%,
    rgba(184, 146, 60, 0)    100%);
}

/* ---------- "遁其一" 按钮 (浅黄底 + 浅黄边 + 浅金呼吸灯, 像迷雾中的明灯) ---------- */
.reveal-one-wrap {
  position: relative;
  display: inline-block;
  padding: 0;
}
/* 按钮居中容器: 占满父容器, 居中显示按钮 */
.reveal-one-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;            /* 让 pointer 事件传到内部按钮 */
}
.reveal-one-center > * {
  pointer-events: auto;
}
/* 蒙版: 盖住整个父容器(卡片), 默认重模糊+红晕, 让下方的心法只能"隐约看到字形" */
.reveal-veil {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: rgba(80, 30, 25, 0.10);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  /* 红色晕染: 中心深, 边缘淡 */
  box-shadow: inset 0 0 120px rgba(120, 30, 25, 0.15);
  opacity: 1;
  transition:
    opacity 1.0s ease,
    backdrop-filter 1.0s ease,
    -webkit-backdrop-filter 1.0s ease,
    background 1.0s ease;
}
.reveal-veil.is-lifted {
  opacity: 0;
  backdrop-filter: blur(0) saturate(100%);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  background: rgba(80, 30, 25, 0);
  box-shadow: inset 0 0 0 rgba(120, 30, 25, 0);
}

.reveal-one-btn {
  position: relative;
  display: inline-block;
  padding: 14px 40px;
  font-family: 'KaiTi', 'STKaiti', serif;
  font-size: 1.3rem;
  letter-spacing: 0.4em;
  color: #3a2e22;                                    /* 焦茶墨色 */
  background: rgba(248, 235, 195, 0.60);            /* 浅黄半透明底 */
  border: 1px solid rgba(225, 200, 130, 0.85);       /* 浅黄边框 */
  border-radius: 4px;
  cursor: pointer;
  overflow: visible;
  transition:
    opacity 1.2s ease,
    filter 1.2s ease,
    transform 1.2s ease,
    box-shadow 0.5s ease,
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
  /* 外圈浅金光晕 + 呼吸灯 (浅黄, 跟"循其一"按钮同步) */
  box-shadow:
    0 0 0 1px rgba(212, 175, 80, 0.28),
    0 0 16px 0 rgba(220, 185, 90, 0.38),
    0 0 36px 6px rgba(220, 185, 90, 0.24),
    0 0 72px 18px rgba(220, 185, 90, 0.12);
  animation: revealBreath 3.2s ease-in-out infinite;
}
.reveal-one-btn:hover,
.reveal-one-btn:focus {
  outline: none;
  color: #1a1612;
  background: rgba(248, 235, 195, 0.78);
  border-color: rgba(212, 175, 80, 1);
  animation: revealBreathFast 1.8s ease-in-out infinite;
}
.reveal-one-btn:active {
  transform: translateY(0px) scale(0.98);
}
.reveal-one-btn.is-fading-out {
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.15);
  pointer-events: none;
  animation: none;
}
@keyframes revealBreath {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(212, 175, 80, 0.22),
      0 0 14px 0 rgba(220, 185, 90, 0.30),
      0 0 32px 4px rgba(220, 185, 90, 0.18),
      0 0 64px 14px rgba(220, 185, 90, 0.10);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(212, 175, 80, 0.34),
      0 0 18px 1px rgba(220, 185, 90, 0.45),
      0 0 42px 8px rgba(220, 185, 90, 0.28),
      0 0 84px 22px rgba(220, 185, 90, 0.14);
  }
}
@keyframes revealBreathFast {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(212, 175, 80, 0.45),
      0 0 20px 2px rgba(220, 185, 90, 0.58),
      0 0 48px 10px rgba(220, 185, 90, 0.35),
      0 0 96px 24px rgba(220, 185, 90, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(212, 175, 80, 0.60),
      0 0 24px 4px rgba(220, 185, 90, 0.75),
      0 0 60px 14px rgba(220, 185, 90, 0.45),
      0 0 120px 32px rgba(220, 185, 90, 0.22);
  }
}
body.lang-en .reveal-one-btn {
  font-family: 'Noto Serif', serif;
  letter-spacing: 0.2em;
  font-size: 1.1rem;
}

/* ---------- "遁其一" 按钮下方的朦胧心法 (位置与按钮消失后的心法位置一致) ---------- */
.reveal-stage-wrap {
  position: relative;
  max-width: 32rem;
  padding: 1.5rem 0.5rem;
  background: radial-gradient(ellipse at center,
    rgba(180, 60, 50, 0.18) 0%,
    rgba(180, 60, 50, 0.10) 50%,
    rgba(180, 60, 50, 0)    100%);
  border-radius: 4px;
}
.reveal-stage-text {
  font-family: 'KaiTi', 'STKaiti', serif;
  white-space: pre-wrap;
  line-height: 1.8;
  font-size: 1.125rem;
  transition:
    filter 1.0s ease,
    opacity 1.0s ease,
    color 1.0s ease,
    font-style 1.0s ease;
}
/* 默认: 朦胧 — 模糊 + 焦红色 + 斜体 (看不清字) */
.reveal-stage-text.is-blurred {
  filter: blur(14px);
  opacity: 0.40;
  color: #4a2010;
  font-style: italic;
  user-select: none;
  pointer-events: none;
}
/* 按钮消失后: 清晰 — 模糊消失 + 深墨色 + 正体 */
.reveal-stage-text.is-cleared {
  filter: blur(0);
  opacity: 1;
  color: #2a241c;
  font-style: normal;
}
body.lang-en .reveal-stage-text {
  font-family: 'Noto Serif', serif;
}

/* 旧版保留兼容 (防御性) */
.reveal-preview {
  max-width: 30rem;
  position: relative;
  padding: 1rem 0.5rem;
  background: radial-gradient(ellipse at center,
    rgba(180, 60, 50, 0.18) 0%,
    rgba(180, 60, 50, 0.10) 50%,
    rgba(180, 60, 50, 0)    100%);
}
.reveal-preview-text {
  filter: blur(14px);
  opacity: 0.40;
  user-select: none;
  pointer-events: none;
  color: #4a2010 !important;            /* 焦红色字, 透过 blur 看起来像一团红晕 */
  font-style: italic;
  line-height: 1.8 !important;
  font-size: 1.125rem !important;
}

/* ---------- "乾坤未定,且循其一" 退出按钮 (浅黄底 + 浅黄边 + 呼吸灯) ---------- */
.breakfree-btn {
  position: relative;
  display: inline-block;
  padding: 12px 32px;
  font-family: 'KaiTi', 'STKaiti', serif;
  font-size: 1.15rem;
  letter-spacing: 0.35em;
  color: #3a2e22;
  background: rgba(248, 235, 195, 0.60);            /* 浅黄底 (跟遁其一一致) */
  border: 1px solid rgba(225, 200, 130, 0.85);       /* 浅黄边 */
  border-radius: 4px;
  cursor: pointer;
  overflow: visible;
  transition: all 0.5s ease;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(212, 175, 80, 0.22),
    0 0 12px 0 rgba(220, 185, 90, 0.30);
  animation: revealBreath 3.6s ease-in-out infinite;
}
.breakfree-btn:hover,
.breakfree-btn:focus {
  outline: none;
  color: #1a1612;
  background: rgba(248, 235, 195, 0.78);
  border-color: rgba(212, 175, 80, 1);
  box-shadow:
    0 0 0 1px rgba(212, 175, 80, 0.40),
    0 0 16px 1px rgba(220, 185, 90, 0.50),
    0 0 36px 6px rgba(220, 185, 90, 0.28),
    0 0 72px 18px rgba(220, 185, 90, 0.14);
  animation: revealBreathFast 1.8s ease-in-out infinite;
}
.breakfree-btn:active {
  transform: scale(0.98);
}
body.lang-en .breakfree-btn {
  font-family: 'Noto Serif', serif;
  letter-spacing: 0.18em;
  font-size: 1rem;
}

/* ---------- 锦囊阶段卡片被风吹散 (filter: blur + opacity 0) ---------- */
.is-dispersing {
  animation: disperseAway 1.6s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes disperseAway {
  0%   { filter: blur(0);     opacity: 1;    transform: translateY(0) scale(1); }
  40%  { filter: blur(4px);   opacity: 0.85; transform: translateY(-6px) scale(0.98); }
  100% { filter: blur(20px);  opacity: 0;    transform: translateY(-30px) scale(1.05); }
}

/* ---------- 燃烧 + 雾散 (凶局破局) ---------- */
.burn-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  background: radial-gradient(circle at center,
    rgba(255, 220, 150, 0.0) 0%,
    rgba(255, 200, 120, 0.0) 50%,
    rgba(255, 180, 100, 0.0) 100%);
  transition: background 0.4s ease;
}
.burn-flash.is-burning {
  animation: burnFlash 2.4s ease-out forwards;
}
@keyframes burnFlash {
  0%   { background: radial-gradient(circle at center, rgba(255, 220, 150, 0.0) 0%, rgba(255, 200, 120, 0.0) 50%, rgba(255, 180, 100, 0.0) 100%); }
  30%  { background: radial-gradient(circle at center, rgba(255, 240, 200, 0.95) 0%, rgba(255, 220, 150, 0.65) 40%, rgba(255, 200, 120, 0.30) 80%, rgba(255, 180, 100, 0.0) 100%); }
  100% { background: radial-gradient(circle at center, rgba(255, 250, 240, 0.0) 0%, rgba(255, 230, 200, 0.0) 50%, rgba(255, 200, 150, 0.0) 100%); }
}

.burn-mist {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 70;
  background: radial-gradient(circle at center,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 250, 240, 0.0) 60%,
    rgba(255, 245, 230, 0.0) 100%);
  transition: background 1.5s ease;
  mix-blend-mode: screen;
}
.burn-mist.is-burning {
  animation: burnMist 2.4s ease-out forwards;
}
@keyframes burnMist {
  0%   { background: radial-gradient(circle at center, rgba(120, 30, 20, 0.85) 0%, rgba(80, 25, 20, 0.6) 50%, rgba(50, 18, 15, 0.0) 100%); }
  100% { background: radial-gradient(circle at center, rgba(255, 255, 255, 0.0) 0%, rgba(255, 250, 240, 0.0) 60%, rgba(255, 245, 230, 0.0) 100%); }
}

/* ---------- 右上角 · 极简竹节式菜单 (宋代云纹括号 · 行书) ---------- */
.top-menu {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  background: transparent;
  border: none;
  font-family: 'Ma Shan Zheng', 'STKaiti', serif;        /* 行书 */
  color: #5a4a36;
  letter-spacing: 0.18em;
  /* 让整组菜单作为一个"段落"出现, 不抢首页焦点的戏 */
  opacity: 0.92;
  transition: opacity 0.4s ease;
}
.top-menu:hover { opacity: 1; }

/* 〔 〕 云纹括号 —— 极细笔画, 微微比正文小一号 */
.top-menu-bracket {
  font-family: 'Ma Shan Zheng', 'STKaiti', serif;
  font-size: 22px;
  line-height: 1;
  color: rgba(120, 100, 80, 0.55);
  letter-spacing: 0;
  user-select: none;
}
.top-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 16px;
  color: #5a4a36;        /* 焦茶墨色 */
  letter-spacing: 0.18em;
  padding: 2px 4px;
  cursor: pointer;
  transition: color 0.4s ease, text-shadow 0.4s ease;
  text-shadow: 0 0 0 transparent;
}
.top-menu-btn:hover {
  color: #1a1612;
  text-shadow: 0 0 8px rgba(120, 90, 60, 0.25);
}
.top-menu-glyph {
  font-size: 16px;
  opacity: 0.85;
}
.top-menu-lang {
  font-size: 15px;
  letter-spacing: 0.12em;
}
/* 竹节分割线 (细线 + 上下淡出, 模拟竹节的细长阴影) */
.top-menu-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: linear-gradient(180deg,
    rgba(120, 100, 80, 0)   0%,
    rgba(120, 100, 80, 0.40) 25%,
    rgba(120, 100, 80, 0.55) 50%,
    rgba(120, 100, 80, 0.40) 75%,
    rgba(120, 100, 80, 0)   100%);
}
body.lang-en .top-menu-btn {
  font-size: 14px;
  letter-spacing: 0.10em;
}

/* ---------- 关于卡片 ---------- */
.about-card {
  max-height: 80vh;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(180, 150, 110, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(120, 100, 80, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.98) 0%, rgba(248, 244, 235, 0.98) 100%);
}
.about-card::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: multiply;
}
.about-card::-webkit-scrollbar { width: 0; }
.about-card h3 {
  position: relative;
}

/* ============================================================
   白底调试模式: 用 !important 覆盖 Tailwind 的深色 utility 类
   ============================================================ */

/* 文字色 (深底 → 浅底) */
.text-ink-100, .text-ink-50 { color: #1a1612 !important; }
.text-ink-200              { color: #2a241c !important; }
.text-ink-300              { color: #4a4032 !important; }
.text-ink-400              { color: #5a4f3d !important; }
.text-ink-50\/60, .text-ink-100\/60,
.text-ink-100\/80, .text-ink-100\/90,
.text-ink-200\/60, .text-ink-200\/70,
.text-ink-200\/80, .text-ink-300\/60,
.text-ink-300\/40, .text-ink-300\/50 {
  color: rgba(40, 30, 22, 0.7) !important;
}
.text-ink-300\/60 { color: rgba(40, 30, 22, 0.5) !important; }

/* 按钮 (白底文字) */
button[class*="text-ink"] { color: #1a1612 !important; }
button[class*="hover:text-ink-50"]:hover,
button[class*="hover:text-ink-100"]:hover { color: #3a6850 !important; }

/* 边框 (Tailwind /opacity 写法) */
.border-ink-200\/40, .border-ink-200\/30, .border-ink-300\/30, .border-ink-300\/40 {
  border-color: rgba(80, 60, 40, 0.35) !important;
}
.hover\:border-ink-50\/80:hover { border-color: rgba(60, 130, 90, 0.6) !important; }
.hover\:border-ink-50:hover     { border-color: rgba(60, 130, 90, 0.6) !important; }
.hover\:border-ink-200\/30:hover{ border-color: rgba(80, 60, 40, 0.5) !important; }
.hover\:border-ink-50\/40:hover { border-color: rgba(60, 130, 90, 0.5) !important; }

/* hover 背景 */
.hover\:bg-ink-50\/5:hover    { background: rgba(60, 130, 90, 0.06) !important; }
.hover\:bg-jade-500\/10:hover { background: rgba(60, 130, 90, 0.10) !important; }

/* input 下划线 focus */
.focus\:border-ink-50\/80:focus { border-color: rgba(60, 130, 90, 0.7) !important; }

/* 玉石之光的拂袖点击色 */
div.swipe-zone {
  border-color: transparent;
}