/* ==========================================================================
   星谱知命网 · 灵签与起卦 v1.0
   仪式感动画：摇签筒 / 铜钱六掷 —— 结果区组件
   ========================================================================== */

/* ---------- 通用结果容器 ---------- */
.xj-draw-anim {
  text-align: center; padding: 34px 10px 26px;
  min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.xj-draw-anim__caption { margin-top: 20px; font-size: 13.6px; letter-spacing: .2em; color: var(--xj-gold-dk); }

/* ---------- 摇签筒（初始静立案面 → 升至案上方摇动 → 一签跃出 → 签横落案面） ---------- */
.xj-cup { position: relative; width: 88px; height: 112px; transform-origin: 50% 92%; }
.xj-cup.is-idle { opacity: .96; }
.xj-cup.is-shaking { animation: xj-cup-shake .38s cubic-bezier(.36,.07,.19,.97) infinite; }
@keyframes xj-cup-shake {
  0%, 100% { transform: translateY(-30px) rotate(0deg); }
  20% { transform: translateY(-33px) rotate(-13deg); }
  40% { transform: translateY(-29px) rotate(11deg); }
  60% { transform: translateY(-34px) rotate(-9deg); }
  80% { transform: translateY(-30px) rotate(7deg); }
}
.xj-cup__stick {
  position: absolute; bottom: 26px; width: 6px; height: 72px; border-radius: 3px;
  background: linear-gradient(180deg, #d9a05b, #b57e3a);
  box-shadow: inset 0 0 0 1px rgba(120, 72, 30, .25);
  transform-origin: 50% 100%;
}
.xj-cup__stick::before {
  content: ""; position: absolute; top: 6px; left: 1px; right: 1px; height: 11px; border-radius: 2px;
  background: rgba(156, 61, 12, .55);
}
.xj-cup__body {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 70px; height: 64px;
  background: linear-gradient(160deg, #e8c377 0%, #cf9f4c 55%, #a87a30 100%);
  border-radius: 10px 10px 20px 20px / 10px 10px 26px 26px;
  box-shadow: inset -8px -6px 16px rgba(120, 72, 30, .35), 0 10px 22px rgba(120, 72, 30, .28);
}
.xj-cup__body::before {
  content: "签"; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  font-family: var(--xj-serif); font-size: 22px; font-weight: 700; color: rgba(84, 48, 8, .55);
}
.xj-cup__mouth {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 10px; border-radius: 50%;
  background: rgba(84, 48, 8, .30);
}
.xj-cup__rise {
  position: absolute; bottom: 64px; left: 50%; margin-left: -3px;
  width: 6px; height: 84px; border-radius: 3px;
  background: linear-gradient(180deg, #e0aa63, #b57e3a);
  box-shadow: 0 0 0 1px rgba(120, 72, 30, .25);
  opacity: 0; transform: translateY(30px) rotate(0deg);
  transform-origin: 50% 100%;
}
.xj-cup.is-rising .xj-cup__rise { animation: xj-cup-rise .8s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes xj-cup-rise {
  0% { opacity: 0; transform: translateY(30px) rotate(-3deg); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: translateY(-24px) rotate(2deg); }
}
.xj-cup.is-settled { transform: translateY(0); animation: xj-cup-drop .5s ease both; }
@keyframes xj-cup-drop { 0% { transform: translateY(-30px); } 100% { transform: translateY(0); } }
.xj-cup.is-settled .xj-cup__rise { animation: xj-cup-settle .9s cubic-bezier(.3,.6,.4,1) both; }
@keyframes xj-cup-settle {
  0% { opacity: 1; transform: translateY(-24px) rotate(2deg); }
  55% { opacity: 1; transform: translate(18px, 36px) rotate(46deg); }
  100% { opacity: 1; transform: translate(44px, 99px) rotate(86deg); }
}

/* ---------- 铜钱 ---------- */
.xj-coins { display: flex; gap: 26px; justify-content: center; height: 74px; align-items: center; perspective: 600px; }
.xj-coin {
  width: 58px; height: 58px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 32% 30%, #f2d489, #cf9f4c 62%, #a87a30);
  box-shadow: 0 8px 18px rgba(120, 72, 30, .30), inset 0 0 0 3px rgba(255, 244, 220, .45);
  transform-style: preserve-3d;
}
.xj-coin::after {
  content: ""; position: absolute; inset: 16px; border-radius: 8px;
  border: 2.5px solid rgba(120, 72, 30, .45);
}
.xj-coin.is-tossing { animation: xj-coin-toss .45s ease-in-out; }
@keyframes xj-coin-toss {
  0% { transform: translateY(0) rotateX(0deg); }
  50% { transform: translateY(-46px) rotateX(540deg); }
  100% { transform: translateY(0) rotateX(1080deg); }
}
.xj-coin__face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--xj-serif); font-weight: 700; font-size: 20px; color: rgba(84, 48, 8, .72);
}

/* 六掷爻记录（动画期间自下而上生长） */
.xj-gua-stack { display: flex; flex-direction: column; gap: 7px; margin-top: 24px; min-height: 150px; justify-content: flex-end; }
.xj-gua__line { position: relative; display: flex; gap: 8px; justify-content: center; align-items: center; width: 190px; margin: 0 auto; }
.xj-gua__bar {
  flex: 1; height: 13px; border-radius: 7px;
  background: linear-gradient(180deg, #4a4033, #26211a);
  box-shadow: 0 2px 6px rgba(38, 33, 26, .25);
}
.xj-gua__bar--half { flex: 0 0 calc(50% - 4px); }
.xj-gua__line.is-moving .xj-gua__bar { background: linear-gradient(180deg, #f07a3c, #c04510); }
.xj-gua__line.is-in { animation: xj-yao-in .5s cubic-bezier(.2, .8, .3, 1); }
@keyframes xj-yao-in { from { opacity: 0; transform: translateY(14px) scale(.92); } to { opacity: 1; transform: none; } }
.xj-gua__mv-dot {
  position: absolute; right: -24px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: #c04510; font-weight: 700;
}

/* ---------- 灵签结果 ---------- */
.xj-draw__stick {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin: 6px auto 22px; padding: 16px 34px; border-radius: 22px;
  border: 1px solid var(--xj-line);
  background: linear-gradient(165deg, #fffaf0, #fbf2df);
  box-shadow: var(--xj-shadow-sm); width: fit-content; max-width: 100%;
}
.xj-draw__no { font-family: var(--xj-serif); font-size: 19px; font-weight: 700; color: var(--xj-ink); letter-spacing: .1em; }
.xj-draw__level {
  padding: 6px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: .22em;
  color: #fff; background: linear-gradient(135deg, #7d9464, #667b4d);
}
.xj-draw__stick--best .xj-draw__level { background: linear-gradient(135deg, #f0692f, #c04510); box-shadow: 0 6px 16px rgba(226, 87, 28, .35); }
.xj-draw__stick--good .xj-draw__level { background: linear-gradient(135deg, #e0952f, #b8721c); }
.xj-draw__stick--fair .xj-draw__level { background: linear-gradient(135deg, #7d9464, #667b4d); }
.xj-draw__stick--mid  .xj-draw__level { background: linear-gradient(135deg, #8a8272, #6b6455); }
.xj-draw__stick--care .xj-draw__level { background: linear-gradient(135deg, #4a7a8c, #33566b); }
/* 签题（古人典故名）与宫位 */
.xj-draw__stick-title {
  font-family: var(--xj-serif); font-size: 15px; font-weight: 700; color: var(--xj-ink);
  letter-spacing: .16em;
}
.xj-draw__stick-palace {
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; padding: 4px 12px;
  border-radius: 999px; color: #7a5a1c; background: rgba(169, 133, 47, .12);
  border: 1px solid rgba(169, 133, 47, .3);
}
/* 诗意（卦象总断） */
.xj-draw__meaning {
  margin: 12px 0 0; padding: 10px 14px; border-radius: var(--xj-r);
  background: rgba(169, 133, 47, .07); border-left: 3px solid rgba(169, 133, 47, .45);
  font-size: 14px; line-height: 1.95; color: var(--xj-ink-2); letter-spacing: .04em;
}

.xj-draw__sec-title {
  font-family: var(--xj-serif); font-size: 16px; font-weight: 700; color: var(--xj-ink);
  margin: 24px 0 12px; padding-left: 12px; border-left: 3px solid var(--xj-gold);
  letter-spacing: .12em;
}
.xj-draw__poem { text-align: center; padding: 18px 16px; border-radius: var(--xj-r); background: var(--xj-surface-2); border: 1px solid var(--xj-line-2); }
.xj-draw__poem-line { margin: 0; font-family: var(--xj-serif); font-size: 17.5px; line-height: 2.1; letter-spacing: .28em; color: var(--xj-ink); }
.xj-draw__gist { margin: 12px 0 0; font-size: 13.6px; line-height: 1.9; color: var(--xj-ink-2); }
.xj-draw__aspects { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .xj-draw__aspects { grid-template-columns: 1fr; } }
.xj-draw__aspect { padding: 14px 16px; border-radius: var(--xj-r-sm); background: var(--xj-surface); border: 1px solid var(--xj-line-2); }
.xj-draw__aspect-k { font-size: 12.4px; font-weight: 700; color: var(--xj-gold-dk); letter-spacing: .12em; display: block; margin-bottom: 6px; }
.xj-draw__aspect p { margin: 0; font-size: 13.2px; line-height: 1.9; color: var(--xj-ink-2); }

/* ---------- 起卦结果 ---------- */
.xj-gua__grid { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 10px 0 18px; }
@media (max-width: 560px) { .xj-gua__grid { gap: 16px; } }
.xj-gua__col { text-align: center; }
.xj-gua__col-title { font-size: 12.6px; letter-spacing: .18em; color: var(--xj-muted); margin-bottom: 14px; }
.xj-gua__graphic { display: inline-flex; flex-direction: column; gap: 8px; }
.xj-gua__graphic .xj-gua__line { width: 168px; }
.xj-gua__arrow { font-size: 30px; color: var(--xj-gold); font-weight: 700; }
.xj-gua__tosses { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 6px; }
.xj-gua__toss {
  padding: 5px 12px; border-radius: 999px; font-size: 12px; color: var(--xj-muted);
  background: var(--xj-surface-2); border: 1px solid var(--xj-line-2);
}
.xj-gua__toss b { color: var(--xj-gold-lt); margin-left: 5px; font-family: var(--xj-serif); }
.xj-gua__toss.is-moving { border-color: rgba(226, 87, 28, .5); color: var(--xj-gold-dk); background: rgba(226, 87, 28, .10); }
.xj-gua__block { margin-top: 20px; }
.xj-gua__block--verdict { padding: 18px 20px; border-radius: var(--xj-r); background: linear-gradient(165deg, #fffaf0, #fbf2df); border: 1px solid var(--xj-line); }
.xj-gua__sec-title {
  font-family: var(--xj-serif); font-size: 15.6px; font-weight: 700; color: var(--xj-ink);
  margin: 0 0 10px; letter-spacing: .1em;
}
.xj-gua__classic {
  font-family: var(--xj-serif); font-size: 15.5px; letter-spacing: .06em; line-height: 2;
  color: var(--xj-gold-lt); margin: 0 0 8px;
}
.xj-gua__yao { padding: 14px 16px; border-radius: var(--xj-r-sm); background: var(--xj-surface); border: 1px solid var(--xj-line-2); margin-bottom: 10px; }
.xj-gua__yao-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.xj-gua__yao-head b { font-family: var(--xj-serif); font-size: 15.5px; color: var(--xj-ink); letter-spacing: .1em; }
.xj-gua__yao .xj-small { margin: 4px 0 0; }

/* ==========================================================================
   T4.1 灵签八签种：签种选择页 / 单签种仪式页
   ========================================================================== */

/* ---------- 签种选择页 ---------- */
.xj-decks__head { text-align: center; margin-bottom: 26px; }
.xj-decks__title {
  font-family: var(--xj-serif); font-size: 22px; font-weight: 700; color: var(--xj-ink);
  margin: 0 0 10px; letter-spacing: .14em;
}
.xj-decks__lead { margin: 0 auto; max-width: 620px; font-size: 14.6px; line-height: 1.9; color: var(--xj-muted); }
.xj-decks__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 980px) { .xj-decks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .xj-decks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 460px) { .xj-decks__grid { grid-template-columns: 1fr; } }

.xj-stick-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 22px 16px 18px; border-radius: var(--xj-r);
  background: linear-gradient(170deg, #fffdf7, #fbf5e8);
  border: 1px solid var(--xj-line); text-decoration: none;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  position: relative; overflow: hidden;
}
.xj-stick-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--xj-deck-color, var(--xj-gold)), transparent);
  opacity: .8;
}
.xj-stick-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(44,42,38,.10); border-color: var(--xj-deck-color, var(--xj-gold)); }
.xj-stick-card__art-wrap { display: block; margin-bottom: 12px; line-height: 0; }
.xj-stick-card__art { display: block; }
.xj-stick-card__body { display: block; }
.xj-stick-card__name {
  display: block; font-family: var(--xj-serif); font-size: 17px; font-weight: 700;
  color: var(--xj-ink); letter-spacing: .1em; margin-bottom: 4px;
}
.xj-stick-card__deity { display: block; font-size: 12.6px; color: var(--xj-muted); margin-bottom: 8px; }
.xj-stick-card__tag {
  display: block; font-size: 12.6px; color: var(--xj-deck-color, var(--xj-gold-dk));
  letter-spacing: .08em; margin-bottom: 8px;
}
.xj-stick-card__meta {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.6px;
  color: var(--xj-muted); background: var(--xj-surface-2); border: 1px solid var(--xj-line-2);
}
.xj-stick-card__enter {
  display: block; margin-top: 14px; font-size: 13px; color: var(--xj-deck-color, var(--xj-gold-dk));
  letter-spacing: .08em;
}
.xj-stick-card__origin {
  display: block; margin-top: 10px; font-size: 11px; line-height: 1.7; color: var(--xj-muted);
  opacity: .72;
}

/* ---------- 仪式页 ---------- */
.xj-rite {
  padding: 30px 20px 26px; border-radius: var(--xj-r); text-align: center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(169,133,47,.10), transparent 62%),
    linear-gradient(178deg, #fffdf7, #f8f1e2);
  border: 1px solid var(--xj-line); position: relative; overflow: hidden;
}
.xj-rite__deity-name {
  font-family: var(--xj-serif); font-size: 27px; font-weight: 700; color: var(--xj-ink);
  letter-spacing: .2em; margin: 0 0 6px;
}
.xj-rite__deity-sub { font-size: 13px; color: var(--xj-muted); letter-spacing: .08em; margin-bottom: 20px; }

/* 供奉场景：神像挂轴居中 + 两侧竖排对联 */
.xj-rite__scene {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(32px, 6.6vw, 92px);
  max-width: min(880px, 100%); margin: 0 auto clamp(56px, 12vw, 104px);
}
.xj-rite__portrait {
  position: relative; line-height: 0; padding: 9px;
  background: linear-gradient(180deg, #FBF6E8, #F1E7D0);
  border: 1px solid rgba(169,133,47,.32);
  box-shadow: 0 12px 28px rgba(44,42,38,.15), 0 2px 0 rgba(44,42,38,.05);
}
/* 挂轴天杆 / 地杆 */
.xj-rite__portrait::before,
.xj-rite__portrait::after {
  content: ""; position: absolute; left: -11px; right: -11px; height: 9px; border-radius: 4px;
  background: linear-gradient(180deg, #93713F, #5E4526 55%, #7C5C32);
  box-shadow: 0 2px 5px rgba(44,42,38,.28);
}
.xj-rite__portrait::before { top: -10px; }
.xj-rite__portrait::after { bottom: -10px; }
.xj-rite__portrait img { display: block; width: 168px; height: 252px; }
/* 楹联：庙宇黄纸金字形制 —— 明黄金纸底 + 深金框 + 天杆地杆 + 楷体亮金箔大字逐字竖排。
   板高与神像挂轴齐（288px）以示「联比画长」；配色由 --cp-* 变量驱动，便于整板换色。
   T25：底色由「朱漆底」改为「庙宇黄纸」，纸色取自庙宇实拍那张（按亮度分档取样：
        最亮档 P99 #F7CA5E / P95 #F1C24D，中位 #E9B93E）—— 用户指定「取最亮的黄色」，
        故整板压在亮端：上 #FAD96A 下 #EEBE43，再叠一道 105° 缎面反光当纸的浮光。
   T25 续：字定「亮金箔」#C9870C + 四向暗描边 —— 回到用户「黄纸金字」的原意：
        字要比纸更亮、更「金」，靠暗描边把它从明黄底上「抠」出来（描边即纸面凹槽的阴影），
        再补一道亮顶投影做箔面反光。字色三版对照见 docs/界面设计验收/第34轮-T25…/。 */
.xj-rite__couplet {
  --cp-bg1: #FAD96A; --cp-bg2: #EEBE43;
  --cp-ink: #C9870C; --cp-ink-soft: #A96F08;
  --cp-frame: rgba(112,76,8,.42); --cp-bar: #5E4526;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  position: relative; width: 66px; height: 288px;
  padding: 22px 0; border-radius: 4px;
  background:
    linear-gradient(105deg, rgba(255,253,240,.30) 0%, rgba(255,253,240,0) 46%, rgba(120,84,10,.09) 100%),
    linear-gradient(180deg, var(--cp-bg1), var(--cp-bg2));
  border: 1px solid var(--cp-frame);
  box-shadow:
    inset 0 0 0 2px rgba(255,250,225,.50),
    inset 0 0 20px rgba(150,104,16,.14),
    0 10px 24px rgba(44,42,38,.18);
}
/* 天杆 / 地杆（与神像挂轴同制） */
.xj-rite__couplet::before,
.xj-rite__couplet::after {
  content: ""; position: absolute; left: -9px; right: -9px; height: 8px; border-radius: 3px;
  background: linear-gradient(180deg, #93713F, var(--cp-bar) 55%, #7C5C32);
  box-shadow: 0 2px 5px rgba(44,42,38,.26);
}
.xj-rite__couplet::before { top: -9px; }
.xj-rite__couplet::after { bottom: -9px; }
.xj-rite__couplet-char {
  font-family: "STKaiti", "Kaiti SC", "KaiTi", "BiauKai", "DFKai-SB", "標楷體", var(--xj-serif);
  font-size: 28px; font-weight: 700; line-height: 1;
  color: var(--cp-ink);
  text-shadow:
    0 0 1px rgba(58,32,0,.85),
    0 1px 0 rgba(58,32,0,.9),
    -1px 0 0 rgba(58,32,0,.55),
    1px 0 0 rgba(58,32,0,.55),
    0 -1px 0 rgba(255,250,222,.95),
    0 0 12px rgba(226,168,40,.5);
}
.xj-rite__couplet--left, .xj-rite__couplet--right { min-width: 66px; }
.xj-rite__couplet-en {
  font-family: var(--xj-serif); font-size: 12.4px; color: var(--cp-ink-soft);
  letter-spacing: .08em; line-height: 1.7; text-align: center;
}
/* 英文横排短联：保持与中文竖联一致的窄长形制 */
.xj-rite__couplet--wide { width: 104px; }

/* ---------- 香案实图 + 案面签筒 + 落案签牌 ----------
   desk.png 原生 360×297：案面 native y 32(后沿)~54(前沿)，案腿至 y 232，
   y 254~295 为图内自带的三块袈裟黄拜垫（故页面不再另画蒲团）。
   签筒底座落案面 y=54 → 自底算 81.8%；摇签时升至 100%（浮于案面之上摇动）。 */
.xj-rite__altar { position: relative; width: min(420px, 96%); margin: 0 auto; }
.xj-rite__altar-desk { display: block; width: 100%; height: auto; }

.xj-rite__cup-slot {
  position: absolute; left: 50%; bottom: 81.8%; width: 12.5%;
  transform: translateX(-50%); z-index: 9;
  transition: bottom .55s cubic-bezier(.3,.7,.35,1);
}
.xj-rite__cup-slot.is-shaking { bottom: 91.5%; }
.xj-cup-img { display: block; width: 100%; height: auto; transform-origin: 50% 88%; }
.xj-rite__cup-slot.is-wishing .xj-cup-img { animation: xj-cup-breathe 1.6s ease-in-out infinite; }
.xj-rite__cup-slot.is-shaking .xj-cup-img { animation: xj-cup-img-shake .4s cubic-bezier(.36,.07,.19,.97) infinite; }

/* T19 开始按钮：嵌在签筒正中（筒身中部），摇筒期间隐去。
   显式写死朱砂底金字，不依赖 .xj-btn--* 的款式定义，避免落到浏览器默认样式。 */
.xj-rite__cup-slot .xj-rite__start {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 4; white-space: nowrap; letter-spacing: .06em;
  padding: 7px 14px; font-size: 13.6px; border-radius: 999px;
  color: #FFF7E2 !important; text-decoration: none;
  background: linear-gradient(135deg, #C4473A 0%, #B03A2E 48%, #93291F 100%);
  border: 1px solid rgba(255,236,190,.72);
  box-shadow: 0 6px 16px rgba(176,58,46,.34), 0 0 0 3px rgba(255,253,247,.72);
  transition: opacity .28s ease, box-shadow .28s ease, transform .22s ease;
}
.xj-rite__cup-slot .xj-rite__start:hover {
  background: linear-gradient(135deg, #D2503F 0%, #B94235 48%, #9E2F22 100%);
  box-shadow: 0 8px 20px rgba(176,58,46,.42), 0 0 0 3px rgba(255,253,247,.86);
}
.xj-rite__cup-slot[hidden] .xj-rite__start,
.xj-rite__cup-slot.is-shaking .xj-rite__start,
.xj-rite__cup-slot .xj-rite__start[hidden] { display: none; }
.xj-rite__tip.is-done { color: var(--xj-ink); opacity: .82; }
@keyframes xj-cup-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes xj-cup-img-shake {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  20% { transform: rotate(-11deg) translateY(1px); }
  40% { transform: rotate(9deg) translateY(-2px); }
  60% { transform: rotate(-8deg) translateY(1px); }
  80% { transform: rotate(6deg) translateY(-1px); }
}

/* 平躺签牌：qianpai-flat.png 251×37（签头圆标在右端），落定后平躺案面右前侧，签号写在签身。
   T19：落点自 69% 右移至 73%，与签筒（居中 12.5% 宽）拉开距离，「查看签批」按钮浮于其正上方。 */
.xj-rite__qianpai {
  position: absolute; left: 73%; bottom: 80.5%; width: 25%;
  transform: translateX(-50%); z-index: 10; opacity: 0;
}
.xj-rite__qianpai-stick { display: block; width: 100%; height: auto; }
.xj-rite__qianpai-no {
  position: absolute; top: 0; bottom: 0; left: 0; right: 30%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--xj-serif); font-size: 12.4px; font-weight: 700;
  color: #F7E2A6; letter-spacing: .1em; line-height: 1; opacity: 0;
  text-shadow: 0 1px 2px rgba(58,28,8,.65);
}
.xj-rite__qianpai.is-show { animation: xj-qianpai-fly 1.4s cubic-bezier(.32,.12,.28,1) both; }
.xj-rite__qianpai.is-show .xj-rite__qianpai-no { animation: xj-qianpai-no-in .45s ease .95s forwards; }
.xj-rite__qianpai.is-landed { opacity: 1; }
.xj-rite__qianpai.is-landed .xj-rite__qianpai-no { opacity: 1; }
/* T19 「查看签批」：签落案后从签牌上浮出的一枚小签条，点击展开签批。
   醒目配置：亮朱砂底 + 象牙字 + 宣纸白描边环 + 缓慢呼吸金晕（全站主要行动点）。 */
.xj-rite__read {
  position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%);
  z-index: 3; white-space: nowrap; cursor: pointer; text-decoration: none;
  padding: 6px 14px; border-radius: 999px;
  font-family: var(--xj-serif); font-size: 13px; font-weight: 700; letter-spacing: .12em; line-height: 1;
  color: #FFF7E2;
  background: linear-gradient(180deg, #D8442F 0%, #B03A2E 54%, #95271C 100%);
  border: 1px solid rgba(255,236,190,.88);
  text-shadow: 0 1px 2px rgba(90,20,10,.52);
  box-shadow:
    0 0 0 3px rgba(255,253,247,.90),
    0 6px 16px rgba(176,58,46,.42),
    inset 0 1px 0 rgba(255,255,255,.28);
  animation: xj-read-in .5s cubic-bezier(.2,.9,.3,1) both, xj-read-glow 2.4s ease-in-out .5s infinite;
}
.xj-rite__read[hidden] { display: none; }
.xj-rite__read:hover {
  color: #FFFDF4;
  background: linear-gradient(180deg, #E24E37 0%, #BC4033 54%, #A02C20 100%);
  text-decoration: none;
}
/* 英文文案比中文长：两种按钮统一收一号，避免宽度压过签筒/签牌器型 */
.xj-rite--en .xj-rite__cup-slot .xj-rite__start { padding: 6px 11px; font-size: 12px; }
.xj-rite--en .xj-rite__read { padding: 5px 10px; font-size: 11.2px; letter-spacing: .02em; }
@keyframes xj-read-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.92); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes xj-read-glow {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(255,253,247,.90),
      0 6px 16px rgba(176,58,46,.42),
      inset 0 1px 0 rgba(255,255,255,.28);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(255,241,203,.96),
      0 8px 22px rgba(216,68,47,.56),
      0 0 20px rgba(224,160,60,.52),
      inset 0 1px 0 rgba(255,255,255,.32);
  }
}
@keyframes xj-qianpai-no-in { from { opacity: 0; } to { opacity: 1; } }
/* 筒口跃出（竖直）→ 腾空翻转 → 平躺落回案面右前侧 */
@keyframes xj-qianpai-fly {
  0%   { opacity: 0; bottom: 118%;  transform: translateX(-50%) rotate(-88deg) scale(.5); }
  15%  { opacity: 1; bottom: 128%;  transform: translateX(-50%) rotate(-64deg) scale(.9); }
  36%  { bottom: 138%; transform: translateX(-50%) rotate(-34deg) scale(1); }
  54%  { bottom: 133%; transform: translateX(-50%) rotate(-10deg) scale(1); }
  74%  { bottom: 102%; transform: translateX(-50%) rotate(4deg) scale(1); }
  88%  { bottom: 76%;  transform: translateX(-50%) rotate(1deg) scale(1); }
  100% { opacity: 1; bottom: 80.5%; transform: translateX(-50%) rotate(0deg) scale(1); }
}
@media (max-width: 560px) {
  .xj-rite__scene { gap: 12px; }
  .xj-rite__portrait { padding: 6px; }
  .xj-rite__portrait img { width: 118px; height: 177px; }
  .xj-rite__portrait::before, .xj-rite__portrait::after { left: -8px; right: -8px; height: 7px; }
  .xj-rite__portrait::before { top: -8px; }
  .xj-rite__portrait::after { bottom: -8px; }
  .xj-rite__couplet { width: 46px; height: 208px; padding: 16px 0; }
  .xj-rite__couplet-char { font-size: 20px; }
  .xj-rite__couplet--left, .xj-rite__couplet--right { min-width: 46px; }
  .xj-rite__couplet--wide { width: 78px; }
  .xj-rite__couplet-en { font-size: 10.6px; }
  .xj-rite__qianpai-no { font-size: 10.5px; }
  /* 窄屏：签筒上的开始按钮与签上的查看签批按钮同步缩一号 */
  .xj-rite__cup-slot .xj-rite__start { padding: 6px 10px; font-size: 12.4px; }
  .xj-rite__read { padding: 5px 10px; font-size: 11.6px; letter-spacing: .06em; }
}
.xj-rite__tip { font-size: 13.4px; color: var(--xj-muted); margin: 18px 0 14px; line-height: 1.9; }
/* T20：抽签页已移除「跳过动画」按钮（.xj-rite__skip），摇签全程为完整仪式。 */
/* 抽签动画字幕区：只承载动画与错误提示，签批已移到独立页 */
.xj-rite__stage { margin-top: 4px; }

/* ---------- T19 独立签批页 ---------- */
.xj-reading__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 14px; margin: 0 0 18px;
}
.xj-reading__bar--foot { margin: 24px 0 8px; justify-content: center; }
.xj-reading__bar--single { justify-content: center; }
.xj-reading__hint { font-size: 12.8px; color: var(--xj-muted); letter-spacing: .04em; }
.xj-rite__note {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--xj-line-2);
  font-size: 11.6px; line-height: 1.8; color: var(--xj-muted); opacity: .8;
}
.xj-draw-anim--rite { min-height: 60px; justify-content: center; }
/* 旧抽签页（无香案）回退用的 DOM 签筒：is-wishing 复用上方 xj-cup-breathe 关键帧 */
.xj-cup.is-wishing { animation: xj-cup-breathe 1.6s ease-in-out infinite; }

/* 签文区新增 */
.xj-draw__deck-sub { font-size: 11.8px; color: var(--xj-muted); margin-top: 6px; letter-spacing: .08em; }
.xj-draw__du {
  padding: 14px 16px; border-radius: var(--xj-r-sm);
  background: var(--xj-surface-2); border-left: 3px solid var(--xj-gold);
  font-family: var(--xj-serif); letter-spacing: .05em;
}
.xj-draw__deck-note {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--xj-line-2);
  font-size: 11.4px; line-height: 1.8; color: var(--xj-muted); opacity: .82;
}

/* ==========================================================================
   T4.2 诸葛测字（.xj-cezi）
   ========================================================================== */
.xj-cezi {
  --xj-cezi-accent: var(--xj-brass);
  max-width: 880px; margin: 0 auto;
}
.xj-cezi__head { text-align: center; margin-bottom: 26px; }
.xj-cezi__eyebrow {
  font-size: 11.6px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--xj-brass); margin-bottom: 10px;
}
.xj-cezi__title {
  font-family: var(--xj-serif); font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: .14em; color: var(--xj-ink); margin: 0 0 12px;
}
.xj-cezi__lead {
  max-width: 620px; margin: 0 auto;
  font-size: 14.4px; line-height: 1.95; color: var(--xj-ink-2); letter-spacing: .03em;
}

/* ── 输入区 ── */
.xj-cezi__form {
  padding: 26px 24px; border-radius: var(--xj-r-md, 14px);
  background: var(--xj-surface); border: 1px solid var(--xj-line-2);
  box-shadow: var(--xj-shadow-sm); text-align: center;
}
/* T23 输入提示：由 12px 灰字放大为朱砂色加粗提示（用户要求“显眼、有提示意义”） */
.xj-cezi__label {
  display: block; font-family: var(--xj-serif);
  font-size: 17px; font-weight: 700; letter-spacing: .1em; line-height: 1.5;
  color: var(--xj-vermilion); margin-bottom: 14px;
}
.xj-cezi__input {
  display: block; width: min(420px, 100%); margin: 0 auto;
  padding: 14px 18px; border-radius: var(--xj-r-sm, 8px);
  border: 1px solid var(--xj-line-3); background: var(--xj-paper);
  font-family: var(--xj-serif); font-size: 26px; letter-spacing: .34em;
  text-align: center; color: var(--xj-ink);
  transition: border-color .2s, box-shadow .2s;
}
.xj-cezi__input:focus {
  outline: none; border-color: var(--xj-brass);
  box-shadow: 0 0 0 3px rgba(169, 133, 47, .14);
}
.xj-cezi__hint {
  margin: 12px 0 0; font-size: 12px; line-height: 1.8; color: var(--xj-muted);
}
.xj-cezi__actions { margin-top: 18px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.xj-cezi__submit, .xj-cezi__again { letter-spacing: .22em; }
.xj-cezi__again { background: transparent; color: var(--xj-ink-2); border: 1px solid var(--xj-line-3); }
.xj-cezi__err {
  margin: 14px 0 0; font-size: 12.6px; color: var(--xj-vermilion);
  letter-spacing: .04em;
}
.xj-cezi__submit.is-busy { opacity: .68; pointer-events: none; }

/* ── 结果 ── */
.xj-cezi__stage { margin-top: 26px; }
.xj-cezi__loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 34px 0; font-size: 13.4px; color: var(--xj-muted); letter-spacing: .12em;
}
.xj-cezi__result {
  padding: 28px 26px 24px; border-radius: var(--xj-r-md, 14px);
  background: var(--xj-surface); border: 1px solid var(--xj-line-2);
  box-shadow: var(--xj-shadow); animation: xjCeziIn .5s ease both;
}
@keyframes xjCeziIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* 笔画演算条 */
.xj-cezi__calc {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding-bottom: 22px; border-bottom: 1px dashed var(--xj-line-2);
}
.xj-cezi__chars { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.xj-cezi__char {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 62px; padding: 10px 8px; border-radius: var(--xj-r-sm, 8px);
  background: var(--xj-surface-2); border: 1px solid var(--xj-line-2);
}
.xj-cezi__char.is-unknown { opacity: .55; border-style: dashed; }
.xj-cezi__char-glyph {
  font-family: var(--xj-serif); font-size: 30px; line-height: 1;
  color: var(--xj-ink); letter-spacing: 0;
}
.xj-cezi__char-strokes {
  font-size: 12px; color: var(--xj-brass); letter-spacing: .1em; font-weight: 600;
}
.xj-cezi__calc-meta {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center;
}
.xj-cezi__sum, .xj-cezi__no {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.xj-cezi__sum em, .xj-cezi__no em {
  font-style: normal; font-size: 11px; letter-spacing: .18em; color: var(--xj-muted);
}
.xj-cezi__sum b, .xj-cezi__no b {
  font-family: var(--xj-serif); font-size: 27px; color: var(--xj-ink); line-height: 1;
}
.xj-cezi__no b { color: var(--xj-brass); }
.xj-cezi__sep { font-size: 20px; color: var(--xj-faint-deco); }
.xj-cezi__level {
  padding: 5px 16px; border-radius: 999px; font-size: 13.4px;
  letter-spacing: .16em; font-family: var(--xj-serif);
}
.xj-lvl--best { background: rgba(176,58,46,.12); color: var(--xj-vermilion); }
.xj-lvl--good { background: rgba(169,133,47,.16); color: var(--xj-brass); }
.xj-lvl--fair { background: rgba(78,110,117,.14); color: var(--xj-azure); }
.xj-lvl--mid  { background: rgba(113,105,92,.12); color: var(--xj-muted); }
.xj-lvl--care { background: rgba(65,88,78,.14);  color: var(--xj-olive); }

/* 内容区块 */
.xj-cezi__block {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--xj-line-2);
}
.xj-cezi__block:first-of-type { border-top: none; }
.xj-cezi__block--poem { border-top: none; margin-top: 24px; padding-top: 0; }
.xj-cezi__block-title {
  font-family: var(--xj-serif); font-size: 13.4px; letter-spacing: .3em;
  color: var(--xj-brass); margin: 0 0 12px; font-weight: 500;
}
.xj-cezi__text {
  margin: 0; font-size: 14.6px; line-height: 2.05; color: var(--xj-ink-2);
  letter-spacing: .04em;
}
.xj-cezi__poem {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  padding: 20px 16px; border-radius: var(--xj-r-sm, 8px);
  background: var(--xj-surface-2); border-left: 3px solid var(--xj-brass);
}
.xj-cezi__poem-line {
  font-family: var(--xj-serif); font-size: 17px; letter-spacing: .16em;
  color: var(--xj-ink); line-height: 1.9;
}
.xj-cezi__block--du .xj-cezi__text {
  padding: 14px 16px; border-radius: var(--xj-r-sm, 8px);
  background: var(--xj-surface-2); border-left: 3px solid var(--xj-olive);
  font-family: var(--xj-serif); letter-spacing: .06em;
}
.xj-cezi__block--timing .xj-cezi__text { color: var(--xj-brass); font-weight: 600; letter-spacing: .08em; }
.xj-cezi__block--advice .xj-cezi__text {
  padding: 16px; border-radius: var(--xj-r-sm, 8px);
  background: linear-gradient(160deg, var(--xj-surface-2), var(--xj-surface-3));
  border: 1px solid var(--xj-line-2);
}
.xj-cezi__aspects {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.xj-cezi__aspect {
  padding: 13px 15px; border-radius: var(--xj-r-sm, 8px);
  background: var(--xj-surface-2); border: 1px solid var(--xj-line-2);
}
.xj-cezi__aspect-key {
  display: block; font-size: 11.6px; letter-spacing: .2em;
  color: var(--xj-brass); margin-bottom: 6px;
}
.xj-cezi__aspect-val { display: block; font-size: 13.6px; line-height: 1.85; color: var(--xj-ink-2); }
.xj-cezi__src {
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--xj-line-2);
  font-size: 11.4px; line-height: 1.85; color: var(--xj-muted); opacity: .84;
}
.xj-cezi__note {
  margin-top: 20px; text-align: center;
  font-size: 11.6px; line-height: 1.9; color: var(--xj-muted); opacity: .82;
}

/* 响应式 */
@media (max-width: 640px) {
  .xj-cezi__form { padding: 20px 16px; }
  .xj-cezi__result { padding: 22px 16px 20px; }
  .xj-cezi__aspects { grid-template-columns: 1fr; }
  .xj-cezi__input { font-size: 22px; letter-spacing: .26em; }
  .xj-cezi__poem-line { font-size: 15.6px; letter-spacing: .1em; }
}

/* 通用加载转圈（测字/抽签共用） */
.xj-spinner {
  display: inline-block; width: 16px; height: 16px; flex: 0 0 auto;
  border: 2px solid var(--xj-line-3, rgba(38,35,30,.16));
  border-top-color: var(--xj-brass);
  border-radius: 50%;
  animation: xjSpin .8s linear infinite;
}
@keyframes xjSpin { to { transform: rotate(360deg); } }

/* ==========================================================================
   T4.4 周易起卦仪式（净手 → 六掷铜钱 → 六爻成卦）
   ========================================================================== */
.xj-gua-rite { position: relative; }
.xj-gua-rite__head { text-align: center; margin-bottom: 24px; }
.xj-gua-rite__eyebrow {
  font-size: 12.4px; letter-spacing: .34em; color: var(--xj-gold-dk);
  text-transform: uppercase; margin-bottom: 10px;
}
.xj-gua-rite__title {
  font-family: var(--xj-serif); font-size: 25px; font-weight: 700; color: var(--xj-ink);
  letter-spacing: .2em; margin: 0 0 12px;
}
.xj-gua-rite__lead { margin: 0; font-size: 13.6px; line-height: 2; color: var(--xj-ink-2); }

/* 净手台：水盂 + 三枚铜钱 + 竹席 */
.xj-gua-rite__altar {
  position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 42px;
  padding: 18px 20px 22px; margin: 0 auto 22px; max-width: 460px;
  border-radius: var(--xj-r); border: 1px solid var(--xj-line-2);
  background: linear-gradient(170deg, #fffaf0, #fbf2df);
  box-shadow: var(--xj-shadow-sm);
}
.xj-gua-rite__altar.is-active { animation: xj-altar-glow 1.6s ease-in-out infinite; }
@keyframes xj-altar-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 87, 28, 0); }
  50% { box-shadow: 0 0 22px 2px rgba(226, 87, 28, .16); }
}
.xj-gua-rite__bowl {
  position: relative; width: 68px; height: 44px; border-radius: 0 0 34px 34px / 0 0 40px 40px;
  background: linear-gradient(165deg, #e8c377, #b57e3a);
  box-shadow: inset -6px -6px 14px rgba(120, 72, 30, .28);
}
.xj-gua-rite__bowl::before {
  content: ""; position: absolute; top: -3px; left: -4px; right: -4px; height: 10px;
  border-radius: 50%; background: rgba(84, 48, 8, .22);
}
.xj-gua-rite__water {
  position: absolute; top: -1px; left: 4px; right: 4px; height: 7px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(180, 214, 220, .9), rgba(120, 168, 178, .7));
}
.xj-gua-rite__coins { display: flex; gap: 10px; align-items: center; }
.xj-gua-rite__coin {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #f2d489, #cf9f4c 62%, #a87a30);
  box-shadow: 0 5px 12px rgba(120, 72, 30, .28), inset 0 0 0 2px rgba(255, 244, 220, .45);
  display: flex; align-items: center; justify-content: center;
}
.xj-gua-rite__coin::after {
  content: ""; position: absolute; inset: 11px; border-radius: 5px;
  border: 2px solid rgba(120, 72, 30, .42);
}
.xj-gua-rite__coin i {
  position: relative; z-index: 1; font-family: var(--xj-serif); font-style: normal;
  font-size: 13px; font-weight: 700; color: rgba(84, 48, 8, .75);
}
.xj-gua-rite__coin.is-tossing { animation: xj-coin-toss .5s ease-in-out; }
.xj-gua-rite__coin.is-tossed { box-shadow: 0 3px 8px rgba(120, 72, 30, .22), inset 0 0 0 2px rgba(255, 244, 220, .5); }
.xj-gua-rite__coin.is-moving {
  background: radial-gradient(circle at 32% 30%, #f6d9a2, #e09040 62%, #b3620f);
  box-shadow: 0 5px 14px rgba(226, 87, 28, .38), inset 0 0 0 2px rgba(255, 240, 210, .55);
}
.xj-gua-rite__mat {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 78%; height: 8px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(169, 133, 47, .10), rgba(169, 133, 47, .28), rgba(169, 133, 47, .10));
}

/* 六掷记录条 */
.xj-gua-rite__tosses {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
  max-width: 560px; margin: 0 auto 18px;
}
@media (max-width: 560px) {
  .xj-gua-rite__tosses { grid-template-columns: repeat(3, 1fr); }
}
.xj-gua-rite__toss {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; border-radius: var(--xj-r-sm);
  border: 1px solid var(--xj-line-2); background: var(--xj-surface);
  transition: border-color .3s, background .3s;
}
.xj-gua-rite__toss-pos { font-size: 12.4px; color: var(--xj-muted); font-weight: 600; letter-spacing: .1em; }
.xj-gua-rite__toss-name { font-family: var(--xj-serif); font-style: normal; font-size: 14px; font-weight: 700; color: var(--xj-muted); letter-spacing: .1em; min-height: 20px; }
.xj-gua-rite__toss.is-done { border-color: rgba(169, 133, 47, .45); background: rgba(169, 133, 47, .07); }
.xj-gua-rite__toss.is-done .xj-gua-rite__toss-name { color: var(--xj-gold-dk); }
.xj-gua-rite__toss.is-moving { border-color: rgba(226, 87, 28, .5); background: rgba(226, 87, 28, .08); }
.xj-gua-rite__toss.is-moving .xj-gua-rite__toss-name { color: #c04510; }

/* 六爻堆叠 */
.xj-gua-rite__stack {
  display: flex; flex-direction: column; gap: 7px; align-items: center;
  min-height: 152px; justify-content: flex-end; margin-bottom: 6px;
}
.xj-gua-rite__tip {
  text-align: center; font-size: 13.2px; letter-spacing: .12em; color: var(--xj-gold-dk);
  min-height: 22px; margin: 14px 0 18px;
}
.xj-gua-rite__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.xj-gua-rite__stage { margin-top: 20px; }
.xj-gua-rite__stage:empty { display: none; }
.xj-gua-rite__stage .xj-gua { animation: xj-fade-up .5s ease-out; }
@keyframes xj-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* T32：`.xj-gua-rite__note` 规则随该节点一并撤除 —— 它与结果区
   `.xj-gua__insight-src` 逐字重复，已从 render.php 移除（见该处注释）。 */
.xj-gua-rite .xj-btn--primary { padding: 12px 34px; letter-spacing: .16em; }

/* ==========================================================================
   T4.4 白话解读话术层（本卦/动爻/之卦的当代解读）
   ========================================================================== */
.xj-gua__insight {
  margin-top: 22px; padding: 20px 22px 18px;
  border-radius: var(--xj-r); border: 1px solid var(--xj-line);
  background: linear-gradient(168deg, #fffdf7, #fbf6ea);
  box-shadow: var(--xj-shadow-sm);
  border-left: 3px solid var(--xj-gold);
}
.xj-gua__insight--good { border-left-color: #b8721c; }
.xj-gua__insight--mid  { border-left-color: #7d9464; }
.xj-gua__insight--care { border-left-color: #4a7a8c; }

.xj-gua__insight-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.xj-gua__insight-title {
  font-family: var(--xj-serif); font-size: 17px; font-weight: 700; color: var(--xj-ink);
  letter-spacing: .16em; margin: 0;
}
.xj-gua__tone {
  padding: 4px 14px; border-radius: 999px; font-size: 12.2px; font-weight: 700; letter-spacing: .16em;
  color: #fff; background: linear-gradient(135deg, #8a8272, #6b6455);
}
.xj-gua__tone--good { background: linear-gradient(135deg, #e0952f, #b8721c); }
.xj-gua__tone--mid  { background: linear-gradient(135deg, #7d9464, #667b4d); }
.xj-gua__tone--care { background: linear-gradient(135deg, #4a7a8c, #33566b); }

.xj-gua__insight-block { margin-bottom: 16px; }
.xj-gua__insight-block:last-of-type { margin-bottom: 10px; }
.xj-gua__insight-sub {
  font-size: 12.6px; font-weight: 700; color: var(--xj-gold-dk);
  letter-spacing: .16em; margin-bottom: 8px;
  padding-left: 10px; border-left: 2px solid rgba(169, 133, 47, .5);
}
.xj-gua__insight-text {
  margin: 0 0 7px; font-size: 13.6px; line-height: 2.05; color: var(--xj-ink-2);
}
.xj-gua__insight-text:last-child { margin-bottom: 0; }
.xj-gua__insight-src {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--xj-line-2);
  font-size: 12px; line-height: 1.9; color: var(--xj-muted);
}

@media (max-width: 640px) {
  .xj-gua__insight { padding: 18px 16px 16px; }
  .xj-gua__insight-title { font-size: 15.6px; }
  .xj-gua__insight-text { font-size: 13.2px; }
  .xj-gua-rite__title { font-size: 21px; }
  .xj-gua-rite__altar { gap: 24px; padding: 14px 12px 18px; }
  .xj-gua-rite__coin { width: 34px; height: 34px; }
  .xj-gua-rite__coin::after { inset: 9px; }
}