/* ===== divination-stage.css — 六爻摇卦舞台/星轨/龟壳/成卦揭幕 =====
   从 divination.css 拆分而来，保持原始顺序
   ===== */

/* ═══════════════════════════════════════════════════
   六爻占卜 UI 重设计 — 紧凑融合版
   ═══════════════════════════════════════════════════ */

/* ── 摇卦舞台 ── */
.div-shake-stage {
  text-align: center;
  position: relative;
  padding-bottom: 4px;
}
.div-core-arena {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* ══════════════════════════════════════════════════
   一、八卦法阵（全新高级版 — 层次丰富 / 柔光质感）
   ══════════════════════════════════════════════════ */
.div-formation {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 法阵底部辉光晕（大范围弥散） */
.div-formation::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(108, 92, 231, 0.06) 0%,
    rgba(212, 149, 12, 0.03) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: formationAmbient 6s ease-in-out infinite;
}
@keyframes formationAmbient {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* 进度弧SVG覆盖层 — 精致描边 */
.div-formation-progress-svg {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  z-index: 4;
  pointer-events: none;
}
.div-formation-progress-svg .ring-seg-bg {
  fill: none;
  stroke: rgba(108, 92, 231, 0.06);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.div-formation-progress-svg .ring-seg-fill {
  fill: none;
  stroke: rgba(108, 92, 231, 0.03);
  stroke-width: 3;
  stroke-linecap: round;
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.div-formation-progress-svg .ring-seg-fill.lit {
  stroke: url(#ringGradLit);
  filter: drop-shadow(0 0 4px rgba(212, 149, 12, 0.3));
}
.div-formation-progress-svg .ring-seg-fill.lit.is-dong {
  stroke: url(#ringGrad);
  filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.35));
}

/* 太极核心 — 精致阴阳鱼 + 微光光晕 */
.div-formation-taiji {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #1a1a2e 0deg 180deg, #f5f0ff 180deg 360deg);
  position: relative;
  z-index: 3;
  transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 0 12px rgba(108, 92, 231, 0.18),
    0 0 24px rgba(212, 149, 12, 0.1),
    0 0 0 1.5px rgba(212, 149, 12, 0.08),
    inset 0 0 8px rgba(108, 92, 231, 0.05);
}
.div-formation-taiji::before,
.div-formation-taiji::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.div-formation-taiji::before {
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 40% 40%, #fff, #f0eaff);
  box-shadow: 0 0 4px rgba(245, 240, 255, 0.6);
}
.div-formation-taiji::after {
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 40% 40%, #2a2a4e, #1a1a2e);
  box-shadow: 0 0 4px rgba(26, 26, 46, 0.4);
}

/* 太极上进度计数器 */
.div-taiji-counter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  font-weight: 900;
  color: transparent;
  z-index: 5;
  pointer-events: none;
  transition: all 0.4s ease;
}
.div-taiji-counter.counter-pop {
  animation: counterPop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes counterPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.35); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.div-formation.spinning .div-formation-taiji {
  transform: rotate(720deg);
  transition: transform 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 法阵外圈 — 隐藏（用户要求去掉龟壳外围圆圈） */
.div-formation-ring {
  display: none;
}
.div-formation-ring::before {
  display: none;
}
@keyframes innerRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* 法阵激活状态 */
.div-formation.active .div-formation-ring {
  border-color: rgba(212, 149, 12, 0.3);
  box-shadow: 0 0 16px rgba(212, 149, 12, 0.08);
}
.div-formation.active .div-formation-ring::before {
  border-color: rgba(108, 92, 231, 0.18);
  animation-duration: 12s;
}

/* 6个符文节点 — 微型精致 */
.div-formation-node {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid rgba(212, 149, 12, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  color: var(--div-gold);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  font-family: 'Noto Serif SC', serif;
}
/* 6个节点位置（六边形排列 — 适配150px） */
.div-formation-node:nth-child(3) { bottom: -2px; left: 50%; transform: translateX(-50%); }
.div-formation-node:nth-child(4) { bottom: 16%; left: 4%; }
.div-formation-node:nth-child(5) { top: 16%; left: 4%; }
.div-formation-node:nth-child(6) { top: -2px; left: 50%; transform: translateX(-50%); }
.div-formation-node:nth-child(7) { top: 16%; right: 4%; }
.div-formation-node:nth-child(8) { bottom: 16%; right: 4%; }

/* 符文节点点亮 — 金色光环 */
.div-formation-node.lit {
  background: rgba(212, 149, 12, 0.12);
  border-color: rgba(212, 149, 12, 0.5);
  color: #8a5c0e;
  box-shadow: 0 0 8px rgba(212, 149, 12, 0.25), 0 0 16px rgba(212, 149, 12, 0.1);
  transform: scale(1.15);
}
.div-formation-node.lit.is-dong {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.5);
  color: var(--div-purple);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.25);
}
/* 法阵全亮完成状态 */
.div-formation.complete .div-formation-ring {
  border-color: rgba(212, 149, 12, 0.45);
  box-shadow: 0 0 20px rgba(212, 149, 12, 0.15);
}
.div-formation.complete .div-formation-taiji {
  box-shadow: 0 0 16px rgba(212, 149, 12, 0.3), 0 0 32px rgba(108, 92, 231, 0.15);
}

/* ══════════════════════════════════════════════════
   六边形星轨 + 龟壳占卜系统（全新设计）
   ══════════════════════════════════════════════════ */

/* ─── 星轨容器 ─── */
.div-hex-orbit {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

/* ─── 六边形SVG轨道 — 隐藏外圈 ─── */
.div-hex-orbit-svg {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 六边形轨道外圈背景 */
.hex-orbit-bg {
  fill: none;
  stroke: rgba(108, 92, 231, 0.06);
  stroke-width: 1;
}

/* 六段边轨道背景 */
.hex-seg-bg {
  stroke: rgba(108, 92, 231, 0.08);
  stroke-width: 3;
  stroke-linecap: round;
}

/* 六段边轨道填充（未点亮） */
.hex-seg-fill {
  stroke: rgba(108, 92, 231, 0.03);
  stroke-width: 4;
  stroke-linecap: round;
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 已点亮的轨道段 */
.hex-seg-fill.lit {
  stroke: url(#hexGradLit);
  stroke-width: 4.5;
  filter: drop-shadow(0 0 6px rgba(212, 149, 12, 0.35));
}

/* 动爻段特殊样式 */
.hex-seg-fill.lit.is-dong {
  stroke: url(#hexGradDong);
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.4));
  animation: hexSegDongPulse 2s ease-in-out infinite;
}
@keyframes hexSegDongPulse {
  0%, 100% { stroke-width: 4.5; }
  50% { stroke-width: 5.5; }
}

/* 轨道粒子流 */
.hex-orbit-particle {
  fill: rgba(212, 149, 12, 0.5);
  filter: drop-shadow(0 0 3px rgba(212, 149, 12, 0.6));
}
.hex-orbit-particle[data-p="1"] { fill: rgba(108, 92, 231, 0.4); }
.hex-orbit-particle[data-p="2"] { fill: rgba(255, 255, 255, 0.5); r: 1.5; }

/* ─── 卦位节点 ─── */
.div-hex-node {
  position: absolute;
  width: 68px;
  height: 68px;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 八卦容器 */
.hex-bagua-wrap {
  width: 60px;
  height: 60px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hex-bagua-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 八卦圆环 */
.bagua-ring {
  fill: none;
  stroke: rgba(180, 125, 46, 0.25);
  stroke-width: 1.2;
  transition: all 0.6s ease;
}
.bagua-bg {
  fill: none;
  transition: all 0.6s ease;
}

/* 外圈八卦纹弧线 */
.bagua-arc {
  fill: none;
  stroke: rgba(180, 125, 46, 0.18);
  stroke-width: 2.5;
  stroke-linecap: butt;
  transition: all 0.6s ease;
}

/* 深色道场主题下的八卦颜色 */
.ritual-theme .bagua-bg {
  fill: none;
}
.ritual-theme .bagua-ring {
  stroke: rgba(201, 135, 58, 0.12);
}
.ritual-theme .bagua-arc {
  stroke: rgba(201, 135, 58, 0.08);
}

/* 节点光环（保留兼容） */
.hex-node-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid rgba(212, 149, 12, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 节点标签（八卦下方文字） */
.hex-node-label {
  position: relative;
  z-index: 2;
  font-family: 'Noto Serif SC', serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--div-text-tertiary);
  transition: all 0.3s ease;
  margin-top: 2px;
}

/* 节点内容区域 — 绝对居中于八卦圆内 */
.hex-node-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.hex-node-content.visible { opacity: 1; }

/* 爻象符号（⚊/⚋ 放大居中） */
.hex-node-symbol {
  font-size: 24px;
  font-weight: 900;
  color: #c9873a;
  line-height: 1;
  text-shadow: 0 0 8px rgba(201,135,58,0.5);
}

/* 爻类型文字 */
.hex-node-type {
  font-size: 9px;
  font-weight: 600;
  color: rgba(201,135,58,0.8);
  letter-spacing: 0.5px;
}

/* 未点亮占位符 — 绝对居中 */
.hex-node-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 12px;
  color: rgba(180,125,46,0.25);
  transition: opacity 0.3s;
}

/* 节点内爻象显示（保留兼容旧bar模式） */
.hex-node-yao {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 5px;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 3;
}

/* 节点附加信息 */
.hex-node-info {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.3s ease 0.2s;
  z-index: 3;
}

/* 当前待摇节点 — 八卦环呼吸脉冲 */
.div-hex-node.yao-next .bagua-ring {
  animation: baguaRingPulse 2s ease-in-out infinite;
}
.div-hex-node.yao-next .hex-node-label {
  color: var(--div-gold);
  animation: hexLabelPulse 2s ease-in-out infinite;
}
@keyframes baguaRingPulse {
  0%, 100% { stroke: rgba(180,125,46,0.25); filter: none; }
  50% { stroke: rgba(180,125,46,0.55); filter: drop-shadow(0 0 8px rgba(180,125,46,0.25)); }
}
@keyframes hexLabelPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* 已填充节点 — 金色八卦环 */
.div-hex-node.yao-filled .bagua-ring {
  stroke: rgba(201, 135, 58, 0.6);
  filter: drop-shadow(0 0 6px rgba(201,135,58,0.3));
}
.div-hex-node.yao-filled .bagua-bg {
  fill: none;
}
.div-hex-node.yao-filled .bagua-arc {
  stroke: rgba(201, 135, 58, 0.45);
}
.div-hex-node.yao-filled .hex-node-label {
  color: #8a5c0e;
  font-weight: 900;
}
.div-hex-node.yao-filled .hex-node-placeholder {
  opacity: 0;
  display: none;
}

/* 节点内阳爻（保留兼容旧bar模式） */
.hex-node-yao.yang {
  background: linear-gradient(90deg, #c4870b, var(--div-gold), #e8a006);
  border-radius: 2.5px;
  box-shadow: 0 1px 4px rgba(212, 149, 12, 0.25);
}

/* 节点内阴爻 */
.hex-node-yao.yin {
  background: transparent;
  display: flex;
  gap: 4px;
}
.hex-node-yao.yin span {
  flex: 1;
  height: 5px;
  border-radius: 2.5px;
  background: linear-gradient(90deg, #c4870b, var(--div-gold), #e8a006);
  box-shadow: 0 1px 4px rgba(212, 149, 12, 0.25);
}

/* 动爻节点 — 紫色八卦环闪烁 */
.div-hex-node.is-dong .bagua-ring {
  stroke: rgba(139, 92, 246, 0.6);
  filter: drop-shadow(0 0 6px rgba(139,92,246,0.3));
  animation: baguaDongPulse 2s ease-in-out infinite;
}
.div-hex-node.is-dong .bagua-bg {
  fill: none;
}
.div-hex-node.is-dong .bagua-arc {
  stroke: rgba(139, 92, 246, 0.45);
}
.div-hex-node.is-dong .hex-node-symbol {
  color: #a78bfa;
  text-shadow: 0 0 6px rgba(139,92,246,0.4);
}
.div-hex-node.is-dong .hex-node-type {
  color: rgba(167,139,250,0.8);
}
.div-hex-node.is-dong .hex-node-label { color: var(--div-purple); }
@keyframes baguaDongPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(139,92,246,0.3)); }
  50% { filter: drop-shadow(0 0 12px rgba(139,92,246,0.5)); }
}

/* 节点填充动画 */
@keyframes hexNodeReveal {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.2); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.div-hex-node.reveal-in {
  animation: hexNodeReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 六边形全亮完成状态 */
.div-hex-orbit.complete .hex-orbit-bg {
  stroke: rgba(212, 149, 12, 0.2);
  animation: hexOrbitComplete 3s ease-in-out infinite;
}
@keyframes hexOrbitComplete {
  0%, 100% { stroke: rgba(212, 149, 12, 0.15); }
  50% { stroke: rgba(108, 92, 231, 0.2); }
}

/* ─── 中心龟壳 ─── */
.div-turtle-shell {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.turtle-shell-body {
  width: 100px;
  height: 120px;
  border-radius: 50%;
  background: 
    radial-gradient(ellipse at 38% 28%, rgba(107, 84, 56, 0.2), transparent 50%),
    radial-gradient(ellipse at 62% 68%, rgba(26, 16, 10, 0.35), transparent 50%),
    linear-gradient(145deg, #3e2c1c 0%, #54402a 25%, #5e4630 42%, #54402a 60%, #2c1c10 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.06),
    inset 0 -2px 6px rgba(0, 0, 0, 0.3),
    0 0 0 2px rgba(42, 28, 16, 0.35);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  animation: turtleIdleFloat 4s ease-in-out infinite;
  overflow: hidden;
}
@keyframes turtleIdleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 龟壳hover */
.turtle-shell-body:hover {
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.35),
    0 3px 10px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 0.08),
    inset 0 -2px 4px rgba(0, 0, 0, 0.25),
    0 0 0 2px rgba(62, 44, 28, 0.45),
    0 0 20px rgba(62, 44, 28, 0.12);
  transform: translateY(-3px) scale(1.04);
  animation: none;
}

/* 龟甲纹理SVG */
.turtle-hex-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.9;
  z-index: 1;
}

/* 裂纹发光层 */
.turtle-crack-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 40%, rgba(200, 150, 30, 0.45), transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(200, 150, 30, 0.3), transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(200, 150, 30, 0.2), transparent 40%);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 龟壳摇动时裂纹显现 */
.div-turtle-shell.shaking .turtle-crack-glow {
  opacity: 1;
  animation: crackGlowPulse 0.3s ease-in-out;
}
@keyframes crackGlowPulse {
  0% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0.8; transform: scale(1); }
}

/* 龟壳震动 */
.div-turtle-shell.shaking .turtle-shell-body {
  animation: turtleShake 0.6s ease-in-out;
}
@keyframes turtleShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  10% { transform: translateX(-4px) rotate(-3deg); }
  20% { transform: translateX(4px) rotate(3deg); }
  30% { transform: translateX(-3px) rotate(-2deg); }
  40% { transform: translateX(3px) rotate(2deg); }
  50% { transform: translateX(-2px) rotate(-1deg); }
  60% { transform: translateX(2px) rotate(1deg); }
  70% { transform: translateX(-1px) rotate(0); }
  80% { transform: translateX(1px) rotate(0); }
}

/* 龟壳裂开——铜钱弹出时 */
.div-turtle-shell.cracking .turtle-shell-body {
  animation: turtleCrack 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes turtleCrack {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); }
  50% { transform: scale(0.95); box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 30px rgba(218,165,32,0.3); }
  100% { transform: scale(1); }
}
.div-turtle-shell.cracking .turtle-crack-glow {
  opacity: 1;
  animation: crackFlash 0.5s ease-out;
}
@keyframes crackFlash {
  0% { opacity: 0; transform: scale(0.5); }
  30% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(1); }
}

/* 龟壳进度计数 — 隐藏 */
.turtle-counter {
  display: none;
}
.turtle-counter.counter-pop {
  animation: counterPop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 龟壳底部阴影 */
.turtle-shadow {
  width: 70px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.12), transparent 70%);
  margin-top: 4px;
  animation: turtleShadowFloat 4s ease-in-out infinite;
}
@keyframes turtleShadowFloat {
  0%, 100% { transform: scaleX(1); opacity: 0.8; }
  50% { transform: scaleX(0.85); opacity: 0.5; }
}

/* ─── 铜钱区（在星轨内居中） ─── */
.div-hex-orbit .div-coin-arena {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  display: flex;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.div-hex-orbit .div-coin-arena.visible {
  opacity: 1;
}

/* 铜钱从龟壳弹出动画 */
@keyframes coinEjectFromShell {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  30% { transform: translate(-50%, calc(-50% - 20px)) scale(1.1); opacity: 1; }
  50% { transform: translate(-50%, calc(-50% - 40px)) scale(1); }
  100% { transform: translate(-50%, calc(-50% + 60px)) scale(1); opacity: 1; }
}
.div-hex-orbit .div-coin-arena.eject {
  animation: coinEjectFromShell 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 1;
}

/* 铜钱飞向卦位动画（每个铜钱单独飞） */
.div-coin.fly-to-node {
  position: absolute !important;
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 20;
}

/* ─── 爻位线性展示条 ─── */
.div-yao-strip {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px 10px;
  margin-bottom: 0;
}
.div-yao-strip-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  border-radius: 8px;
  flex: 1;
  max-width: 60px;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  background: rgba(0, 0, 0, 0.012);
  border: 1px solid transparent;
}
.div-yao-strip-cell:nth-child(odd) { background: rgba(108, 92, 231, 0.02); }
.div-yao-strip-cell:nth-child(even) { background: rgba(212, 149, 12, 0.015); }

/* 已摇高亮 */
.div-yao-strip-cell.yao-filled {
  background: linear-gradient(135deg, rgba(212, 149, 12, 0.04), rgba(108, 92, 231, 0.025));
  border-color: rgba(212, 149, 12, 0.1);
}

/* 当前待摇脉冲 */
.div-yao-strip-cell.yao-next {
  border-color: rgba(212, 149, 12, 0.22);
  animation: yaoCellNextPulse 2s ease-in-out infinite;
  background: rgba(212, 149, 12, 0.025);
}

/* 爻位标签 */
.div-yao-strip-label {
  font-size: 9px;
  color: var(--div-text-tertiary);
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}
.div-yao-strip-cell.yao-filled .div-yao-strip-label { color: var(--div-gold); }
.div-yao-strip-cell.yao-next .div-yao-strip-label { color: var(--div-gold); animation: yaoLabelPulse 2s ease-in-out infinite; }

/* 爻线 — 紧凑版 */
.div-yao-strip-line {
  width: 100%;
  max-width: 40px;
  height: 5px;
  border-radius: 2.5px;
  position: relative;
  transition: all 0.5s ease;
}
.div-yao-strip-line:not(.visible) {
  background: transparent;
  border: 1.5px dashed rgba(0, 0, 0, 0.05);
  height: 4px;
}
.div-yao-strip-cell.yao-next .div-yao-strip-line:not(.visible) {
  border-color: rgba(212, 149, 12, 0.18);
}
.div-yao-strip-line.visible { opacity: 1; border: none; height: 5px; }
.div-yao-strip-line.yang {
  background: linear-gradient(90deg, #c4870b, var(--div-gold), #e8a006);
  box-shadow: 0 1px 4px rgba(212, 149, 12, 0.18);
}
.div-yao-strip-line.yin {
  background: transparent;
  display: flex;
  gap: 3px;
}
.div-yao-strip-line.yin span {
  flex: 1;
  height: 5px;
  border-radius: 2.5px;
  background: linear-gradient(90deg, #7c5ce7, #a78bfa, #8b5cf6);
  box-shadow: 0 1px 4px rgba(108, 92, 231, 0.22);
}
.div-yao-strip-line.changing.yang {
  animation: divYaoPulse 2s ease-in-out infinite;
  border: 1px solid rgba(108, 92, 231, 0.25);
  background: linear-gradient(90deg, var(--div-gold), #a78bfa, var(--div-gold-light));
}
.div-yao-strip-line.changing.yin span {
  animation: divYaoPulse 2s ease-in-out infinite;
  border: 1px solid rgba(108, 92, 231, 0.25);
  background: linear-gradient(90deg, var(--div-gold), #a78bfa, var(--div-gold-light));
}
.div-yao-strip-line.reveal {
  animation: yaoReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── 一键摇卦模式切换（药丸式） ── */
.div-auto-mode-pill {
  display: flex;
  gap: 0;
  background: rgba(108, 92, 231, 0.06);
  border-radius: 20px;
  padding: 2px;
  border: 1px solid rgba(108, 92, 231, 0.1);
}
.div-auto-mode-btn {
  flex: 1;
  padding: 4px 10px;
  border: none;
  background: transparent;
  border-radius: 18px;
  font-size: 10px;
  font-weight: 600;
  color: var(--div-text-tertiary);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}
.div-auto-mode-btn i { font-size: 11px; }
.div-auto-mode-btn.active {
  background: rgba(255, 255, 255, 0.95);
  color: var(--div-purple);
  box-shadow: 0 1px 6px rgba(108, 92, 231, 0.12);
}
.div-auto-mode-btn:hover:not(.active) {
  color: var(--div-text-secondary);
  background: rgba(255, 255, 255, 0.3);
}

/* ── 二、问事验证增强 ── */
@keyframes headShake {
  0% { transform: translateX(0); }
  6.5% { transform: translateX(-6px) rotateY(-9deg); }
  18.5% { transform: translateX(5px) rotateY(7deg); }
  31.5% { transform: translateX(-3px) rotateY(-5deg); }
  43.5% { transform: translateX(2px) rotateY(3deg); }
  50% { transform: translateX(0); }
}
.div-question-shake {
  animation: headShake 0.6s ease-in-out;
}
.div-question-shake .div-glass-input {
  border-color: rgba(231, 76, 60, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.08), inset 0 0 8px rgba(231, 76, 60, 0.04) !important;
}
/* 验证提示条 */
.div-question-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  margin-top: 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.08), rgba(231, 76, 60, 0.04));
  border: 1px solid rgba(231, 76, 60, 0.15);
  font-size: 12px;
  color: #c0392b;
  font-weight: 500;
  animation: warnSlideIn 0.3s ease-out;
  overflow: hidden;
}
.div-question-warn i {
  font-size: 14px;
  flex-shrink: 0;
}
@keyframes warnSlideIn {
  from { opacity: 0; transform: translateY(-8px); max-height: 0; padding: 0 14px; margin-top: 0; }
  to { opacity: 1; transform: translateY(0); max-height: 60px; padding: 8px 14px; margin-top: 8px; }
}

/* ══════════════════════════════════════════════════
   底部固定操作栏（紧凑毛玻璃版）
   ══════════════════════════════════════════════════ */
.div-bottom-action-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0 -16px 0;
}
.div-bottom-action-inner {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  padding: 10px 14px;
  border-radius: 0 0 var(--div-radius) var(--div-radius);
}
.div-shake-btn-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.div-shake-btn-row .div-btn-gold {
  flex: 1;
  min-width: 0;
}
.div-shake-btn-row .div-btn-auto-shake {
  flex: 1;
  min-width: 0;
}
.div-btn-auto-shake {
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.06), rgba(139, 92, 246, 0.1));
  border: 1.5px solid rgba(108, 92, 231, 0.15);
  color: var(--div-purple);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Noto Serif SC', serif;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.div-btn-auto-shake:hover {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.12), rgba(139, 92, 246, 0.18));
  border-color: rgba(108, 92, 231, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 92, 231, 0.12);
}
.div-btn-auto-shake:active {
  transform: scale(0.97);
}
.div-btn-auto-shake:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
/* 一键摇卦进行中脉冲 */
.div-btn-auto-shake.auto-shaking {
  animation: autoShakePulse 1.2s ease-in-out infinite;
  border-color: rgba(108, 92, 231, 0.35);
}
@keyframes autoShakePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.2); }
  50% { box-shadow: 0 0 0 8px rgba(108, 92, 231, 0); }
}

/* ── 四、所问之事展示条 ── */
.div-question-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(248, 245, 255, 0.6));
  border: 1px solid rgba(108, 92, 231, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  animation: bannerFadeIn 0.6s ease-out;
}
@keyframes bannerFadeIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
.div-question-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--div-gold-soft), rgba(212, 149, 12, 0.08));
  border: 1px solid rgba(212, 149, 12, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--div-gold);
  flex-shrink: 0;
}
.div-question-content {
  flex: 1;
  min-width: 0;
}
.div-question-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  background: var(--div-purple-soft);
  color: var(--div-purple);
  margin-bottom: 4px;
}
.div-question-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--div-text-primary);
  margin: 0;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.div-question-time {
  font-size: 11px;
  color: var(--div-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 五、成卦揭幕仪式增强 ── */
/* 聚能阶段 — 爻线快速脉冲 */
@keyframes revealChargePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(232, 160, 6, 0.2); }
  50% { box-shadow: 0 0 16px rgba(232, 160, 6, 0.5), 0 0 32px rgba(232, 160, 6, 0.15); }
}
.div-reveal-charging .div-yao-line.visible {
  animation: revealChargePulse 0.3s ease-in-out infinite;
}
/* 爆发白光遮罩 */
.div-reveal-flash-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.div-reveal-flash-overlay.active {
  opacity: 1;
  animation: revealFlashBurst 1.2s ease-out forwards;
}
@keyframes revealFlashBurst {
  0% { opacity: 0; }
  15% { opacity: 1; }
  40% { opacity: 0.9; }
  100% { opacity: 0; }
}
/* 卦名大字揭示 */
.div-reveal-name-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}
.div-reveal-name-overlay.active {
  opacity: 1;
}
.div-reveal-name-text {
  font-family: 'Noto Serif SC', serif;
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--div-gold), var(--div-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 12px;
  opacity: 0;
  transform: scale(0.5);
  animation: revealNameZoom 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  text-shadow: none;
  filter: drop-shadow(0 4px 20px rgba(212, 149, 12, 0.3));
}
@keyframes revealNameZoom {
  0% { opacity: 0; transform: scale(0.5); }
  40% { opacity: 1; transform: scale(1.05); }
  60% { transform: scale(0.98); }
  80% { transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}
.div-reveal-name-sub {
  font-size: 14px;
  color: var(--div-text-secondary);
  margin-top: 8px;
  opacity: 0;
  animation: revealSubFade 1.2s ease-out 0.5s forwards;
}
@keyframes revealSubFade {
  0% { opacity: 0; transform: translateY(10px); }
  50% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-5px); }
}
/* 金色粒子爆发 */
.div-reveal-particle {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--div-gold);
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
}
.div-reveal-particle.burst {
  animation: particleBurst var(--p-dur, 1.2s) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes particleBurst {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--p-x, 100px), var(--p-y, -100px)) scale(0); }
}

/* ── 5.5. 手机端排盘视图模式切换器 ── */
.div-paipan-view-switcher {
  display: none;
  gap: 0;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  padding: 2px;
  margin-bottom: 10px;
}
@media (max-width: 640px) {
  .div-paipan-view-switcher { display: flex; }
}
.div-paipan-view-btn {
  flex: 1;
  padding: 5px 8px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--div-text-tertiary);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.div-paipan-view-btn.active {
  background: rgba(255, 255, 255, 0.9);
  color: var(--div-text-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ── 六、排盘Tab切换 ── */
.div-paipan-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  padding: 3px;
}
.div-paipan-tab {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Noto Serif SC', serif;
  color: var(--div-text-tertiary);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.div-paipan-tab.active {
  background: rgba(255, 255, 255, 0.9);
  color: var(--div-text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.div-paipan-tab:hover:not(.active) {
  color: var(--div-text-secondary);
  background: rgba(255, 255, 255, 0.4);
}
.div-paipan-tab-panel {
  display: none;
  animation: tabPanelFade 0.3s ease-out;
}
.div-paipan-tab-panel.active {
  display: block;
}
@keyframes tabPanelFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 七、六边形星轨+龟壳响应式 ── */
@media (max-width: 480px) {
  .div-hex-orbit { width: 240px; height: 240px; }
  .div-hex-node { width: 52px; height: 52px; }
  .hex-bagua-wrap { width: 46px; height: 46px; }
  .hex-node-symbol { font-size: 18px; }
  .hex-node-label { font-size: 9px; }
  .hex-node-yao { width: 22px; height: 4px; }
  .hex-node-info { font-size: 8px; bottom: -16px; }
  .turtle-shell-body { width: 80px; height: 96px; }
  .turtle-counter { font-size: 16px; }
  .turtle-shadow { width: 56px; }
  .div-coin { width: 46px; height: 46px; }
  .div-coin-text { font-size: 9px; }
  .div-coin-text.top { top: 4px; }
  .div-coin-text.bottom { bottom: 4px; }
  .div-coin::before { width: 10px; height: 10px; }
  .div-yao-strip { gap: 3px; padding: 6px 4px 8px; }
  .div-yao-strip-cell { padding: 4px 3px; }
  .div-yao-strip-label { font-size: 8px; }
  .div-yao-strip-line { max-width: 32px; height: 4px; }
  .div-yao-strip-line.visible { height: 4px; }
  .div-yao-strip-line.yin { gap: 2px; }
  .div-shake-btn-row { flex-direction: column; gap: 6px; }
  .div-bottom-action-bar { margin: 0 -12px 0; }
  .div-bottom-action-inner { padding: 8px 10px; }
  .div-shake-hint { font-size: 11px; padding: 3px 8px; letter-spacing: 1px; }
  .div-coin-result-text { font-size: 11px; margin-top: 4px; }
  .div-question-banner { padding: 10px 12px; gap: 8px; }
  .div-question-icon { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; }
  .div-question-text { font-size: 12px; }
  .div-reveal-name-text { font-size: 32px; letter-spacing: 6px; }
}