/* 问事三线（梅花／奇门／六爻）起卦仪式感（2026-10-01，网页对齐 iOS 的交互与信息，用网页自己的纸墨体系落地）。
   页头此刻 · 所问书写感 · 成卦页 · 落款 · 卦盘外壳（材质带＋纸面）· 往下看解读。
   合盘（/he）也引入本文件，但只用成卦页这一段（.cast-ritual.is-he 成盘页），结果页版式不动。 */

/* —— 表单页头「此刻」：先留一行的位，干支回来后原地淡入，不推挤标题与表单 —— */
.cast-now {
  display: flex;
  min-height: 22px;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: -12px 0 22px;
  color: var(--olive);
  font: 400 13px/22px var(--sans);
  letter-spacing: .06em;
  opacity: 0;
  transition: opacity 250ms ease;
}
.cast-now.is-ready { opacity: 1; }
.cast-now .cn-label { color: var(--seal); font-weight: 500; letter-spacing: .2em; }
.cast-now .cn-pillars { color: var(--near-black); font-family: var(--display); font-size: 14px; letter-spacing: .08em; }
.cast-now .cn-clock { color: var(--stone); font-variant-numeric: tabular-nums; }

/* 所问保留原来的输入框与正文字号（不做去框衬线的「书写感」）：iOS 09-30 当晚试过又改回——
   去掉底框、放大成衬线后，占位句读起来像已写好的正文，用户看不出这里能点。 */

/* 梅花两数放大，标签写明取上卦／取下卦 */
#gua-form .gua-nums label { color: var(--stone); }
#gua-form .gua-nums label span small { margin-left: 8px; color: var(--seal); font-size: 11px; letter-spacing: .16em; }
#gua-form .gua-nums :is(#gua-n1, #gua-n2) {
  min-height: 52px;
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

/* —— 成卦页：纸面上一张卦笺，停到正文第一字到达 —— */
.cast-ritual {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    repeating-linear-gradient(0deg, rgba(35, 32, 28, .012) 0 1px, transparent 1px 5px),
    var(--parchment);
  opacity: 0;
  transition: opacity 280ms ease;
}
.cast-ritual.is-in { opacity: 1; }
.cast-ritual.is-out { opacity: 0; pointer-events: none; }
.cr-sheet {
  position: relative;
  display: flex;
  width: min(540px, 100%);
  min-height: min(660px, calc(100vh - 48px));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 72px 32px 84px;
  border: 1px solid var(--border);
  border-top: 3px solid #2b2b2f;
  background: #f7f6f3;
  text-align: center;
}
.cr-collapse {
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  color: var(--stone);
  font: 400 14px/1 var(--sans);
  letter-spacing: .12em;
  cursor: pointer;
}
.cr-collapse:hover { color: var(--seal); }
.cr-question p { margin: 0 0 8px; color: var(--stone); font: 500 11px/1.4 var(--sans); letter-spacing: .3em; }
.cr-question h2 {
  display: -webkit-box;
  max-width: 22em;
  margin: 0;
  overflow: hidden;
  color: var(--near-black);
  font: 500 22px/1.55 var(--display);
  letter-spacing: .04em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cr-method { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cr-method li {
  color: var(--olive);
  font: 400 14px/1.6 var(--sans);
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}
.cr-method li.on { opacity: 1; transform: none; }
.cr-yao { display: grid; height: 150px; align-content: center; gap: 12px; justify-items: center; }
.cr-yao > i { display: block; opacity: 0; transform: translateY(8px); transition: opacity 260ms ease-out, transform 260ms ease-out; }
.cr-yao > i.on { opacity: 1; transform: none; }
.cr-bar { display: flex; gap: 20px; transition: transform 260ms ease-out; }
.cr-bar b { display: block; width: 120px; height: 7px; border-radius: 3.5px; background: var(--near-black); transition: background 260ms ease-out; }
.cr-yao .yin .cr-bar b { width: 50px; }
.cr-bar.hot { transform: scale(1.06); }
.cr-bar.hot b { background: var(--seal); }
.cr-grid { position: relative; display: grid; grid-template-columns: repeat(3, 76px); grid-auto-rows: 76px; }
.cr-frame, .cr-vline, .cr-hline { position: absolute; pointer-events: none; opacity: 0; transition: opacity 260ms ease-out; }
.cr-frame { inset: 0; border: 1.5px solid var(--near-black); border-radius: 2px; }
.cr-vline { top: 0; bottom: 0; left: 33.333%; right: 33.333%; border-right: 1px solid rgba(24, 24, 26, .55); border-left: 1px solid rgba(24, 24, 26, .55); }
.cr-hline { left: 0; right: 0; top: 33.333%; bottom: 33.333%; border-top: 1px solid rgba(24, 24, 26, .55); border-bottom: 1px solid rgba(24, 24, 26, .55); }
.cr-frame.on, .cr-vline.on, .cr-hline.on { opacity: 1; }
.cr-palace {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 4px;
  color: var(--stone);
  font: 400 11px/1.2 var(--sans);
  white-space: nowrap;
  opacity: 0;
  transform: scale(.9);
  transition: opacity 240ms ease-out, transform 240ms ease-out;
}
.cr-palace span { overflow: hidden; text-overflow: ellipsis; }
.cr-palace .is-door { color: var(--near-black); font-weight: 500; }
.cr-palace.on { opacity: 1; transform: none; }
.cr-finale { display: grid; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity 400ms ease-out, transform 400ms ease-out; }
.cast-ritual.is-settled .cr-finale { opacity: 1; transform: none; }
.cr-caption { margin: 0; color: var(--near-black); font: 500 30px/1.2 var(--display); letter-spacing: .2em; text-indent: .2em; }
.cr-name { min-height: 1.5em; margin: 0; color: var(--near-black); font: 500 22px/1.5 var(--display); letter-spacing: .08em; }
.cr-derived { min-height: 1.6em; margin: 0; color: var(--stone); font: 400 14px/1.6 var(--sans); letter-spacing: .06em; }
.cr-waiting {
  position: absolute;
  right: 0;
  bottom: 26px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  color: var(--stone);
  font: 400 13px/1.5 var(--sans);
  letter-spacing: .08em;
  opacity: 0;
  transition: opacity 300ms ease;
}
.cast-ritual.is-settled .cr-waiting { opacity: 1; }
.cast-ritual.has-text .cr-waiting { opacity: 0; }
.cr-waiting i { width: 12px; height: 12px; border: 1.5px solid var(--border); border-top-color: var(--near-black); border-radius: 50%; animation: cr-spin 900ms linear infinite; }
@keyframes cr-spin { to { transform: rotate(360deg); } }

/* —— 合盘成盘页：两日主相对 → 生克一笔 → 十神互看 → 合冲（连线或计数）→ 盘成 —— */
.cast-ritual.is-he .cr-sheet { gap: 24px; }
/* 纸面是 flex 列居中：不给定宽，成盘图会被收成内容宽、连线图缩回 300 像素的默认尺寸 */
.cast-ritual.is-he .cr-emblem { width: 100%; }
.cr-syn { display: grid; width: 100%; gap: 22px; justify-items: center; }
.cr-duo { display: grid; width: 100%; max-width: 460px; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); column-gap: 8px; align-items: center; }
.cr-side {
  display: grid;
  min-width: 0;
  gap: 4px;
  justify-items: center;
  opacity: 0;
  transform: translateX(-14px) scale(1.06);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.cr-side.is-b { transform: translateX(14px) scale(1.06); }
.cr-side.on { opacity: 1; transform: none; }
.cr-glyph { display: flex; align-items: baseline; gap: 3px; margin: 0; white-space: nowrap; }
.cr-glyph b { color: var(--near-black); font: 500 64px/1.1 var(--display); }
.cr-glyph small { color: var(--stone); font: 400 24px/1 var(--display); }
.cr-who {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--stone);
  font: 400 13px/1.5 var(--sans);
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-rel { display: grid; gap: 4px; justify-items: center; color: var(--near-black); opacity: 0; transition: opacity 300ms ease-out; }
.cr-rel.on { opacity: 1; }
.cr-rel.is-ke { color: var(--seal); }
.cr-verb { font: 500 22px/1.3 var(--display); letter-spacing: .04em; }
.cr-arrow { display: block; width: 96px; height: 12.8px; overflow: visible; }
.cr-arrow path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.cr-rel-text { color: var(--stone); font: 400 11px/1.4 var(--sans); letter-spacing: .08em; white-space: nowrap; }
/* 线段「画出来」：长度由 JS 量好写进行内样式，点亮时收到 0。 */
.cr-draw { transition: stroke-dashoffset 550ms ease-out; }
.cr-draw.on { stroke-dashoffset: 0 !important; }
.cr-look {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  margin: 0;
  color: var(--stone);
  font: 400 14px/1.6 var(--sans);
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
}
.cr-look.on { opacity: 1; transform: none; }
.cr-look span { white-space: nowrap; }
.cr-look b { margin-left: 2px; color: var(--near-black); font-weight: 500; }
.cr-look.is-stacked { flex-direction: column; align-items: center; }
.cr-look.is-stacked i { display: none; }
.cr-cross { width: 100%; max-width: 380px; opacity: 0; transform: translateY(6px); transition: opacity 300ms ease-out, transform 300ms ease-out; }
.cr-cross.on { opacity: 1; transform: none; }
.cr-cross-map { display: block; width: 100%; height: auto; overflow: visible; }
.cr-cross-map mask path { fill: none; stroke: #fff; stroke-width: 6; transition-duration: 320ms; }
.cr-edge { fill: none; stroke-linecap: round; }
.cr-edge.is-he { stroke: var(--seal); stroke-width: 1.6; }
.cr-edge.is-chong { stroke: rgba(24, 24, 26, .62); stroke-width: 1.2; stroke-dasharray: 4 3; }
.cr-node { fill: #f7f6f3; stroke: rgba(24, 24, 26, .4); stroke-width: .8; }
.cr-zhi { fill: var(--near-black); font: 500 16px var(--display); text-anchor: middle; }
.cr-pos { fill: var(--stone); font: 400 10px var(--sans); text-anchor: middle; }
.cr-row-name { fill: var(--stone); font: 400 11px var(--sans); }
.cr-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.cr-counts div { display: grid; gap: 2px; justify-items: center; }
.cr-counts dd { margin: 0; color: var(--near-black); font: 500 30px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.cr-counts .is-he dd { color: var(--seal); }
.cr-counts dt { color: var(--stone); font: 400 11px/1.5 var(--sans); letter-spacing: .12em; }
.cr-counts .is-zero { opacity: .5; }

/* —— 落款：所问原句＋问于某时 —— */
.cast-signature { margin: 0 0 22px; padding: 2px 0 16px; border-bottom: 1px solid var(--border); }
.cast-signature p { margin: 0; }
.cast-signature .cs-eyebrow { margin-bottom: 6px; color: var(--stone); font: 500 11px/1.4 var(--sans); letter-spacing: .3em; }
.cast-signature .cs-question { color: var(--near-black); font: 500 22px/1.55 var(--display); letter-spacing: .03em; overflow-wrap: anywhere; }
.cast-signature .cs-pillars { margin-top: 12px; color: var(--near-black); font: 400 14px/1.6 var(--display); letter-spacing: .08em; }
.cast-signature .cs-question + .cs-pillars { margin-top: 12px; }
.cast-signature .cs-clock { margin-top: 2px; color: var(--stone); font: 400 12px/1.6 var(--sans); letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* —— 卦盘外壳：顶部材质带接住那一卦（卦画／局名大字），下面纸面放专业内容 —— */
.cast-board { margin: 0 0 26px; overflow: hidden; border: 1px solid var(--border); border-radius: 2px; background: rgba(250, 248, 244, .78); }
.cb-band {
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 28px 30px;
  color: #f3eee6;
  background-color: #2b2622;
  background-position: center;
  background-size: cover;
}
.cast-board.is-fire .cb-band { background-image: linear-gradient(180deg, rgba(20, 18, 16, .22), rgba(20, 18, 16, .66)), url('/assets/bookshelf/brand-fire.webp'); }
.cast-board.is-metal .cb-band { background-image: linear-gradient(180deg, rgba(20, 18, 16, .3), rgba(20, 18, 16, .7)), url('/assets/bookshelf/brand-metal.webp'); }
.cast-board.is-wood .cb-band { background-image: linear-gradient(180deg, rgba(20, 18, 16, .26), rgba(20, 18, 16, .68)), url('/assets/bookshelf/brand-wood.webp'); }
.cb-title { min-width: 0; }
.cb-eyebrow { margin: 0 0 6px; color: rgba(243, 238, 230, .72); font: 500 11px/1.4 var(--sans); letter-spacing: .26em; }
.cb-name { margin: 0; color: #f8f4ee; font: 400 38px/1.25 var(--display); letter-spacing: .06em; }
.cb-name i { margin: 0 .3em; color: rgba(243, 238, 230, .66); font-size: .55em; font-style: normal; }
.cb-detail { margin: 8px 0 0; color: rgba(243, 238, 230, .84); font: 400 13px/1.75 var(--sans); letter-spacing: .05em; white-space: pre-line; }
.cb-pair { display: flex; align-items: center; gap: 14px; flex: none; }
.cb-pair > em { color: rgba(243, 238, 230, .66); font: 400 14px/1 var(--display); font-style: normal; }
.cb-pair .cast-yao + em + .cast-yao { opacity: .8; }
.cb-paper { padding: 22px 26px 6px; }

/* 卦画 */
.cast-yao { display: grid; gap: 6px; flex: none; }
.cast-yao i { display: flex; gap: 7px; }
.cast-yao b { display: block; width: 60px; height: 6px; border-radius: 1.5px; background: var(--near-black); }
.cast-yao .yin b { width: 26.5px; }
.cast-yao .hot b { background: var(--seal); }
.cb-band .cast-yao b { background: #f3eee6; }
.cb-band .cast-yao .hot b { background: #d98a80; }
.cast-yao.is-hero { gap: 9px; }
.cast-yao.is-hero i { gap: 10px; }
.cast-yao.is-hero b { width: 92px; height: 9px; }
.cast-yao.is-hero .yin b { width: 41px; }
.cast-yao.is-pair { gap: 7px; }
.cast-yao.is-pair i { gap: 8px; }
.cast-yao.is-pair b { width: 66px; height: 7px; }
.cast-yao.is-pair .yin b { width: 29px; }

/* 纸面一行小项 */
.cast-facts { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid var(--border-soft); }
.cast-facts div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cast-facts dt { color: var(--stone); font: 500 11px/1.6 var(--sans); letter-spacing: .18em; white-space: nowrap; }
.cast-facts dd { margin: 0; color: var(--near-black); font: 400 14.5px/1.6 var(--sans); font-variant-numeric: tabular-nums; }
.cast-facts.is-rows { display: grid; gap: 4px; }
.cast-facts.is-rows dt { width: 3.4em; }

/* —— 梅花：互卦／变卦两卡、体用关系图 —— */
.gua-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 22px; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.gua-duo .trio-card + .trio-card { border-left: 1px solid var(--border-soft); }
.gua-tiyong { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; margin: 0 0 14px; }
.gua-tiyong .ty-side { display: grid; justify-items: center; gap: 3px; padding: 12px 6px; border: 1px solid var(--border-soft); background: rgba(255, 255, 255, .32); }
.gua-tiyong .ty-side small { color: var(--stone); font: 500 11px/1.4 var(--sans); letter-spacing: .18em; }
.gua-tiyong .ty-side b { color: var(--near-black); font: 500 20px/1.3 var(--display); letter-spacing: .08em; }
.gua-tiyong .ty-arrow { color: var(--near-black); font: 500 14px/1 var(--sans); letter-spacing: .08em; white-space: nowrap; }
.gua-tiyong .ty-arrow.is-ke { color: var(--seal); }

/* —— 奇门：材质带小九宫、宫角单字 —— */
.cb-grid { display: grid; flex: none; grid-template-columns: repeat(3, 26px); grid-auto-rows: 26px; border: 1px solid rgba(243, 238, 230, .72); }
.cb-grid i { border: .5px solid rgba(243, 238, 230, .55); }
.cb-grid i.lit { background: rgba(217, 138, 128, .55); }
.qm-corners { position: absolute; top: 8px; right: 8px; display: flex; gap: 3px; }
.qm-corner { display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 2px; border: 1px solid var(--border); border-radius: 2px; color: var(--stone); font: 400 11px/1 var(--sans); }
.qm-corner.is-strong { border-color: var(--seal); background: var(--seal); color: #fbf8f3; }
.qm-cell.is-self, .qm-cell.is-matter { box-shadow: inset 0 0 0 1px rgba(154, 70, 63, .55); }

/* —— 六爻：六行等高装卦表 —— */
.ly-table { margin: 0 0 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lyt-row {
  display: grid;
  grid-template-columns: 44px 112px 64px 76px 18px 70px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  height: 48px;
  border-bottom: 1px solid var(--border-soft);
}
.lyt-row:last-child { border-bottom: 0; }
.lyt-god { color: var(--stone); font: 400 12px/1 var(--sans); letter-spacing: .08em; white-space: nowrap; }
.lyt-rel { color: var(--near-black); font: 400 15px/1 var(--display); white-space: nowrap; }
.lyt-rel b { font-weight: 600; }
.lyt-state { display: flex; gap: 4px; color: var(--stone); font: 400 12px/1 var(--sans); white-space: nowrap; }
.lyt-state em { color: var(--near-black); font-style: normal; }
.lyt-state em.warn { color: var(--seal); }
.lyt-yao { display: flex; gap: 8px; }
.lyt-yao b { display: block; width: 72px; height: 7px; border-radius: 1px; background: var(--near-black); }
.lyt-yao.yin b { width: 32px; }
.lyt-row.moving .lyt-yao b { background: var(--seal); }
.lyt-move { color: var(--seal); font: 400 14px/1 var(--sans); text-align: center; }
.lyt-marks { display: flex; gap: 3px; }
.lyt-marks span { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--near-black); border-radius: 50%; color: var(--near-black); font: 400 11px/1 var(--sans); }
.lyt-marks .ying { border-color: var(--stone); color: var(--stone); }
.lyt-marks .yong { border-color: var(--seal); color: var(--seal); }
.lyt-marks .fu { border-color: var(--gold); color: var(--gold); }
.lyt-change { padding-left: 10px; color: var(--olive); font: 400 13px/1 var(--sans); white-space: nowrap; }
.lyt-change b { margin-left: 3px; color: var(--near-black); font: 600 14px/1 var(--display); }
.ly-fulines, .ly-legend { display: grid; gap: 4px; margin: 0 0 12px; color: var(--stone); font: 400 12.5px/1.7 var(--sans); }
.ly-fulines p, .ly-legend p { margin: 0; }
.ly-fulines b { margin-right: 10px; color: var(--gold); font-weight: 500; letter-spacing: .16em; }
.ly-fulines span { color: var(--dark-warm); }
.ly-legend { margin-bottom: 22px; }
.ly-legend .ly-tag { margin-left: 3px; }

/* —— 往下看解读 —— */
/* 正文开头滚到顶时让出顶栏 */
:is(#gua-reading, #qimen-reading, #liuyao-reading) { scroll-margin-top: 76px; }
.cast-answer-pill {
  position: fixed;
  left: 50%;
  bottom: 22px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  border: 1px solid rgba(154, 70, 63, .38);
  border-radius: 999px;
  background: var(--ivory);
  box-shadow: 0 4px 16px rgba(24, 24, 26, .1);
  color: var(--seal);
  font: 500 13px/1 var(--sans);
  letter-spacing: .08em;
  cursor: pointer;
  transform: translateX(-50%);
}
.cast-answer-pill span { font-size: 12px; }

@media (max-width: 700px) {
  .cast-now { margin: -4px 0 12px; font-size: 12px; gap: 2px 10px; }
  .cast-now .cn-pillars { font-size: 13px; }
  #gua-form .gua-nums :is(#gua-n1, #gua-n2) { font-size: 24px; }

  .cast-ritual { padding: 0; }
  .cr-sheet { width: 100%; min-height: 100%; gap: 22px; padding: 64px 22px 76px; border: 0; }
  .cr-question h2 { font-size: 19px; }
  .cr-method li { font-size: 13px; }
  .cast-ritual.is-he .cr-sheet { gap: 20px; }
  .cr-syn { gap: 18px; }
  .cr-duo { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); column-gap: 4px; }
  .cr-arrow { width: 74px; height: 9.9px; }
  .cr-glyph b { font-size: 56px; }
  .cr-glyph small { font-size: 21px; }
  .cr-look { font-size: 13.5px; }
  .cr-counts dd { font-size: 26px; }

  .cast-signature .cs-question { font-size: 19px; }
  .cb-band { gap: 18px; padding: 20px 18px; }
  .cb-name { font-size: 28px; }
  .cb-detail { font-size: 12px; }
  .cb-paper { padding: 16px 14px 4px; }
  .cast-yao.is-hero { gap: 7px; }
  .cast-yao.is-hero b { width: 64px; height: 7px; }
  .cast-yao.is-hero .yin b { width: 28px; }
  .cast-yao.is-hero i { gap: 8px; }
  .cast-yao.is-pair b { width: 44px; height: 6px; }
  .cast-yao.is-pair .yin b { width: 19px; }
  .cast-yao.is-pair i { gap: 6px; }
  .cast-yao.is-pair { gap: 6px; }
  .cb-pair { gap: 9px; }
  .ly-band { flex-direction: column; align-items: flex-start; }
  .cb-grid { grid-template-columns: repeat(3, 20px); grid-auto-rows: 20px; }
  .cast-facts { gap: 4px 18px; }
  .cast-facts dd { font-size: 13.5px; }
  .gua-tiyong { gap: 6px; }
  .gua-tiyong .ty-arrow { font-size: 12.5px; letter-spacing: 0; }
  .qm-corners { top: 5px; right: 5px; gap: 2px; }
  .qm-corner { min-width: 16px; height: 16px; font-size: 10px; }

  .lyt-row { grid-template-columns: 24px 74px 26px 44px 12px minmax(0, 1fr) auto; gap: 4px; height: 44px; }
  .lyt-god { font-size: 11px; letter-spacing: 0; }
  .lyt-rel { font-size: 13px; letter-spacing: 0; }
  .lyt-state { flex-direction: column; gap: 2px; font-size: 10.5px; }
  .lyt-yao { gap: 5px; }
  .lyt-yao b { width: 44px; height: 6px; }
  .lyt-yao.yin b { width: 19.5px; }
  .lyt-move { font-size: 12px; }
  .lyt-marks { gap: 2px; }
  .lyt-marks span { width: 17px; height: 17px; font-size: 10px; }
  .lyt-change { padding-left: 0; font-size: 11.5px; text-align: right; }
  .lyt-change b { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cast-now, .cast-ritual, .cr-method li, .cr-yao > i, .cr-palace, .cr-finale,
  .cr-side, .cr-rel, .cr-draw, .cr-look, .cr-cross { transition: none; }
  .cr-waiting i { animation: none; }
}