/* M04 数字卦中栏两版（?nv=1 爻象显影 / ?nv=2 半遮悬念）
   只影响 #numsVisual 里新加的 .nvp 块；原 .nv-row 由 JS 隐藏。 */
#numsVisual[data-nvp] { width: 100%; }

.nvp {
  width: min(520px, 92%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

/* ---------- 复用的爻线 ---------- */
.nvp-stage { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; }
.nv-line {
  position: relative;
  display: flex;
  align-items: center;
  height: clamp(0.45rem, 0.9vw, 0.62rem);
}
.nv-bar { display: block; width: 100%; height: 100%; border-radius: 2px; }
.nv-line.is-yang .nv-bar { background: var(--sg-ink, #3A342C); }
.nv-line.is-yin .nv-bar {
  background: linear-gradient(to right,
    var(--sg-ink, #3A342C) 0 44%, transparent 44% 56%, var(--sg-ink, #3A342C) 56% 100%);
}
.nv-line.is-unknown .nv-bar {
  background: repeating-linear-gradient(to right,
    var(--sg-border-decor, rgba(58,52,44,.22)) 0 8%, transparent 8% 12%);
  opacity: .55;
}
.nv-line.is-changing .nv-bar { box-shadow: 0 0 0 2px rgba(178, 58, 46, .45); }
/* 上卦与下卦之间留一道呼吸位 */
.nv-line[data-line="4"] { margin-top: 0.5rem; }
.nv-mark {
  position: absolute; right: -1.6em; font-size: .72em;
  color: var(--sg-accent, #B23A2E); letter-spacing: .1em;
}

/* ---------- 版一：爻象显影 ---------- */
.nvp1 .nvp-tip { font-size: clamp(.82rem, 1vw, .92rem); color: var(--sg-text-3, #6B6660); letter-spacing: .08em; }
.nvp1 .nvp-stage {
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.2rem, 2.4vw, 1.8rem);
  border: 1px dashed var(--sg-border-decor, rgba(58,52,44,.25));
  background: rgba(255, 255, 255, .35);
}
.nvp1 .nvp-meta { font-size: .8rem; color: var(--sg-text-3, #6B6660); letter-spacing: .12em; }

/* ---------- 版二：半遮悬念 ---------- */
.nvp2 .nvp-paper {
  width: 100%;
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2vw, 1.7rem);
  border: 1px solid var(--sg-border-decor, rgba(58,52,44,.22));
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
}
.nvp2 .nvp-kicker { font-size: .75rem; letter-spacing: .22em; color: var(--sg-text-3, #6B6660); }
.nvp2 .nvp-name {
  font-family: var(--sg-serif, "Noto Serif SC", serif);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  letter-spacing: .16em;
  color: var(--sg-text, #2E2A25);
  filter: blur(3px);
  transition: filter .35s ease;
}
.nvp2 .nvp-name.is-ready { filter: none; color: var(--sg-accent-ink, #8C2E24); }
.nvp2 .nvp-rows { display: flex; flex-direction: column; gap: .35rem; width: 100%; }
.nvp2 .nvp-row { display: flex; justify-content: space-between; font-size: .85rem; color: var(--sg-text-3, #6B6660); }
.nvp2 .nvp-row b { color: var(--sg-text, #2E2A25); font-weight: 500; letter-spacing: .1em; }
.nvp2 .nvp-progress { width: 100%; height: 4px; background: rgba(58,52,44,.12); border-radius: 2px; overflow: hidden; }
.nvp2 .nvp-progress i { display: block; height: 100%; background: var(--sg-accent, #B23A2E); transition: width .3s ease; }
.nvp2 .nvp-pct { font-size: .72rem; letter-spacing: .1em; color: var(--sg-text-3, #6B6660); }
.nvp2 .nvp-cta { font-size: .82rem; letter-spacing: .06em; color: var(--sg-accent-ink, #8C2E24); }

/* ---------- 起卦中：跟着现有 1.5s 状态动 ---------- */
.stage-center.is-casting .nv-line .nv-bar { animation: nvpPulse .3s ease-in-out infinite alternate; }
@keyframes nvpPulse { from { opacity: .35; } to { opacity: 1; } }
.stage-center.is-casting .nvp2 .nvp-name { filter: blur(6px); }
@media (prefers-reduced-motion: reduce) {
  .stage-center.is-casting .nv-line .nv-bar,
  .stage-center.is-casting .nvp2 .nvp-name { animation: none; }
}

@media (max-width: 480px) {
  .nvp { width: 100%; }
  .nv-mark { right: -1.2em; font-size: .68em; }
  .nvp2 .nvp-paper { padding: .9rem; }
  .nvp2 .nvp-name { letter-spacing: .1em; }
}