/* ============ 知心 · 问事阁 中国风主题 ============ */
:root {
  --bg0: #15100c;
  --bg1: #241a12;
  --paper: #f3e9d2;
  --paper-dark: #e8dabb;
  --ink: #322519;
  --gold: #d0ab68;
  --gold-dim: #8f7443;
  --gold-deep: #b8934f;
  --cinnabar: #b5433a;
  --jade: #7ba888;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --serif: 'KaiTi', 'STKaiti', 'Noto Serif SC', 'SimSun', serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--serif);
  color: var(--paper);
  /* 文档本身只留深色兜底（随内容铺多长都不露白）；
     仙境图独立到固定图层 body::before，与内容分层，滑到哪都满幅 */
  background: linear-gradient(180deg, var(--bg1), var(--bg0) 70%);
  min-height: 100%;
  overflow-x: hidden;
}
button { font-family: var(--serif); cursor: pointer; }
input { font-family: var(--serif); }

/* ---------- 屏幕切换 ---------- */
.screen { display: none; animation: fadein .35s ease; padding-bottom: 90px; }
.screen.active { display: block; }
@keyframes fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 宣纸卡片 ---------- */
.paper {
  background:
    linear-gradient(160deg, rgba(255, 252, 240, .96), rgba(243, 233, 210, .93));
  color: var(--ink);
  border-radius: 14px;
  border: 1px solid rgba(143, 116, 67, .55);
  box-shadow: var(--shadow), inset 0 0 0 3px rgba(255, 255, 255, .35), inset 0 0 34px rgba(166, 128, 76, .16);
  position: relative;
}
.paper::before, .paper::after {
  content: ''; position: absolute; width: 10px; height: 10px;
  border: 1px solid rgba(143, 116, 67, .7); border-radius: 50%;
  opacity: .5;
}
.paper::before { top: 8px; right: 8px; }
.paper::after { bottom: 8px; left: 8px; }
.pad { padding: 18px 16px; margin: 0 14px 16px; }

/* ---------- 登录 ---------- */
#screen-auth { min-height: 100vh; display: none; align-items: center; justify-content: center; padding: 20px; }
#screen-auth.active { display: flex; }
.auth-deco {
  position: fixed; right: 6px; top: 40px; font-size: 15px; line-height: 1.5;
  color: rgba(208, 171, 104, .22); text-align: center; letter-spacing: 0;
  writing-mode: horizontal-tb; user-select: none;
}
.auth-card { width: 100%; max-width: 360px; padding: 26px 22px 20px; }
.auth-logo { text-align: center; margin-bottom: 14px; }
.auth-logo h1 { font-size: 34px; letter-spacing: 14px; margin: 8px 0 2px; text-indent: 14px; color: var(--ink); }
.auth-sub { color: #7a5c33; font-size: 13px; letter-spacing: 4px; }
.tabs { display: flex; gap: 8px; margin: 10px 0 14px; }
.tab {
  flex: 1; padding: 9px 0; background: transparent; border: 1px solid rgba(143, 116, 67, .5);
  border-radius: 8px; color: #7a5c33; font-size: 15px; letter-spacing: 4px;
}
.tab.active { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.auth-form input {
  width: 100%; padding: 11px 12px; margin-bottom: 10px; font-size: 15px;
  border: 1px solid rgba(143, 116, 67, .45); border-radius: 8px;
  background: rgba(255, 255, 255, .5); color: var(--ink); outline: none;
}
.auth-form input:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 2px rgba(208, 171, 104, .25); }
.auth-note { text-align: center; color: #7a5c33; font-size: 12px; margin-top: 12px; letter-spacing: 2px; }
/* 科学落款：入阁卡片上极小极淡一行，不夺眼目 */
.auth-science {
  margin: 6px 4px 0; text-align: center; letter-spacing: 1px; line-height: 1.6;
  font-size: 10.5px; color: rgba(80, 60, 34, .42);
}
/* 阁内页脚落款：最底一行，浅到只在留意时看见 */
.page-foot {
  margin: 22px 20px 26px; text-align: center; line-height: 1.7;
  font-size: 10.5px; letter-spacing: 1px; color: rgba(243,233,210,.6);
}
.form-err { color: var(--cinnabar); font-size: 13px; min-height: 18px; text-align: center; }

/* ---- 首次入阁：生辰档案 ---- */
#screen-profile { min-height: 100vh; display: none; align-items: center; justify-content: center; padding: 20px; }
#screen-profile.active { display: flex; }
.profile-card { max-width: 384px; padding-top: 22px; }
.profile-tip {
  font-size: 12.5px; line-height: 1.5; color: #70532e; text-align: center;
  letter-spacing: 1px; margin: 0 4px 12px;
}
#p-wheels { gap: 4px; margin-bottom: 12px; }
#p-wheels .wheel li { font-size: 13.5px; letter-spacing: 1px; }
#p-wheels .wheel.p-hour { flex: 1.5; }

/* 八字页：已存生辰提示条 */
.bazi-profile-note {
  display: none; margin: 0 14px 10px; padding: 8px 12px; font-size: 12.5px;
  letter-spacing: 1px; color: #5f6f46;
  background: rgba(122, 155, 94, .12); border: 1px solid rgba(122, 155, 94, .35);
  border-radius: 9px;
}
.bazi-profile-note.show { display: block; }

/* ============ 三段式：八字 / 卜卦 / 我的 ============ */
.sec-label {
  margin: 18px 16px 10px; font-size: 13px; letter-spacing: 4px;
  color: rgba(243,233,210,.78);
}

/* ---- 星野主卡（卜卦首页、八字命盘共用墨夜底） ---- */
.gua-hero, .ming-hero {
  position: relative; margin: 14px 14px 12px; padding: 30px 22px 24px;
  border-radius: 16px; overflow: hidden; text-align: center;
  border: 1px solid rgba(208, 171, 104, .28);
  background:
    radial-gradient(120% 90% at 70% -10%, rgba(208, 171, 104, .14), transparent 60%),
    linear-gradient(165deg, #211a16, #120e1a 70%);
  box-shadow: var(--shadow);
}
.gua-hero-stars, .ming-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 68%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 44% 18%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.1px 1.1px at 60% 78%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 76% 30%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 62%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 36% 44%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.3px 1.3px at 68% 12%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 8% 82%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 14%, rgba(255,255,255,.6), transparent 60%);
}
.gua-hero h2 {
  position: relative; font-size: 27px; letter-spacing: 8px; text-indent: 8px;
  color: #f3e9d2; margin: 6px 0 8px;
}
.gua-hero .hero-sub {
  position: relative; font-size: 12.5px; letter-spacing: 2px;
  color: rgba(243, 233, 210, .58); margin-bottom: 20px;
}
.btn-light {
  position: relative; padding: 12px 0; font-size: 16px; letter-spacing: 6px;
  border-radius: 10px; border: 1px solid #e8dcc2;
  background: linear-gradient(180deg, #fbf4e2, #e6d6b4); color: #2c2118;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.btn-light:disabled { opacity: .5; }
.gua-hero-status {
  position: relative; margin-top: 12px; font-size: 12px; letter-spacing: 3px;
  color: rgba(208, 171, 104, .75);
}

/* 卦缘状态条 */
.status-strip {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 14px 4px; padding: 13px 18px; border-radius: 12px;
  border: 1px solid rgba(208, 171, 104, .22);
  background: linear-gradient(100deg, rgba(40,31,24,.9), rgba(28,22,18,.9));
  font-size: 14px; letter-spacing: 3px; color: rgba(243,233,210,.75);
}
.status-strip b { color: var(--gold); font-weight: normal; letter-spacing: 2px; }
.status-strip.done b { color: rgba(243,233,210,.55); }

/* 顶部直问条：写或说所问之事 */
.ask-bar { margin: 12px 14px 6px; }
.ask-row { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; }
.ask-bar .ask-row { margin: 0 0 12px; }
.ask-row input {
  flex: 1; min-width: 0; padding: 11px 12px; font-size: 15px;
  border: 1px solid rgba(143, 116, 67, .45); border-radius: 8px;
  background: rgba(255, 255, 255, .5); color: var(--ink); outline: none;
}
.btn-mic {
  flex: none; width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(143, 116, 67, .55); color: #7a5a2e;
  background: linear-gradient(180deg, #fbf4e2, #e9d9b8);
}
.btn-mic:active { transform: scale(.95); }
.btn-mic.no-voice { opacity: .45; }
.btn-mic.listening {
  color: #fbe9df; border-color: var(--cinnabar);
  background: var(--cinnabar); animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176, 58, 46, .5); }
  50% { box-shadow: 0 0 0 9px rgba(176, 58, 46, 0); }
}
.ask-bar-hint {
  margin: 8px 2px 0; font-size: 11.5px; line-height: 1.7; letter-spacing: 1px;
  color: rgba(80, 60, 34, .62); text-align: center;
}

/* 今日已问：每件具体的事一条，点回本卦接着聊 */
.today-gua-list { margin: 0 14px 4px; display: flex; flex-direction: column; gap: 8px; }
.today-gua {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 14px; text-align: left; border-radius: 11px;
  border: 1px solid rgba(208, 171, 104, .4);
  background: linear-gradient(100deg, rgba(58, 45, 28, .95), rgba(34, 27, 18, .95));
}
.today-gua:active { border-color: rgba(208, 171, 104, .7); }
.tg-cat {
  flex: none; font-size: 12px; letter-spacing: 2px; color: #2a2118;
  background: rgba(208, 171, 104, .85); border-radius: 999px; padding: 2px 10px;
}
.tg-q {
  flex: 1; min-width: 0; font-size: 14px; color: #f3e9d2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tg-go { flex: none; font-size: 12px; letter-spacing: 2px; color: var(--gold); }

/* 所问之事卡片行 */
.scene-list { margin: 0 14px; display: flex; flex-direction: column; gap: 10px; }
.scene-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; text-align: left; border-radius: 13px;
  border: 1px solid rgba(208, 171, 104, .22);
  background: linear-gradient(100deg, rgba(38,30,24,.92), rgba(26,20,17,.92));
}
.scene-row:active { border-color: rgba(208, 171, 104, .55); }
.scene-row:disabled { opacity: .45; }
.scene-ic {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; color: var(--gold);
  background: rgba(208, 171, 104, .1);
  border: 1px solid rgba(208, 171, 104, .3);
}
.scene-txt { flex: 1; min-width: 0; }
.scene-txt b { display: block; font-size: 16px; letter-spacing: 3px; color: #f3e9d2; font-weight: normal; }
.scene-txt small { display: block; margin-top: 3px; font-size: 12px; color: rgba(243,233,210,.8); letter-spacing: 1px; }
.scene-arrow { color: rgba(208, 171, 104, .6); font-size: 20px; }
/* 今日已卜的事类：不置灰，转成"去追问"的暖色提示态 */
.scene-row.done {
  border-color: rgba(208, 171, 104, .45);
  background: linear-gradient(100deg, rgba(58,45,28,.95), rgba(34,27,18,.95));
}
.scene-row.done .scene-ic {
  color: #2a2118; background: rgba(208, 171, 104, .85); border-color: var(--gold);
}
.scene-row.done .scene-txt small { color: var(--gold); }
.scene-row.done .scene-arrow { font-size: 12px; letter-spacing: 2px; color: var(--gold); }
.stage-back {
  margin: 14px 0 2px 16px; padding: 4px 8px; background: none; border: none;
  color: #dcc084; font-size: 13px; letter-spacing: 1px;
}

/* 起卦第一步：落定所问 */
.ask-tip {
  margin: 2px 2px 14px; font-size: 13px; line-height: 1.9; letter-spacing: 1px;
  color: #e2c88f; text-align: center;
}
#div-step-ask .ask-row { margin-top: 4px; }

/* ---- 八字命盘 ---- */
.ming-hero { padding: 24px 18px 22px; }
.ming-zao {
  position: relative; font-size: 14px; letter-spacing: 4px; color: var(--gold);
}
.ming-birth {
  position: relative; margin-top: 6px; font-size: 12px; letter-spacing: 1px;
  color: rgba(243,233,210,.86);
}
.ming-pillars {
  position: relative; display: flex; gap: 6px; margin: 18px 0 6px;
}
.mp-col {
  flex: 1; padding: 10px 0 8px; border-radius: 10px;
  background: rgba(208,171,104,.08); border: 1px solid rgba(208,171,104,.25);
}
.mp-pos { font-size: 11px; letter-spacing: 2px; color: rgba(243,233,210,.8); }
.mp-gz { margin: 6px 0 2px; font-size: 21px; letter-spacing: 2px; color: #f7eccd;
  font-family: STKaiti, KaiTi, serif; line-height: 1.25; }
.mp-ss { font-size: 11px; color: rgba(208,171,104,.85); letter-spacing: 1px; }
.ming-qiyun {
  position: relative; margin-top: 12px; font-size: 11.5px; letter-spacing: 1px;
  color: rgba(243,233,210,.8);
}
.ming-empty-hero .mp-gz { color: rgba(243,233,210,.62); }
.ming-seal {
  position: relative; margin-top: 16px; font-size: 11.5px; letter-spacing: 2px;
  color: #9a7130;
}
.ming-card { margin: 0 14px 12px; }
.ming-card .card-title {
  font-size: 14px; letter-spacing: 4px; color: var(--gold-deep);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.ming-card .card-title::before {
  content: ''; width: 3px; height: 13px; border-radius: 2px;
  background: var(--gold);
}
.ming-reading {
  white-space: pre-wrap; line-height: 1.85; font-size: 14.5px; color: var(--ink);
}
.ming-reading.streaming::after {
  content: '▍'; color: var(--gold); animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* 八字断语：十三篇分两列目录签，点签进独立全篇界面，命盘页不再拖成长条 */
.bsec-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.bsec-cell {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 8px 11px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(143, 116, 67, .45);
  background:
    linear-gradient(165deg, rgba(255, 250, 236, .97), rgba(239, 227, 201, .94));
  color: var(--ink);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .22), inset 0 0 12px rgba(166, 128, 76, .12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bsec-cell:active { transform: scale(.96); }
.bsec-cell .bsec-no {
  font-size: 10.5px; letter-spacing: 2px; color: rgba(143, 116, 67, .75);
}
.bsec-cell .bsec-t {
  font-size: 14.5px; letter-spacing: 3px; color: #5a4322;
}
.bsec-cell .bsec-go {
  position: absolute; top: 6px; right: 8px;
  font-size: 11px; color: rgba(143, 116, 67, .55);
}
.bsec-cell.live {
  border-color: rgba(208, 171, 104, .95);
  box-shadow: 0 0 0 1px rgba(208, 171, 104, .55), 0 3px 12px rgba(208, 171, 104, .28);
  animation: bsecBreath 1.4s ease-in-out infinite;
}
.bsec-cell.live .bsec-no::after { content: ' · 落笔中'; color: #a2793a; }
.bsec-wait {
  margin: 2px; font-size: 13px; letter-spacing: 2px;
  color: rgba(122, 90, 46, .65); animation: bsecBreath 1.6s ease-in-out infinite;
}
@keyframes bsecBreath { 50% { opacity: .5; } }

/* 独立全篇界面：点目录签进入，另一层纸卷看该篇完整解析 */
#bazi-sec-view {
  position: fixed; inset: 0; z-index: 80;
  display: none; flex-direction: column;
  max-width: 100vw; overflow: hidden;
  background:
    radial-gradient(900px 360px at 50% -8%, rgba(208, 171, 104, .14), transparent 60%),
    linear-gradient(180deg, #161017, #0e0b0d 70%);
}
#bazi-sec-view.show { display: flex; animation: bsvIn .28s ease; }
@keyframes bsvIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bsv-top {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid rgba(208, 171, 104, .22);
}
#bsv-back {
  flex: none; border: 1px solid rgba(208, 171, 104, .5); background: transparent;
  color: var(--paper); border-radius: 18px; padding: 6px 14px; font-size: 13px;
}
#bsv-back:active { background: rgba(208, 171, 104, .18); }
.bsv-top-title { flex: 1; text-align: center; font-size: 13px; letter-spacing: 3px; color: var(--gold-pale, #e8d9b0); padding-right: 64px; }
.bsv-scroll {
  flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; padding: 16px 16px 24px;
}
.bsv-paper { width: 100%; min-width: 0; padding: 20px 18px 22px; }
.bsv-h {
  text-align: center; font-size: 19px; letter-spacing: 5px; font-weight: normal;
  color: #6a4e24; margin-bottom: 4px;
}
.bsv-no { text-align: center; font-size: 11px; letter-spacing: 3px; color: rgba(143, 116, 67, .7); margin-bottom: 14px; }
.bsv-body {
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
  font-size: 15px; line-height: 2.05; letter-spacing: .4px; color: var(--ink);
}
.bsv-body.live::after { content: '▍'; color: #a2793a; animation: blink 1s steps(1) infinite; }
.bsv-pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 14px;
}
.bsv-pager button {
  border: 1px solid rgba(143, 116, 67, .5); background: transparent;
  color: #6a4e24; border-radius: 18px; padding: 7px 16px; font-size: 13px;
}
.bsv-pager button:disabled { opacity: .32; }
.bsv-page { font-size: 12px; letter-spacing: 2px; color: rgba(90,67,34,.95); }
.lock-note {
  margin: 2px 16px 4px; font-size: 12px; letter-spacing: 1px;
  color: rgba(243,233,210,.74);
}

/* ---- 开户两步走 ---- */
.rg-step-title {
  font-size: 14px; letter-spacing: 2px; color: #7a5c33;
  margin: 2px 0 12px; display: flex; align-items: baseline; gap: 8px;
}
.rg-step-title i { font-style: normal; color: var(--gold); font-size: 17px; }
.rg-phone-ok { font-size: 12px; color: #5f8a4f; letter-spacing: 0; }
.btn-back {
  display: block; margin: 10px auto 0; padding: 4px 8px; background: none;
  border: none; color: #7a5c33; font-size: 13px; letter-spacing: 1px;
}
.btn-back:active { color: var(--gold); }
.btn:disabled { opacity: .55; }

/* ---- 密码显隐 + 安全度 ---- */
.pw-wrap { position: relative; margin-bottom: 10px; }
.pw-wrap input { width: 100%; margin-bottom: 0; padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-width: 34px; padding: 4px 0; font-size: 13px; letter-spacing: 1px;
  color: var(--gold); background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(143, 116, 67, .45); border-radius: 6px;
}
.field-hint {
  font-size: 12px; line-height: 16px; min-height: 16px; margin: -3px 2px 7px;
  color: #7a5c33;
}
.field-hint.hint-ok { color: #4f7a47; }
.field-hint.hint-bad { color: var(--cinnabar); }
.field-hint.hint-check { color: #7a5c33; }
.pw-meter {
  height: 6px; margin: -2px 2px 3px; border-radius: 3px; overflow: hidden;
  background: rgba(143, 116, 67, .2);
}
.pw-meter i { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .25s ease; }
.pw-meter i.pw-weak { background: #b4503a; }
.pw-meter i.pw-mid { background: #c9a24b; }
.pw-meter i.pw-good { background: #7a9b5e; }
.pw-meter i.pw-great { background: #4f7a47; }
#rg-pw-text {
  display: block; font-style: normal; font-weight: normal;
  font-size: 12px; line-height: 16px; margin: 0 2px 8px; color: #7a5c33;
}
#rg-pw-text.pw-weak { color: #b4503a; }
#rg-pw-text.pw-mid { color: #b08a3e; }
#rg-pw-text.pw-good { color: #5c8045; }
#rg-pw-text.pw-great { color: #4f7a47; }

/* ---------- 按钮 ---------- */
.btn { border: none; border-radius: 10px; font-size: 16px; letter-spacing: 6px; text-indent: 6px; }
.btn-gold {
  background: linear-gradient(180deg, #d8b978, #b8934f 60%, #9c7f4b);
  color: #241a12; font-weight: bold; padding: 12px 0;
  box-shadow: 0 4px 14px rgba(184, 147, 79, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.btn-gold:active { transform: translateY(1px); }
.btn-block { width: 100%; margin-top: 14px; }
.btn-ghost {
  background: transparent; border: 1px solid rgba(208, 171, 104, .5);
  color: var(--gold); padding: 11px 0; margin: 16px 14px; width: calc(100% - 28px);
}

/* ---------- 顶栏 & 底导航 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  border-bottom: 1px solid rgba(208, 171, 104, .18);
  background: rgba(21, 16, 12, .72); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.brand { font-size: 19px; letter-spacing: 6px; color: var(--gold); display: flex; align-items: center; gap: 8px; }
.brand-coin {
  width: 18px; height: 18px; border-radius: 50%; display: inline-block;
  background: radial-gradient(circle at 35% 30%, #e8cf96, #b8934f 70%, #8f7443);
  position: relative;
}
.brand-coin::after {
  content: ''; position: absolute; inset: 6px; background: var(--bg1); transform: rotate(45deg);
}
.topbar-user { color: rgba(243, 233, 210, .75); font-size: 13px; letter-spacing: 2px; }
.navbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; background: rgba(21, 16, 12, .92); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(208, 171, 104, .22);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-btn {
  flex: 1; background: none; border: none; color: rgba(243, 233, 210, .55);
  padding: 8px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.nav-btn i {
  font-style: normal; font-size: 19px; width: 30px; height: 30px; line-height: 30px;
  border: 1px solid transparent; border-radius: 8px;
}
.nav-btn span { font-size: 11px; letter-spacing: 2px; }
.nav-btn.active { color: var(--gold); }
.nav-btn.active i { border-color: rgba(208, 171, 104, .6); box-shadow: inset 0 0 8px rgba(208, 171, 104, .25); }

/* ---------- 首页 ---------- */
.hero { text-align: center; padding: 34px 0 18px; }
.hero h2 { font-size: 30px; letter-spacing: 16px; text-indent: 16px; color: var(--gold); }
.hero-sub { margin-top: 8px; color: rgba(243,233,210,.8); letter-spacing: 5px; font-size: 13px; }
.home-cards { display: grid; gap: 12px; padding: 8px 14px; }
.entry {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: linear-gradient(150deg, rgba(208, 171, 104, .14), rgba(208, 171, 104, .05));
  border: 1px solid rgba(208, 171, 104, .35); border-radius: 13px;
  padding: 15px 16px; color: var(--paper); box-shadow: inset 0 0 18px rgba(0, 0, 0, .25);
}
.entry:active { transform: scale(.985); }
.entry-icon {
  font-style: normal; width: 46px; height: 46px; flex: none;
  border: 1px solid rgba(208, 171, 104, .6); border-radius: 10px;
  color: var(--gold); font-size: 19px; line-height: 1.25;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, rgba(208, 171, 104, .25), transparent 70%);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .35);
}
.entry-name { font-size: 18px; letter-spacing: 4px; display: block; color: var(--gold); }
.entry-desc { font-size: 12px; color: rgba(243, 233, 210, .55); letter-spacing: 1px; margin-top: 3px; display: block; }

/* ---------- 标题/分段 ---------- */
.view-title { padding: 16px 18px 10px; font-size: 19px; letter-spacing: 4px; color: var(--gold); }
.view-title small { font-size: 12px; color: rgba(243,233,210,.78); letter-spacing: 2px; margin-left: 8px; }
/* 起卦页类别横幅（点财运等类别进入时显示） */
.cat-banner {
  margin: 0 14px 12px; padding: 15px 18px; border-radius: 13px;
  display: flex; align-items: baseline; gap: 12px;
  background: linear-gradient(150deg, rgba(181, 67, 58, .22), rgba(208, 171, 104, .09) 65%, rgba(208, 171, 104, .05));
  border: 1px solid rgba(208, 171, 104, .45);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .3), 0 4px 18px rgba(0, 0, 0, .3);
}
.cat-banner b { font-size: 23px; letter-spacing: 7px; color: var(--gold); font-weight: bold; }
.cat-banner span { font-size: 12.5px; color: rgba(243, 233, 210, .62); letter-spacing: 2px; }
.seg { display: flex; gap: 8px; margin-bottom: 12px; }
.seg-btn {
  flex: 1; padding: 9px 0; font-size: 15px; letter-spacing: 3px; color: #7a5c33;
  background: rgba(50, 37, 25, .06); border: 1px solid rgba(143, 116, 67, .4); border-radius: 9px;
}
.seg-btn.active { background: var(--ink); color: var(--gold); border-color: var(--ink); }
.leap-line { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #7a5c33; margin-bottom: 8px; }

/* ---------- 滚轮 ---------- */
.wheels { position: relative; display: flex; gap: 6px; margin: 4px 0 14px; }
.wheels::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px;
  transform: translateY(-50%); border-top: 1px solid rgba(143, 116, 67, .5);
  border-bottom: 1px solid rgba(143, 116, 67, .5);
  background: rgba(208, 171, 104, .10); pointer-events: none; border-radius: 4px;
}
.wheel {
  flex: 1; height: 220px; overflow-y: auto; scroll-snap-type: y mandatory;
  scrollbar-width: none; position: relative; z-index: 1;
}
.wheel::-webkit-scrollbar { display: none; }
.wheel ul { list-style: none; padding: 88px 0; }
.wheel li {
  height: 44px; line-height: 44px; text-align: center; scroll-snap-align: center;
  font-size: 16px; color: rgba(50, 37, 25, .38); letter-spacing: 2px; white-space: nowrap;
  transition: color .15s, text-shadow .15s;
}
.wheel li.on { color: var(--ink); font-weight: bold; text-shadow: 0 0 1px rgba(208, 171, 104, .6); }

/* ---------- 侧重类别 chips ---------- */
.topic-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.chip {
  padding: 7px 14px; font-size: 13px; letter-spacing: 2px; border-radius: 999px;
  border: 1px solid rgba(143, 116, 67, .45); color: var(--gold-dim); background: transparent;
}
.chip.active { background: var(--cinnabar); border-color: var(--cinnabar); color: var(--paper); }

/* ---------- 铜钱（纯 CSS 3D 立体方孔铜钱，真实物理抛掷） ---------- */
/* 三层结构：.coin-slot（机位+接触阴影）> .coin-fly（抛物线位移）> .coin（恒定翻转） */
.coin-stage { display: flex; justify-content: center; gap: 22px; padding: 24px 0 10px; perspective: 900px; }
.coin-slot { position: relative; width: 74px; height: 92px; flex: none; }
.coin-shadow {
  position: absolute; left: 50%; bottom: 0; width: 58px; height: 13px;
  margin-left: -29px; border-radius: 50%; opacity: .5;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 70%);
  filter: blur(2px); transform: scale(1);
}
.coin-fly { position: absolute; left: 0; bottom: 12px; width: 74px; height: 74px; transform-style: preserve-3d; }
.coin {
  width: 74px; height: 74px; font-size: 14px; position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(0deg);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .5));
}
.coin-slot .coin { position: absolute; inset: 0; filter: none; }
.face {
  position: absolute; inset: 0; border-radius: 50%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* 侧面厚度（buildCoins 生成 12 层 .edge） */
.coin .edge {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(90deg, #5f4722, #93763e 30%, #c8a565 50%, #8a6c38 72%, #55401f);
}
/* 字面：知心通宝（玉润鎏金，中央透灵光） */
.face-z {
  transform: translateZ(5px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 53%, rgba(255, 250, 232, .55), transparent 44%),
    radial-gradient(circle at 32% 26%, rgba(255, 248, 220, .98), rgba(238, 212, 156, .92) 30%, #cba35f 62%, #8d6c37 100%);
  box-shadow: inset 0 0 12px rgba(96, 66, 26, .5), inset 0 0 2px 1px rgba(255, 244, 208, .5);
}
.face-z::before {
  /* 内圈双环 */
  content: ''; position: absolute; inset: 9%; border-radius: 50%;
  border: 1.5px solid rgba(107, 77, 36, .75);
  box-shadow: inset 0 0 0 2.5px rgba(244, 226, 178, .5), inset 0 0 8px rgba(96, 66, 26, .35);
}
.face-z::after {
  /* 方孔：孔中透灵光 */
  content: ''; position: absolute; left: 50%; top: 50%; width: 21%; height: 21%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 45%, #5a4626, #241a12 70%);
  box-shadow: inset 0 0 4px #000, 0 0 0 1.5px rgba(96, 66, 26, .8), 0 0 0 3px rgba(244, 226, 178, .4),
              0 0 9px 2px rgba(255, 231, 168, .55);
}
.coin .zi {
  position: absolute; font-size: 1em; line-height: 1; font-weight: bold;
  color: #5d4322; z-index: 2; text-shadow: 0 1px 0 rgba(255, 246, 214, .55);
}
.coin .zi-top { left: 50%; top: 7%; transform: translateX(-50%); }
.coin .zi-right { right: 7%; top: 50%; transform: translateY(-50%); }
.coin .zi-bottom { left: 50%; bottom: 7%; transform: translateX(-50%); }
.coin .zi-left { left: 7%; top: 50%; transform: translateY(-50%); }
/* 背面：云纹宝相（玉白内光） */
.face-b {
  transform: rotateY(180deg) translateZ(5px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 53%, rgba(255, 250, 232, .4), transparent 46%),
    repeating-conic-gradient(from 0deg, rgba(255, 244, 208, .16) 0 14deg, rgba(107, 77, 36, .12) 14deg 28deg),
    radial-gradient(circle at 32% 26%, rgba(240, 220, 168, .92), #b78f4f 55%, #7c6030 100%);
  box-shadow: inset 0 0 12px rgba(90, 60, 24, .55);
}
.face-b::before {
  content: ''; position: absolute; inset: 9%; border-radius: 50%;
  border: 1.5px solid rgba(80, 56, 24, .7);
  box-shadow: inset 0 0 0 2.5px rgba(238, 216, 160, .45), inset 0 0 8px rgba(80, 56, 24, .4);
}
.face-b::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 21%; height: 21%;
  transform: translate(-50%, -50%) rotate(45deg);
  background: radial-gradient(circle at 50% 45%, #5a4626, #241a12 70%);
  box-shadow: inset 0 0 4px #000, 0 0 0 1.5px rgba(96, 66, 26, .8), 0 0 0 3px rgba(238, 216, 160, .4),
              0 0 9px 2px rgba(255, 231, 168, .5);
}
/* ===== 真实物理抛掷（2.2s，关键帧按重力方程逐点采样，linear 插值即抛物线） =====
   抛出 v0=708px/s、g=1475px/s²，0.48s 到顶（170px），0.96s 第一次落地；
   之后弹跳恢复系数 0.52 逐次衰减：46px→12px→3px→1px；
   翻转角速度恒定（字面 6 周=2160°、背面 6.5 周=2340°），空中带轻微进动，
   落地后绕 X/Z 轴衰减摇摆直至静止。位移与翻转分两层元素，互不干扰。 */
.coin-slot.tossing .coin-fly { animation: fly 2.2s linear both; }
.coin-slot.tossing .coin-shadow { animation: cshadow 2.2s linear both; }
.coin.spin-z { animation: spin-z 2.2s linear both; }
.coin.spin-b { animation: spin-b 2.2s linear both; }
#s1 .coin-fly, #s1 .coin, #s1 .coin-shadow, #s1 .ripple, #s1 .magic-array, #s1 .gua-seal, #s1 .trail { animation-delay: .1s; }
#s2 .coin-fly, #s2 .coin, #s2 .coin-shadow, #s2 .ripple, #s2 .magic-array, #s2 .gua-seal, #s2 .trail { animation-delay: .2s; }

/* ---------- 仙境质感：流光 / 仙晕 / 仙尘 / 落地灵波 ---------- */
.coin-slot .coin { z-index: 2; }
/* 币面流光：平时一缕缓缓扫过，抛掷时连闪两次 */
.coin .sheen {
  position: absolute; top: -12%; left: 0; width: 42%; height: 124%;
  border-radius: 50%; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 253, 240, .45) 47%,
              rgba(255, 253, 240, .85) 50%, rgba(255, 253, 240, .45) 53%, transparent 60%);
  mix-blend-mode: screen;
  transform: translateX(-170%) skewX(-18deg);
  animation: sheen 4.8s ease-in-out infinite;
}
.coin-slot.tossing .sheen { animation: sheen-fast 1.05s linear 2; }
@keyframes sheen {
  0%, 58% { transform: translateX(-170%) skewX(-18deg); }
  100% { transform: translateX(380%) skewX(-18deg); }
}
@keyframes sheen-fast {
  from { transform: translateX(-170%) skewX(-18deg); }
  to { transform: translateX(380%) skewX(-18deg); }
}
/* 周身仙晕：随钱升高而亮、落地收敛，平时微微呼吸 */
.coin-halo {
  position: absolute; inset: -15px; border-radius: 50%; z-index: 1;
  pointer-events: none; filter: blur(7px); opacity: .22; transform: scale(.92);
  background: radial-gradient(circle, rgba(255, 238, 186, .55) 0%,
              rgba(232, 192, 112, .26) 40%, transparent 70%);
  animation: halo-idle 3.4s ease-in-out infinite;
}
.coin-slot.tossing .coin-halo { animation: halo 2.2s linear both; }
@keyframes halo-idle { 0%, 100% { opacity: .16; transform: scale(.92); } 50% { opacity: .3; transform: scale(1.02); } }
@keyframes halo {
  0%    { opacity: .22; transform: scale(.92); }
  21.8% { opacity: .9;  transform: scale(1.34); }
  40.9% { opacity: .5;  transform: scale(1.08); }
  43.6% { opacity: .3;  transform: scale(.96); }
  55%   { opacity: .62; transform: scale(1.14); }
  66.3% { opacity: .28; transform: scale(.96); }
  72.7% { opacity: .48; transform: scale(1.06); }
  78.1% { opacity: .25; transform: scale(.96); }
  87.3% { opacity: .3;  transform: scale(1); }
  100%  { opacity: .22; transform: scale(1); }
}
/* 三粒浮动仙尘（挂在 .coin-fly 上） */
.coin-fly .mote {
  position: absolute; width: 5px; height: 5px; border-radius: 50%; z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 250, 226, .95), rgba(255, 226, 152, 0) 72%);
}
.m0 { top: -9px; left: 10px; animation: mote1 3.3s ease-in-out infinite; }
.m1 { top: 20px; right: -11px; animation: mote2 4.1s ease-in-out infinite; }
.m2 { bottom: -9px; left: 42px; animation: mote3 3.7s ease-in-out infinite; }
.coin-slot.tossing .mote { animation-duration: 1.15s; }
@keyframes mote1 { 0%, 100% { transform: translate(0, 0); opacity: .25; } 50% { transform: translate(7px, -10px); opacity: 1; } }
@keyframes mote2 { 0%, 100% { transform: translate(0, 0); opacity: .9; } 50% { transform: translate(-8px, 7px); opacity: .2; } }
@keyframes mote3 { 0%, 100% { transform: translate(0, 0); opacity: .4; } 50% { transform: translate(-6px, -8px); opacity: 1; } }
/* 落地灵波：两次主弹跳各漾开一圈淡金光 */
.ripple {
  position: absolute; left: 50%; bottom: 2px; width: 60px; height: 15px;
  margin-left: -30px; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 1.5px solid rgba(246, 226, 168, .9);
  box-shadow: 0 0 10px rgba(246, 226, 168, .5), inset 0 0 8px rgba(246, 226, 168, .35);
}
.ripple::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%; opacity: 0;
  border: 1px solid rgba(246, 226, 168, .7);
}
.coin-slot.tossing .ripple { animation: ripple1 2.2s linear both; }
.coin-slot.tossing .ripple::after { animation: ripple2 2.2s linear both; }
@keyframes ripple1 {
  0%, 43% { opacity: 0; transform: scale(.4); }
  44.5% { opacity: .95; transform: scale(.48); }
  56% { opacity: 0; transform: scale(1.9); }
  100% { opacity: 0; transform: scale(1.9); }
}
@keyframes ripple2 {
  0%, 65.5% { opacity: 0; transform: scale(.5); }
  67% { opacity: .6; transform: scale(.58); }
  76% { opacity: 0; transform: scale(1.55); }
  100% { opacity: 0; transform: scale(1.55); }
}
.toss-hint { text-align: center; color: rgba(243, 233, 210, .55); font-size: 13px; letter-spacing: 3px; margin: 6px 0 4px; }

/* ---------- 神话法器：云雷钱缘 / 背嵌八卦 / 护身法阵 / 神光拖尾 / 落地卦印 ---------- */
/* 钱缘云雷纹：正反面各一圈虚线法环，随钱翻转、缓缓流转 */
.coin-rim {
  position: absolute; inset: 2.5%; border-radius: 50%;
  border: 1px dashed rgba(92, 64, 26, .7);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  pointer-events: none;
}
.coin-rim-z { transform: translateZ(5.6px); animation: rim-turn-z 18s linear infinite; }
.coin-rim-b { transform: rotateY(180deg) translateZ(5.6px); animation: rim-turn-b 18s linear infinite; }
@keyframes rim-turn-z { from { transform: translateZ(5.6px) rotate(0); } to { transform: translateZ(5.6px) rotate(360deg); } }
@keyframes rim-turn-b { from { transform: rotateY(180deg) translateZ(5.6px) rotate(0); } to { transform: rotateY(180deg) translateZ(5.6px) rotate(-360deg); } }
.coin-slot.tossing .coin-rim-z { animation: rim-turn-z 1.1s linear infinite; }
.coin-slot.tossing .coin-rim-b { animation: rim-turn-b 1.1s linear infinite; }
/* 背面八卦：乾兑离震巽坎艮坤，八字环列，如法钱咒轮 */
.bagua { position: absolute; inset: 0; animation: bagua-turn 32s linear infinite; }
.bagua i {
  position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -5.5px;
  width: 11px; text-align: center; font-style: normal; font-size: 11px; line-height: 1;
  color: #46310f; font-weight: bold;
  text-shadow: 0 0 3px rgba(255, 236, 178, .85), 0 1px 0 rgba(255, 246, 214, .55);
}
@keyframes bagua-turn { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* 护身法阵：钱静置于小小双环法坛之上，八道方位金纹 */
.magic-array {
  position: absolute; left: 50%; top: 44px; width: 96px; height: 96px;
  border-radius: 50%; pointer-events: none; z-index: 0; opacity: .5;
  border: 1px solid rgba(232, 200, 132, .22);
  box-shadow: 0 0 12px rgba(232, 200, 132, .12), inset 0 0 10px rgba(232, 200, 132, .1);
  transform: translate(-50%, -50%);
  animation: array-idle 24s linear infinite;
}
.magic-array::before {
  content: ''; position: absolute; inset: 10px; border-radius: 50%;
  border: 1px dashed rgba(236, 206, 140, .3);
}
.magic-array::after {
  content: ''; position: absolute; inset: 2px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 236, 180, .5) 0 1.6deg, transparent 1.6deg 45deg);
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 63%, #000 97%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 62%, #000 63%, #000 97%, transparent 100%);
}
@keyframes array-idle { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.coin-slot.tossing .magic-array {
  opacity: .95; border-color: rgba(255, 224, 150, .55);
  animation: array-fast 2.2s linear both;
}
@keyframes array-fast { from { transform: translate(-50%, -50%) rotate(0) scale(1); } 21.8% { transform: translate(-50%, -50%) rotate(42deg) scale(1.18); } to { transform: translate(-50%, -50%) rotate(96deg) scale(1); } }
/* 神光拖尾：升空时钱尾拖着一道金色光河 */
.trail {
  position: absolute; left: 50%; top: 54%; width: 17px; height: 0;
  margin-left: -8.5px; border-radius: 9px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 250, 225, .98), rgba(255, 224, 150, .5) 40%,
              rgba(255, 200, 110, .14) 74%, transparent);
  box-shadow: 0 0 14px 2px rgba(255, 220, 140, .55), 0 -4px 10px rgba(255, 242, 205, .7);
  filter: blur(2.5px); opacity: 0;
}
.coin-slot.tossing .trail { animation: trail 2.2s linear both; }
@keyframes trail {
  0%    { height: 0; opacity: 0; }
  8%    { height: 56px; opacity: .8; }
  21.8% { height: 108px; opacity: 1; }
  40%   { height: 76px; opacity: .65; }
  43.6% { height: 4px; opacity: 0; }
  100%  { height: 0; opacity: 0; }
}
/* 落地卦印：钱落定刹那，一爻金符自地面浮现又化光散去 */
.gua-seal {
  position: absolute; left: 50%; top: 44px; z-index: 1;
  font-size: 20px; line-height: 1; pointer-events: none; opacity: 0;
  color: rgba(255, 234, 172, .95);
  text-shadow: 0 0 12px rgba(255, 222, 142, .95), 0 0 28px rgba(255, 200, 100, .6);
  transform: translate(-50%, -50%);
}
.coin-slot.tossing .gua-seal { animation: guaseal 2.2s linear both; }
@keyframes guaseal {
  0%, 43.4% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-28deg); }
  45%      { opacity: .95; transform: translate(-50%, -50%) scale(1.3) rotate(0); }
  58%      { opacity: 0; transform: translate(-50%, -50%) scale(1.8) rotate(14deg); }
  100%     { opacity: 0; transform: translate(-50%, -50%) scale(1.8) rotate(14deg); }
}

@keyframes fly {
  0%    { transform: translate(0, 0) scale(.97); }
  2.3%  { transform: translate(0, 3px) scale(.93); }
  4.5%  { transform: translate(calc(var(--dx, 0px) * .104), -63px) scale(1.03); }
  9.1%  { transform: translate(calc(var(--dx, 0px) * .208), -112px) scale(1); }
  13.6% { transform: translate(calc(var(--dx, 0px) * .313), -146px) scale(.95); }
  18.2% { transform: translate(calc(var(--dx, 0px) * .417), -165px) scale(.91); }
  21.8% { transform: translate(calc(var(--dx, 0px) * .500), -170px) scale(.9); }
  22.7% { transform: translate(calc(var(--dx, 0px) * .521), -170px) scale(.9); }
  27.3% { transform: translate(calc(var(--dx, 0px) * .625), -159px) scale(.92); }
  31.8% { transform: translate(calc(var(--dx, 0px) * .729), -134px) scale(.95); }
  36.4% { transform: translate(calc(var(--dx, 0px) * .833), -94px) scale(.99); }
  40.9% { transform: translate(calc(var(--dx, 0px) * .938), -40px) scale(1.02); }
  43.6% { transform: translate(var(--dx, 0px), 0) scale(1.06); }
  45.5% { transform: translate(var(--dx, 0px), -14px) scale(.99); }
  50%   { transform: translate(var(--dx, 0px), -37px) scale(.95); }
  55%   { transform: translate(var(--dx, 0px), -46px) scale(.94); }
  59.1% { transform: translate(var(--dx, 0px), -40px) scale(.95); }
  63.6% { transform: translate(var(--dx, 0px), -19px) scale(1); }
  66.3% { transform: translate(var(--dx, 0px), 0) scale(1.04); }
  68.2% { transform: translate(var(--dx, 0px), -7px) scale(.99); }
  72.2% { transform: translate(var(--dx, 0px), -12px) scale(.97); }
  72.7% { transform: translate(var(--dx, 0px), -12px) scale(.97); }
  77.3% { transform: translate(var(--dx, 0px), -3px) scale(1); }
  78.1% { transform: translate(var(--dx, 0px), 0) scale(1.03); }
  79.5% { transform: translate(var(--dx, 0px), -2px) scale(.99); }
  81.1% { transform: translate(var(--dx, 0px), -3px) scale(.98); }
  81.8% { transform: translate(var(--dx, 0px), -3px) scale(.98); }
  84.2% { transform: translate(var(--dx, 0px), 0) scale(1.02); }
  85.8% { transform: translate(var(--dx, 0px), -1px) scale(.99); }
  87.3% { transform: translate(var(--dx, 0px), 0) scale(1); }
  100%  { transform: translate(var(--dx, 0px), 0) scale(1); }
}
@keyframes cshadow {
  0%    { transform: scale(1);    opacity: .50; }
  4.5%  { transform: scale(.83); opacity: .42; }
  9.1%  { transform: scale(.70); opacity: .32; }
  13.6% { transform: scale(.61); opacity: .25; }
  18.2% { transform: scale(.56); opacity: .21; }
  21.8% { transform: scale(.55); opacity: .20; }
  22.7% { transform: scale(.55); opacity: .20; }
  27.3% { transform: scale(.58); opacity: .22; }
  31.8% { transform: scale(.65); opacity: .28; }
  36.4% { transform: scale(.75); opacity: .36; }
  40.9% { transform: scale(.89); opacity: .47; }
  43.6% { transform: scale(1.14);opacity: .62; }
  45.5% { transform: scale(.97); opacity: .48; }
  50%   { transform: scale(.90); opacity: .41; }
  55%   { transform: scale(.88); opacity: .39; }
  59.1% { transform: scale(.89); opacity: .41; }
  63.6% { transform: scale(.95); opacity: .46; }
  66.3% { transform: scale(1.09);opacity: .56; }
  68.2% { transform: scale(.98); opacity: .48; }
  72.2% { transform: scale(.97); opacity: .46; }
  72.7% { transform: scale(.97); opacity: .46; }
  77.3% { transform: scale(.99); opacity: .50; }
  78.1% { transform: scale(1.05);opacity: .55; }
  79.5% { transform: scale(1);   opacity: .51; }
  81.1% { transform: scale(.99); opacity: .50; }
  81.8% { transform: scale(.99); opacity: .50; }
  84.2% { transform: scale(1.02);opacity: .52; }
  85.8% { transform: scale(1);   opacity: .50; }
  87.3% { transform: scale(1);   opacity: .50; }
  100%  { transform: scale(1);   opacity: .50; }
}
@keyframes spin-z {
  0%    { transform: rotateX(-12deg) rotateY(0deg)    rotateZ(0deg); }
  4.5%  { transform: rotateX(6deg)   rotateY(117deg)  rotateZ(5deg); }
  9.1%  { transform: rotateX(16deg)  rotateY(233deg)  rotateZ(-4deg); }
  13.6% { transform: rotateX(-8deg)  rotateY(350deg)  rotateZ(6deg); }
  18.2% { transform: rotateX(14deg)  rotateY(467deg)  rotateZ(-5deg); }
  21.8% { transform: rotateX(-4deg)  rotateY(560deg)  rotateZ(3deg); }
  22.7% { transform: rotateX(-10deg) rotateY(583deg)  rotateZ(4deg); }
  27.3% { transform: rotateX(10deg)  rotateY(700deg)  rotateZ(-6deg); }
  31.8% { transform: rotateX(-14deg) rotateY(816deg)  rotateZ(5deg); }
  36.4% { transform: rotateX(8deg)   rotateY(933deg)  rotateZ(-4deg); }
  40.9% { transform: rotateX(-6deg)  rotateY(1050deg) rotateZ(3deg); }
  43.6% { transform: rotateX(0deg)   rotateY(1120deg) rotateZ(0deg); }
  45.5% { transform: rotateX(11deg)  rotateY(1166deg) rotateZ(-9deg); }
  50%   { transform: rotateX(-7deg)  rotateY(1283deg) rotateZ(6deg); }
  55%   { transform: rotateX(4deg)   rotateY(1411deg) rotateZ(-4deg); }
  59.1% { transform: rotateX(-5deg)  rotateY(1516deg) rotateZ(4deg); }
  63.6% { transform: rotateX(3deg)   rotateY(1633deg) rotateZ(-2deg); }
  66.3% { transform: rotateX(0deg)   rotateY(1702deg) rotateZ(0deg); }
  68.2% { transform: rotateX(6deg)   rotateY(1750deg) rotateZ(-4deg); }
  72.2% { transform: rotateX(-3deg)  rotateY(1852deg) rotateZ(2deg); }
  72.7% { transform: rotateX(-2deg)  rotateY(1866deg) rotateZ(2deg); }
  77.3% { transform: rotateX(3deg)   rotateY(1983deg) rotateZ(-2deg); }
  78.1% { transform: rotateX(0deg)   rotateY(2004deg) rotateZ(0deg); }
  79.5% { transform: rotateX(3deg)   rotateY(2041deg) rotateZ(-2deg); }
  81.1% { transform: rotateX(-1deg)  rotateY(2082deg) rotateZ(1deg); }
  81.8% { transform: rotateX(-2deg)  rotateY(2099deg) rotateZ(1deg); }
  84.2% { transform: rotateX(1deg)   rotateY(2160deg) rotateZ(-1deg); }
  85.8% { transform: rotateX(0deg)   rotateY(2160deg) rotateZ(0deg); }
  87.3% { transform: rotateX(-2deg)  rotateY(2160deg) rotateZ(0deg); }
  100%  { transform: rotateX(-12deg) rotateY(2160deg) rotateZ(0deg); }
}
@keyframes spin-b {
  0%    { transform: rotateX(-12deg) rotateY(0deg)    rotateZ(0deg); }
  4.5%  { transform: rotateX(6deg)   rotateY(126deg)  rotateZ(5deg); }
  9.1%  { transform: rotateX(16deg)  rotateY(253deg)  rotateZ(-4deg); }
  13.6% { transform: rotateX(-8deg)  rotateY(379deg)  rotateZ(6deg); }
  18.2% { transform: rotateX(14deg)  rotateY(505deg)  rotateZ(-5deg); }
  21.8% { transform: rotateX(-4deg)  rotateY(607deg)  rotateZ(3deg); }
  22.7% { transform: rotateX(-10deg) rotateY(632deg)  rotateZ(4deg); }
  27.3% { transform: rotateX(10deg)  rotateY(758deg)  rotateZ(-6deg); }
  31.8% { transform: rotateX(-14deg) rotateY(884deg)  rotateZ(5deg); }
  36.4% { transform: rotateX(8deg)   rotateY(1011deg) rotateZ(-4deg); }
  40.9% { transform: rotateX(-6deg)  rotateY(1137deg) rotateZ(3deg); }
  43.6% { transform: rotateX(0deg)   rotateY(1213deg) rotateZ(0deg); }
  45.5% { transform: rotateX(11deg)  rotateY(1264deg) rotateZ(-9deg); }
  50%   { transform: rotateX(-7deg)  rotateY(1390deg) rotateZ(6deg); }
  55%   { transform: rotateX(4deg)   rotateY(1529deg) rotateZ(-4deg); }
  59.1% { transform: rotateX(-5deg)  rotateY(1643deg) rotateZ(4deg); }
  63.6% { transform: rotateX(3deg)   rotateY(1769deg) rotateZ(-2deg); }
  66.3% { transform: rotateX(0deg)   rotateY(1844deg) rotateZ(0deg); }
  68.2% { transform: rotateX(6deg)   rotateY(1895deg) rotateZ(-4deg); }
  72.2% { transform: rotateX(-3deg)  rotateY(2006deg) rotateZ(2deg); }
  72.7% { transform: rotateX(-2deg)  rotateY(2021deg) rotateZ(2deg); }
  77.3% { transform: rotateX(3deg)   rotateY(2148deg) rotateZ(-2deg); }
  78.1% { transform: rotateX(0deg)   rotateY(2171deg) rotateZ(0deg); }
  79.5% { transform: rotateX(3deg)   rotateY(2211deg) rotateZ(-2deg); }
  81.1% { transform: rotateX(-1deg)  rotateY(2255deg) rotateZ(1deg); }
  81.8% { transform: rotateX(-2deg)  rotateY(2274deg) rotateZ(1deg); }
  84.2% { transform: rotateX(1deg)   rotateY(2340deg) rotateZ(-1deg); }
  85.8% { transform: rotateX(0deg)   rotateY(2340deg) rotateZ(0deg); }
  87.3% { transform: rotateX(-2deg)  rotateY(2340deg) rotateZ(0deg); }
  100%  { transform: rotateX(-12deg) rotateY(2340deg) rotateZ(0deg); }
}
.toss-hint { text-align: center; color: rgba(243, 233, 210, .55); font-size: 13px; letter-spacing: 3px; margin: 6px 0 4px; }

/* ========================================================================
   龟壳摇卦台（侧前方 3D 木案 + 玄龟古壳 + 真铜钱高抛落案）
   钱架仍是 slot > fly > coin 三层；本台机位在壳口，落案由 --lx/--ly 驱动
   ======================================================================== */
#toss-arena {
  position: relative; height: 272px; margin: 2px 2px 0; border-radius: 14px;
  overflow: hidden; perspective: 1100px; user-select: none; -webkit-user-select: none;
  background: linear-gradient(180deg, #231a12 0%, #171009 58%, #0d0906 100%);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, .6);
}
/* 后壁淡云气，压住沉闷 */
.arena-back {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 42% at 50% 16%, rgba(168, 130, 72, .12), transparent 70%);
}
/* 木案：宽大椭圆桌面，前缘朝客人，胡桃木纹 */
.arena-board {
  position: absolute; left: -16%; right: -16%; bottom: -52px; height: 158px;
  border-radius: 50% 50% 0 0 / 26% 26% 0 0; z-index: 1;
  background:
    repeating-linear-gradient(93deg, rgba(0, 0, 0, .10) 0 2px, transparent 2px 24px),
    radial-gradient(ellipse at 50% 12%, #604828 0%, #42301a 52%, #241709 100%);
  box-shadow: inset 0 16px 26px rgba(0, 0, 0, .5), inset 0 -10px 22px rgba(0, 0, 0, .66);
}
.board-front {
  position: absolute; left: 12%; right: 12%; top: -3px; height: 9px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(214, 174, 110, .35), transparent);
  filter: blur(1.5px);
}
/* ---------- 玄龟古壳 ---------- */
.turtle {
  position: absolute; left: 50%; top: 54px; width: 148px; height: 108px;
  margin-left: -74px; z-index: 5; cursor: grab; touch-action: none;
  transform-style: preserve-3d; transform: rotateX(-4deg);
  transition: transform .18s ease-out;
}
.turtle::before { /* 壳底接触影 */
  content: ''; position: absolute; left: 50%; bottom: -6px; width: 118px; height: 20px;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .72), transparent 70%);
  filter: blur(3px);
}
.turtle.dragging { cursor: grabbing; transition: none; }
.shell {
  position: absolute; inset: 0; transform-style: preserve-3d;
  border-radius: 64% 64% 42% 42% / 70% 70% 30% 30%;
  background: radial-gradient(120% 92% at 38% 20%, #6d5537 0%, #473521 38%, #271d12 70%, #130d07 100%);
  box-shadow:
    inset 0 11px 16px rgba(190, 150, 96, .2),
    inset 2px 0 10px rgba(190, 150, 96, .08),
    inset 0 -16px 24px rgba(0, 0, 0, .68);
}
.shell-scutes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scute-lines path {
  fill: none; stroke: rgba(8, 5, 3, .6); stroke-width: 1.6; stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(202, 164, 104, .2));
}
.shell-shine {
  position: absolute; left: 12%; top: 8%; width: 46%; height: 30%; border-radius: 50%;
  pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse, rgba(214, 184, 130, .22), transparent 70%);
}
.shell-rim { /* 暗铜壳沿 */
  position: absolute; left: 5%; right: 5%; bottom: 2px; height: 13px; border-radius: 50%;
  background: linear-gradient(180deg, #83653a 0%, #523c20 46%, #251808 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .8), inset 0 1px 1px rgba(222, 186, 118, .55);
  z-index: 4;
}
.shell-mouth { /* 壳口：中央透亮（钱在内可见），四周深如洞壁 */
  position: absolute; left: 50%; bottom: 3px; width: 94px; height: 25px;
  transform: translateX(-50%); border-radius: 50%; z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse at 50% 34%, transparent 26%, rgba(8, 5, 3, .55) 62%, rgba(6, 4, 2, .96) 90%);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .9), 0 -1px 0 rgba(130, 100, 58, .66);
  animation: mouth-breath 3.4s ease-in-out infinite;
}
.shell-mouth i {
  position: absolute; inset: 2px; border-radius: 50%;
  border: 1px solid rgba(160, 128, 76, .22);
}
@keyframes mouth-breath { 0%, 100% { filter: brightness(.92); } 50% { filter: brightness(1.12); } }
/* 轻点自摇：壳身短脆三摆 */
.turtle.shake .shell { animation: shell-shake .72s ease-in-out; }
@keyframes shell-shake {
  0%, 100% { transform: rotateZ(0deg) rotateX(0deg); }
  18% { transform: rotateZ(9deg) rotateX(5deg); }
  38% { transform: rotateZ(-9deg) rotateX(-4deg); }
  58% { transform: rotateZ(7deg) rotateX(3deg); }
  78% { transform: rotateZ(-4deg) rotateX(-2deg); }
}
/* 倾壳出钱：壳口向前（客人方向）压下，再回正 */
.turtle.pouring .shell { animation: shell-pour .92s cubic-bezier(.5, 0, .35, 1) both; }
@keyframes shell-pour {
  0%   { transform: rotateX(0deg) translateY(0); }
  26%  { transform: rotateX(-44deg) translateY(9px); }
  56%  { transform: rotateX(-36deg) translateY(8px); }
  78%  { transform: rotateX(-10deg) translateY(2px); }
  100% { transform: rotateX(0deg) translateY(0); }
}

/* ---------- 真铜钱（本台机位） ---------- */
.coin-slot.real {
  position: absolute; left: 50%; top: 150px; width: 56px; height: 56px;
  margin: -28px 0 0 -28px; z-index: 6;
}
.coin-slot.real .coin-fly { width: 56px; height: 56px; inset: 0; bottom: auto; left: auto; position: absolute; }
.coin-slot.real .coin { width: 56px; height: 56px; font-size: 11px; }
#s0 { --sx: -10px; }
#s1 { --sx: 0px; }
#s2 { --sx: 10px; }
/* 待摇：三钱缩在壳口，隐约一线金黄；--grav/--grav-y 是壳倾斜时的重力位移（JS 跟手写） */
.coin-slot.in-shell { z-index: 6; }
.coin-slot.in-shell .coin-fly {
  transform: translate(calc(var(--sx, 0px) + var(--grav, 0px)),
                       calc(-3px + var(--grav-y, 0px))) scale(.46);
  opacity: .92;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55));
}
.coin-slot.in-shell .coin-shadow, .coin-slot.in-shell .coin-tag { opacity: 0; }
/* 拖壳时：位移交给 --grav（钱滚向壳低侧，fly 层 transition 带惯性迟滞）；
   coin 本身只做不断的颠撞滚转，像在壳底互相磕碰（无音效，以动代声） */
#toss-arena.rattling .coin-slot.in-shell .coin { animation: coin-jostle .3s ease-in-out infinite alternate; }
#toss-arena.rattling #s1.in-shell .coin { animation-delay: .06s; }
#toss-arena.rattling #s2.in-shell .coin { animation-delay: .12s; }
@keyframes coin-jostle {
  from { transform: rotateX(-14deg) rotateY(-20deg) rotateZ(-8deg); }
  to   { transform: rotateX(-10deg) rotateY(22deg) rotateZ(9deg); }
}
/* 轻点/自摇：壳做 .72s 三摆，钱在碗壳内受迫滚动——
   惯性与壳转向相反、沿弧壁爬高再滚回，第二摆冲得最高，之后衰减回底 */
#toss-arena.rocking .coin-slot.in-shell .coin { animation: coin-bowl .72s cubic-bezier(.4, 0, .2, 1) both; }
#toss-arena.rocking #s0.in-shell .coin { animation-duration: .70s; }
#toss-arena.rocking #s1.in-shell .coin { animation-delay: .03s; }
#toss-arena.rocking #s2.in-shell .coin { animation-delay: .06s; animation-duration: .74s; }
@keyframes coin-bowl {
  0%   { transform: rotateX(-12deg) rotateY(0deg)   rotateZ(0deg)   translate(0, 0); }
  /* 壳先摆右极：钱因惯性冲上左壁，沿弧抬高、贴壁滚动 */
  17%  { transform: rotateX(-22deg) rotateY(-24deg) rotateZ(-36deg) translate(-5px, -3px); }
  /* 壳反摆左极：钱横扫碗底冲向右壁，此刻速度最大、爬得最高 */
  37%  { transform: rotateX(-3deg)  rotateY(22deg)  rotateZ(42deg)  translate(6px, -5px); }
  /* 第三摆：回冲左壁，能量已减 */
  57%  { transform: rotateX(-18deg) rotateY(-15deg) rotateZ(-27deg) translate(-4px, -2px); }
  /* 衰减余摆 */
  76%  { transform: rotateX(-9deg)  rotateY(10deg)  rotateZ(15deg)  translate(2px, -1px); }
  88%  { transform: rotateX(-13deg) rotateY(-4deg)  rotateZ(-5deg)  translate(-1px, 0); }
  100% { transform: rotateX(-12deg) rotateY(0deg)   rotateZ(0deg)   translate(0, 0); }
}
/* 出壳高抛：z 抬到壳前，全程 2.4s，错峰延迟沿用 #s1/#s2 选择器 */
.coin-slot.tossing { z-index: 8; }
.coin-slot.tossing .coin-fly { animation: fly-a 2.4s linear both; }
.coin-slot.tossing .coin.spin-z { animation: spin-z 2.4s linear both; }
.coin-slot.tossing .coin.spin-b { animation: spin-b 2.4s linear both; }
.coin-slot.tossing .coin-shadow { animation: cshadow-a 2.4s linear both; }
/* 快演（玄龟代摇）：整套压到 .42s，六爻五秒内落完 */
#toss-arena.fast .coin-slot.tossing .coin-fly,
#toss-arena.fast .coin-slot.tossing .coin,
#toss-arena.fast .coin-slot.tossing .coin-shadow { animation-duration: .42s; }
#toss-arena.fast .turtle.pouring .shell { animation-duration: .3s; }
#toss-arena.fast .coin-slot.returning .coin-fly { animation-duration: .2s; }
@keyframes fly-a {
  /* 0% 与壳口静态完全同位（含各钱 --sx 与拖壳残留的 --grav 惯性），先顺势滚出壳口再拔高 */
  0%   { transform: translate(calc(var(--sx, 0px) + var(--grav, 0px)), calc(-3px + var(--grav-y, 0px))) scale(.46); }
  8%   { transform: translate(calc(var(--sx, 0px) * .5 + var(--grav, 0px) * .5), -30px) scale(.52); }
  10%  { transform: translate(calc(var(--lx, 0px) * .16), -52px) scale(.56); }
  22%  { transform: translate(calc(var(--lx, 0px) * .30), -88px) scale(.70); }
  34%  { transform: translate(calc(var(--lx, 0px) * .52), -64px) scale(.86); }
  44%  { transform: translate(calc(var(--lx, 0px) * .86), calc(var(--ly, 60px) - 6px)) scale(1.05); }
  46%  { transform: translate(var(--lx, 0px), var(--ly, 60px)) scale(1.09); }
  51%  { transform: translate(var(--lx, 0px), calc(var(--ly, 60px) - 28px)) scale(.97); }
  57%  { transform: translate(var(--lx, 0px), var(--ly, 60px)) scale(1.03); }
  63%  { transform: translate(var(--lx, 0px), calc(var(--ly, 60px) - 13px)) scale(1.00); }
  69%  { transform: translate(var(--lx, 0px), var(--ly, 60px)) scale(1.01); }
  75%  { transform: translate(var(--lx, 0px), calc(var(--ly, 60px) - 4px)) scale(1.00); }
  80%  { transform: translate(var(--lx, 0px), var(--ly, 60px)) scale(1); }
  100% { transform: translate(var(--lx, 0px), var(--ly, 60px)) scale(1); }
}
/* 接触阴影常驻落点，随钱在空中的高度缩放明暗 */
.coin-slot.real .coin-shadow {
  left: 50%; top: 50%; bottom: auto; margin: 0; width: 46px; height: 11px;
  opacity: 0;
  transform: translate(calc(-50% + var(--lx, 0px)), calc(var(--ly, 60px) + 20px));
}
@keyframes cshadow-a {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--lx, 0px)), calc(var(--ly, 60px) + 20px)) scale(.4); }
  22%  { opacity: .14; transform: translate(calc(-50% + var(--lx, 0px)), calc(var(--ly, 60px) + 20px)) scale(.5); }
  46%  { opacity: .66; transform: translate(calc(-50% + var(--lx, 0px)), calc(var(--ly, 60px) + 20px)) scale(1.16); }
  51%  { opacity: .4;  transform: translate(calc(-50% + var(--lx, 0px)), calc(var(--ly, 60px) + 20px)) scale(.9); }
  57%  { opacity: .58; transform: translate(calc(-50% + var(--lx, 0px)), calc(var(--ly, 60px) + 20px)) scale(1.06); }
  69%  { opacity: .52; transform: translate(calc(-50% + var(--lx, 0px)), calc(var(--ly, 60px) + 20px)) scale(1); }
  100% { opacity: .46; transform: translate(calc(-50% + var(--lx, 0px)), calc(var(--ly, 60px) + 20px)) scale(1); }
}
/* 字/背小签：落定浮于钱上 */
.coin-tag {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: 21px; height: 21px;
  margin: -10.5px 0 0 -10.5px; border-radius: 6px; opacity: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: bold; letter-spacing: 0; line-height: 1;
  transform: translate(calc(-50% + var(--lx, 0px)), calc(var(--ly, 60px) - 36px));
}
.coin-tag.tag-z { background: linear-gradient(180deg, #b0463b, #8e332b); color: #f7e8ce;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 230, 200, .35); }
.coin-tag.tag-b { background: linear-gradient(180deg, #6c5230, #47341c); color: #ecd9ad;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(232, 200, 140, .4); }
.coin-slot.landed .coin-tag { animation: tag-in .38s ease .06s both; }
@keyframes tag-in {
  from { opacity: 0; transform: translate(calc(-50% + var(--lx, 0px)), calc(var(--ly, 60px) - 26px)) scale(.6); }
  to   { opacity: 1; transform: translate(calc(-50% + var(--lx, 0px)), calc(var(--ly, 60px) - 36px)) scale(1); }
}
/* 化光回壳：金回壳口，壳微沉（壳沉用 JS 在回壳时给 turtle 一点 scale 反馈） */
.coin-slot.returning .coin-fly { animation: return-a .55s cubic-bezier(.5, 0, .85, 0) both; }
.coin-slot.returning .coin-tag, .coin-slot.returning .coin-shadow { opacity: 0; transition: opacity .18s; }
@keyframes return-a {
  0%   { transform: translate(var(--lx, 0px), var(--ly, 60px)) scale(1); opacity: 1; filter: brightness(1); }
  55%  { filter: brightness(1.75) drop-shadow(0 0 10px rgba(255, 222, 142, .95)); }
  100% { transform: translate(0, 0) scale(.4); opacity: 0; filter: brightness(2); }
}
/* 跳过余下 */
.btn-skip {
  display: block; width: 100%; margin: 10px auto 2px; padding: 11px 16px; cursor: pointer;
  background: linear-gradient(180deg, rgba(208, 171, 104, .16), rgba(208, 171, 104, .06));
  border: 1px solid rgba(208, 171, 104, .55); border-radius: 12px;
  color: #f0e2c0; font-family: var(--serif); font-size: 14px; letter-spacing: 4px;
  animation: skipBreath 2.6s ease-in-out infinite;
}
.btn-skip:active { transform: scale(.97); background: rgba(208, 171, 104, .24); }
@keyframes skipBreath {
  0%, 100% { box-shadow: 0 0 0 rgba(208, 171, 104, 0); border-color: rgba(208, 171, 104, .45); }
  50% { box-shadow: 0 0 16px rgba(208, 171, 104, .30); border-color: rgba(208, 171, 104, .9); }
}
/* 快演模式：错峰延迟也压短，三枚钱几乎齐出 */
#toss-arena.fast #s1 .coin-fly, #toss-arena.fast #s1 .coin, #toss-arena.fast #s1 .coin-shadow { animation-delay: .05s; }
#toss-arena.fast #s2 .coin-fly, #toss-arena.fast #s2 .coin, #toss-arena.fast #s2 .coin-shadow { animation-delay: .1s; }
/* 钱化光回壳后，壳身轻轻一沉，接住三钱 */
.turtle.sink .shell { animation: shell-sink .5s ease; }
@keyframes shell-sink {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(3px) scale(.985); }
  100% { transform: translateY(0) scale(1); }
}
/* 回壳瞬间淡入壳口，不生硬 */
.coin-slot.in-shell .coin-fly { transition: transform .25s ease, opacity .3s ease; }
/* 知心通宝背面：云雷细纹（同心细雷纹 + 一周齿纹，暗铜色，缓转） */
.yunlei {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(74, 50, 18, .5) 0 1px, transparent 1px 3.4px);
  -webkit-mask: radial-gradient(closest-side, transparent 30%, #000 34%, #000 61%, transparent 67%);
          mask: radial-gradient(closest-side, transparent 30%, #000 34%, #000 61%, transparent 67%);
  animation: yunlei-turn 26s linear infinite;
}
.yunlei::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(rgba(96, 70, 30, .85) 0deg 2.5deg, transparent 2.5deg 11.25deg);
  -webkit-mask: radial-gradient(closest-side, transparent 47%, #000 49%, #000 53%, transparent 55%);
          mask: radial-gradient(closest-side, transparent 47%, #000 49%, #000 53%, transparent 55%);
}
@keyframes yunlei-turn { to { transform: rotate(360deg); } }
.yaoboard { display: flex; flex-direction: column-reverse; gap: 9px; padding: 16px 10px 6px; min-height: 150px; }
.yao-row { display: flex; align-items: center; gap: 10px; min-height: 18px; }
.yao-bars { flex: 1; display: flex; gap: 12px; }
.yao-bar { height: 9px; flex: 1; border-radius: 3px; background: linear-gradient(180deg, #e8cf96, #b8934f); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); opacity: 0; transform: scaleX(.2); }
.yao-row.drawn .yao-bar { animation: draw .5s ease forwards; }
@keyframes draw { to { opacity: 1; transform: scaleX(1); } }
.yao-mark { width: 22px; font-size: 15px; color: var(--gold); text-align: center; }
.yao-tag { width: 34px; font-size: 12px; color: var(--cinnabar); text-align: center; letter-spacing: 1px; }
.yao-tag.shi { color: var(--jade); }

/* ---------- 结果区 ---------- */
.result-block { margin: 0 14px 16px; padding: 16px; }
.pillars-row { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 12px; }
.pillar { flex: 1; text-align: center; background: rgba(50, 37, 25, .05); border: 1px solid rgba(143, 116, 67, .3); border-radius: 10px; padding: 8px 2px; }
.pillar .pt { font-size: 11px; color: #7a5c33; letter-spacing: 1px; }
.pillar .pg, .pillar .pz { font-size: 24px; line-height: 1.35; color: var(--ink); font-weight: bold; }
.pillar .pw { font-size: 11px; color: var(--cinnabar); }
.pillar .ss { font-size: 11px; color: var(--jade); margin-top: 2px; }
.wx-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.wx-name { width: 18px; color: #6f5230; font-weight: bold; }
.wx-track { flex: 1; height: 10px; background: rgba(50, 37, 25, .08); border-radius: 6px; overflow: hidden; }
.wx-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #d0ab68, #9c7f4b); width: 0; transition: width .8s ease; }
.wx-num { width: 70px; text-align: right; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.wx-num small { display: block; font-size: 10px; color: rgba(60,46,30,.85); letter-spacing: 1px; }
.wx-note { margin: 8px 2px 0; font-size: 11px; line-height: 1.7; color: rgba(60,46,30,.85); letter-spacing: .5px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.badge { padding: 5px 13px; border-radius: 999px; font-size: 13px; letter-spacing: 2px; }
.badge.yong { background: rgba(123, 168, 135, .18); color: #4c7a5c; border: 1px solid rgba(123, 168, 135, .6); }
.badge.ji { background: rgba(181, 67, 58, .12); color: var(--cinnabar); border: 1px solid rgba(181, 67, 58, .55); }
.dayun-strip { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px; }
.dayun-chip { flex: none; text-align: center; border: 1px solid rgba(143, 116, 67, .4); border-radius: 9px; padding: 5px 10px; font-size: 13px; color: var(--ink); background: rgba(255, 255, 255, .35); }
.dayun-chip b { display: block; font-size: 15px; color: var(--gold-deep); }
.reading { line-height: 2; font-size: 15px; letter-spacing: .5px; white-space: pre-wrap; }
.ref-note { margin-top: 10px; font-size: 12px; color: #7a5c33; letter-spacing: 1px; text-align: right; }

/* 就本卦追问 */
.gua-follow {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed rgba(208, 171, 104, .35);
}
.follow-title {
  text-align: center; font-size: 15px; letter-spacing: 6px;
  color: var(--gold); font-weight: normal;
}
.follow-tip {
  margin: 6px 2px 12px; text-align: center;
  font-size: 12px; color: rgba(243,233,210,.8); letter-spacing: 1px; line-height: 1.8;
}
.follow-msgs {
  max-height: 420px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px; padding: 2px;
}
.follow-msg b {
  display: block; margin-bottom: 3px;
  font-size: 11px; letter-spacing: 2px; font-weight: normal;
  color: rgba(243,233,210,.78);
}
.follow-msg > p, .follow-msg > .fm-bubble {
  margin: 0; padding: 10px 13px; border-radius: 10px;
  font-size: 14px; line-height: 1.9; letter-spacing: .4px;
  white-space: pre-wrap; word-break: break-word;
}
.follow-msg.her > p, .follow-msg.her > .fm-bubble {
  background: rgba(208, 171, 104, .16);
  border: 1px solid rgba(208, 171, 104, .32);
  color: #f3e9d2;
}
.follow-msg.me { align-self: flex-end; max-width: 86%; text-align: right; }
.follow-msg.her { align-self: flex-start; max-width: 90%; }
.follow-msg.me > p {
  background: rgba(62, 50, 34, .9);
  border: 1px solid rgba(208, 171, 104, .4);
  color: #f3e9d2; text-align: left;
}
.follow-input { display: flex; gap: 8px; }
.follow-input input { flex: 1; min-width: 0; }
.follow-input .btn { flex: none; padding: 0 18px; }
.typing-dot { color: var(--gold); animation: blink 1s infinite; }
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.meta-line { font-size: 12.5px; color: #6f5230; letter-spacing: 1px; line-height: 1.9; }

/* ---------- 卦名 & 装卦表 ---------- */
.gua-title { text-align: center; font-size: 24px; letter-spacing: 6px; color: var(--ink); margin: 4px 0 2px; }
.gua-sub { text-align: center; font-size: 12.5px; color: #6f5230; margin-bottom: 10px; letter-spacing: 2px; }
.gua-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gua-table td { padding: 6px 4px; border-bottom: 1px dashed rgba(143, 116, 67, .3); color: var(--ink); }
.gua-table .g-pos { color: #7a5c33; width: 42px; }
.gua-table .g-tag { width: 30px; text-align: center; }
.gua-table .g-tag.shi { color: #4c7a5c; font-weight: bold; }
.gua-table .g-tag.ying { color: var(--cinnabar); }
.gua-table .g-flag {
  font-style: normal; font-size: 11px; color: #b5433a; letter-spacing: 1px;
  border: 1px solid rgba(181, 67, 58, .4); border-radius: 8px; padding: 0 5px;
}
.sizhi-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.sizhi-chips .badge { font-size: 12px; color: var(--ink); border: 1px solid rgba(143, 116, 67, .4); background: rgba(255, 255, 255, .35); }

/* ---------- 更多测算 ---------- */
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 4px 14px; }
.more-item {
  padding: 16px 8px; border-radius: 12px; color: var(--gold); font-size: 17px; letter-spacing: 5px; text-indent: 5px;
  background: linear-gradient(150deg, rgba(208, 171, 104, .13), rgba(208, 171, 104, .04));
  border: 1px solid rgba(208, 171, 104, .32); box-shadow: inset 0 0 14px rgba(0, 0, 0, .25);
}
.more-item small { display: block; margin-top: 5px; font-size: 11px; color: rgba(243,233,210,.8); letter-spacing: 1px; text-indent: 0; }
.more-item:disabled { opacity: .45; }
.more-note { padding: 14px 20px; font-size: 12px; color: rgba(243,233,210,.78); letter-spacing: 1px; line-height: 1.9; }

/* ---------- 我的 / 历史 ---------- */
.me-row { display: flex; justify-content: space-between; padding: 8px 2px; font-size: 14.5px; border-bottom: 1px dashed rgba(143, 116, 67, .25); }
.me-row b { color: var(--gold-deep); font-weight: normal; }
.hist-item {
  margin: 0 14px 10px; padding: 12px 14px; border-radius: 11px;
  background: linear-gradient(150deg, rgba(208, 171, 104, .1), rgba(208, 171, 104, .03));
  border: 1px solid rgba(208, 171, 104, .25); color: var(--paper);
}
.hist-item .h-title { font-size: 15px; color: var(--gold); letter-spacing: 2px; }
.hist-item .h-q { font-size: 12.5px; color: rgba(243,233,210,.86); margin-top: 4px; }
.hist-item .h-time { font-size: 11px; color: rgba(243,233,210,.62); margin-top: 4px; }
.hist-item .h-by { font-style: normal; font-size: 11px; color: rgba(243,233,210,.78); margin-left: 8px; letter-spacing: 1px; }

/* ---------- 问事录：折叠分组 / 条目展开 / 删除 ---------- */
.rec-day-body[hidden], .rec-gbody[hidden], .rec-ibody[hidden] { display: none; }
.rec-group {
  margin: 0 14px 10px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(150deg, rgba(208, 171, 104, .1), rgba(208, 171, 104, .03));
  border: 1px solid rgba(208, 171, 104, .28);
}
.rec-ghead {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; background: none; border: 0; cursor: pointer;
  color: var(--gold); font-size: 15px; letter-spacing: 3px; text-align: left;
}
.rec-gname { flex: 1; }
.rec-gcount {
  font-style: normal; min-width: 22px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; letter-spacing: 1px; text-align: center;
  background: rgba(208, 171, 104, .18); border: 1px solid rgba(208, 171, 104, .4);
}
.rec-arrow { font-style: normal; font-size: 12px; color: #dcbf86; width: 14px; text-align: center; }
.rec-gbody { padding: 2px 10px 10px; }
.rec-day { margin: 2px 0 6px; border-left: 1px solid rgba(208, 171, 104, .25); padding-left: 8px; }
.rec-dhead {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: none; border: 0; cursor: pointer;
  color: rgba(243, 233, 210, .78); font-size: 13px; letter-spacing: 1.5px; text-align: left;
}
.rec-dhead span { flex: 1; }
.rec-dhead i { font-style: normal; font-size: 11px; color: rgba(243,233,210,.74); }
.rec-day-body { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 4px; }
.rec-item { border-radius: 9px; background: rgba(20, 15, 9, .28); border: 1px solid rgba(208, 171, 104, .16); }
.rec-ihead {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 11px 13px; background: none; border: 0; cursor: pointer; text-align: left;
}
.rec-ih-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rec-tt { font-size: 14px; font-weight: normal; color: var(--paper); letter-spacing: 1.2px; }
.rec-sub {
  font-size: 11.5px; color: rgba(243,233,210,.78); letter-spacing: .5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rec-ibody { padding: 0 13px 13px; }
.rec-loading { padding: 14px 4px; font-size: 12px; color: rgba(243,233,210,.8); letter-spacing: 2px; }
.rd-inner { display: flex; flex-direction: column; gap: 10px; }
.rd-pillars {
  font-size: 16px; letter-spacing: 3px; color: var(--gold);
  padding: 10px 12px; border-radius: 9px; text-align: center;
  background: rgba(208, 171, 104, .1); border: 1px solid rgba(208, 171, 104, .3);
}
.rd-pillars span { display: block; margin-top: 4px; font-size: 11px; letter-spacing: 1px; color: rgba(243,233,210,.78); }
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-chip {
  padding: 3px 10px; border-radius: 999px; font-size: 12px; letter-spacing: 1px;
  color: var(--paper); background: rgba(123, 168, 135, .12);
  border: 1px solid rgba(123, 168, 135, .4);
}
.rd-chip-dim { background: rgba(208, 171, 104, .08); border-color: rgba(208, 171, 104, .3); color: rgba(243,233,210,.88); }
.rd-gua { font-size: 14.5px; color: var(--gold); letter-spacing: 2px; }
.rd-q { font-size: 12.5px; color: rgba(243,233,210,.86); }
.rd-text {
  font-size: 13.5px; line-height: 2; letter-spacing: .4px; color: rgba(243, 233, 210, .88);
  white-space: pre-line; word-break: break-word;
  padding: 10px 12px; border-radius: 9px;
  background: rgba(0, 0, 0, .22); border: 1px solid rgba(208, 171, 104, .14);
  max-height: 360px; overflow-y: auto;
}
.rd-lab { margin: 4px 2px 0; font-size: 11px; letter-spacing: 2px; color: rgba(243,233,210,.74); }
.rd-chats { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.rec-del {
  align-self: flex-end; margin-top: 2px; padding: 7px 16px; cursor: pointer;
  font-size: 12.5px; letter-spacing: 2px; border-radius: 999px;
  color: #d99b8f; background: rgba(181, 67, 58, .1);
  border: 1px solid rgba(181, 67, 58, .5);
}
.rec-del:active { background: rgba(181, 67, 58, .22); }
.rec-del:disabled { opacity: .5; cursor: default; }
.rec-tip { padding: 2px 18px 6px; font-size: 11px; letter-spacing: 1px; color: rgba(243,233,210,.82); }

/* ---------- 通用确认弹层 ---------- */
.confirm-mask {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 7, 4, .62); opacity: 0; pointer-events: none; transition: opacity .2s ease;
  padding: 34px;
}
.confirm-mask.show { opacity: 1; pointer-events: auto; }
.confirm-box {
  width: 100%; max-width: 320px; padding: 22px 20px 18px; border-radius: 14px;
  background: linear-gradient(160deg, #2b2115, #1c150d);
  border: 1px solid rgba(208, 171, 104, .45);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
}
.confirm-box p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.9; letter-spacing: 1px; color: var(--paper); }
.confirm-btns { display: flex; gap: 10px; }
.confirm-btns .btn { flex: 1; padding: 10px 0; }

/* ---------- 应急重连 ---------- */
.panic-note {
  margin: 6px 16px 14px; font-size: 11px; line-height: 1.7; letter-spacing: .5px;
  color: rgba(243, 233, 210, .38); text-align: center;
}
#btn-panic { margin-top: 4px; color: rgba(243, 233, 210, .72); }
#btn-panic:active { color: var(--gold); }

/* ---------- 天机阁·应急脉案 ---------- */
.panic-row {
  margin: 0 14px 10px; padding: 11px 13px; border-radius: 10px;
  background: rgba(20, 15, 9, .3); border: 1px solid rgba(208, 171, 104, .2);
}
.panic-row.is-err { border-color: rgba(181, 67, 58, .5); background: rgba(181, 67, 58, .07); }
.pn-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pn-head b { font-size: 14px; color: var(--paper); letter-spacing: 1px; }
.pn-head i { font-style: normal; font-size: 12px; color: rgba(243, 233, 210, .55); }
.pn-tag {
  font-style: normal; font-size: 11px; letter-spacing: 1px; padding: 1px 8px;
  border-radius: 999px; border: 1px solid;
}
.pn-tag.error { color: #e0a196; border-color: rgba(181, 67, 58, .6); background: rgba(181, 67, 58, .12); }
.pn-tag.manual { color: rgba(243, 233, 210, .55); border-color: rgba(208, 171, 104, .35); background: rgba(208, 171, 104, .07); }
.pn-count { font-style: normal; font-size: 11px; color: #e0a196; border: 1px solid rgba(181,67,58,.5); border-radius: 999px; padding: 0 7px; }
.pn-line { margin-top: 7px; font-size: 12.5px; line-height: 1.7; color: rgba(243, 233, 210, .8); word-break: break-word; }
.pn-line i { font-style: normal; font-size: 11px; color: rgba(243,233,210,.74); margin-left: 4px; }
.pn-line.pn-api { color: rgba(231, 199, 132, .85); }
.pn-line.pn-clean { color: rgba(243,233,210,.74); font-size: 12px; }
.pn-time { margin-top: 7px; font-size: 11px; color: rgba(243, 233, 210, .38); letter-spacing: .5px; }
#btn-panic-clear { color: rgba(217, 155, 143, .85); }

/* ---------- 天机阁后台（仅管理员） ---------- */
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 14px 10px; }
.stat-card {
  text-align: center; padding: 13px 2px; border-radius: 12px;
  background: linear-gradient(150deg, rgba(208, 171, 104, .14), rgba(208, 171, 104, .04));
  border: 1px solid rgba(208, 171, 104, .32); box-shadow: inset 0 0 14px rgba(0, 0, 0, .25);
}
.stat-card b { display: block; font-size: 21px; color: var(--gold); }
.stat-card span { font-size: 10.5px; color: rgba(243, 233, 210, .55); letter-spacing: 1px; }
.admin-row {
  margin: 0 14px 8px; padding: 11px 14px; border-radius: 11px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(150deg, rgba(208, 171, 104, .1), rgba(208, 171, 104, .03));
  border: 1px solid rgba(208, 171, 104, .25);
}
.admin-row b { color: var(--gold); font-size: 15px; letter-spacing: 2px; }
.admin-row span { font-size: 12.5px; color: rgba(243,233,210,.86); }
.admin-row em { font-style: normal; font-size: 11.5px; color: rgba(243,233,210,.8); margin-left: auto; }
.admin-row em.adm-time { flex-basis: 100%; text-align: right; color: rgba(243,233,210,.62); }
.adm-tag {
  font-style: normal; font-size: 10px; color: var(--cinnabar);
  border: 1px solid rgba(181, 67, 58, .65); border-radius: 4px; padding: 1px 4px;
}

/* ---------- 加载 & 提示 ---------- */
.loading-mask {
  position: fixed; inset: 0; z-index: 60; background: rgba(13, 10, 7, .82);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  backdrop-filter: blur(4px);
}
.loading-mask p { color: var(--gold); letter-spacing: 6px; font-size: 15px; }
.taiji-spin {
  width: 54px; height: 54px; border-radius: 50%; position: relative;
  background: linear-gradient(90deg, #f3e9d2 50%, #241a12 50%);
  border: 2px solid rgba(208, 171, 104, .8);
  animation: taiji 1.6s linear infinite;
}
.taiji-spin::before, .taiji-spin::after {
  content: ''; position: absolute; left: 50%; width: 27px; height: 27px; border-radius: 50%;
  transform: translateX(-50%);
}
.taiji-spin::before { top: 0; background: #241a12; box-shadow: inset 0 0 0 6px #f3e9d2; }
.taiji-spin::after { bottom: 0; background: #f3e9d2; box-shadow: inset 0 0 0 6px #241a12; }
.taiji-big { width: 84px; height: 84px; }
.taiji-big::before, .taiji-big::after { width: 42px; height: 42px; }
.taiji-big::before { box-shadow: inset 0 0 0 9px #f3e9d2; }
.taiji-big::after { box-shadow: inset 0 0 0 9px #241a12; }
@keyframes taiji { to { transform: rotate(360deg); } }
.toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(20px);
  background: rgba(36, 26, 18, .95); color: var(--gold); border: 1px solid rgba(208, 171, 104, .5);
  padding: 10px 20px; border-radius: 10px; font-size: 14px; letter-spacing: 2px;
  opacity: 0; pointer-events: none; transition: all .3s; z-index: 70; max-width: 80vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.coin-mini { width: 46px; height: 46px; font-size: 8px; margin: 0 auto; }
.coin-mini .edge { display: none; }

/* ============================================================
   细打磨 · 手作仙气（去模板感：宣纸纤维、朱印、云气、描金）
   ============================================================ */
#app { position: relative; z-index: 1; }
/* 仙境背景独立图层：fixed 钉住视口，内容（#app z-index:1）在其上滚动，
   划到页面多深背景都满幅不断；手绘矢量仙境 + 轻纱压暗保证前景可读 */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(208, 171, 104, .12), transparent 60%),
    linear-gradient(180deg, rgba(10, 8, 16, .07), rgba(12, 10, 16, .34) 46%, rgba(9, 7, 10, .68) 100%),
    url('../img/bg.svg') center 28% / cover no-repeat,
    linear-gradient(180deg, var(--bg1), var(--bg0) 70%);
}
/* 漂浮的薄雾另置一层，慢慢游移，仙境才有生气 */
body::after {
  content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(420px 130px at 18% 30%, rgba(232, 222, 196, .07), transparent 70%),
    radial-gradient(520px 160px at 78% 62%, rgba(232, 222, 196, .06), transparent 70%);
  animation: mist 26s ease-in-out infinite alternate;
}
@keyframes mist {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* 宣纸纤维 + 四角朱印 */
.paper {
  background:
    repeating-linear-gradient(92deg, rgba(120, 90, 50, .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(2deg, rgba(120, 90, 50, .028) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 50% -10%, rgba(255, 252, 240, .98), rgba(243, 233, 210, .93) 58%, rgba(231, 216, 184, .95));
}
.paper::before, .paper::after {
  width: 7px; height: 7px; border: none; border-radius: 1px;
  background: linear-gradient(135deg, #c4503f, #96332c);
  box-shadow: 0 0 0 2px rgba(150, 51, 44, .16);
  transform: rotate(45deg); opacity: .85;
}

/* 顶栏双线描金 */
.topbar { border-bottom: none; }
.topbar::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(208, 171, 104, .4), transparent);
}
.brand { text-shadow: 0 0 14px rgba(208, 171, 104, .35); }

/* 首页：月、云、题字 */
.hero { position: relative; padding: 40px 0 22px; }
.hero::before {
  content: ''; position: absolute; left: 50%; top: 6px; width: 132px; height: 132px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(244, 230, 190, .22), rgba(208, 171, 104, .08) 55%, transparent 72%);
  pointer-events: none;
}
.hero .taiji-spin { position: relative; margin-bottom: 14px; box-shadow: 0 0 0 7px rgba(208, 171, 104, .07), 0 0 26px rgba(208, 171, 104, .25); }
.hero h2 { text-shadow: 0 0 20px rgba(208, 171, 104, .4), 0 2px 3px rgba(0, 0, 0, .5); }

/* 入口卡：木牌描边 + 朱印钉 */
.entry {
  position: relative; overflow: hidden; border-radius: 10px;
  background:
    linear-gradient(150deg, rgba(208, 171, 104, .16), rgba(208, 171, 104, .05)),
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent);
  border-color: rgba(208, 171, 104, .4);
}
.entry::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(181, 67, 58, .75), transparent);
}
.entry::after {
  content: ''; position: absolute; right: 12px; top: 12px; width: 6px; height: 6px;
  background: linear-gradient(135deg, #c4503f, #96332c); border-radius: 1px;
  transform: rotate(45deg); box-shadow: 0 0 0 3px rgba(181, 67, 58, .14);
}
.entry-icon {
  border-radius: 8px;
  background:
    radial-gradient(circle at 32% 26%, rgba(208, 171, 104, .3), transparent 72%),
    linear-gradient(160deg, rgba(50, 37, 25, .55), rgba(30, 22, 15, .7));
  text-shadow: 0 0 10px rgba(208, 171, 104, .5);
}

/* 标题右侧一道渐隐金线 */
.view-title { display: flex; align-items: center; gap: 10px; }
.view-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(208, 171, 104, .55), transparent);
}
.view-title small { margin-left: 0; white-space: nowrap; }

/* 按钮：金边内描、按下有深浅 */
.btn-gold {
  border: 1px solid #83652f;
  text-shadow: 0 1px 0 rgba(255, 244, 208, .45);
  box-shadow: 0 4px 14px rgba(184, 147, 79, .35), inset 0 0 0 1px rgba(255, 244, 208, .35), inset 0 -3px 7px rgba(96, 66, 26, .35);
}
.btn-gold:active { box-shadow: 0 1px 5px rgba(184, 147, 79, .4), inset 0 1px 6px rgba(96, 66, 26, .45); }
.btn-ghost { border-radius: 9px; }

/* 输入框更像墨栏 */
.auth-form input, .ask-row input { box-shadow: inset 0 1px 4px rgba(96, 66, 26, .12); }
.auth-form input:focus, .ask-row input:focus {
  border-color: #a8854a; box-shadow: 0 0 0 2px rgba(208, 171, 104, .22), inset 0 1px 4px rgba(96, 66, 26, .1);
}

/* 类别 chips 去胶囊化，做成签条 */
.chip { border-radius: 7px; }
.chip.active { box-shadow: 0 2px 8px rgba(150, 51, 44, .4), inset 0 0 0 1px rgba(255, 235, 210, .25); }

/* 起卦台：脚下一块淡淡云台 */
.coin-stage {
  position: relative; margin: 4px 4px 0; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 84%, rgba(208, 171, 104, .16), transparent 62%);
}
.coin-stage::before {
  content: ''; position: absolute; left: 50%; bottom: 8px; width: 82%; height: 26px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(208, 171, 104, .13), transparent 70%);
  pointer-events: none;
}
/* 起卦台地面：一圈缓缓流转的八卦大阵，八爻方位金纹 */
.coin-stage::after {
  content: ''; position: absolute; left: 50%; bottom: -4px; width: 272px; height: 62px;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(232, 200, 132, .2);
  box-shadow: inset 0 0 16px rgba(232, 200, 132, .08), 0 0 14px rgba(232, 200, 132, .06);
  background: repeating-conic-gradient(rgba(255, 236, 180, .22) 0 1.4deg, transparent 1.4deg 45deg);
  -webkit-mask: radial-gradient(closest-side, transparent 56%, #000 58%, #000 97%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 56%, #000 58%, #000 97%, transparent 100%);
  animation: stage-array 42s linear infinite;
}
@keyframes stage-array { from { transform: translateX(-50%) rotate(0); } to { transform: translateX(-50%) rotate(360deg); } }

/* 诸事测算：木牌 + 红头绳 */
.more-item { border-radius: 9px; position: relative; padding-top: 19px; }
.more-item::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 36px; height: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(181, 67, 58, .9), transparent);
}
.more-item:active { transform: scale(.97); }

/* 四柱瓦片：朱线压顶 */
.pillar { border-top: 2px solid rgba(181, 67, 58, .45); border-radius: 8px 8px 10px 10px; }
.badge { border-radius: 6px; }
.gua-title { text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }

/* 问事录：左侧一道朱砂 */
.hist-item { border-left: 2px solid rgba(181, 67, 58, .55); border-radius: 6px 10px 10px 6px; }
.stat-card, .admin-row { border-radius: 9px; }

/* 底导航：印章式图标 */
.nav-btn i {
  border-radius: 7px;
  background: radial-gradient(circle at 35% 30%, rgba(208, 171, 104, .1), transparent 75%);
}
.nav-btn.active i {
  background: radial-gradient(circle at 35% 30%, rgba(181, 67, 58, .28), rgba(181, 67, 58, .08) 75%);
  border-color: rgba(208, 171, 104, .7);
  box-shadow: inset 0 0 9px rgba(208, 171, 104, .28), 0 0 8px rgba(181, 67, 58, .2);
}

/* 登录页八卦符再淡些，别抢戏 */
.auth-deco { opacity: .7; font-size: 13px; }
.auth-card { box-shadow: var(--shadow), 0 0 0 6px rgba(208, 171, 104, .05), inset 0 0 0 3px rgba(255, 255, 255, .35), inset 0 0 34px rgba(166, 128, 76, .16); }
.auth-logo h1 { text-shadow: 0 0 22px rgba(208, 171, 104, .35), 0 2px 2px rgba(0, 0, 0, .18); }
.auth-sub::before { content: '— '; color: rgba(143, 116, 67, .7); }
.auth-sub::after { content: ' —'; color: rgba(143, 116, 67, .7); }

/* ================= VIP 会员 ================= */
/* ---- 「我的」页顶：金册入口卡（墨夜底烫金，区别于宣纸白卡） ---- */
.vip-card-me {
  display: flex; align-items: center; justify-content: space-between;
  width: calc(100% - 28px); margin: 0 14px 14px; padding: 15px 18px;
  border: 1px solid rgba(208, 171, 104, .5); border-radius: 14px;
  background:
    radial-gradient(120% 170% at 88% -35%, rgba(208, 171, 104, .32), transparent 60%),
    linear-gradient(135deg, #2c2117, #1b130c);
  color: var(--paper); box-shadow: var(--shadow);
}
.vip-card-me:active { transform: translateY(1px); }
.vcm-left { display: flex; align-items: center; gap: 12px; }
.vcm-badge {
  font-style: normal; font-size: 12.5px; letter-spacing: 2px; font-weight: bold;
  color: #3a2a13; background: linear-gradient(135deg, #f3dc9b, #c8a05d);
  border-radius: 7px; padding: 4px 9px; box-shadow: 0 2px 10px rgba(208, 171, 104, .4);
}
.vip-card-me:not(.active):not(.owner) .vcm-badge {
  background: transparent; color: var(--gold); border: 1px solid rgba(208, 171, 104, .7);
  box-shadow: none;
}
.vcm-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.vcm-txt b { font-size: 16px; letter-spacing: 2px; color: #f0dfb2; }
.vcm-txt small { font-size: 11.5px; color: rgba(243, 233, 210, .55); letter-spacing: 1px; }
.vcm-go { font-size: 26px; line-height: 1; color: var(--gold); }
.vip-card-me.owner {
  border-color: rgba(224, 185, 105, .85);
  background:
    radial-gradient(120% 170% at 88% -35%, rgba(224, 185, 105, .5), transparent 60%),
    linear-gradient(135deg, #33250f, #211808);
}
.vip-card-me.owner .vcm-badge { background: linear-gradient(135deg, #f8e7b4, #c88a3e); }
.me-vip-line { color: var(--gold-deep) !important; }

/* ---- VIP 共享入口卡（我的页，紧随会员卡） ---- */
.share-card-me {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 28px); margin: -2px 14px 14px; padding: 13px 18px;
  border: 1px solid rgba(143, 116, 67, .55); border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(255, 250, 236, .97), rgba(239, 227, 201, .94));
  color: var(--ink); box-shadow: var(--shadow); text-align: left;
}
.share-card-me:active { transform: translateY(1px); }
.scm-ico {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #3a2a13; font-weight: bold;
  background: linear-gradient(135deg, #f3dc9b, #c8a05d);
  box-shadow: 0 2px 9px rgba(208, 171, 104, .4);
}
.scm-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.scm-txt b { font-size: 15px; letter-spacing: 2px; color: #5a4322; }
.scm-txt small { font-size: 11.5px; color: rgba(74,52,24,.92); letter-spacing: .5px; }
.share-card-me .vcm-go { color: #a2793a; }

/* ---- VIP 共享子页 ---- */
#screen-vipshare { padding-bottom: 60px; }
.vps-wrap { padding: 0 14px; }
.vps-card { margin-bottom: 14px; }
.vps-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.vps-head b { font-size: 15px; letter-spacing: 2px; color: #5a4322; }
.vps-quota-num { font-size: 12.5px; color: #a2793a; letter-spacing: 1px; }
.vps-note {
  margin: 0 0 12px; font-size: 12.5px; line-height: 1.8;
  color: rgba(74,52,24,.92); letter-spacing: .3px;
}
.vps-search { display: flex; gap: 8px; }
.vps-search input {
  flex: 1; min-width: 0; padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(143, 116, 67, .55); background: rgba(255, 252, 242, .8);
  color: var(--ink); font-size: 14px;
}
.vps-search input:disabled { opacity: .5; }
.vps-search .btn { flex: none; padding: 0 16px; }
.vps-target { margin-top: 12px; }
.vps-searching, .vps-why {
  margin: 0; font-size: 13px; color: rgba(74,52,24,.94);
  padding: 8px 2px; line-height: 1.7;
}
.vps-found-id {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
}
.vps-found-id b { font-size: 18px; letter-spacing: 1px; color: #6a4e24; }
.vps-found-id span { font-size: 14px; color: rgba(90, 67, 34, .8); }
.vps-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.vps-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
}
.vps-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vps-row-main b { font-size: 14.5px; color: #5a4322; letter-spacing: 1px; }
.vps-row-main small {
  font-size: 11.5px; color: rgba(74,52,24,.92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vps-state { font-size: 11px; font-style: normal; letter-spacing: 1px; margin-top: 1px; }
.vps-state.on { color: #3d7a43; }
.vps-state.off { color: #b08a4a; }
.vps-revoke {
  flex: none; border: 1px solid rgba(160, 70, 60, .55); background: transparent;
  color: #9c4a40; border-radius: 16px; font-size: 12.5px; padding: 6px 15px;
}
.vps-revoke:disabled { opacity: .5; }

/* ---- VIP 金册页 ---- */
#screen-vip { padding-bottom: 120px; }
.vip-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 14px 10px;
}
.vip-back {
  width: 38px; height: 38px; border-radius: 50%; line-height: 1;
  border: 1px solid rgba(208, 171, 104, .4); background: transparent;
  color: var(--gold); font-size: 22px;
}
.vip-top-title { letter-spacing: 6px; font-size: 17px; color: var(--paper); }
.vip-orders-btn {
  background: transparent; border: 1px solid rgba(208, 171, 104, .4);
  color: var(--gold); border-radius: 14px; font-size: 12.5px; padding: 6px 14px;
}
.vip-hero {
  position: relative; margin: 6px 14px 18px; padding: 22px 20px; min-height: 126px;
  border-radius: 18px; overflow: hidden; border: 1px solid rgba(208, 171, 104, .4);
  background:
    radial-gradient(130% 150% at 92% -25%, rgba(208, 171, 104, .26), transparent 58%),
    linear-gradient(135deg, #291e14, #150f08);
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: var(--shadow);
}
.vip-hero.active { border-color: rgba(224, 185, 105, .8); }
.vip-hero.owner {
  border-color: rgba(224, 185, 105, .85);
  background:
    radial-gradient(130% 150% at 92% -25%, rgba(224, 185, 105, .45), transparent 58%),
    linear-gradient(135deg, #31240f, #1b1307);
}
.vip-hero-left { display: flex; align-items: center; gap: 14px; z-index: 1; }
.vip-avatar {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #3a2a13;
  background: linear-gradient(135deg, #f3dc9b, #c9a05c);
  border: 2px solid rgba(255, 240, 200, .55);
}
.vip-hero-id b { font-size: 18px; color: #f0dfb2; letter-spacing: 1px; }
.vip-hero-id small { display: block; margin-top: 6px; font-size: 12px; color: rgba(243, 233, 210, .62); }
.vip-gem {
  font-size: 74px; line-height: 1; font-style: normal; transform: rotate(8deg);
  color: #e7c57f; text-shadow: 0 0 26px rgba(224, 185, 105, .6), 0 0 64px rgba(224, 185, 105, .28);
}
.vip-hero.owner .vip-gem { color: #f3d68c; }

/* 套餐三卡 */
.vip-plans { display: flex; gap: 10px; margin: 0 14px; }
.vp-card {
  position: relative; flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 17px 6px 13px;
  border-radius: 14px; color: var(--ink);
  background: linear-gradient(180deg, #f7eed8, #eadcbd);
  border: 1.5px solid rgba(143, 116, 67, .38);
}
.vp-card.on {
  border: 2.5px solid #b8934f; padding: 15.5px 4.5px 11.5px;
  background: linear-gradient(180deg, #fcf4df, #f1e2b5);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(208, 171, 104, .25);
}
.vp-tag {
  position: absolute; top: -10px; font-style: normal; font-size: 10px;
  letter-spacing: 1px; padding: 2px 9px; border-radius: 9px;
  background: linear-gradient(135deg, #b5433a, #8f3329); color: #ffe9c8;
}
.vp-name { font-size: 13px; color: #7a5c33; font-weight: bold; letter-spacing: 2px; }
.vp-price { font-size: 30px; line-height: 1.1; color: #7a5320; font-weight: bold; }
.vp-price small { font-size: 14px; margin-right: 1px; }
.vp-old { font-size: 12px; color: rgba(80, 60, 34, .45); text-decoration: line-through; }
.vip-plan-note {
  text-align: center; font-size: 11.5px; color: rgba(243,233,210,.78);
  margin: 12px 20px 0; letter-spacing: 1px;
}
.vip-owner-note {
  margin: 0 14px; padding: 26px 18px; text-align: center; line-height: 2.1;
  color: var(--gold); border: 1px dashed rgba(208, 171, 104, .55);
  border-radius: 14px; font-size: 14px; letter-spacing: 2px;
}
.vip-value-line {
  display: flex; align-items: center; gap: 10px;
  margin: 24px 14px 14px; color: var(--gold);
}
.vip-value-line::before, .vip-value-line::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(208, 171, 104, .5), transparent);
}
.vip-value-line span { font-size: 13px; letter-spacing: 3px; white-space: nowrap; }

/* 权益对照表 */
.vip-rights { margin: 0 14px; padding: 2px 0; }
.vr-row {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr;
  align-items: center; text-align: center;
}
.vr-row > span {
  padding: 14px 4px; font-size: 13px;
  border-bottom: 1px dashed rgba(143, 116, 67, .28);
}
.vr-row > span:first-child { text-align: left; padding-left: 16px; color: var(--ink); }
.vr-head span { color: #e2c88f; letter-spacing: 2px; font-size: 12.5px; }
.vr-row .vip-col { color: #8a6428; background: rgba(208, 171, 104, .13); }
.vr-head .vip-col {
  color: #fff; background: linear-gradient(135deg, #caa05d, #a87f3e);
}
.vr-lock { color: rgba(80, 60, 34, .42); }
.vip-rights-note {
  text-align: center; font-size: 10.5px; color: rgba(243,233,210,.82);
  margin: 10px 20px 0; letter-spacing: 1px;
}

/* 底部收银栏 */
.vip-pay-space { height: 92px; }
.vip-paybar {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 40;
  display: flex; flex-direction: column; gap: 9px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(28, 20, 13, .55), rgba(22, 16, 10, .98));
  border-top: 1px solid rgba(208, 171, 104, .32);
}
.vip-agree {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: rgba(243, 233, 210, .62);
}
.vip-agree input { width: 15px; height: 15px; accent-color: var(--gold); }
.vip-agree b { color: var(--gold); font-weight: normal; }
.vip-pay-btn {
  width: 100%; padding: 14px 0; border: none; border-radius: 25px;
  font-family: var(--serif); font-size: 17px; letter-spacing: 4px; color: #3a2a13;
  background: linear-gradient(135deg, #f3dc9b, #cf9f4e);
  box-shadow: 0 6px 18px rgba(184, 147, 79, .45);
}
.vip-pay-btn:active { transform: translateY(1px); }
.vip-pay-btn:disabled { opacity: .55; }

/* 书卷弹层（协议 / 记录 / 卦缘尽引导） */
.sheet-mask {
  position: fixed; inset: 0; z-index: 95; display: flex;
  align-items: center; justify-content: center; padding: 30px;
  background: rgba(10, 7, 4, .66); opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.sheet-mask.show { opacity: 1; pointer-events: auto; }
.sheet-box {
  width: 100%; max-width: 360px; max-height: 78vh; overflow-y: auto;
  padding: 22px 20px 20px; border-radius: 16px; color: var(--ink);
  background: linear-gradient(160deg, #fbf4e0, #ede0bb);
  border: 1px solid rgba(143, 116, 67, .6);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
}
.sheet-box h4 {
  text-align: center; font-size: 17px; letter-spacing: 4px;
  margin-bottom: 14px; color: #6e4d1e;
}
.sheet-box pre {
  white-space: pre-wrap; word-break: break-word; margin: 0 0 18px;
  font-family: var(--serif); font-size: 13px; line-height: 2; color: #4d3c26;
}
.upsell-box { text-align: center; }
.upsell-gem {
  font-style: normal; font-size: 44px; line-height: 1; display: block;
  color: #c89a48; text-shadow: 0 0 22px rgba(224, 185, 105, .5); margin-bottom: 8px;
}
.upsell-box p { font-size: 13.5px; line-height: 2; margin: 8px 0 20px; color: #5b442a; }

/* ---- 八字页：试用角标 / 断语金锁卡 ---- */
.trial-tag {
  position: absolute; top: 12px; right: 14px; z-index: 1;
  font-size: 10.5px; letter-spacing: 2px; font-style: normal;
  color: #e8d6a8; border: 1px solid rgba(208, 171, 104, .55);
  border-radius: 8px; padding: 2px 8px; background: rgba(20, 14, 8, .5);
}
.sec-vip-flag {
  display: inline-block; font-size: 10px; letter-spacing: 1px;
  background: linear-gradient(135deg, #caa05d, #a87f3e); color: #fff;
  border-radius: 6px; padding: 1px 6px; vertical-align: 2px; margin-left: 4px;
}
.reading-lock { text-align: center; padding: 14px 10px 8px; }
.rl-seal {
  width: 66px; height: 66px; border-radius: 50%; margin: 4px auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; letter-spacing: 2px; color: #ffe9b8;
  border: 2px solid rgba(184, 147, 79, .75);
  background: radial-gradient(circle at 35% 30%, #ddbd78, #8a6428);
  box-shadow: 0 4px 18px rgba(184, 147, 79, .4), inset 0 0 10px rgba(255, 240, 200, .35);
}
.reading-lock h5 { font-size: 16px; letter-spacing: 3px; color: #7a5320; margin-bottom: 8px; }
.reading-lock p { font-size: 13px; line-height: 2; color: #6b573a; margin-bottom: 16px; }
.reading-todo { text-align: center; padding: 12px 6px; }
.reading-todo p { font-size: 13.5px; color: #7a623e; margin-bottom: 12px; letter-spacing: 2px; }

/* ---- 卜卦页：卦缘尽置灰 ---- */
.btn-light.btn-locked {
  border-color: rgba(143, 116, 67, .45);
  background: linear-gradient(180deg, rgba(150, 128, 92, .45), rgba(96, 80, 58, .55));
  color: rgba(243, 233, 210, .8);
}
.scene-row.locked { opacity: .55; }
.scene-row.locked .scene-arrow { font-size: 0; }
.scene-row.locked .scene-arrow::before {
  content: 'VIP'; font-size: 10px; letter-spacing: 1px; color: var(--gold);
  border: 1px solid rgba(208, 171, 104, .55); border-radius: 5px; padding: 1px 5px;
}

/* ---- 八字命盘册（本人钉顶 · 亲友诸造 · 改名 · VIP 添造） ---- */
.ming-self-tag, .ming-kin-tag {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 9px;
  font-size: 10.5px; letter-spacing: 2px; vertical-align: middle;
}
.ming-self-tag {
  color: #f3dc9b; background: rgba(208,171,104,.22);
  border: 1px solid rgba(208,171,104,.55);
}
.ming-kin-tag {
  color: #e9d8b0; background: rgba(120,150,120,.18);
  border: 1px solid rgba(150,180,150,.4);
}

.blib-title { margin: 14px 14px 8px; }
.blib-title small { font-size: 11px; letter-spacing: 1px; color: rgba(243,233,210,.8); }
.blib-list { display: flex; flex-direction: column; gap: 9px; margin: 0 14px 12px; }
.blib-card {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 12px 78px 12px 14px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(160deg, rgba(244,236,214,.96), rgba(232,219,186,.96));
  border: 1px solid rgba(162,121,58,.35);
  box-shadow: 0 3px 10px rgba(40,26,8,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.blib-card:active { transform: scale(.99); }
.blib-card.on {
  border-color: rgba(162,121,58,.9);
  box-shadow: 0 4px 14px rgba(162,121,58,.4), inset 0 0 0 1px rgba(162,121,58,.4);
}
.blib-card.self { border-left: 3px solid #b3812f; }
.blib-tag {
  align-self: flex-start; font-size: 10px; letter-spacing: 1.5px;
  padding: 1px 7px; border-radius: 8px; color: #fff;
  background: rgba(120,140,110,.85);
}
.blib-tag.self { background: linear-gradient(135deg, #c79a45, #a06f28); }
.blib-name { font-size: 15.5px; letter-spacing: 2px; color: #4a3418; }
.blib-sub {
  font-size: 11.5px; color: rgba(74,52,24,.62); letter-spacing: .5px; line-height: 1.5;
}
.blib-rename {
  position: absolute; top: 10px; right: 12px; padding: 4px 12px;
  border-radius: 13px; font-size: 12px; letter-spacing: 2px;
  color: #7a5520; background: rgba(178,129,47,.14);
  border: 1px solid rgba(178,129,47,.4);
}
.blib-edit { display: flex; gap: 6px; align-items: center; margin: 2px 0; }
.blib-edit input {
  flex: 1; min-width: 0; padding: 6px 10px; border-radius: 8px; font-size: 14px;
  border: 1px solid rgba(162,121,58,.5); background: rgba(255,252,242,.9);
  color: #4a3418;
}
.blib-edit button {
  padding: 6px 10px; border-radius: 8px; font-size: 12px; letter-spacing: 1px; border: none;
}
.blib-ok { color: #fff; background: linear-gradient(135deg, #c79a45, #a06f28); }
.blib-cancel { color: #7a5520; background: rgba(120,90,40,.12); }
#btn-bazi-add { margin: 0 14px 20px; }

/* 再测一位亲友弹层 */
#bazi-add[hidden] { display: none; }
.badd-mask {
  position: fixed; inset: 0; z-index: 96;
  background: rgba(20,13,5,.62); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
}
.badd-card {
  width: 100%; max-width: 430px; max-height: 92vh; overflow-y: auto;
  border-radius: 18px 18px 0 0; padding: 16px 18px 22px;
  background: linear-gradient(175deg, #f7eeda, #ecdcaf);
  animation: baddUp .22s ease;
}
@keyframes baddUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.badd-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; letter-spacing: 3px; color: #5a4322; margin-bottom: 6px;
}
.badd-head b { flex: 1; }
.badd-back {
  font-size: 24px; line-height: 1; color: #8a6630; background: none; border: none;
  padding: 0 4px;
}
.badd-head-r {
  font-size: 10px; letter-spacing: 1px; color: #fff;
  background: linear-gradient(135deg, #c79a45, #a06f28);
  border-radius: 8px; padding: 2px 7px;
}
.badd-tip { font-size: 12px; line-height: 1.7; color: rgba(74,52,24,.9); margin-bottom: 10px; }
.badd-label-line {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  font-size: 13px; letter-spacing: 2px; color: #5a4322;
}
.badd-label-line span { flex: none; }
.badd-label-line input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px;
  border: 1px solid rgba(162,121,58,.4); background: rgba(255,252,242,.85);
  color: #4a3418; font-size: 14px;
}
.badd-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.badd-chips button {
  padding: 5px 13px; border-radius: 14px; font-size: 12.5px; letter-spacing: 1px;
  color: #7a5520; background: rgba(178,129,47,.12);
  border: 1px solid rgba(178,129,47,.35);
}
.badd-chips button:active { background: rgba(178,129,47,.25); }
.badd-card .seg { margin-bottom: 8px; }
.badd-card .leap-line { color: #7a5520; }
#btn-badd-save { margin-top: 4px; }

/* ---- 「正在推演」等待法阵（八字断语 / 卜卦首断 / 追问，首字到来前的反馈） ---- */
.chan-wait {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 8px 22px; user-select: none;
}
.cw-array { position: relative; width: 78px; height: 78px; flex: none; }
/* 外圈八卦放射线（旋转） */
.cw-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(178,129,47,.7) 0deg 5deg, rgba(178,129,47,0) 5deg 22.5deg,
    rgba(178,129,47,.45) 22.5deg 27.5deg, rgba(178,129,47,0) 27.5deg 45deg);
  -webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 73%, #000 96%, transparent 97%);
  mask: radial-gradient(farthest-side, transparent 72%, #000 73%, #000 96%, transparent 97%);
  animation: cwSpin 9s linear infinite;
  opacity: .85;
}
.cw-array::after {  /* 内圈虚线金环（反向慢转） */
  content: ''; position: absolute; inset: 9px; border-radius: 50%;
  border: 1.5px dashed rgba(178,129,47,.65);
  animation: cwSpinR 14s linear infinite;
}
.cw-taiji {
  position: absolute; left: 50%; top: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; overflow: hidden;
  background: linear-gradient(90deg, #6a4e24 0 50%, #d9b46d 50%);
  box-shadow: 0 0 16px rgba(198,154,69,.65), inset 0 0 0 1px rgba(120,86,36,.5);
  animation: taiji 1.4s linear infinite;
}
.cw-taiji::before, .cw-taiji::after {
  content: ''; position: absolute; left: 50%; width: 17px; height: 17px;
  margin-left: -8.5px; border-radius: 50%;
}
.cw-taiji::before { top: 0; background: #d9b46d; }
.cw-taiji::after { bottom: 0; background: #6a4e24; }
@keyframes cwSpin { to { transform: rotate(360deg); } }
@keyframes cwSpinR { to { transform: rotate(-360deg); } }
.cw-text {
  font-size: 15px; letter-spacing: 2px; color: #6a4e24;
  display: flex; align-items: center; gap: 2px;
}
.cw-sub { font-size: 12px; letter-spacing: 1px; color: rgba(74,52,24,.9); line-height: 1.6; }
.cw-dots { display: inline-flex; margin-left: 2px; }
.cw-dots i { width: 3px; animation: cwDot 1.2s infinite; }
.cw-dots i::before { content: '·'; font-size: 18px; line-height: 1; }
.cw-dots i:nth-child(2) { animation-delay: .2s; }
.cw-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes cwDot { 0%, 60%, 100% { opacity: .15; } 30% { opacity: 1; } }
/* 深底版（追问气泡等深色面） */
.chan-wait.on-dark { padding: 14px 4px 10px; }
.chan-wait.on-dark .cw-ring {
  background: repeating-conic-gradient(
    rgba(223,190,120,.85) 0deg 5deg, rgba(223,190,120,0) 5deg 22.5deg,
    rgba(223,190,120,.5) 22.5deg 27.5deg, rgba(223,190,120,0) 27.5deg 45deg);
}
.chan-wait.on-dark .cw-array::after { border-color: rgba(223,190,120,.7); }
.chan-wait.on-dark .cw-taiji {
  background: linear-gradient(90deg, #ecd9a8 0 50%, #7a5a2c 50%);
  box-shadow: 0 0 16px rgba(223,190,120,.6), inset 0 0 0 1px rgba(236,217,168,.4);
}
.chan-wait.on-dark .cw-taiji::before { background: #ecd9a8; }
.chan-wait.on-dark .cw-taiji::after { background: #7a5a2c; }
.chan-wait.on-dark .cw-text { color: #ecd9a8; }
.chan-wait.on-dark .cw-sub { color: rgba(243,233,210,.72); }
.chan-wait.on-dark .cw-dots i::before { content: '·'; color: #ecd9a8; }

/* ---- 阁主授权期限（月/季/年） ---- */
.vps-term { margin: 4px 0 14px; }
.vps-term-lab {
  display: block; font-size: 12px; letter-spacing: 2px;
  color: rgba(74,52,24,.92); margin-bottom: 8px;
}
.vps-term-opts { display: flex; gap: 8px; }
.vpt {
  flex: 1; padding: 10px 0; font-size: 14px; letter-spacing: 2px;
  border-radius: 9px; border: 1.5px solid rgba(143,116,67,.5);
  background: rgba(255,255,255,.4); color: #6f5230;
}
.vpt.on {
  background: linear-gradient(135deg,#caa05d,#a87f3e);
  border-color: #9a7130; color: #fff7e4;
  box-shadow: 0 3px 10px rgba(154,113,48,.35);
}