/* ============================================================
   命运呐 · Phase 1 视觉立骨
   Token 来源：《设计与玩法规划.md》—— 玄夜为地，灵光为神
   ============================================================ */

:root {
  --void: #0a0812;
  --void-2: #141021;
  --void-3: #1d1730;
  --line: rgba(160, 140, 255, .16);
  --ink: #f4f1ff;
  --ink-dim: #a79ecc;
  --ink-faint: #6f668f;
  --cinnabar: #ff4a3c;
  --cinnabar-deep: #e63b2e;
  --gold: #e8c56e;
  --jade: #57d99a;
  --holo-a: #7b6cff;
  --holo-b: #ff7adf;
  --holo-c: #6fe0ff;
  /* 自托管 Noto Serif SC（unicode-range 分片，按需加载）；Apple 设备有 Songti 兜底 */
  --serif: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", "STSong", "SimSun", serif;
  --sans: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system, sans-serif;
  --r-lg: 20px;
  --r-md: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }
body {
  background: #050409;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font-family: inherit; color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--holo-c);
  outline-offset: 2px;
}

.holo-text {
  background: linear-gradient(110deg, var(--holo-a), var(--holo-b) 45%, var(--holo-c) 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: holoshift 6s ease-in-out infinite alternate;
}
@keyframes holoshift { from { background-position: 0 0; } to { background-position: 100% 0; } }

/* ============ 舞台与手机框 ============ */
.stage {
  height: 100dvh;
  display: grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(60% 50% at 50% 0%, #17102b 0%, transparent 70%),
    #050409;
}
.amb {
  position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none;
}
.amb-1 { width: 420px; height: 420px; left: 8%; top: 12%; background: rgba(123, 108, 255, .16); }
.amb-2 { width: 380px; height: 380px; right: 6%; bottom: 8%; background: rgba(255, 122, 223, .1); }

.device {
  position: relative;
  width: min(430px, 100vw);
  height: min(100dvh, 900px);
  background: var(--void);
  border-radius: 44px;
  border: 1px solid rgba(180, 160, 255, .18);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7), 0 0 80px rgba(123, 108, 255, .1);
  overflow: hidden;
}
.device::after {
  content: ""; position: absolute; inset: 0; z-index: 90;
  pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 500px) {
  .device { width: 100vw; height: 100dvh; border-radius: 0; border: none; }
  .amb { display: none; }
}

#app { position: absolute; inset: 0; }

/* ============ 视图容器 ============ */
#views { position: absolute; inset: 0; }
.view {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 26px 20px 120px;
  display: none;
  scrollbar-width: none;
}
.view::-webkit-scrollbar { display: none; }
.view.active { display: block; animation: viewIn .3s ease-out; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.view-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 20px;
}
.vh-date { margin: 0; font-size: 12px; letter-spacing: .22em; color: var(--ink-faint); }
.vh-title { margin: 4px 0 0; font-family: var(--serif); font-weight: 900; font-size: 26px; line-height: 1.3; }
.vh-logo { font-family: var(--serif); font-weight: 900; font-size: 13px; color: var(--ink-faint); letter-spacing: .3em; padding-top: 6px; }

/* ============ Tab Bar ============ */
.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  background: rgba(10, 8, 18, .82);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1;
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0 5px;
  color: var(--ink-faint);
  font-size: 11px; letter-spacing: .12em;
  border-radius: 12px;
  transition: color .2s;
  min-height: 52px;
}
.tab.on { color: var(--gold); }
.tab.on svg { filter: drop-shadow(0 0 8px rgba(232, 197, 110, .55)); }
.tab:active { transform: scale(.96); }

/* ============ 通用组件 ============ */
.chip {
  font-size: 12px; letter-spacing: .1em;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  background: rgba(123, 108, 255, .07);
  display: inline-block;
}
.chip-hot { border-color: rgba(255, 74, 60, .4); color: #ffb3ac; background: rgba(255, 74, 60, .08); }

.btn {
  border: none; cursor: pointer;
  border-radius: 999px;
  font-size: 15px; letter-spacing: .08em;
  padding: 12px 26px;
  transition: transform .15s, box-shadow .2s, opacity .2s;
  min-height: 46px;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(160deg, #ff6a5c, var(--cinnabar-deep) 75%);
  color: #fff;
  box-shadow: 0 8px 26px rgba(255, 74, 60, .32);
  font-weight: 600;
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-dim);
}
.btn-danger {
  background: transparent;
  border: 1px solid rgba(255, 74, 60, .4);
  color: #ff9d94;
  font-size: 13px;
}
.btn-big { padding: 15px 44px; font-size: 16px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(123, 108, 255, .08);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: -1px; }

/* 宜忌（今日与批文共用） */
.yiji { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.yiji-col b { font-family: var(--serif); font-size: 17px; font-weight: 900; display: block; margin-bottom: 4px; }
.yi-t { color: var(--jade); }
.ji-t { color: var(--cinnabar); }
.yiji-col ul { margin: 0; padding: 0; list-style: none; }
.yiji-col li {
  font-size: 13.5px; color: var(--ink-dim);
  padding: 7px 0 7px 16px; position: relative;
  border-top: 1px dashed rgba(160, 140, 255, .12);
}
.yiji-col li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .5;
}
.boost { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.boost-item {
  font-size: 12.5px; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px;
  background: rgba(123, 108, 255, .05);
}

/* ============ 今日 ============ */
/* 首屏与法坛底图同为一体（.today-scene 铺底），此处只管排版 */
.score-hero {
  position: relative;
  padding: 6px 24px 20px;
  text-align: center;
  margin-bottom: 8px;
}
.sh-label { margin: 0; font-size: 11px; letter-spacing: .4em; color: var(--ink-faint); text-indent: .4em; }
.sh-num {
  font-family: var(--serif); font-weight: 900;
  font-size: 88px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  filter: drop-shadow(0 0 26px rgba(123, 108, 255, .35));
}
/* 大数字间歇扫光：白色高光带叠在全息渐变上（同为 clip:text），11s 内快扫两次，其余时间停在字外 */
.sh-num.holo-text {
  background:
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .92) 50%, transparent 60%),
    linear-gradient(110deg, var(--holo-a), var(--holo-b) 45%, var(--holo-c) 80%);
  background-size: 250% 100%, 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: numHoloSweep 11s linear infinite;
}
@keyframes numHoloSweep {
  0%     { background-position: 0% 0, 0% 0; }
  30%    { background-position: 0% 0, 60% 0; }
  38%    { background-position: 100% 0, 76% 0; }
  38.01% { background-position: 0% 0, 76% 0; }
  50%    { background-position: 0% 0, 100% 0; }
  74%    { background-position: 0% 0, 52% 0; }
  82%    { background-position: 100% 0, 36% 0; }
  82.01% { background-position: 0% 0, 36% 0; }
  100%   { background-position: 0% 0, 0% 0; }
}
.sh-subs { display: flex; justify-content: center; gap: 18px; font-size: 13px; color: var(--ink-faint); }
.sh-subs b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.sh-line {
  margin: 10px 0 0; font-size: 13.5px; color: var(--ink-dim);
  border-top: 1px dashed rgba(160, 140, 255, .16);
  padding-top: 10px;
  font-family: var(--serif);
}
/* 每日题壁：浮在法坛圆盘上方的一句小字 */
.sh-slogan {
  margin: 7px 0 0;
  font-size: 11px; letter-spacing: .14em;
  color: var(--gold);
  opacity: .78;
  font-family: var(--serif);
  text-shadow: 0 1px 8px rgba(10, 8, 18, .9);
}

.yiji-card {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--void-2);
  padding: 20px;
  margin-bottom: 16px;
}

.cta-lot {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(255, 74, 60, .18), transparent 55%),
    var(--void-2);
  padding: 18px 20px;
  cursor: pointer;
  text-align: left;
  transition: transform .15s;
}
.cta-lot:active { transform: scale(.98); }
.cl-txt b { font-family: var(--serif); font-size: 17px; display: block; }
.cl-txt small { color: var(--ink-faint); font-size: 12.5px; }
.cl-go {
  flex-shrink: 0;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 900; font-size: 15px;
  color: #fff;
  background: linear-gradient(160deg, #ff6a5c, var(--cinnabar-deep));
  box-shadow: 0 8px 22px rgba(255, 74, 60, .4);
}

/* ============ 问事大厅 ============ */
.hero-play {
  width: 100%;
  display: flex; align-items: center; gap: 18px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(100% 140% at 0% 0%, rgba(123, 108, 255, .24), transparent 55%),
    linear-gradient(165deg, #1c1436, #110d22 70%);
  padding: 22px 20px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .4);
  transition: transform .15s;
}
.hero-play:active { transform: scale(.98); }
.hp-tube { position: relative; width: 62px; height: 84px; flex-shrink: 0; }
.hp-body {
  position: absolute; bottom: 0; left: 6px; right: 6px; height: 56px;
  border-radius: 8px 8px 12px 12px;
  background: linear-gradient(160deg, #3a2a5e, #241a40 70%);
  border: 1px solid rgba(200, 180, 255, .25);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 900; color: var(--gold); font-size: 20px;
}
.hp-stick {
  position: absolute; bottom: 48px; width: 5px; height: 38px;
  border-radius: 2px 2px 1px 1px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .4), transparent 55%),
    linear-gradient(180deg, #f0e3c0, #cbb180 60%, #ab9060);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
}
.hp-stick:nth-child(1) { left: 18px; rotate: -8deg; height: 34px; }
.hp-stick:nth-child(2) {
  left: 28px; height: 46px;
  background:
    linear-gradient(180deg, #d8402f 0 10px, rgba(232, 197, 110, .9) 10px 11.5px, transparent 11.5px),
    linear-gradient(90deg, rgba(255, 255, 255, .4), transparent 55%),
    linear-gradient(180deg, #f0e3c0, #cbb180 60%, #ab9060);
}
.hp-stick:nth-child(3) { left: 38px; rotate: 8deg; height: 36px; }
.hp-info { flex: 1; }
.hp-flag {
  font-size: 10.5px; letter-spacing: .2em; color: #ffb3ac;
  background: rgba(255, 74, 60, .12); border-radius: 999px;
  padding: 3px 10px;
}
.hp-info b { display: block; font-family: var(--serif); font-weight: 900; font-size: 24px; margin: 7px 0 2px; letter-spacing: .14em; }
.hp-info small { color: var(--ink-faint); font-size: 12.5px; }
.hp-go {
  flex-shrink: 0;
  font-size: 13px; color: var(--gold);
  border: 1px solid rgba(232, 197, 110, .28); border-radius: 999px;
  padding: 8px 18px;
}

.hall-cap { font-size: 11px; letter-spacing: .3em; color: var(--ink-faint); margin: 26px 0 12px; }
.locked-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.locked-card {
  position: relative;
  border-radius: var(--r-md);
  border: 1px dashed rgba(160, 140, 255, .18);
  background: rgba(20, 16, 33, .55);
  padding: 16px 14px;
  color: var(--ink-faint);
}
.locked-card b { display: block; font-family: var(--serif); font-size: 15.5px; color: var(--ink-dim); }
.locked-card small { font-size: 11.5px; display: block; margin-top: 2px; }
.locked-card .lk { position: absolute; top: 12px; right: 12px; opacity: .6; }
.lk-phase { font-size: 10px; letter-spacing: .16em; color: var(--ink-faint); display: block; margin-top: 8px; }

/* ============ 愿池占位 ============ */
.pool-locked {
  height: 100%; min-height: 60vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--ink-faint);
}
.pool-locked h2 { font-family: var(--serif); font-weight: 900; font-size: 30px; letter-spacing: .4em; color: var(--ink-dim); margin: 26px 0 8px; text-indent: .4em; }
.pool-locked p { font-size: 13px; line-height: 2; margin: 0; }
.ripples { position: relative; width: 120px; height: 120px; }
.ripples i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(111, 224, 255, .5);
  animation: ripple 3.2s ease-out infinite;
}
.ripples i:nth-child(2) { animation-delay: 1.05s; }
.ripples i:nth-child(3) { animation-delay: 2.1s; }
@keyframes ripple {
  from { transform: scale(.25); opacity: .9; }
  to { transform: scale(1.15); opacity: 0; }
}

/* ============ 命盘卡 ============ */
.id-card {
  border-radius: 22px;
  padding: 26px 24px;
  background:
    radial-gradient(circle at 82% 8%, rgba(255, 122, 223, .2), transparent 46%),
    radial-gradient(circle at 10% 90%, rgba(111, 224, 255, .15), transparent 46%),
    linear-gradient(165deg, #221a3e, #110d22 70%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  margin-bottom: 16px;
}
.id-card.fresh { animation: cardIn .8s cubic-bezier(.2, .9, .3, 1.1) both; }
@keyframes cardIn { from { opacity: 0; transform: scale(.9) translateY(16px); } to { opacity: 1; transform: none; } }
.idc-cap { font-size: 10.5px; letter-spacing: .42em; color: var(--ink-faint); }
.idc-name { font-family: var(--serif); font-size: 27px; font-weight: 900; margin: 12px 0 2px; }
.idc-name small { font-size: 12px; color: var(--ink-faint); font-family: var(--sans); font-weight: 400; margin-left: 6px; }
.idc-born { font-size: 12.5px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.idc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.idc-note {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px dashed rgba(160, 140, 255, .18);
  font-size: 12px; color: var(--ink-faint); line-height: 1.8;
}

/* 签谱 */
.qp {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--void-2);
  padding: 20px;
  margin-bottom: 16px;
}
.qp-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.qp-head b { font-family: var(--serif); font-size: 18px; font-weight: 900; }
.qp-head span { font-size: 12px; color: var(--ink-faint); }
.qp-empty { font-size: 13.5px; color: var(--ink-faint); margin: 14px 0 6px; }
.qp-list { margin: 0; padding: 0; list-style: none; }
.qp-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  padding: 14px 0;
  border-top: 1px dashed rgba(160, 140, 255, .12);
  align-items: center;
}
.qp-item[data-idx] { cursor: pointer; transition: opacity .15s; }
.qp-item[data-idx]:active { opacity: .7; }
.qp-grade {
  grid-row: span 2;
  align-self: center;
  font-family: var(--serif); font-weight: 900; font-size: 13px;
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  background: rgba(123, 108, 255, .06);
  letter-spacing: .05em;
}
/* 图标版徽章位：法器透明图标坐在素色小圆角砖上 */
.qp-ic {
  border: none;
  background-color: rgba(123, 108, 255, .06);
  background-size: 34px auto;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
/* 签谱翻页条 */
.qp-pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 8px 0 6px;
  font-size: 11.5px; letter-spacing: .1em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.qpp-btn {
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: rgba(160, 140, 255, .1);
  color: var(--ink-dim);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.qpp-btn:disabled { opacity: .3; cursor: default; }
.qpp-btn:not(:disabled):active { transform: scale(.9); }

/* 灵签等级迷你胶囊（挂在标题尾） */
.qp-g {
  font-style: normal;
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  margin-left: 6px; padding: 1.5px 7px;
  border-radius: 999px;
  background: rgba(160, 140, 255, .12);
  color: var(--ink-dim);
  vertical-align: 2px;
}
.qp-item[data-grade="上上"] .qp-g {
  color: #fff;
  background: linear-gradient(120deg, var(--holo-a), var(--holo-b) 55%, var(--holo-c));
  background-size: 200% 200%;
  animation: holoshift 4s ease-in-out infinite alternate;
}
.qp-item[data-grade="上吉"] .qp-g { color: var(--gold); background: rgba(232, 197, 110, .14); }
.qp-info b { font-size: 14.5px; display: block; font-weight: 600; }
.qp-info small { font-size: 11.5px; color: var(--ink-faint); }
.qp-line { grid-column: 2; font-size: 12.5px; color: var(--ink-dim); font-family: var(--serif); }

.about-card { text-align: center; padding: 16px 10px 30px; color: var(--ink-faint); font-size: 12px; }
.about-card p { margin: 0 0 6px; }
.about-card .btn { margin-top: 12px; }

/* ============ Onboarding ============ */
#onboarding {
  position: absolute; inset: 0; z-index: 60;
  background:
    radial-gradient(70% 45% at 50% 0%, #1a1230 0%, transparent 70%),
    var(--void);
}
.ob-step {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 40px 30px;
  overflow-y: auto;
}
.ob-rings { position: absolute; inset: 0; pointer-events: none; }
.ob-rings i {
  position: absolute; left: 50%; top: 42%;
  width: 300px; height: 300px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(180, 160, 255, .16);
  border-radius: 50%;
  animation: spin 50s linear infinite;
}
.ob-rings i::before {
  content: ""; position: absolute; top: -3px; left: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--holo-c); box-shadow: 0 0 12px var(--holo-c);
}
.ob-rings i:nth-child(2) { width: 400px; height: 400px; animation-direction: reverse; animation-duration: 80s; opacity: .6; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.ob-romaji { font-size: 11px; letter-spacing: .5em; color: var(--ink-faint); margin: 0 0 18px; }
/* 冷启动闪屏：JS 前静态可见，遮住加载空窗 */
#splash {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: #0a0812;
  transition: opacity .55s ease;
}
#splash img {
  width: min(72vw, 300px);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .6)) drop-shadow(0 0 24px rgba(232, 197, 110, .25));
  animation: splashIn .7s cubic-bezier(.2, .9, .3, 1.05) both;
}
@keyframes splashIn { from { opacity: 0; transform: scale(.92); } }
#splash.out { opacity: 0; pointer-events: none; }

/* 品牌主标艺术字（毛笔飞白鎏金玄学体，亮度键控透明版） */
.ob-logo-img {
  display: block;
  width: min(84vw, 356px);
  margin: 0 auto;
  filter: drop-shadow(0 12px 34px rgba(0, 0, 0, .6)) drop-shadow(0 0 26px rgba(232, 197, 110, .28));
  animation: obLogoIn .8s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes obLogoIn { from { opacity: 0; transform: scale(.86) translateY(10px); } }
.ob-logo {
  margin: 0;
  font-family: var(--serif); font-weight: 900;
  font-size: 74px; line-height: 1.1;
  background: linear-gradient(178deg, #ffffff 8%, #cfd0e2 32%, #8f8fae 48%, #f2f3fb 56%, #b9bad2 75%, #e6e7f5 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 22px rgba(123, 108, 255, .35));
}
.ob-logo span {
  background: linear-gradient(160deg, #ff8a7d 10%, var(--cinnabar) 45%, #a3241a 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 74, 60, .4));
}
.ob-tag { color: var(--ink-dim); font-size: 15px; line-height: 2; margin: 18px 0 34px; font-family: var(--serif); }
.ob-fine { font-size: 11px; color: var(--ink-faint); letter-spacing: .2em; margin-top: 22px; }

.ob-cap { font-size: 11px; letter-spacing: .4em; color: var(--cinnabar); margin: 0 0 10px; }
.ob-h2 { font-family: var(--serif); font-weight: 900; font-size: 26px; margin: 0 0 6px; }
.ob-sub { color: var(--ink-faint); font-size: 13px; margin: 0 0 22px; }

.ob-form { width: min(320px, 100%); text-align: left; margin: 18px 0 22px; display: grid; gap: 16px; }
.ob-form label { font-size: 12.5px; color: var(--ink-dim); display: grid; gap: 7px; letter-spacing: .08em; }
.ob-form input, .ob-form select {
  width: 100%;
  background: var(--void-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-size: 16px;
  padding: 13px 15px;
  font-family: inherit;
  color-scheme: dark;
}
.ob-form small { color: var(--ink-faint); font-size: 11px; }
.ob-err { color: #ff9d94; font-size: 13px; margin: 0 0 14px; }

.mbti-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  width: min(340px, 100%);
  margin-bottom: 20px;
}
.mbti-chip {
  border: 1px solid var(--line);
  background: var(--void-2);
  color: var(--ink-dim);
  border-radius: 12px;
  padding: 12px 0;
  font-size: 13.5px; letter-spacing: .06em;
  cursor: pointer;
  transition: border-color .2s, color .2s, transform .1s;
  min-height: 44px;
}
.mbti-chip:hover, .mbti-chip:focus-visible { border-color: rgba(232, 197, 110, .5); color: var(--gold); }
.mbti-chip:active { transform: scale(.95); }

.ceremony { position: relative; width: 100%; height: 240px; }
.rune {
  position: absolute; left: 50%; top: 50%;
  font-family: var(--serif); font-weight: 900; font-size: 38px;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(232, 197, 110, .5);
  animation: orbitIn 2s cubic-bezier(.3, .8, .3, 1) both;
  animation-delay: calc(var(--i) * .3s);
  transition: opacity .6s, transform .6s;
}
@keyframes orbitIn {
  0% {
    transform: translate(-50%, -50%) rotate(calc(var(--i) * 72deg)) translateX(150px) rotate(calc(var(--i) * -72deg)) scale(.4);
    opacity: 0;
  }
  45% { opacity: 1; }
  100% {
    transform: translate(-50%, -50%) rotate(calc(var(--i) * 72deg + 60deg)) translateX(74px) rotate(calc(var(--i) * -72deg - 60deg)) scale(1);
    opacity: 1;
  }
}
.ceremony.gather .rune {
  transform: translate(-50%, -50%) scale(.1);
  opacity: 0;
}
#obCardSlot { width: min(340px, 100%); }
#obCardSlot .id-card { text-align: left; }

/* ============ 求签流程 ============ */
/* 互动流程覆盖层：星夜底图（重纱弱化）+ 原氛围渐变，所有玩法共享此背景层 */
#flow {
  position: absolute; inset: 0; z-index: 70;
  background:
    radial-gradient(80% 50% at 50% 108%, rgba(123, 108, 255, .16) 0%, transparent 65%),
    radial-gradient(70% 40% at 50% 0%, rgba(23, 16, 43, .85) 0%, transparent 70%),
    linear-gradient(180deg, rgba(10, 8, 18, .68), rgba(10, 8, 18, .52) 45%, rgba(10, 8, 18, .72)),
    url("assets/ai/chat/bg.webp") center top / cover no-repeat,
    var(--void);
}
.flow-inner { position: absolute; inset: 0; display: flex; flex-direction: column; }
.flow-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 8px;
  flex-shrink: 0;
}
.flow-title {
  font-family: var(--serif); font-weight: 900; font-size: 16px;
  letter-spacing: .5em; text-indent: .5em; color: var(--ink-dim);
}
.flow-body { flex: 1; position: relative; }
.fstep {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 18px 24px 28px;
  text-align: center;
  scrollbar-width: none;
  display: flex; flex-direction: column;
}
.fstep::-webkit-scrollbar { display: none; }
/* 弹性垫片：内容不足一屏时垂直居中；内容变多时垫片压缩为 0，自然从顶部排列滚动 */
.fstep::before, .fstep::after { content: ""; flex: 1 0 0; }
.fstep > * { flex-shrink: 0; }

.fs-cap { font-size: 10.5px; letter-spacing: .42em; color: var(--cinnabar); margin: 6px 0 12px; }
.fs-title { font-family: var(--serif); font-weight: 900; font-size: 26px; margin: 0 0 6px; }
.fs-sub { color: var(--ink-faint); font-size: 13.5px; margin: 0 0 26px; }
.fs-sub b { color: var(--gold); font-weight: 600; }
.fs-hint { color: var(--ink-faint); font-size: 13px; margin-top: 20px; letter-spacing: .1em; }

/* 注：.fstep 为 flex 列，水平 auto 边距会禁用拉伸——凡靠 1fr 网格铺宽的块必须显式 width:100% */
.topic-chips {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  width: 100%; max-width: 340px; margin: 0 auto;
}
.topic-chip {
  border: 1px solid var(--line);
  background: var(--void-2);
  color: var(--ink);
  border-radius: 14px;
  padding: 16px 0;
  font-family: var(--serif); font-size: 16.5px; font-weight: 700; letter-spacing: .12em;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .1s;
  min-height: 54px;
}
.topic-chip:hover, .topic-chip:focus-visible, .topic-chip.on {
  border-color: rgba(232, 197, 110, .55);
  box-shadow: 0 0 22px rgba(232, 197, 110, .14);
  color: var(--gold);
}
.topic-chip:active { transform: scale(.95); }
.topic-chip[data-topic="custom"] { grid-column: span 3; font-size: 14px; color: var(--ink-dim); }
.custom-box { width: 100%; max-width: 340px; margin: 16px auto 0; display: grid; gap: 12px; }
.custom-box input {
  background: var(--void-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-size: 16px;
  padding: 13px 15px;
}

/* --- 签筒 --- */
.tube-stage {
  position: relative;
  height: 380px;
  display: grid; place-items: center;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  cursor: pointer;
}
.tube-halo {
  position: absolute; width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 108, 255, .3), transparent 65%);
  filter: blur(10px);
}
.tube-wrap {
  position: relative;
  width: 150px; height: 305px;
  transform-origin: 50% 88%;
  filter: brightness(calc(1 + var(--amp, 0) * .18));
}
.tube-body {
  position: absolute; bottom: 0; left: 0; right: 0; height: 185px;
  z-index: 2;
  border-radius: 16px 16px 28px 28px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .12) 6%, transparent 22%),
    linear-gradient(90deg, transparent 70%, rgba(0, 0, 0, .4) 96%),
    linear-gradient(165deg, #3c2b63 0%, #241a44 55%, #17102c 100%);
  border: 1px solid rgba(200, 180, 255, .28);
  box-shadow:
    0 24px 50px rgba(0, 0, 0, .55),
    inset 0 2px 0 rgba(255, 255, 255, .14);
  display: flex; align-items: center; justify-content: center;
}
.tube-zi {
  writing-mode: vertical-rl;
  font-family: var(--serif); font-weight: 900; font-size: 30px;
  letter-spacing: .3em;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(232, 197, 110, .35);
}
.tube-rim {
  position: absolute; bottom: 172px; left: -5px; right: -5px; height: 30px;
  z-index: 3;
  border-radius: 50%;
  background: linear-gradient(170deg, #fdfdff 6%, #b6b7cf 36%, #63637e 52%, #e9eaf5 62%, #8e8fab 88%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.tube-rim::after {
  content: ""; position: absolute; inset: 5px 9px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #241c3e, #0d0a19 75%);
}
/* 空间层序：筒身(2) → 筒沿+洞口(3) → 签支(4) → 筒沿前唇(5，遮住签支底端) */
.sticks {
  position: absolute; bottom: 178px; left: 16px; right: 16px; height: 130px;
  z-index: 4;
}
.tube-rim-front {
  z-index: 5;
  clip-path: inset(50% 0 0 0);
  box-shadow: none;
}
/* 竹签：细长平头竹片 —— 左缘高光 + 右缘阴影 + 竹节棱线 + 纵向竹纹，--node 控制竹节位置 */
.stick {
  position: absolute; bottom: 0;
  width: 10px;
  border-radius: 3px 3px 2px 2px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 48%),
    linear-gradient(270deg, rgba(58, 38, 18, .42), rgba(58, 38, 18, 0) 42%),
    linear-gradient(180deg,
      transparent var(--node, 26%),
      rgba(108, 82, 46, .55) var(--node, 26%),
      rgba(108, 82, 46, .55) calc(var(--node, 26%) + 1.5px),
      rgba(255, 244, 214, .55) calc(var(--node, 26%) + 1.5px),
      rgba(255, 244, 214, .55) calc(var(--node, 26%) + 2.5px),
      transparent calc(var(--node, 26%) + 2.5px)),
    repeating-linear-gradient(90deg, rgba(122, 94, 52, .16) 0 1px, transparent 1px 3.5px),
    linear-gradient(180deg, #f2e6c4, #d9c496 55%, #b99f6f);
  box-shadow: 1.5px 2px 3px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* 入筒处的暗影 —— 签身沉入洞口的纵深感 */
.stick::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  background: linear-gradient(180deg, rgba(13, 10, 25, 0), rgba(13, 10, 25, .58));
  border-radius: inherit;
}
.stick.s0 { left: 3%;  height: 96px;  rotate: -7deg; --node: 34%; filter: brightness(.95); }
.stick.s1 { left: 17%; height: 124px; rotate: -3deg; --node: 22%; }
.stick.s2 { left: 31%; height: 90px;  rotate: -5deg; --node: 40%; filter: brightness(1.04); }
.stick.s3 { left: 46%; height: 138px; rotate: -2deg; --node: 58%; }
.stick.s4 { left: 61%; height: 106px; rotate: 4deg;  --node: 30%; filter: brightness(.97); }
.stick.s5 { left: 74%; height: 84px;  rotate: 7deg;  --node: 44%; filter: brightness(.92); }
.stick.s6 { left: 87%; height: 118px; rotate: 3deg;  --node: 26%; filter: brightness(1.02); }
/* 天命签：朱漆签头 + 描金线 */
.stick.s3::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 26px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(165deg, #ff7c66 8%, #d8402f 55%, #9c2317);
  border-bottom: 2px solid rgba(232, 197, 110, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset -2px 0 3px rgba(0, 0, 0, .25);
}
.stick.chosen { z-index: 8; filter: drop-shadow(0 0 14px rgba(232, 197, 110, .7)); }

.tube-wrap.tremble { animation: tremble .13s ease-in-out infinite; }
@keyframes tremble {
  0%, 100% { transform: rotate(-.7deg) translateX(-1px); }
  50% { transform: rotate(.7deg) translateX(1px); }
}
.tube-wrap.shaking { animation: shakeHard .4s ease-in-out infinite; }
@keyframes shakeHard {
  0%, 100% { transform: rotate(0) translate(0, 0); }
  16% { transform: rotate(-10deg) translate(-4px, -7px); }
  34% { transform: rotate(9deg) translate(4px, -3px); }
  52% { transform: rotate(-8deg) translate(-3px, -8px); }
  70% { transform: rotate(10deg) translate(4px, -2px); }
  86% { transform: rotate(-5deg) translate(-2px, -5px); }
}
.shaking .stick { animation: jitter .15s ease-in-out infinite; }
.shaking .stick.s1, .shaking .stick.s4 { animation-delay: .05s; }
.shaking .stick.s2, .shaking .stick.s5 { animation-delay: .09s; }
.shaking .stick.s3 { animation-delay: .03s; animation-name: jitterBig; }
@keyframes jitter {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes jitterBig {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.charge-ring {
  position: absolute; bottom: 10px; left: 50%;
  width: 68px; height: 68px;
  transform: translateX(-50%) rotate(-90deg);
  transition: opacity .5s;
}
.charge-ring.done { opacity: 0; }
.ring-bg { fill: none; stroke: rgba(160, 140, 255, .18); stroke-width: 3; }
.ring-fg {
  fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(232, 197, 110, .7));
}

/* --- 揭示 --- */
.flash {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(60% 45% at 50% 38%, rgba(255, 122, 223, .5), transparent 60%),
    radial-gradient(80% 60% at 50% 38%, rgba(123, 108, 255, .55), transparent 70%);
}
.fx-canvas {
  position: absolute; inset: 0; z-index: 50;
  width: 100%; height: 100%;
  pointer-events: none;
}

.scrollcard {
  position: relative;
  width: min(320px, 92%);
  margin: 8px auto 0;
  border-radius: 20px;
  border: none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(232, 197, 110, .1), transparent 55%),
    linear-gradient(170deg, #1e1633, #110d20 75%);
  padding: 22px 22px 26px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .55);
  clip-path: inset(0 0 100% 0 round 20px);
  transition: clip-path .85s cubic-bezier(.2, .9, .3, 1.02);
}
.scrollcard.open { clip-path: inset(0 0 0 0 round 20px); }
.scrollcard[data-grade="上上"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .55), 0 0 44px rgba(123, 108, 255, .3);
}
.sc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--ink-faint); letter-spacing: .2em;
}
.sc-name { font-family: var(--serif); font-size: 15px; color: var(--ink-dim); }
.sc-grade {
  font-family: var(--serif); font-weight: 900; font-size: 38px;
  letter-spacing: .16em; text-indent: .16em;
  margin: 10px 0 6px;
  color: var(--ink-dim);
}
.sc-grade[data-grade="上上"] { color: var(--cinnabar); text-shadow: 0 0 26px rgba(255, 74, 60, .5); }
.sc-grade[data-grade="上吉"] { color: var(--gold); text-shadow: 0 0 22px rgba(232, 197, 110, .4); }
.sc-grade[data-grade="中吉"] { color: #a5e8ff; text-shadow: 0 0 20px rgba(111, 224, 255, .35); }
.sc-grade[data-grade="中平"] { color: var(--ink-dim); }
.sc-grade[data-grade="下签"] { color: #b9aee6; }
.sc-poem {
  display: flex; flex-direction: row-reverse; justify-content: center; gap: 18px;
  min-height: 220px;
  padding: 10px 0 4px;
}
.sc-poem span {
  writing-mode: vertical-rl;
  font-family: var(--serif); font-size: 17.5px;
  letter-spacing: .34em;
  line-height: 1.9;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s ease, transform .7s ease;
}
.scrollcard.open .sc-poem span { opacity: 1; transform: none; }
.sc-stamp {
  position: absolute; right: 20px; bottom: 18px;
  width: 46px; height: 46px;
  border: 2.5px solid rgba(255, 74, 60, .8);
  border-radius: 9px;
  color: var(--cinnabar);
  font-family: var(--serif); font-weight: 900; font-size: 21px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  box-shadow: 0 0 18px rgba(255, 74, 60, .3);
}
.sc-stamp.on { animation: stampIn .5s cubic-bezier(.3, 1.4, .5, 1) forwards; }
@keyframes stampIn {
  0% { opacity: 0; transform: rotate(-8deg) scale(2.6); }
  55% { opacity: 1; transform: rotate(-8deg) scale(.92); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}

.oracle {
  width: min(340px, 94%);
  margin: 20px auto 0;
  text-align: left;
}
.oracle-cap {
  font-size: 10.5px; letter-spacing: .42em; color: var(--cinnabar);
  margin: 0 0 8px; text-align: center;
}
.oracle-headline {
  font-family: var(--serif); font-weight: 900; font-size: 20px;
  color: var(--gold);
  text-align: center;
  margin: 0 0 14px;
  line-height: 1.7;
}
.oracle-body {
  font-size: 14.5px; line-height: 2.05;
  color: var(--ink-dim);
  margin: 0 0 18px;
  min-height: 60px;
}
/* 未显形时必须同时不可见 + 不可点：云批流式期间（10~45s）透明按钮吃掉点击是死区 */
.oracle-extra { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: opacity .6s, transform .6s, visibility 0s .6s; }
.oracle-extra.show { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .6s, transform .6s; }
.oracle-extra .yiji {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--void-2);
  padding: 16px;
}
.flow-actions {
  display: grid; gap: 10px;
  margin-top: 22px;
  padding-bottom: 10px;
}

/* ============ 问事大厅 · 玩法网格 ============ */
.play-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.play-card {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--void-2);
  padding: 16px 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.play-card:hover, .play-card:focus-visible { border-color: rgba(200, 180, 255, .45); }
.play-card:active { transform: scale(.97); }
.play-card b { display: block; font-family: var(--serif); font-size: 16.5px; font-weight: 900; margin-top: 10px; }
.play-card small { font-size: 11.5px; color: var(--ink-faint); display: block; margin-top: 2px; }
.pc-icon { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
/* 筊杯一对 */
.pci-jiao i {
  width: 22px; height: 11px;
  border-radius: 11px 11px 3px 3px;
  background: linear-gradient(160deg, #ff7c66 10%, #c03327 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}
.pci-jiao i:first-child { rotate: -12deg; }
.pci-jiao i:last-child { rotate: 10deg; margin-left: -2px; }
/* 书 */
.pci-book i {
  width: 30px; height: 24px;
  border-radius: 3px 6px 6px 3px;
  border: 1px solid rgba(232, 197, 110, .6);
  background:
    linear-gradient(90deg, rgba(232, 197, 110, .5) 0 3px, transparent 3px),
    linear-gradient(165deg, #241c42, #151027);
}
/* 骰 */
.pci-dice i {
  width: 24px; height: 24px;
  border-radius: 7px;
  rotate: 14deg;
  border: 1px solid rgba(160, 140, 255, .5);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 122, 223, .8) 0 3px, transparent 3.5px),
    linear-gradient(160deg, #2a2050, #171130);
}
/* 木鱼 */
.pci-muyu i {
  width: 30px; height: 22px;
  border-radius: 48% 48% 46% 46% / 64% 64% 38% 38%;
  background: linear-gradient(165deg, #fdfdff 8%, #b6b7cf 40%, #7c7c98 60%, #d9daea 90%);
  position: relative;
}
.pci-muyu i::after {
  content: ""; position: absolute; bottom: 5px; left: 7px; right: 7px; height: 3px;
  border-radius: 999px;
  background: rgba(13, 10, 25, .75);
}

/* ============ 掷筊 ============ */
.jiao-dots { display: flex; justify-content: center; gap: 12px; margin: 4px 0 6px; }
.jd {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  transition: background .3s, box-shadow .3s;
}
.jd.on[data-r="sheng"] { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(232, 197, 110, .7); }
.jd.on[data-r="xiao"] { background: var(--holo-c); border-color: var(--holo-c); box-shadow: 0 0 10px rgba(111, 224, 255, .6); }
.jd.on[data-r="yin"] { background: #8f83c9; border-color: #8f83c9; }

.jiao-stage {
  position: relative;
  height: 300px;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  cursor: pointer;
}
.jiao-floor {
  position: absolute; bottom: 34px; left: 50%;
  width: 240px; height: 36px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(123, 108, 255, .22), transparent 70%);
}
.jiao-cup {
  position: absolute; bottom: 56px;
  width: 76px; height: 36px;
  border-radius: 38px 38px 10px 10px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, .5), transparent 42%),
    linear-gradient(165deg, #ff7c66 4%, #d8402f 48%, #8e1f14 96%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.jiao-cup.ja { left: calc(50% - 92px); }
.jiao-cup.jb { left: calc(50% + 16px); }
/* 平面朝上：露出浅色木质切面 */
.jc-flat {
  display: none;
  position: absolute; top: 3px; left: 7px; right: 7px; height: 58%;
  border-radius: 50%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .45), transparent 55%),
    linear-gradient(180deg, #f0dcb4, #d3b581);
  box-shadow: inset 0 -2px 4px rgba(120, 70, 30, .4);
}
.jiao-cup.up-flat .jc-flat { display: block; }
.jiao-cup.up-flat {
  background: linear-gradient(165deg, #e2543f 8%, #b02c1d 60%, #7c1a10 96%);
}

.jiao-result { min-height: 62px; margin: 2px 0 0; }
.jiao-result b {
  display: block;
  font-family: var(--serif); font-weight: 900; font-size: 27px;
  letter-spacing: .2em; text-indent: .2em;
}
.jiao-result span { font-size: 12px; color: var(--ink-faint); letter-spacing: .12em; }
.jiao-result .jr-sheng { color: var(--gold); text-shadow: 0 0 22px rgba(232, 197, 110, .45); }
.jiao-result .jr-xiao { color: var(--holo-c); text-shadow: 0 0 20px rgba(111, 224, 255, .4); }
.jiao-result .jr-yin { color: #b9aee6; }
.jiao-result.pop b { animation: jrPop .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes jrPop { 0% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.jiao-seq { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 8px 0 14px; }
.jseq-chip {
  font-family: var(--serif); font-size: 13.5px;
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
}
.jseq-chip.jr-sheng { color: var(--gold); border-color: rgba(232, 197, 110, .45); }
.jseq-chip.jr-xiao { color: var(--holo-c); border-color: rgba(111, 224, 255, .4); }
.jseq-chip.jr-yin { color: #b9aee6; border-color: rgba(160, 140, 255, .35); }
.jseq-sep { width: 10px; height: 1px; background: var(--line); }

.verdict-zi {
  font-family: var(--serif); font-weight: 900;
  font-size: 46px; letter-spacing: .22em; text-indent: .22em;
  color: var(--cinnabar);
  text-shadow: 0 0 30px rgba(255, 74, 60, .45);
  opacity: 0;
  margin: 6px 0 4px;
}
.verdict-zi.on { animation: stampIn .55s cubic-bezier(.3, 1.4, .5, 1) forwards; }

/* ============ 答案之书 ============ */
.book-stage {
  position: relative;
  height: 350px;
  display: grid; place-items: center;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  cursor: pointer;
}
/* 透明抠图整书：光晕用 drop-shadow 沿轮廓散发，呼吸明暗 */
.book {
  position: relative;
  width: 216px; height: 276px;
  background: url("assets/ai/book.webp") center / contain no-repeat;
  transition: transform .3s, filter .3s;
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .42)) drop-shadow(0 0 20px rgba(150, 105, 245, .28));
  animation: bookBreath 3.8s ease-in-out infinite;
}
@keyframes bookBreath {
  0%, 100% { filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .42)) drop-shadow(0 0 15px rgba(150, 105, 245, .2)); }
  50% { filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .42)) drop-shadow(0 0 32px rgba(168, 122, 255, .42)); }
}
.book.holding {
  transform: scale(1.045);
  animation: none;
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, .42)) drop-shadow(0 0 26px rgba(232, 197, 110, .5)) drop-shadow(0 0 62px rgba(232, 197, 110, .26));
}
.bc-title {
  position: absolute; left: 41%; top: 49.5%;
  transform: translate(-50%, -50%);
  font-family: var(--serif); font-weight: 900; font-size: 24px;
  letter-spacing: .3em; text-indent: .3em;
  color: var(--gold);
  text-shadow: 0 1px 2px rgba(60, 30, 90, .5);
  writing-mode: vertical-rl;
}
/* 蓄力粒子：高斯模糊大小不一，向书心汇聚（JS 生成，WAAPI 驱动） */
.bp-dot {
  position: absolute; left: 50%; top: 50%;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}
.bo-answer {
  font-family: var(--serif); font-weight: 900;
  font-size: 21px; line-height: 1.9;
  color: #3c3222;
  margin: 0;
  text-wrap: balance;
}
.bo-foot {
  font-size: 11.5px; color: #8a7a58;
  margin: 14px 0 0;
  border-top: 1px dashed rgba(120, 100, 60, .4);
  padding-top: 10px;
  line-height: 1.8;
}

/* ============ 命运骰 ============ */
/* 骰子 · 纠结分类 */
.dice-cats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  width: 100%; max-width: 340px; margin: 0 auto 18px;
}
.dice-cat {
  border: 1px solid var(--line);
  background: var(--void-2);
  color: var(--ink);
  border-radius: 12px;
  padding: 13px 6px;
  font-size: 14px; letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .2s, color .2s, box-shadow .2s, transform .1s;
  min-height: 46px;
}
.dice-cat:hover, .dice-cat:focus-visible { border-color: rgba(232, 197, 110, .5); }
.dice-cat.on {
  border-color: rgba(232, 197, 110, .6);
  color: var(--gold);
  background: rgba(232, 197, 110, .07);
  box-shadow: 0 0 18px rgba(232, 197, 110, .12);
}
.dice-cat.dc-custom { grid-column: span 2; color: var(--ink-dim); border-style: dashed; }
.dice-cat.dc-custom.on { color: var(--gold); border-style: solid; }
.dice-build { width: 100%; max-width: 340px; margin: 0 auto; display: grid; gap: 12px; }
.dice-tools { display: flex; gap: 8px; align-items: stretch; }
.dice-tools input {
  flex: 1;
  background: var(--void-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-size: 15px;
  padding: 11px 14px;
  min-width: 0;
}
.dice-tools .wi-btn { flex-shrink: 0; }

.dice-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 38px; }
.dice-opt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(232, 197, 110, .25);
  color: var(--gold);
  background: rgba(232, 197, 110, .07);
}
.do-x {
  border: none; background: none; cursor: pointer;
  color: var(--ink-faint); font-size: 15px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.do-x:hover { color: var(--cinnabar); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.dice-stage {
  position: relative;
  height: 300px;
  display: grid; place-items: center;
  perspective: 940px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.dice-cube {
  position: relative;
  width: 110px; height: 110px;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(24deg);
}
/* 注意：不能用 filter —— 会扁平化 preserve-3d，骰子会消失 */
.dice-cube.landed .dice-face {
  border-color: rgba(232, 197, 110, .65);
  box-shadow: inset 0 0 22px rgba(123, 108, 255, .18), 0 0 34px rgba(232, 197, 110, .38);
}
.dice-face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--serif); font-weight: 700; font-size: 17px;
  letter-spacing: .06em;
  color: var(--ink);
  padding: 8px;
  text-align: center;
  border-radius: 16px;
  border: 1px solid rgba(160, 140, 255, .2);
  background:
    radial-gradient(90% 90% at 30% 20%, rgba(123, 108, 255, .32), transparent 60%),
    linear-gradient(165deg, #262052, #14102b 80%);
  box-shadow: inset 0 0 22px rgba(123, 108, 255, .18);
}
.dice-floor {
  position: absolute; bottom: 46px; left: 50%;
  width: 220px; height: 34px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(123, 108, 255, .2), transparent 70%);
}
.dice-result { text-align: center; }
.dr-opt {
  font-family: var(--serif); font-weight: 900; font-size: 34px;
  letter-spacing: .1em;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(232, 197, 110, .4);
  margin: 0 0 8px;
}
.dr-quip { font-size: 14px; color: var(--ink-dim); margin: 0 0 6px; line-height: 2; }

/* ============ 电子木鱼 ============ */
.muyu-step { display: flex; flex-direction: column; }
.merit-head { margin-top: 4px; }
.merit-cap { font-size: 11px; letter-spacing: .5em; text-indent: .5em; color: var(--ink-faint); margin: 0; }
.merit-num {
  font-family: var(--serif); font-weight: 900;
  font-size: 56px; line-height: 1.2;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 30px rgba(232, 197, 110, .3);
}
.merit-combo { min-height: 22px; font-size: 13px; color: var(--holo-c); letter-spacing: .2em; margin: 0; }

.muyu-stage {
  position: relative;
  height: 320px;
  display: grid; place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.muyu {
  position: relative;
  width: 216px; height: 158px;
  border-radius: 48% 48% 46% 46% / 62% 62% 40% 40%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, .85), transparent 34%),
    linear-gradient(165deg, #fdfdff 6%, #b6b7cf 36%, #6a6a85 54%, #e9eaf5 64%, #8e8fab 90%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .6), inset 0 -6px 18px rgba(0, 0, 0, .25);
}
.muyu.hit { animation: muyuHit .18s ease-out; }
@keyframes muyuHit {
  0% { transform: scale(1); }
  40% { transform: scale(.94); }
  100% { transform: scale(1); }
}
.muyu-slit {
  position: absolute; bottom: 24%; left: 17%; right: 17%; height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #0b0916, #221d38);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .8);
}
.muyu-dot {
  position: absolute; top: 26%; left: 50%;
  width: 18px; height: 18px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4f5fc, #8a8aa5 75%);
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .35);
}
.muyu-shadow {
  position: absolute; bottom: 46px; left: 50%;
  width: 230px; height: 32px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .5), transparent 70%);
  z-index: -1;
}
.muyu-ripple {
  position: absolute; left: 50%; top: 50%;
  width: 230px; height: 170px;
  margin: -85px 0 0 -115px;
  border-radius: 48% 48% 46% 46% / 62% 62% 40% 40%;
  border: 1.5px solid rgba(232, 197, 110, .6);
  pointer-events: none;
  animation: muyuRipple .8s ease-out forwards;
}
@keyframes muyuRipple {
  from { transform: scale(1); opacity: .9; }
  to { transform: scale(1.55); opacity: 0; }
}
.merit-float {
  position: absolute; top: 32%;
  font-family: var(--serif); font-size: 15px; font-weight: 700;
  color: var(--gold);
  pointer-events: none;
  animation: meritFloat 1s ease-out forwards;
}
@keyframes meritFloat {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-64px); opacity: 0; }
}
.muyu-note { font-size: 11px; color: var(--ink-faint); margin-top: 10px; line-height: 1.9; }
.gatha-toast {
  position: absolute; bottom: 36px; left: 50%;
  transform: translate(-50%, 8px);
  max-width: 86%;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(232, 197, 110, .3);
  background: rgba(20, 16, 33, .92);
  backdrop-filter: blur(8px);
  font-family: var(--serif); font-size: 15px;
  color: var(--gold);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s, transform .5s;
}
.gatha-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============ 打卡 / 海报 / 四柱 / 图鉴 / 全局提示 ============ */
.streak-chip {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px; letter-spacing: .1em;
  color: #f0dcab;
  border: 1px solid rgba(232, 197, 110, .18);
  background: rgba(232, 197, 110, .08);
  border-radius: 999px;
  padding: 4px 12px;
}

.btn-poster {
  width: 100%;
  margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 14px;
}

.poster-modal { position: absolute; inset: 0; z-index: 80; }
.pm-scrim {
  position: absolute; inset: 0;
  background: rgba(5, 4, 9, .78);
  backdrop-filter: blur(6px);
}
.pm-body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  padding: 26px;
  pointer-events: none;
}
.pm-body > * { pointer-events: auto; }
.pm-img {
  max-height: 62%;
  max-width: 88%;
  border-radius: 18px;
  border: 1px solid rgba(200, 180, 255, .16);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
}
.pm-actions { display: flex; gap: 10px; }
.pm-actions .btn { text-decoration: none; display: inline-flex; align-items: center; }
.pm-hint { font-size: 11.5px; color: var(--ink-faint); margin: 0; }

/* 四柱 */
/* 四柱：单行紧凑排（label + 干支同格横排） */
.pz-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px dashed rgba(160, 140, 255, .18);
}
.pz-cell {
  display: flex; align-items: baseline; justify-content: center; gap: 5px;
  border-radius: 10px;
  padding: 8px 2px;
  background: rgba(10, 8, 18, .35);
}
.pz-cell small { font-size: 9.5px; letter-spacing: .1em; color: var(--ink-faint); }
.pz-cell b { font-family: var(--serif); font-weight: 900; font-size: 16.5px; line-height: 1; }
.pz-cell.dz b { color: var(--gold); text-shadow: 0 0 14px rgba(232, 197, 110, .35); }
.pz-none { color: var(--ink-faint); font-weight: 400; }

/* 五行：单行色点胶囊 */
.wx-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px;
}
.wx-row > small { font-size: 10.5px; letter-spacing: .12em; color: var(--ink-faint); flex-shrink: 0; }
.wx-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.wx-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--ink-dim);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(10, 8, 18, .35);
}
.wx-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.wx-chip.none { opacity: .45; }
/* 旧竖条布局已废弃，保留 .bars/.bar 空位防外部引用 */
.bars {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  align-items: end;
  height: 74px;
  margin-top: 12px;
}
.bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 6px; }
.bar i { border-radius: 4px 4px 2px 2px; display: block; }
.bar em { font-style: normal; font-size: 11px; text-align: center; color: var(--ink-dim); font-family: var(--serif); }

.chip-badge {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(120deg, var(--holo-a), var(--holo-b) 55%, var(--holo-c));
  background-size: 200% 200%;
  animation: holoshift 4s ease-in-out infinite alternate;
}

/* 图鉴 */
.tujian-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-top: 12px;
}
.tj-tile {
  text-align: center;
  border-radius: 10px;
  border: 1px dashed rgba(160, 140, 255, .16);
  padding: 9px 2px 10px;
  color: var(--ink-faint);
}
.tj-tile b { display: block; font-family: var(--serif); font-size: 14.5px; font-weight: 900; }
.tj-tile small { font-size: 9.5px; letter-spacing: .1em; }
/* 签念徽章图（透明抠图，未解锁位以问号占位） */
.tj-img {
  display: block;
  width: 52px; height: 52px;
  margin: 0 auto 5px;
  background: center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
}
.tj-locked {
  border-radius: 50%;
  background: rgba(160, 140, 255, .06);
  filter: none;
}
.tj-tile.on {
  border-style: solid;
  border-color: rgba(160, 140, 255, .3);
  color: var(--ink);
  background: rgba(123, 108, 255, .07);
}
.tj-tile.on small { color: var(--ink-faint); }
.tj-tile.on[data-grade="上上"] {
  border-color: transparent;
  background: linear-gradient(120deg, rgba(123, 108, 255, .45), rgba(255, 122, 223, .4) 55%, rgba(111, 224, 255, .4));
  background-size: 200% 200%;
  animation: holoshift 5s ease-in-out infinite alternate;
  color: #fff;
}
.tj-tile.on[data-grade="上吉"] { border-color: rgba(232, 197, 110, .4); }
.tj-tile.on[data-grade="上吉"] b { color: var(--gold); }
.tj-note { font-size: 11px; color: var(--ink-faint); line-height: 1.9; margin: 12px 0 0; }

/* 全局轻提示 */
.app-toast {
  position: absolute; bottom: 96px; left: 50%;
  transform: translate(-50%, 10px);
  z-index: 85;
  max-width: 86%;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(232, 197, 110, .3);
  background: rgba(20, 16, 33, .94);
  backdrop-filter: blur(8px);
  font-family: var(--serif); font-size: 14px;
  color: var(--gold);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s, transform .45s;
}
.app-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 签谱类型徽章：已由法器图标（.qp-ic）取代 */

/* ============ 玩法图标 · Phase 3 ============ */
.pci-liuyao { flex-direction: column; align-items: flex-start; gap: 4px; justify-content: flex-end; }
.pci-liuyao i { width: 26px; height: 4px; border-radius: 2px; background: var(--gold); opacity: .85; }
.pci-liuyao i.broken { background: linear-gradient(90deg, var(--gold) 0 40%, transparent 40% 60%, var(--gold) 60%); }
.pci-tarot i {
  width: 17px; height: 26px; border-radius: 3px;
  border: 1px solid rgba(160, 140, 255, .55);
  background: linear-gradient(160deg, #2a2050, #171130);
}
.pci-tarot i:last-child { margin-left: -8px; rotate: 14deg; border-color: rgba(255, 122, 223, .5); }
.pci-crystal i {
  width: 24px; height: 24px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .8), transparent 40%),
    radial-gradient(circle at 60% 70%, rgba(255, 122, 223, .5), transparent 60%),
    radial-gradient(circle, rgba(123, 108, 255, .5), rgba(17, 13, 34, .9) 75%);
  border: 1px solid rgba(200, 180, 255, .4);
}
/* ============ 六爻 ============ */
.ly-layout {
  display: grid; grid-template-columns: 150px 1fr; gap: 10px;
  align-items: center;
  margin-top: 6px;
}
.hexagram { display: flex; flex-direction: column; gap: 12px; padding: 14px 6px; }
.hexagram.done .yao-line.on { box-shadow: 0 0 16px rgba(232, 197, 110, .55); }
.yao { display: flex; align-items: center; gap: 8px; }
.yao-name { font-size: 10px; color: var(--ink-faint); width: 26px; letter-spacing: .05em; }
.yao-line {
  width: 84px; height: 11px;
  border-radius: 3px;
  border: 1px dashed rgba(160, 140, 255, .22);
  transition: all .4s;
}
.yao-line.on { border: none; }
.yao-line.on.yang { background: linear-gradient(90deg, #f2d488, #c9a34e); }
.yao-line.on.yin { background: linear-gradient(90deg, #f2d488 0 40%, transparent 40% 60%, #c9a34e 60%); }
.yao-line.on.moving { box-shadow: 0 0 12px rgba(255, 74, 60, .5); }
.yao-mark { font-size: 13px; color: var(--cinnabar); width: 14px; }

.coin-stage {
  position: relative; height: 300px;
  touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: pointer;
}
.coin-floor {
  position: absolute; bottom: 44px; left: 50%;
  width: 190px; height: 30px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(232, 197, 110, .16), transparent 70%);
}
.coin {
  position: absolute; bottom: 58px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 244, 200, .9), transparent 36%),
    radial-gradient(circle, #d9b56a 30%, #a97e3a 70%, #7c5a26 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
  display: flex; align-items: center; justify-content: center;
}
.coin .hole {
  width: 13px; height: 13px;
  background: #17102c;
  border: 1.5px solid rgba(120, 88, 40, .9);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8);
}
.coin.c0 { left: calc(50% - 88px); }
.coin.c1 { left: calc(50% - 24px); }
.coin.c2 { left: calc(50% + 40px); }
.coin.zi::after {
  content: "通 寶";
  position: absolute;
  font-family: var(--serif); font-size: 9px; font-weight: 900;
  color: rgba(90, 62, 20, .9);
  letter-spacing: 18px; text-indent: 18px;
  transform: rotate(90deg);
}
.coin.back { filter: brightness(.82) saturate(.9); }
.coin-result {
  position: absolute; bottom: 6px; left: 0; right: 0;
  text-align: center;
  font-size: 12.5px; color: var(--gold);
  letter-spacing: .12em;
  min-height: 20px;
  margin: 0;
}

.gua-pair { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 4px; }
.gua-card {
  border: 1px solid rgba(232, 197, 110, .16);
  border-radius: 16px;
  background: var(--void-2);
  padding: 14px 18px;
  width: 128px;
}
.gua-card small { font-size: 10px; letter-spacing: .3em; color: var(--ink-faint); }
.gua-glyph { display: flex; flex-direction: column; gap: 5px; margin: 10px auto 10px; width: 56px; }
.gline { height: 7px; border-radius: 2px; }
.gline.gyang { background: linear-gradient(90deg, #f2d488, #c9a34e); }
.gline.gyin { background: linear-gradient(90deg, #f2d488 0 40%, transparent 40% 60%, #c9a34e 60%); }
.gua-card b { display: block; font-family: var(--serif); font-size: 16px; font-weight: 900; }
.gua-card span { font-size: 10.5px; color: var(--ink-dim); display: block; margin-top: 3px; line-height: 1.6; }
.gua-arrow { font-size: 11px; color: var(--ink-faint); text-align: center; letter-spacing: .1em; }
.gua-arrow i { display: block; font-style: normal; font-size: 20px; color: var(--gold); margin-top: 4px; }

/* ============ 塔罗 ============ */
.tarot-stage { position: relative; height: 250px; margin-top: 4px; }
.tback {
  width: 64px; height: 100px;
  border-radius: 9px;
  border: 1px solid rgba(200, 180, 255, .45);
  background:
    radial-gradient(circle at 50% 36%, rgba(123, 108, 255, .5), transparent 55%),
    linear-gradient(160deg, #221a41, #110d22 75%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
  position: relative;
}
.tback::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  background: rgba(232, 197, 110, .8);
}
.tarot-swirl { position: absolute; inset: 0; }
.swirl-c {
  position: absolute; left: calc(50% - 32px); top: calc(50% - 50px);
  animation: swirl 1.5s linear infinite;
  animation-delay: calc(var(--k) * -0.19s);
  opacity: .9;
}
@keyframes swirl {
  from { transform: rotate(0deg) translateX(86px) rotate(20deg); }
  to { transform: rotate(360deg) translateX(86px) rotate(380deg); }
}
.tarot-fan { position: absolute; inset: 0; transition: opacity .5s; }
.tarot-fan.fade { opacity: 0; pointer-events: none; }
.fan-c {
  position: absolute; left: calc(50% - 32px); bottom: 12px;
  transform-origin: 50% 150%;
  transform: rotate(calc((var(--k) - 3) * 16deg));
  cursor: pointer;
  padding: 0;
  transition: transform .25s, opacity .3s, filter .3s;
}
.fan-c:hover, .fan-c:focus-visible { transform: rotate(calc((var(--k) - 3) * 16deg)) translateY(-14px); filter: brightness(1.25); }
.fan-c.taken { opacity: .18; pointer-events: none; }

.tarot-slots { display: flex; justify-content: center; gap: 14px; margin-top: 10px; }
.tslot small { display: block; font-size: 11px; letter-spacing: .3em; color: var(--ink-faint); margin-bottom: 8px; text-align: center; }
.tslot-card {
  width: 88px; height: 138px;
  border-radius: 11px;
  background: rgba(160, 140, 255, .06);
}
.tslot.filled .tslot-card { border: none; }
.tcard { width: 88px; height: 138px; perspective: 700px; cursor: pointer; }
.tcard-inner {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.2, .85, .3, 1.05);
  animation: cardIn .4s ease-out;
}
.tcard.flip .tcard-inner { transform: rotateY(180deg); }
.tface {
  position: absolute; inset: 0;
  border-radius: 11px;
  backface-visibility: hidden;
  border: 1px solid rgba(200, 180, 255, .45);
}
.tback-face {
  background:
    radial-gradient(circle at 50% 36%, rgba(123, 108, 255, .5), transparent 55%),
    linear-gradient(160deg, #221a41, #110d22 75%);
}
.tback-face::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  background: rgba(232, 197, 110, .8);
}
.tfront {
  transform: rotateY(180deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 4px;
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, hsla(var(--hue), 80%, 62%, .35), transparent 55%),
    linear-gradient(170deg, #1e1638, #100c20 75%);
  box-shadow: 0 0 26px hsla(var(--hue), 80%, 60%, .25);
}
.tfront .tnum { font-family: var(--serif); font-size: 17px; color: var(--gold); letter-spacing: .1em; }
.tfront b { font-family: var(--serif); font-size: 16px; font-weight: 900; }
.tfront small { font-size: 7px; letter-spacing: .12em; color: var(--ink-faint); }
.tfront.rev .tnum, .tfront.rev b, .tfront.rev small { transform: rotate(180deg); }
.trev-chip {
  position: absolute; top: 6px; right: 6px;
  font-size: 9px; color: #ffb3ac;
  border: 1px solid rgba(255, 74, 60, .45);
  border-radius: 999px;
  padding: 1px 7px;
}
.tarot-final { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 8px; }
.tfinal-item { text-align: center; }
.tfinal-item small { display: block; font-size: 10px; letter-spacing: .26em; color: var(--ink-faint); }
.tfinal-item b { font-family: var(--serif); font-size: 17px; font-weight: 900; }
.tfinal-item b i { font-style: normal; font-size: 10px; color: #ffb3ac; vertical-align: super; margin-left: 2px; }
.tfinal-sep { width: 14px; height: 1px; background: var(--line); }

/* ============ 水晶球 ============ */
.crystal-stage {
  position: relative;
  height: 360px;
  display: grid; place-items: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: pointer;
}
.crystal {
  position: relative;
  width: 236px; height: 236px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(200, 180, 255, .38);
  background:
    radial-gradient(circle at 50% 115%, rgba(123, 108, 255, .4), transparent 55%),
    radial-gradient(circle, rgba(20, 16, 40, .7), rgba(10, 8, 18, .95) 80%);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .65),
    inset 0 0 50px rgba(123, 108, 255, .18);
  filter: brightness(calc(1 + var(--boil, 0) * .3));
}
.mist {
  position: absolute;
  width: 150px; height: 150px;
  border-radius: 50%;
  filter: blur(26px);
  opacity: .65;
  transition: opacity 1.2s, transform 1.2s;
}
.mist.m1 { left: -16px; top: 26px; background: rgba(123, 108, 255, .6); animation: drift1 7s ease-in-out infinite alternate; }
.mist.m2 { right: -20px; top: 60px; background: rgba(255, 122, 223, .45); animation: drift2 9s ease-in-out infinite alternate; }
.mist.m3 { left: 46px; bottom: -26px; background: rgba(111, 224, 255, .4); animation: drift3 8s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(40px, 30px) rotate(40deg); } }
@keyframes drift2 { to { transform: translate(-46px, 24px) rotate(-50deg); } }
@keyframes drift3 { to { transform: translate(20px, -44px) rotate(30deg); } }
.boiling .mist { animation-duration: 1.6s, 1.6s, 1.6s; }
.parting .mist { opacity: 0; transform: scale(1.7); }
.cr-glare {
  position: absolute; left: 14%; top: 9%;
  width: 34%; height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .5), transparent 70%);
  transform: rotate(-24deg);
}
.cr-answer {
  position: absolute; inset: 14%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--serif); font-size: 16.5px; line-height: 2;
  color: var(--ink);
  text-shadow: 0 0 18px rgba(123, 108, 255, .8);
  opacity: 0;
  transition: opacity 1.1s .3s;
}
.cr-answer.show { opacity: 1; }
.cr-base {
  width: 130px; height: 30px;
  margin: -12px auto 0;
  border-radius: 8px 8px 16px 16px;
  background: linear-gradient(170deg, #e9eaf5 6%, #9c9cb8 40%, #55556e 90%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}
.cr-ring { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%) rotate(-90deg); width: 60px; height: 60px; }
.cr-echo { font-size: 12.5px; color: var(--ink-faint); margin: 12px 0 4px; }

/* ============ 缘分合盘 ============ */
.syn-stage { position: relative; height: 260px; display: grid; place-items: center; }
.syn-orbit { position: relative; width: 240px; height: 240px; }
.syn-star {
  position: absolute; left: 50%; top: 50%;
  width: 15px; height: 15px;
  margin: -7px 0 0 -7px;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: synOrbit 2.3s cubic-bezier(.4, .1, .3, 1) forwards;
}
.syn-star.sa { background: var(--holo-c); filter: drop-shadow(0 0 12px rgba(111, 224, 255, .9)); }
.syn-star.sb { background: var(--holo-b); filter: drop-shadow(0 0 12px rgba(255, 122, 223, .9)); animation-name: synOrbitB; }
@keyframes synOrbit {
  from { transform: rotate(0deg) translateX(108px) scale(.8); }
  to { transform: rotate(720deg) translateX(5px) scale(1.25); }
}
@keyframes synOrbitB {
  from { transform: rotate(180deg) translateX(108px) scale(.8); }
  to { transform: rotate(-540deg) translateX(5px) scale(1.25); }
}
.syn-burst {
  position: absolute; left: 50%; top: 50%;
  width: 130px; height: 130px;
  margin: -65px 0 0 -65px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .85), rgba(123, 108, 255, .5) 40%, transparent 70%);
  transform: scale(0);
  opacity: 0;
}
.syn-burst.go { animation: synBurst .9s ease-out forwards; }
@keyframes synBurst {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(2.6); opacity: 0; }
}
.syn-names {
  position: absolute; bottom: -6px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 12px; align-items: baseline;
  font-family: var(--serif); font-weight: 900; font-size: 19px;
}
.syn-names em { font-style: normal; color: var(--cinnabar); font-size: 14px; }
.syn-index { text-align: center; margin-top: 22px; }
.syn-index small { font-size: 11px; letter-spacing: .4em; color: var(--ink-faint); text-indent: .4em; }
.syn-index b {
  display: block;
  font-family: var(--serif); font-weight: 900; font-size: 84px; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.syn-dims { display: flex; justify-content: center; gap: 10px; }
.syn-dims span {
  font-size: 12px; color: var(--ink-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 13px;
  font-variant-numeric: tabular-nums;
}
.syn-head { text-align: center; margin-top: 4px; }
.syn-head b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 900; }
.syn-head small { display: block; font-size: 11.5px; color: var(--ink-faint); letter-spacing: .14em; }
/* 关系原型称号 */
.syn-arch {
  display: inline-block;
  margin: 2px auto 4px;
  padding: 3px 14px;
  font-family: var(--serif); font-weight: 900; font-size: 15px;
  color: var(--gold);
  border: 1px solid rgba(232, 197, 110, .22);
  border-radius: 999px;
  background: rgba(232, 197, 110, .1);
  letter-spacing: .1em;
}

/* 命理依据折叠开关 */
.sev-toggle {
  display: block;
  margin: 2px auto 8px;
  padding: 6px 16px;
  font-size: 11.5px; letter-spacing: .16em;
  color: var(--ink-faint);
  background: none;
  border: 1px dashed var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.sev-toggle:active { transform: scale(.96); }

/* 换个关系看看 */
.syn-switch { margin: 4px 0 10px; text-align: center; }
.syn-switch small { display: block; font-size: 10.5px; letter-spacing: .24em; color: var(--ink-faint); margin-bottom: 8px; }
.ss-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ss-chip {
  padding: 6px 13px;
  font-size: 12px;
  color: var(--ink-dim);
  background: var(--void-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.ss-chip.on { color: var(--gold); border-color: rgba(232, 197, 110, .5); background: rgba(232, 197, 110, .08); }
.ss-chip:active { transform: scale(.95); }

/* 合参依据：评分引擎判出的合冲生克逐条展示 */
.syn-evidence {
  margin: 0 0 12px;
  padding: 14px 16px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--void-2);
  text-align: left;
}
.sev-group { margin-bottom: 10px; }
.sev-group:last-child { margin-bottom: 2px; }
.sev-group small {
  font-size: 10px; letter-spacing: .3em; color: var(--ink-faint);
  display: block; margin-bottom: 4px;
}
.sev-group ul { margin: 0; padding: 0; list-style: none; }
.sev-group li {
  font-size: 12.5px; line-height: 1.7; color: var(--ink-dim);
  padding: 3px 0 3px 16px; position: relative;
}
.sev-group li::before {
  position: absolute; left: 0; top: 3px;
  font-weight: 900;
}
.sev-plus::before { content: "+"; color: #7ee2a8; }
.sev-minus::before { content: "−"; color: #ff8a7e; }
.sev-flat::before { content: "·"; color: var(--ink-faint); }
.syn-tips { margin: 0 0 6px; padding: 14px 16px; list-style: none; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--void-2); text-align: left; }
.syn-tips li { font-size: 13.5px; color: var(--ink-dim); padding: 7px 0 7px 18px; position: relative; }
.syn-tips li::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); background: var(--gold); }
.syn-poster { display: grid; gap: 12px; justify-items: center; margin: 18px 0 10px; }
.syn-poster img { max-width: 82%; border-radius: 14px; border: 1px solid rgba(200, 180, 255, .35); box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
.syn-poster .btn { text-decoration: none; }

/* ============ 愿池 ============ */
.pool-scene { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 16px; }
.pond-water {
  position: relative;
  width: 100%; height: 150px;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(111, 224, 255, .16), transparent 55%),
    radial-gradient(100% 130% at 80% 100%, rgba(123, 108, 255, .28), transparent 60%),
    linear-gradient(180deg, #131b33, #0d1024 70%);
  border: 1px solid rgba(111, 224, 255, .22);
  box-shadow: inset 0 6px 24px rgba(0, 0, 0, .5);
}
.pond-water.big { height: 190px; }
.pond-water.splash { animation: splashP .5s ease-out; }
@keyframes splashP { 30% { filter: brightness(1.4); } }
.pond-ripple {
  position: absolute; left: 50%; top: 55%;
  width: 120px; height: 44px;
  margin: -22px 0 0 -60px;
  border-radius: 50%;
  border: 1px solid rgba(111, 224, 255, .22);
  animation: pondR 4s ease-out infinite;
}
.pond-ripple.r2 { animation-delay: 1.4s; }
.pond-ripple.r3 { animation-delay: 2.7s; }
@keyframes pondR {
  from { transform: scale(.25); opacity: .9; }
  to { transform: scale(2.1); opacity: 0; }
}
.koi { position: absolute; left: 40%; top: 48%; }
.koi-body {
  display: block;
  width: 38px; height: 15px;
  border-radius: 50% 60% 60% 50%;
  background: linear-gradient(90deg, #fff 8%, #ff9a6b 34%, #e0512f 78%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}
.koi-tail {
  position: absolute; left: -12px; top: 1px;
  width: 14px; height: 13px;
  clip-path: polygon(100% 50%, 0 0, 26% 50%, 0 100%);
  background: rgba(255, 154, 107, .85);
  transform-origin: right center;
  animation: wag .45s ease-in-out infinite alternate;
}
@keyframes wag { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.koi.orbit {
  left: 50%; top: 52%;
  animation: koiOrbit 11s linear infinite;
}
@keyframes koiOrbit {
  from { transform: rotate(0deg) translateX(96px) rotate(90deg) scale(.9); }
  to { transform: rotate(-360deg) translateX(96px) rotate(450deg) scale(.9); }
}
.koi.swim { animation: koiSwim 1.6s cubic-bezier(.4, .1, .5, 1) forwards; }
@keyframes koiSwim {
  from { transform: translateX(-130px) rotate(4deg); }
  to { transform: translateX(90px) rotate(-4deg); }
}
.wish-pond { position: relative; margin-top: 8px; }
.wish-coin {
  position: absolute; right: 24%; top: 30px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 244, 200, .9), transparent 36%),
    radial-gradient(circle, #d9b56a 30%, #a97e3a 70%, #7c5a26 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5);
}
.wish-coin .hole { width: 11px; height: 11px; background: #17102c; border: 1.5px solid rgba(120, 88, 40, .9); }
.wish-note {
  position: absolute; left: 0; right: 0; top: 26px;
  text-align: center;
  font-family: var(--serif); font-size: 15px;
  color: var(--ink);
  opacity: 0;
  transition: opacity .7s, transform 1s;
}
.wish-note.show { opacity: 1; }
.wish-note.taken { opacity: 0; transform: translateY(58px) scale(.7); }
.lamp {
  position: absolute;
  width: 9px; height: 13px;
  border-radius: 5px 5px 3px 3px;
  background: linear-gradient(180deg, #ffe9ae, #e8c56e 70%);
  box-shadow: 0 0 14px rgba(232, 197, 110, .8);
  animation: lampBob 3.4s ease-in-out infinite alternate;
}
.lamp.l0 { left: 18%; top: 38%; }
.lamp.l1 { right: 22%; top: 58%; animation-delay: 1s; }
.lamp.l2 { left: 58%; top: 26%; animation-delay: 2s; }
@keyframes lampBob { from { transform: translateY(0); } to { transform: translateY(7px); } }

.wish-list { margin: 6px 0 0; padding: 0; list-style: none; }
.wish-item {
  padding: 13px 0;
  border-top: 1px dashed rgba(160, 140, 255, .12);
}
.wi-main b { font-family: var(--serif); font-size: 15px; font-weight: 700; display: block; }
.wi-main small { font-size: 11px; color: var(--ink-faint); }
.wi-actions { display: flex; gap: 8px; margin-top: 9px; }
.wi-btn {
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(123, 108, 255, .07);
  color: var(--ink-dim);
  padding: 6px 14px;
  cursor: pointer;
  min-height: 32px;
}
.wi-btn.gold { border-color: rgba(232, 197, 110, .45); color: var(--gold); background: rgba(232, 197, 110, .07); }
.wi-btn.dim { opacity: .75; }
.wi-btn:active { transform: scale(.95); }
.wish-list.done .wi-main b { color: var(--ink-dim); }
.wish-done-cap { font-size: 11px; letter-spacing: .26em; color: var(--ink-faint); margin: 20px 0 2px; }
.pool-note { font-size: 11px; color: var(--ink-faint); text-align: center; line-height: 1.9; margin: 4px 0 10px; }

/* ============ 通用弹层与月报 ============ */
.myn-modal { position: absolute; inset: 0; z-index: 82; }
.mm-card {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, 88%);
  border-radius: 22px;
  border: 1px solid rgba(232, 197, 110, .4);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(232, 197, 110, .1), transparent 55%),
    var(--void-3);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  padding: 26px 24px;
  text-align: center;
}
.modal-cap { font-size: 11px; letter-spacing: .42em; color: var(--cinnabar); margin: 0 0 14px; }
.modal-serif { font-family: var(--serif); font-size: 15.5px; line-height: 2.1; color: var(--ink); margin: 0 0 10px; text-align: left; }
.modal-sub { font-size: 12px; color: var(--ink-faint); margin: 0; }
.report-stats { display: flex; justify-content: center; gap: 22px; margin: 4px 0 12px; }
.report-stats span { font-size: 11.5px; color: var(--ink-faint); }
.report-stats b { display: block; font-family: var(--serif); font-size: 30px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }
.report-types { font-size: 12px; color: var(--ink-dim); margin: 0 0 12px; }

@media (max-width: 380px) {
  .ly-layout { grid-template-columns: 1fr; }
  .hexagram { flex-direction: column; align-items: center; }
}

/* ============ 命盘页锚点导航 ============ */
.me-nav {
  position: sticky; top: -26px; z-index: 30;
  display: flex; gap: 8px;
  padding: 10px 0;
  margin: -6px 0 12px;
  background: linear-gradient(180deg, var(--void) 78%, transparent);
}
.me-nav button {
  flex: 1;
  font-size: 12px; letter-spacing: .1em;
  padding: 7px 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(20, 16, 33, .8);
  backdrop-filter: blur(8px);
  color: var(--ink-dim);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.me-nav button:hover, .me-nav button:focus-visible { color: var(--gold); border-color: rgba(232, 197, 110, .45); }
#meCard, #meTujian, #meQp, #meAI { scroll-margin-top: 54px; }

/* ============ 转运搭子 ============ */
.view-chat.active { display: flex; flex-direction: column; }
.pt-setup { text-align: center; padding-top: 8vh; }
.pt-setup .fs-title { line-height: 1.6; }
.pt-setup .fs-sub { line-height: 2; margin-bottom: 30px; }
.pt-q { font-family: var(--serif); font-size: 16px; color: var(--gold); letter-spacing: .3em; text-indent: .3em; margin: 0 0 14px; }
.pt-gender { display: flex; gap: 12px; justify-content: center; max-width: 300px; margin: 0 auto 26px; }
.pt-gender .topic-chip { flex: 1; }
.pt-alt { font-size: 12px; color: var(--ink-faint); margin: 0 0 30px; }
.pt-alt-btn {
  font-size: 12px;
  border: 1px dashed var(--line);
  background: none;
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 5px 12px;
  margin: 0 3px;
  cursor: pointer;
}
.pt-alt-btn:hover { color: var(--gold); border-color: rgba(232, 197, 110, .45); }

.mode-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.mode-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; letter-spacing: .06em;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(123, 108, 255, .06);
  color: var(--ink-dim);
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.mode-chip.on {
  color: var(--gold);
  border-color: rgba(232, 197, 110, .55);
  background: rgba(232, 197, 110, .08);
  box-shadow: 0 0 14px rgba(232, 197, 110, .12);
}
.mode-chip.locked { opacity: .55; }
.mode-next { font-size: 11px; color: var(--ink-faint); margin: 2px 0 10px; letter-spacing: .04em; }

.chat-list {
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 6px 2px 12px;
  scrollbar-width: none;
  min-height: 0;
}
.chat-list::-webkit-scrollbar { display: none; }
.bubble {
  max-width: 78%;
  padding: 10px 15px;
  border-radius: 17px;
  font-size: 14.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  animation: bubbleIn .25s ease-out;
}
@keyframes bubbleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bubble.ta {
  align-self: flex-start;
  background: var(--void-3);
  border: 1px solid var(--line);
  color: var(--ink);
  border-bottom-left-radius: 5px;
}
.bubble.me {
  align-self: flex-end;
  background: linear-gradient(160deg, rgba(255, 106, 92, .9), rgba(230, 59, 46, .9));
  color: #fff;
  border-bottom-right-radius: 5px;
}
.bubble.typing { animation: thinkPulse 1.2s ease-in-out infinite; color: var(--ink-faint); }

.chat-inputrow {
  display: flex; gap: 8px;
  padding-top: 10px;
  flex-shrink: 0;
}
.chat-inputrow input {
  flex: 1;
  background: var(--void-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 15px;
  padding: 12px 18px;
  min-width: 0;
}
.chat-send {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(160deg, #ff6a5c, var(--cinnabar-deep));
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(255, 74, 60, .35);
  flex-shrink: 0;
}
.chat-send:active { transform: scale(.93); }

/* ============ AI 资产集成（深紫底烘焙图 + 径向蒙版融入 UI） ============ */
/* 今日页 · 星空祭坛底图：整幅铺满首屏（顶栏文字之后），底部渐隐溶进页面背景 */
.today-scene {
  position: absolute; top: 0; left: 0; right: 0;
  height: 600px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 76%, transparent 99%);
}
.today-scene img {
  width: 100%; height: 100%;
  margin-top: -82px; /* 整图上提：法坛圆盘紧贴批语文字下方，底边缘藏在宜忌卡之下 */
  object-fit: cover;
  object-position: center 78%;
  opacity: .95;
  animation: shBreathe 9s ease-in-out infinite;
  will-change: transform, opacity;
}
/* 灵气粒子：自法坛缓缓上升，克制稀疏，首屏呼吸感 */
.today-scene i {
  position: absolute;
  bottom: 150px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(232, 197, 110, .75);
  filter: blur(1px);
  opacity: 0;
  animation: sceneRise 12s linear infinite;
}
.today-scene i:nth-child(2) { left: 24%; animation-delay: 0s; }
.today-scene i:nth-child(3) { left: 38%; animation-delay: 4.2s; width: 3px; height: 3px; animation-duration: 14s; }
.today-scene i:nth-child(4) { left: 47%; animation-delay: 8.5s; width: 5px; height: 5px; filter: blur(2px); }
.today-scene i:nth-child(5) { left: 56%; animation-delay: 2.1s; background: rgba(190, 150, 255, .6); animation-duration: 15s; }
.today-scene i:nth-child(6) { left: 66%; animation-delay: 6.4s; width: 3px; height: 3px; }
.today-scene i:nth-child(7) { left: 74%; animation-delay: 10.6s; background: rgba(190, 150, 255, .55); filter: blur(2px); }
.today-scene i:nth-child(8) { left: 31%; animation-delay: 12.8s; animation-duration: 16s; width: 3px; height: 3px; }
.today-scene i:nth-child(9) { left: 61%; animation-delay: 14.9s; width: 5px; height: 5px; filter: blur(2.5px); animation-duration: 13s; }
@keyframes sceneRise {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: .5; }
  60% { opacity: .28; }
  100% { transform: translateY(-260px); opacity: 0; }
}
/* 弱化文字区：顶部（问候/日期）纱最重，往下渐透，底图不抢字 */
.today-scene::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 8, 18, .78),
    rgba(10, 8, 18, .42) 24%,
    rgba(10, 8, 18, .1) 48%,
    rgba(10, 8, 18, .3) 100%);
}
/* 法坛微呼吸：只动 transform/opacity，走合成器不触发重绘 */
@keyframes shBreathe {
  0%, 100% { transform: scale(1); opacity: .88; }
  50% { transform: scale(1.05); opacity: 1; }
}
#view-today > :not(.today-scene) { position: relative; z-index: 1; }
.score-hero { min-height: 296px; display: flex; flex-direction: column; justify-content: flex-start; }

/* 大厅 · 资产图标 */
.pc-img {
  display: block;
  width: 46px; height: 46px;
  border-radius: 13px;
  background-size: cover;
  background-position: center;
}
.hp-img {
  flex-shrink: 0;
  width: 58px; height: 84px;
  border-radius: 14px;
  background-size: cover;
  background-position: center 42%;
}

/* 灵签选题页 · 供桌香炉（透明抠图） */
.ask-altar {
  width: min(58vw, 226px);
  aspect-ratio: 1244 / 1168;
  margin: 22px auto 0;
  background: url("assets/ai/altar.webp") center / contain no-repeat;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .5));
}

/* 掷筊 · 筊杯真身（透明抠图独立两张：平面金 / 凸面红，投影由 CSS 补） */
.jiao-cup {
  width: 118px; height: 74px;
  border-radius: 0;
  background: url("assets/ai/jiao-round.webp") center / contain no-repeat; /* 默认凸面红 */
  box-shadow: none;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .5));
}
/* 用完整简写覆盖：基础 CSS 里的 .jiao-cup.up-flat 简写会把 background-size 重置为 auto */
.jiao-cup.up-round { background: url("assets/ai/jiao-round.webp") center / contain no-repeat; }
.jiao-cup.up-flat { background: url("assets/ai/jiao-flat.webp") center / contain no-repeat; }
.jiao-cup .jc-flat { display: none; }
.jiao-cup.ja { left: calc(50% - 128px); }
.jiao-cup.jb { left: calc(50% + 10px); }

/* 六爻 · 铜钱真身（透明抠图：素背 / 招财进宝字面） */
.coin {
  background: url("assets/ai/coin-back.webp") center / contain no-repeat; /* 默认素背 */
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .45));
}
.coin .hole { display: none; }
.coin.zi { background-image: url("assets/ai/coin-zi.webp"); }
.coin.zi::after { display: none; }
.coin.back { background-image: url("assets/ai/coin-back.webp"); filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .45)) brightness(.88); }

/* 木鱼真身（透明抠图，自带木槌与「静」金印） */
.muyu {
  width: 268px; height: 192px;
  border-radius: 0;
  background: url("assets/ai/muyu.webp") center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5));
}
.muyu-slit, .muyu-dot, .muyu-shadow { display: none; }

/* 水晶球真身（透明抠图：球+底座整件，竖构图） */
.crystal {
  width: 208px; height: 296px;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: url("assets/ai/crystal.webp") center / contain no-repeat;
  filter: brightness(calc(1 + var(--boil, 0) * .35)) saturate(calc(1 + var(--boil, 0) * .3)) drop-shadow(0 20px 24px rgba(0, 0, 0, .5));
}
.crystal .mist, .cr-glare { display: none; }
.cr-base { display: none; }
/* 雾散揭示：星云调暗让答案浮现（云谕文本较长，暗底才读得清）
   transition 只挂在 parting 态，避免拖慢蓄力时逐帧的 --boil 亮度反馈 */
.parting .crystal { filter: brightness(.32) saturate(.65) drop-shadow(0 20px 24px rgba(0, 0, 0, .5)); transition: filter 1.2s ease; }
/* 云谕文字：暖金发光体浮现球心；已移出 .crystal（滤镜不连坐），绝对定位对准球心区 */
.crystal-stage .cr-answer {
  position: absolute;
  inset: auto;
  top: 52px; left: 50%;
  transform: translateX(-50%);
  width: 142px; height: 112px; /* 块心 ≈ 球体圆心（图内 y≈104） */
  font-size: 14px; line-height: 1.9;
  font-weight: 600;
  color: #ffedc2;
  text-shadow:
    0 1px 6px rgba(0, 0, 0, .9),
    0 0 14px rgba(232, 197, 110, .55),
    0 0 32px rgba(232, 197, 110, .3);
}

/* 塔罗 · 卡背真身 */
.tback, .tback-face {
  background: url("assets/ai/tarotback.webp") center / cover;
  border: none;
}
.tback::after, .tback-face::after { display: none; }

/* 命运骰 · 设置页展示图（透明抠图） */
.dice-heroimg {
  width: 140px; height: 146px;
  margin: 4px auto 14px;
  background: url("assets/ai/dice.webp") center / contain no-repeat;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5));
}

/* 愿池 · 无框夜池场景：香炉入景 + 椭圆水面融进背景 + 锦鲤椭圆巡游 */
.pond2 {
  position: relative;
  width: 100%; height: 232px;
}
.pond2-water {
  position: absolute; left: 50%; top: 52%;
  width: min(96%, 384px); height: 172px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(58% 54% at 50% 40%, rgba(111, 224, 255, .12), transparent 68%),
    radial-gradient(50% 50% at 50% 50%, rgba(52, 76, 148, .42) 28%, rgba(24, 32, 66, .5) 54%, rgba(16, 18, 40, .24) 66%, transparent 74%);
}
/* 月光水缘：一圈柔和内环光，替代硬边框 */
.pond2-water::after {
  content: "";
  position: absolute; inset: 5% 7%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, transparent 64%, rgba(111, 224, 255, .13) 71%, transparent 78%);
}
.pond2-rip {
  position: absolute; left: 50%; top: 52%;
  width: 150px; height: 56px;
  margin: -28px 0 0 -75px;
  border-radius: 50%;
  border: 1px solid rgba(111, 224, 255, .2);
  animation: pondR 4.6s ease-out infinite;
}
.pond2-rip.p2 { animation-delay: 1.5s; }
.pond2-rip.p3 { animation-delay: 3s; }
/* 真水面循环视频（12fps 768² 290KB）：盖在 CSS 静水上，四缘椭圆渐隐零接缝；播不了时下层静水兜底 */
.pond2-video {
  position: absolute; left: 50%; top: 52%;
  width: min(100%, 402px); height: 224px;
  transform: translate(-50%, -50%);
  object-fit: cover;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 58%, transparent 95%);
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 58%, transparent 95%);
}
/* 许愿流程内的小水池：同一套真水面，紧凑变体 */
.pond2-flow { height: 200px; }
.pond2-flow .pond2-water { top: 50%; height: 150px; }
.pond2-flow .pond2-video { top: 50%; height: 194px; }
.pond2.splash { animation: splashP .5s ease-out; }
.pond2-flow .wish-note { top: 34%; text-shadow: 0 1px 8px rgba(10, 8, 18, .9), 0 0 2px rgba(10, 8, 18, .8); }
/* 锦鲤椭圆巡游：Motion Path 沿真椭圆走位，老浏览器回落圆轨 */
.pond2 .koi { width: 80px; height: 49px; }
.koi.orbit2 {
  position: absolute; left: 50%; top: 52%;
  animation: koiOrbit 11s linear infinite;
}
@supports (offset-path: ellipse(10px 10px at 50% 50%)) {
  .koi.orbit2 {
    left: 0; top: 0;
    offset-path: ellipse(102px 40px at 50% 52%);
    offset-rotate: auto;
    animation: koiPath 13s linear infinite;
  }
}
@keyframes koiPath { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* 愿池页垂直居中：内容不满屏时场景居中，满屏时恢复常规流式滚动 */
#view-pool.active { display: flex; flex-direction: column; }
#view-pool .pool-scene { margin-top: auto; }
#view-pool .pool-note { margin-bottom: auto; }
/* 长明灯落在新水面上 */
.pond2 .lamp.l0 { left: 27%; top: 50%; }
.pond2 .lamp.l1 { right: 27%; top: 64%; }
.pond2 .lamp.l2 { left: 61%; top: 44%; }
.koi { width: 92px; height: 56px; }
.koi-img {
  position: absolute; inset: 0;
  background: url("assets/ai/koi.webp") center / contain no-repeat; /* 透明抠图整鱼 */
  transform: scaleX(-1); /* 原图头朝左，翻成头朝右配合游动方向 */
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .4));
}
.koi-body, .koi-tail { display: none; }

/* ---- 灵签 · 签筒真身（透明抠图版，投影由 CSS 补；金牌为无字版，「靈籤」由下方 CSS 叠字） ---- */
.tube-wrap { width: 200px; height: 321px; }
/* 图放在背景伪元素上，与飞签解耦 */
.tube-wrap::before {
  content: "";
  position: absolute; inset: 0;
  background: url("assets/ai/tube.webp") center / contain no-repeat;
  filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .5));
}
.tube-rim, .tube-rim-front { display: none; }
/* 筒身盒子退化为金牌上的定位框，只承载「靈籤」二字 */
.tube-body {
  background: none; border: none; box-shadow: none;
  top: 157px; bottom: auto; left: 74px; right: 76px; height: 128px;
}
.tube-zi { font-size: 19px; letter-spacing: .2em; color: #6b4a12; text-shadow: 0 1px 0 rgba(255, 235, 180, .55); }
/* 签支已烘焙在图里：CSS 签全部隐去，只留天命签在飞出瞬间现身（闪光粒子掩护登场） */
.stick { display: none; }
.sticks { left: 0; right: 0; bottom: 238px; height: 60px; }
.stick.s3 {
  height: 62px; width: 26px; left: calc(52% - 13px);
  rotate: 4deg; /* 对齐图内烘焙朱红签的位置与倾角，现身瞬间重合 */
  border-radius: 12px 12px 5px 5px;
  background: linear-gradient(165deg, #f87d63 8%, #d8402f 60%, #a52c1d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset -2px 0 3px rgba(0, 0, 0, .25);
}
.stick.s3::before { display: none; }
.stick.s3::after { display: none; }
.stick.s3.chosen { display: block; }
/* 大厅旗舰卡改用签筒本尊 */
.hp-img { background-position: center 18%; }

/* ---- 答案之书 · 三段式揭晓（闭合书 → 开书视频过场 → 魔法羊皮纸显字） ---- */
.book-stage { height: auto; min-height: 350px; padding: 6px 0; }
/* 开书过场 · 全屏视频层。视频为 3:4，等比 contain 不裁切；
   letterbox 底色与视频暗底同色，高潮亮场时 .lit 过渡到金白与画面同步铺满全屏 */
.book-cine {
  position: fixed; inset: 0; z-index: 400;
  background: #0a0812;
  opacity: 0;
  transition: opacity .35s ease, background-color .9s ease;
}
.book-cine.on { opacity: 1; }
.book-cine.lit { background: #fff3d6; }
.book-cine.fade { opacity: 0; transition: opacity .95s ease; }
.book-cine video { width: 100%; height: 100%; object-fit: contain; }
/* 魔法羊皮纸 · 呈现状态（答案打在纸上） */
.parchment {
  width: min(80vw, 330px);
  aspect-ratio: 680 / 961;
  background: url("assets/ai/parchment.webp") center / contain no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14% 16% 20%;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .5));
  animation: parchIn .7s cubic-bezier(.2, .9, .3, 1.05) both;
}
@keyframes parchIn {
  from { opacity: 0; transform: scale(.92) translateY(12px); }
}
.parchment .bo-answer { font-size: 20px; }
.parchment .bo-foot { max-width: 100%; }

/* ---- 塔罗 · 22 张牌面真身（牌名已烘焙在图内，CSS 文字隐去；逆位整张旋转） ---- */
.tslot-card, .tcard { width: 92px; }
.tfront.has-img { padding: 0; overflow: hidden; border: none; }
.tfront.has-img::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--face) center / cover;
  border-radius: inherit;
}
.tfront.has-img .tnum, .tfront.has-img b, .tfront.has-img small { display: none; }

/* ============ 无障碍与降级 ============ */
/* ---- 转运搭子 · 聊天页三层美术（背景层/人物层/氛围层） ---- */
.view-chat {
  background:
    linear-gradient(180deg, rgba(10, 8, 18, .35), rgba(10, 8, 18, 0) 26%),
    url("assets/ai/chat/bg.webp") center top / cover no-repeat #0a0812;
}
/* 问事 / 愿池 / 命盘：复用星夜底图但加重暗纱弱化，只留一层若有似无的星子 */
#view-hall, #view-pool, #view-me {
  background:
    linear-gradient(180deg, rgba(10, 8, 18, .72), rgba(10, 8, 18, .5) 45%, rgba(10, 8, 18, .74)),
    url("assets/ai/chat/bg.webp") center top / cover no-repeat #0a0812;
}
/* 选搭子 · 立绘双卡直选 */
.pt-pick { display: flex; gap: 14px; justify-content: center; margin: 0 auto 20px; max-width: 344px; }
.pt-card {
  flex: 1;
  border: none;
  border-radius: 20px;
  background: rgba(160, 140, 255, .07);
  padding: 18px 10px 14px;
  cursor: pointer;
  transition: transform .2s, background .2s;
}
.pt-card:hover { background: rgba(160, 140, 255, .12); }
.pt-card:active { transform: scale(.97); }
.pt-card img {
  height: 168px; max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .4));
}
.pt-card b { display: block; font-family: var(--serif); font-size: 17px; font-weight: 900; color: var(--ink); margin-top: 10px; }
.pt-card small { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 3px; letter-spacing: .05em; }
/* 人物卡：横幅底 + 模式表情头像 + 氛围挂件 */
.pt-hero {
  display: flex; align-items: center; gap: 12px;
  border-radius: 16px;
  background: url("assets/ai/chat/banner.webp") center / cover no-repeat;
  padding: 11px 14px;
  margin-bottom: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}
.pth-av {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.pth-info { flex: 1; min-width: 0; }
.pth-info b { display: block; font-family: var(--serif); font-weight: 900; font-size: 15px; }
.pth-info small { display: block; font-size: 11px; color: var(--ink-dim); margin-top: 1px; letter-spacing: .06em; }
.pth-charm {
  width: 46px; height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
  animation: charmBob 3.4s ease-in-out infinite;
}
@keyframes charmBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* 气泡旁圆头像（随模式换表情） */
.brow { display: flex; align-items: flex-end; gap: 8px; align-self: flex-start; max-width: 86%; }
.brow .bubble.ta { max-width: 100%; }
.b-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-bottom: 2px;
}

/* ---- 身强身弱 ---- */
.chip-strength { border-color: rgba(111, 224, 255, .35); color: #9adcf5; background: rgba(111, 224, 255, .07); }
.idc-strength {
  margin: 12px 0 0;
  font-size: 12.5px; line-height: 1.9;
  color: var(--ink-dim);
  font-family: var(--serif);
  border-top: 1px dashed rgba(160, 140, 255, .14);
  padding-top: 10px;
}

/* ---- 大运流年（命盘卡翻面显示） ---- */
#meCard .id-card { cursor: pointer; transition: transform .15s; margin-bottom: 0; }
#meCard .id-card:active { transform: scale(.985); }
.idc-flip { position: relative; perspective: 1500px; margin-bottom: 16px; }
.idc-flip-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.3, .8, .3, 1);
}
.idc-flip.flipped .idc-flip-inner { transform: rotateY(180deg); }
.idc-front { backface-visibility: hidden; }
/* 背面与正面等高（absolute 撑满），流年区卡内滚动 */
.idc-back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  display: flex; flex-direction: column;
  border-radius: 22px;
  padding: 16px 16px 12px;
  background:
    radial-gradient(circle at 18% 8%, rgba(111, 224, 255, .14), transparent 46%),
    radial-gradient(circle at 88% 92%, rgba(255, 122, 223, .12), transparent 46%),
    linear-gradient(165deg, #221a3e, #110d22 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 0 1px rgba(255, 255, 255, .03),
    0 2px 8px rgba(0, 0, 0, .3),
    0 20px 50px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.dyb-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-shrink: 0; }
.dyb-top .dy-sex { margin: 0; }
.dyb-unflip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; letter-spacing: .06em;
  padding: 5px 12px;
  border: none; border-radius: 999px;
  background: rgba(160, 140, 255, .1);
  color: var(--ink-dim);
  cursor: pointer;
}
.dyb-unflip:active { transform: scale(.94); }
.idc-back .dy-qiyun { margin: 0 0 8px; flex-shrink: 0; }
/* 金刚区：大运横条固定不随流年滚动 */
.dyb-strip { flex-shrink: 0; padding-bottom: 8px; }
.dyb-strip .dy-step { min-width: 76px; padding: 10px 8px 8px; }
.dyb-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(160, 140, 255, .25) transparent;
  padding-right: 4px;
}
.idc-back .dy-head b { font-size: 16px; }
.idc-back .dy-hint { margin: 6px 0 8px; font-size: 12.5px; }
.idc-back .dy-years li { padding: 7px 2px; font-size: 12.5px; }
.idc-more {
  margin-top: 10px;
  font-size: 12px; letter-spacing: .12em;
  color: var(--gold);
  opacity: .8;
}
.dy-sex { display: flex; gap: 10px; justify-content: center; margin: 2px 0 10px; }
.dy-qiyun {
  text-align: center;
  font-size: 12.5px; color: var(--ink-dim); letter-spacing: .08em;
  margin: 0 0 14px;
}
.dy-strip {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.dy-strip::-webkit-scrollbar { display: none; }
.dy-step {
  position: relative;
  flex: 0 0 auto;
  min-width: 84px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 10px 10px;
  border: none; border-radius: 16px;
  background: rgba(160, 140, 255, .07);
  color: var(--ink-dim);
  cursor: pointer;
  scroll-snap-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 4px 12px rgba(0, 0, 0, .22);
  transition: background .2s, transform .15s;
}
.dy-step:active { transform: scale(.95); }
.dy-step small { font-size: 10px; letter-spacing: .06em; color: var(--ink-faint); }
.dy-step b { font-family: var(--serif); font-size: 19px; font-weight: 900; color: var(--ink); }
.dy-step em { font-style: normal; font-size: 10.5px; color: var(--ink-faint); }
.dy-step.on {
  background: rgba(232, 197, 110, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 16px rgba(232, 197, 110, .14);
}
.dy-step.on b { color: var(--gold); }
.dy-now {
  position: absolute; top: -7px; right: -4px;
  font-style: normal;
  font-size: 9.5px; letter-spacing: .1em;
  padding: 2px 7px; border-radius: 999px;
  color: #1a1408;
  background: linear-gradient(160deg, #f2d488, #d8ab4e);
}
.dy-detail {
  border-radius: var(--r-lg);
  background: var(--void-2);
  padding: 16px 18px;
  margin-top: 6px;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 12px 28px rgba(0, 0, 0, .3);
}
.dy-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dy-head b { font-family: var(--serif); font-size: 18px; font-weight: 900; color: var(--gold); }
.dy-head span { font-size: 11px; color: var(--ink-faint); letter-spacing: .04em; }
.dy-hint { margin: 8px 0 12px; font-size: 13px; color: var(--ink-dim); line-height: 1.8; font-family: var(--serif); }
.dy-years { margin: 0; padding: 0; list-style: none; }
.dy-years li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 2px;
  border-top: 1px dashed rgba(160, 140, 255, .12);
  font-size: 13px; color: var(--ink-dim);
}
.dy-years li span { font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.dy-years li b { font-family: var(--serif); font-weight: 900; color: var(--ink); }
.dy-years li em { font-style: normal; font-size: 12px; }
.dy-years li small { margin-left: auto; font-size: 11px; color: var(--ink-faint); }
.dy-years li i {
  font-style: normal;
  font-size: 9.5px; letter-spacing: .1em;
  padding: 2px 7px; border-radius: 999px;
  color: #1a1408;
  background: linear-gradient(160deg, #f2d488, #d8ab4e);
}
.dy-years li.now { color: var(--ink); }
.dy-years li.now b { color: var(--gold); }
/* 喜用标记：单点=干或支命中，双环=干支皆喜 */
.dy-favdot {
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(232, 197, 110, .7);
  vertical-align: 1px;
}
.dy-favdot.d2 { box-shadow: 0 0 0 2px rgba(232, 197, 110, .35), 0 0 8px rgba(232, 197, 110, .8); }

/* ---- 体积感：卡片浮起（顶缘内高光 + 近影/远影双层），按钮轻抬 ---- */
.yiji-card, .cta-lot, .play-card, .locked-card, .scrollcard, .gua-card, .pt-card, .pt-hero {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 2px 6px rgba(0, 0, 0, .22),
    0 12px 28px rgba(0, 0, 0, .32);
}
.hero-play {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 2px 6px rgba(0, 0, 0, .24),
    0 16px 44px rgba(0, 0, 0, .4);
}
/* 命盘大卡：顶缘高光更亮一线 + 1px 极淡材质描光（非描边，是受光面） */
.id-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 0 1px rgba(255, 255, 255, .03),
    0 2px 8px rgba(0, 0, 0, .3),
    0 20px 50px rgba(0, 0, 0, .5);
}
.btn-ghost, .icon-btn, .topic-chip, .mode-chip, .pt-alt-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 4px 12px rgba(0, 0, 0, .22);
}
.btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 2px 6px rgba(0, 0, 0, .25),
    0 8px 26px rgba(255, 74, 60, .32);
}
/* 点击缩放反馈补全（声音/震动由全局 pointerdown 统一给） */
.topic-chip:active, .mode-chip:active, .pt-alt-btn:active, .icon-btn:active,
.ss-chip:active, .sev-toggle:active, .locked-card:active { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .15s !important;
  }
}