/* 八字体验页 bz.{root}/tiyan.html：夜空星盘舞台、四柱卡片、五行条、神煞印、大运轴（输入行与换算卡在 tiyan-base.css）。
   舞台是深色的，颜色在这里写死；页面其余部分沿用站点 --c-* 变量（CssTokenTest）。 */
#tyApp [hidden] { display: none !important; }
.bz-ty-h1 { font-size: 1.5rem; margin: 8px 0 6px; }
.cg-msg { min-height: 1em; margin: 8px 0 0; font-size: var(--t-sm); color: #b6232a; text-align: center; }
.cg-privacy { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; padding: 14px 16px; background: #eef4f8; border: 1px solid #cfe0ec; border-radius: 12px; }
.cg-privacy .ic { font-size: 22px; }
.cg-privacy p { margin: 0; font-size: var(--t-sm); line-height: 1.8; color: #2b5068; }
.cg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── 更多选项（出生地 / 分钟 / 早晚子时 / 夏令时） ── */
.bz-opts { margin: 8px 0 0; font-size: var(--t-sm); }
.bz-opts summary { cursor: pointer; color: var(--c-primary-deep); padding: 4px 0; }
.bz-opts-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.bz-opts-row label { display: flex; align-items: center; gap: 6px; flex: 1 1 160px; }
.bz-opts-row select { flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; font: inherit; }
.bz-chk { display: block; margin: 4px 0; }
.bz-opts-note { margin: 6px 0 0; color: var(--c-ink-3); line-height: 1.6; }
.bz-wxr span sub { font-size: 9px; color: #c9b78c; margin-left: 1px; vertical-align: baseline; }

/* ── 舞台：AI 夜空图作衬底，压一层径向暗角让星盘突出 ── */
.bz-stage { position: relative; margin-top: 10px; padding: 14px 10px 12px; border-radius: 16px; overflow: hidden; color: #f3e3c0;
  background: radial-gradient(ellipse at 50% 38%, rgba(10,14,36,.35) 0%, rgba(8,10,28,.78) 62%, rgba(5,7,20,.95) 100%), var(--bz-bg, none) center / cover no-repeat, #0b1026; }
.bz-aigc { position: absolute; right: 10px; bottom: 5px; margin: 0; font-size: 10px; color: rgba(243,227,192,.45); }
.bz-stage { padding-bottom: 24px; }
.bz-dial { width: 100%; max-width: 420px; margin: 0 auto; }
.bz-dial.in { animation: bzIn .6s ease-out both; }
@keyframes bzIn { from { opacity: 0; transform: scale(.92) rotate(-8deg); } to { opacity: 1; transform: none; } }
.bz-svg { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.bz-svg text { text-anchor: middle; dominant-baseline: central; font-family: var(--font-serif); }
.bz-rl { fill: none; stroke: rgba(232,194,90,.55); stroke-width: 1; }
.bz-tk { stroke: rgba(232,194,90,.4); stroke-width: 1; }
.bz-tk.jie { stroke: #e8c25a; stroke-width: 1.4; }
.bz-tl { fill: #e9d6a4; font-size: 9.5px; }
.bz-hl { fill: rgba(233,214,164,.8); font-size: 9px; }
.bz-zl { fill: #f3e3c0; font-size: 15px; font-weight: 700; }
.bz-zl[data-wx="木"] { fill: #7fd39b; } .bz-zl[data-wx="火"] { fill: #f08a7f; } .bz-zl[data-wx="土"] { fill: #e0b57a; }
.bz-zl[data-wx="金"] { fill: #e6c15a; } .bz-zl[data-wx="水"] { fill: #7bb8e8; }
.bz-sec { fill: rgba(255,255,255,.02); stroke: rgba(232,194,90,.25); stroke-width: .6; transition: fill .5s; }
.bz-sec.hit { fill: rgba(244,212,132,.28); }
.bz-arc { fill: rgba(244,212,132,.22); }
.bz-core { stroke: rgba(232,194,90,.6); stroke-width: 1; }
.bz-c1 { fill: #c9b78c; font-size: 12px; }
.bz-c2 { fill: #fff3d0; font-size: 26px; font-weight: 700; letter-spacing: 2px; }
.bz-c3 { fill: #c9b78c; font-size: 11px; }
.bz-center-sm .bz-c2 { font-size: 21px; letter-spacing: 1px; }
.bz-jz text { font-size: 12px; font-weight: 700; }
.bz-jz.hit text { font-size: 14px; filter: drop-shadow(0 0 4px #f4d484); }
.bz-ptr { fill: #f4d484; }
.bz-win { fill: rgba(244,212,132,.16); stroke: #f4d484; stroke-width: .8; }
.bz-hand { fill: #f4d484; filter: drop-shadow(0 0 3px rgba(244,212,132,.8)); }
.bz-cap { min-height: 3.2em; margin: 6px auto 10px; max-width: 640px; text-align: center; font-size: var(--t-sm); line-height: 1.7; color: #e9dcbc; }
.bz-cap b { color: #fff3d0; }
.bz-skip { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border: 1px solid rgba(243,227,192,.4); border-radius: 999px; background: rgba(0,0,0,.25); color: #f3e3c0; font-size: 12px; cursor: pointer; }

/* ── 四柱卡片：年月日时从左到右 ── */
.bz-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 560px; margin: 0 auto; }
.bz-p { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 10px; border-radius: 12px;
  border: 1px dashed rgba(232,194,90,.45); background: rgba(10,14,40,.55); backdrop-filter: blur(2px); transition: border-color .4s, box-shadow .4s; }
.bz-pl { font-size: 11px; color: #c9b78c; }
.bz-ss { min-height: 1.3em; font-size: 11px; color: #e9d6a4; opacity: 0; transition: opacity .5s; }
.bz-g, .bz-z { font-family: var(--font-serif); font-size: 30px; line-height: 1.15; color: rgba(243,227,192,.35); }
.bz-p.on { border-style: solid; border-color: rgba(244,212,132,.85); animation: bzFlip .55s ease-out both; }
.bz-p.me { box-shadow: 0 0 0 1px #f4d484, 0 0 18px rgba(244,212,132,.35); }
@keyframes bzFlip { from { transform: rotateY(90deg); opacity: .2; } to { transform: none; opacity: 1; } }
.bz-hide { display: flex; justify-content: center; gap: 2px; min-height: 30px; }
.bz-hide i { display: flex; flex-direction: column; align-items: center; font-style: normal; font-family: var(--font-serif); font-size: 14px; animation: bzDrop .4s ease-out both; animation-delay: var(--d, 0s); }
.bz-hide em { font-style: normal; font-size: 9px; color: #c9b78c; white-space: nowrap; letter-spacing: -.5px; }
.bz-p.deep .bz-ss { opacity: 1; }
.bz-ny { font-size: 10px; color: #b9a983; }
@keyframes bzDrop { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
.bz-seals { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 4px; }
.bz-seals i { padding: 1px 4px; border: 1px solid #d0473a; border-radius: 3px; background: rgba(176,40,32,.85); color: #fff3e0; font-style: normal; font-size: 10px; line-height: 1.4;
  animation: bzStamp .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: var(--d, 0s); }
@keyframes bzStamp { from { transform: scale(2.2) rotate(-12deg); opacity: 0; } to { transform: rotate(-3deg); opacity: 1; } }

/* ── 五行条与大运轴 ── */
.bz-wx { max-width: 560px; margin: 12px auto 0; display: grid; gap: 5px; }
.bz-wxr { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 2.6em; align-items: center; gap: 8px; font-size: 13px; }
.bz-wxr span { font-family: var(--font-serif); font-weight: 700; text-align: center; white-space: nowrap; }
.bz-wxr i { display: block; height: 10px; border-radius: 5px; background: rgba(255,255,255,.08); overflow: hidden; }
.bz-wxr b { display: block; height: 100%; width: 0; border-radius: 5px; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.bz-wx.grow .bz-wxr b { width: var(--w); }
.bz-wxr em { font-style: normal; color: #c9b78c; text-align: right; }
.bz-wxr.xi span::after { content: '喜'; margin-left: 2px; font-size: 9px; color: #f4d484; vertical-align: super; }
/* 大运：按步数等分一行（--n 由脚本设），不横向滚动 */
.bz-yun { display: grid; grid-template-columns: repeat(var(--n, 9), minmax(0, 1fr)); gap: 4px; max-width: 560px; margin: 12px auto 0; }
.bz-dy { min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 9px;
  border: 1px solid rgba(232,194,90,.3); background: rgba(10,14,40,.5); animation: bzSlide .45s ease-out both; animation-delay: var(--d, 0s); }
.bz-dy small { font-size: 10px; color: #b9a983; white-space: nowrap; }
.bz-dy .to { display: inline; }
.bz-dy b { font-family: var(--font-serif); font-size: 18px; }
.bz-dy em { font-style: normal; font-size: 10px; color: #e9d6a4; }
.bz-dy.cur { border-color: #f4d484; box-shadow: 0 0 12px rgba(244,212,132,.4); }
@keyframes bzSlide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── 五行生克盘：相生弧线、相克虚线依次画出，节点按力量大小弹出 ── */
.bz-sheng { fill: none; stroke: #e8c25a; stroke-width: 2; stroke-dasharray: 160; stroke-dashoffset: 160; animation: bzDraw .7s ease-out forwards; animation-delay: var(--d, 0s); }
.bz-ke { stroke: rgba(240,138,127,.6); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0; animation: bzFade .5s ease-out forwards; animation-delay: var(--d, 0s); }
@keyframes bzDraw { to { stroke-dashoffset: 0; } }
@keyframes bzFade { to { opacity: 1; } }
.bz-wxn { transform-box: fill-box; transform-origin: center; animation: bzPop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: var(--d, 0s); }
.bz-wxn circle { opacity: .88; stroke: rgba(255,255,255,.35); stroke-width: 1; }
.bz-wxn.me circle { stroke: #fff6d8; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(244,212,132,.9)); }
.bz-wxt { fill: #1a1326; font-size: 17px; font-weight: 800; }
.bz-wxv { fill: #1a1326; font-size: 10px; }
@keyframes bzPop { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── 刑冲合害弧线（画在四柱卡片上方） ── */
.bz-pillars { position: relative; }
.bz-pillars.has-rel { padding-top: 46px; }
.bz-rel-svg { position: absolute; left: 0; top: 0; width: 100%; height: 46px; overflow: visible; }
.bz-rel-arc { fill: none; stroke-width: 1.6; stroke-dasharray: 400; stroke-dashoffset: 400; animation: bzDraw .8s ease-out forwards; animation-delay: var(--d, 0s); }
.bz-rel-t { font-size: 12px; font-weight: 700; text-anchor: middle; opacity: 0; animation: bzFade .4s ease-out forwards; animation-delay: var(--d, 0s); }
.bz-rel-arc.t-冲 { stroke: #f08a7f; } .bz-rel-t.t-冲 { fill: #f08a7f; }
.bz-rel-arc.t-合 { stroke: #7fd39b; } .bz-rel-t.t-合 { fill: #7fd39b; }
.bz-rel-arc.t-刑 { stroke: #e6c15a; } .bz-rel-t.t-刑 { fill: #e6c15a; }
.bz-rel-arc.t-害 { stroke: #b9a0e8; } .bz-rel-t.t-害 { fill: #b9a0e8; }

/* ── 当前大运的十个流年 ── */
.bz-ln { max-width: 560px; margin: 8px auto 0; }
.bz-ln small { display: block; font-size: 11px; color: #b9a983; margin-bottom: 4px; }
.bz-ln div { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.bz-ln span { display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: 6px; background: rgba(10,14,40,.45); animation: bzDrop .35s ease-out both; animation-delay: var(--d, 0s); }
.bz-ln span.cur { outline: 1px solid #f4d484; box-shadow: 0 0 8px rgba(244,212,132,.4); }
.bz-ln b { font-family: var(--font-serif); font-size: 13px; line-height: 1.1; }
.bz-ln em, .bz-ln i { font-style: normal; font-size: 9px; color: #b9a983; }

/* ── 结果区补充：纳音长生空亡表、命宫胎元身宫、十神分布 ── */
.bz-grid { width: 100%; margin: 10px 0 0; border-collapse: collapse; table-layout: fixed; font-size: var(--t-sm); text-align: center; }
.bz-grid th, .bz-grid td { border: 1px solid var(--c-line); padding: 4px 2px; }
.bz-grid th { background: var(--c-primary-soft); color: var(--c-primary-deep); font-weight: 600; }
.bz-grid tr th:first-child { width: 3.2em; }
.bz-gong { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.bz-gong b { color: var(--c-primary-deep); font-family: var(--font-serif); }
.bz-ssc { margin-top: 10px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; align-items: end; }
.bz-ssc small { grid-column: 1 / -1; color: var(--c-ink-3); font-size: var(--t-sm); }
.bz-ssc span { display: flex; flex-direction: column; align-items: center; }
.bz-ssc i { display: block; width: 70%; background: var(--c-gold); border-radius: 3px 3px 0 0; }
.bz-ssc span.zero i { background: var(--c-line); }
.bz-ssc b { font-size: 11px; color: var(--c-ink-2); }
.bz-ssc em { font-style: normal; font-size: 10px; color: var(--c-ink-3); white-space: nowrap; }
.bz-ssc { margin-bottom: 10px; }

.bz-steps { margin: 4px 0 8px; padding-left: 1.4em; }
.bz-steps li { margin: 3px 0; }

/* ── 排盘过程，一步一图（深色卡片，盘面静止） ── */
.bz-gallery { margin-top: 14px; }
.bz-gal-hd { margin: 0 0 8px; font-size: var(--t-md); font-family: var(--font-serif); }
.bz-gal-hd small { margin-left: 8px; font-size: var(--t-sm); font-weight: 400; color: var(--c-ink-3); }
.bz-gal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .bz-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bz-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bz-snap { margin: 0; padding: 10px 8px 12px; border-radius: 14px; color: #f3e3c0; display: flex; flex-direction: column;
  background: radial-gradient(ellipse at 50% 30%, #1b2147 0%, #0d1130 70%, #080b20 100%); }
.bz-snap.wide { grid-column: 1 / -1; }   /* 大运流年一行要放九步、十年，占满整行 */
.bz-snap .t { font-family: var(--font-serif); font-weight: 700; color: #fff3d0; margin: 0 2px 6px; }
.bz-snap .pic { flex: 1; }
.bz-snap .pic .bz-svg { max-width: 300px; margin: 0 auto; }
.bz-snap .d { margin: 8px 2px 0; font-size: 12.5px; line-height: 1.65; color: #e9dcbc; }
.bz-snap .d b { color: #fff3d0; }
.bz-snap *, .bz-snap *::before { animation: none !important; transition: none !important; }
.bz-snap .bz-sheng, .bz-snap .bz-rel-arc { stroke-dashoffset: 0 !important; }
.bz-snap .bz-ke, .bz-snap .bz-rel-t, .bz-snap .bz-ss { opacity: 1 !important; }
.bz-snap .bz-wx.grow .bz-wxr b { width: var(--w); }
.bz-snap .bz-pillars, .bz-snap .bz-wx, .bz-snap .bz-yun, .bz-snap .bz-ln { max-width: none; }
.bz-snap .bz-g, .bz-snap .bz-z { font-size: 24px; }

/* ── 结果区（浅色） ── */
.bz-sum { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--c-line); border-radius: 14px; background: var(--c-paper-card); }
.bz-sum-hd b { display: block; font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: 4px; color: var(--c-primary-deep); }
.bz-sum-hd small { color: var(--c-ink-3); }
.bz-sum p { margin: 8px 0 0; }
.bz-sx { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 6px 10px; border: 1px solid var(--c-line); border-radius: 12px; color: inherit; text-decoration: none; background: var(--c-paper-card); }
.bz-sx img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.bz-sx b { color: var(--c-primary-deep); font-family: var(--font-serif); }
.bz-sx small { display: block; color: var(--c-ink-3); }
.bz-sx:hover small { text-decoration: underline; }
.bz-rel span { display: inline-block; margin: 0 6px 4px 0; padding: 1px 8px; border-radius: 999px; font-size: var(--t-sm); background: var(--c-primary-soft); color: var(--c-primary-deep); }
.bz-ssl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 10px 0 0; font-size: var(--t-sm); }
.bz-ssl dt { font-weight: 700; color: var(--c-primary-deep); }
.bz-ssl dt small { margin-left: 4px; font-weight: 400; color: var(--c-ink-3); }
.bz-ssl dd { margin: 0; color: var(--c-ink-2); }

/* 宽屏分屏：左边星盘 + 说明，右边四柱、五行、大运、流年——动画和它排出来的结果并排看，不用上下翻 */
@media (min-width: 1024px) {
  .bz-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto auto 1fr; column-gap: 28px; align-items: start; padding: 22px 26px 18px; }
  .bz-dial { grid-column: 1; grid-row: 1 / span 4; max-width: 440px; }
  .bz-cap { grid-column: 1; grid-row: 5; margin-top: 8px; }
  .bz-pillars, .bz-wx, .bz-yun, .bz-ln { grid-column: 2; max-width: none; margin-left: 0; margin-right: 0; }
  .bz-pillars { grid-row: 1; margin-top: 6px; }
  .bz-wx { grid-row: 2; }
  .bz-yun { grid-row: 3; }
  .bz-ln { grid-row: 4; }
}
@media (max-width: 480px) {
  .ty-card.card-pad { padding-left: 10px; padding-right: 10px; }
  .bz-stage { padding-left: 6px; padding-right: 6px; }
  .bz-dy .to, .bz-dy .yr { display: none; }
  .bz-dy b { font-size: 14px; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
  .bz-dy em { font-size: 9px; }
  .bz-ln b { font-size: 12px; }
  .bz-g, .bz-z { font-size: 24px; }
  .bz-hide i { font-size: 12px; }
  .bz-ssl { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .bz-dial.in, .bz-p.on, .bz-hide i, .bz-seals i, .bz-dy, .bz-ln span, .bz-wxn { animation: none; }
  .bz-sheng, .bz-rel-arc { animation: none; stroke-dashoffset: 0; }
  .bz-ke, .bz-rel-t { animation: none; opacity: 1; }
  .bz-wxr b, .bz-sec, .bz-ss { transition: none; }
}