/* 六爻：天机式卡片布局（问事 → 摇卦 → 卦象） */
.ly-body{background:#f4f5f6}
.ly-body .topbar{background:#1f4d65;border-bottom:0;color:#fff;backdrop-filter:none;box-shadow:0 1px 4px rgba(15,45,60,.18)}
.ly-body .topbar .brand{color:#fff}
.ly-body .topbar .brand .dot{background:#9fd0c6;box-shadow:0 0 0 3px rgba(159,208,198,.18)}
.ly-body .nav a{color:rgba(255,255,255,.72);border-radius:6px}
.ly-body .nav a.on{background:rgba(255,255,255,.16);color:#fff}
.ly-body .nav a:hover{color:#fff}
.ly-body .btn{background:#1f4d65;border-color:#1f4d65}
.ly-body .btn.ghost{background:#fff;color:#1f4d65;border-color:#cfd8dd}
.ly-wrap{max-width:820px;padding:0 12px 108px}
.ly-body footer{background:#eef0f1;color:#95999c;border-top:1px solid #e6e8ea}

/* ── 三段式 ───────────────────────── */
.stage{animation:stageIn .3s ease both}
@keyframes stageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ① 问事 */
.ask-head{text-align:center;padding:34px 0 4px}
.ask-sub{font-size:11.5px;letter-spacing:.28em;color:#1f4d65;opacity:.7}
.ask-title{font-size:26px;margin:10px 0 8px;letter-spacing:.12em;font-weight:700;font-family:inherit}
.ask-tip{margin:0;color:#8d8d8d;font-size:12.5px;line-height:1.8}
.ask-card{max-width:620px;margin:20px auto 0;padding:16px;border-radius:10px;border:0;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
.ask-card textarea{
  width:100%;border:1px solid #e4e6e8;border-radius:8px;padding:12px 14px;
  font:inherit;line-height:1.8;resize:vertical;outline:none;background:#fafbfb;color:var(--ink);
}
.ask-card textarea:focus{border-color:#1f4d65;background:#fff;box-shadow:0 0 0 3px rgba(31,77,101,.08)}
.ask-row{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.seg{display:inline-flex;background:#f1f3f4;border-radius:7px;padding:3px}
.seg button{border:0;background:none;padding:6px 13px;border-radius:5px;font-size:13px;color:#7c8286}
.seg button.on{background:#fff;color:#1f4d65;font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.btn.big{height:42px;padding:0 26px;font-size:14.5px;letter-spacing:.1em;border-radius:8px}
.ask-extra{margin-top:10px}
.ask-extra input{width:100%;height:36px;border:1px solid #e4e6e8;border-radius:8px;padding:0 12px;font:inherit;background:#fafbfb}
.ask-note{text-align:center;color:#9aa0a4;font-size:12px;margin-top:16px;line-height:1.9}

/* ② 摇卦 */
.toss-head{display:flex;align-items:flex-end;justify-content:space-between;padding:20px 2px 12px;gap:16px}
.toss-head .q{font-size:14.5px;color:#3a3f42;max-width:70%;line-height:1.6}
.toss-head .p{font-size:12px;color:#8d8d8d;letter-spacing:.08em;white-space:nowrap}
.toss-head .p b{color:#1f4d65;font-size:15px}

.toss-main{display:grid;grid-template-columns:1.3fr .8fr;gap:12px}
@media(max-width:760px){.toss-main{grid-template-columns:1fr}}

.coin-zone{padding:10px 16px 18px;display:flex;flex-direction:column;align-items:center;border:0;
  border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);
  background:radial-gradient(460px 220px at 50% 14%, #faf8f1, #fff 72%);
}
.coins{
  display:flex;gap:34px;height:228px;align-items:center;justify-content:center;
  perspective:1000px;perspective-origin:50% 38%;position:relative;
}
.coin{width:114px;height:114px;perspective:820px;transform-style:preserve-3d;
  filter:drop-shadow(0 6px 9px rgba(46,34,12,.22))}
.coin-inner{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform;
  animation:floaty 4.2s ease-in-out infinite;
}
.coin:nth-child(2) .coin-inner{animation-delay:-1.3s}
.coin:nth-child(3) .coin-inner{animation-delay:-2.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.coin.flying .coin-inner{animation:none;filter:drop-shadow(0 20px 18px rgba(110,84,40,.22))}

/* 币面用实物照片（抠图 PNG），不再用 CSS 画 —— CSS 画不出金属磨损 */
.face{
  position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;
  background-color:transparent;
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.face.front{transform:translateZ(2.6px);
  background-image:url("../assets/coin-front.webp")}
.face.back{transform:translateZ(-2.6px) rotateX(180deg);
  background-image:url("../assets/coin-back.webp")}


.toss-result{margin:14px 0 12px;font-size:13.5px;color:#6d7276;min-height:22px;letter-spacing:.04em}
.toss-result b{color:#c0392b;font-weight:700}
.toss-sub{display:flex;gap:18px;margin-top:10px}
.link-btn{border:0;background:none;color:#9aa0a4;font-size:12px;padding:2px 0;border-bottom:1px dashed transparent}
.link-btn:hover{color:#1f4d65;border-bottom-color:#cfd8dd}
#btnToss{width:200px;border-radius:24px}
#btnToss:disabled{opacity:.55;cursor:default}

/* 爻槽 */
.slots{padding:14px 14px;border:0;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.slots-title{font-size:11.5px;letter-spacing:.18em;color:#9aa0a4;text-align:center;margin-bottom:10px}
.slot-list{display:flex;flex-direction:column-reverse;gap:7px}
.slot{display:flex;align-items:center;gap:8px;height:34px;opacity:.3;transition:.35s}
.slot.on{opacity:1}
.slot .idx{width:22px;text-align:center;color:#b7bcc0;font-size:11px}
.slot .bars{flex:1;display:grid;grid-template-columns:1fr;align-items:center;height:9px}
.slot .bars.yin{grid-template-columns:1fr 1fr;column-gap:20%}
.slot .bars i{display:block;width:100%;height:9px;border-radius:1px;background:#1d1d1d;
  transform-origin:center;animation:draw .4s cubic-bezier(.2,.8,.3,1) both}
.slot .bars i.mv{background:#c0392b}
.slot .tag{width:44px;font-size:11px;color:#9aa0a4;text-align:right}
.slot .tag.mv{color:#c0392b}
@keyframes draw{from{transform:scaleX(.08);opacity:.2}to{transform:scaleX(1);opacity:1}}

/* ③ 卦象：信息卡 */
.tq-card{background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.tq-info{padding:14px 16px 10px;position:relative;overflow:hidden}
.tq-user{display:flex;align-items:center;gap:11px;padding-bottom:11px;border-bottom:1px solid #f2f3f4;margin-bottom:8px}
.tq-ava{width:42px;height:42px;border-radius:50%;background:#eef3f5;color:#1f4d65;
  display:grid;place-items:center;font-size:20px;line-height:1;flex:0 0 42px}
.tq-uname{font-size:15px;color:#26292b}
.tq-usub{font-size:12.5px;color:#9aa0a4;margin-top:1px}
.tq-ribbon{
  position:absolute;right:14px;top:0;width:32px;padding:26px 0 12px;
  background:#1f4d65;color:#fff;font-size:13px;letter-spacing:.18em;text-align:center;
  writing-mode:vertical-rl;line-height:1.1;border-radius:0 0 5px 5px;
}
.tq-ribbon::before{
  content:"";position:absolute;left:0;top:0;width:0;height:0;
  border-top:9px solid #f4f5f6;border-right:9px solid transparent;
}
.tq-fields{font-size:14.5px;line-height:1.92;color:#2b2e30}
.tq-fields .f{display:flex}
.tq-fields .k{white-space:nowrap;color:#3a3d3f}
.tq-fields .v{flex:1;min-width:0;word-break:break-word}
.tq-fields .mo{font-style:normal;color:#c0392b}
.tq-fields .dim{color:#8d8d8d;font-size:13px}

/* ③ 卦象：六爻表 */
.tq-hex{margin-top:10px;padding:10px 14px 12px}
.tq-hhead{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-items:baseline;
  padding:2px 0 7px;border-bottom:1px solid #eef0f1;margin-bottom:2px}
.tq-hl{display:flex;align-items:baseline;gap:8px;min-width:0}
.tq-god-lbl{font-size:13.5px;color:#2f3234;font-weight:600;flex:0 0 auto}
.tq-hname{font-size:18px;font-weight:700;letter-spacing:.01em;color:#15181a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tq-hname i{font-style:normal;font-size:12.5px;font-weight:400;color:#8d8d8d;margin-left:1px}
.tq-row{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-items:start}
.tq-cell{display:grid;grid-template-columns:34px auto 46px 12px 16px;justify-content:start;
  align-items:center;column-gap:7px;min-height:37px;font-size:15px;color:#1c1e20;min-width:0;overflow:hidden}
.tq-cell.no-god{grid-template-columns:auto 46px 12px 16px}
.tq-god{font-size:13px;letter-spacing:.01em;color:#3a3d3f}
.tq-rel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em;min-width:0}
.tq-rel .wx{opacity:.92}
.tq-bar{display:grid;grid-template-columns:1fr;width:46px;height:9px;column-gap:20%}
.tq-bar.yin{grid-template-columns:1fr 1fr}
.tq-bar i{display:block;width:100%;height:9px;background:#191b1d;border-radius:.5px}
.tq-bar.mv i{background:#c0392b}
.tq-mk{font-size:12px;color:#c0392b;text-align:center;font-weight:700;line-height:1}
.tq-sy{font-size:12.5px;color:#4a4e51;text-align:center}
.tq-fu{grid-column:1;font-size:12.5px;color:#d9482f;padding:0 0 3px 38px;letter-spacing:.01em;line-height:1.6}
.tq-fu::before{content:"↑ ";font-size:12px}

  color:#c5c9cc;font-style:normal;font-size:15px;line-height:1}

/* 卦变条 */
.gua-strip{margin-top:10px;background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);
  padding:11px 10px 13px}
.gs-h{display:flex;justify-content:space-between;align-items:baseline;
  font-size:11px;letter-spacing:.2em;color:#9aa0a4;margin:0 4px 8px}
.gs-h span{font-size:10.5px;letter-spacing:.02em;opacity:.85}
.gs-body{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:2px}
.mg-cell{text-align:center;padding:7px 2px 6px;border-radius:7px;min-width:0}
.mg-cell.is-ben{background:#f2f6f8}
.mg-t{font-size:11.5px;letter-spacing:.02em;color:#5d6569;font-weight:600}
.mg-cell.is-ben .mg-t{color:#1f4d65}
.mg-n{font-size:15px;font-weight:700;color:#1c1e20;margin:2px 0 0;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-p{font-size:10.5px;color:#a3a8ac;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-b{margin-top:7px;display:flex;flex-direction:column;gap:4px;align-items:center}
.mg-l{display:grid;grid-template-columns:1fr;width:58px;height:5px;column-gap:22%}
.mg-l.yin{grid-template-columns:1fr 1fr}
.mg-l i{width:100%;background:#26282a;border-radius:.5px;display:block}
.mg-l.mv i{background:#c0392b}

/* 底部操作条 */
.tq-cta{position:sticky;bottom:0;z-index:8;display:flex;gap:10px;align-items:center;
  padding:12px 0 14px;margin-top:4px;
  background:linear-gradient(180deg,rgba(244,245,246,0),#f4f5f6 34%)}
.tq-go{flex:1;height:44px;border:0;border-radius:8px;background:#e8c07a;color:#4a3a18;
  font-size:16px;font-weight:700;letter-spacing:.12em;box-shadow:0 2px 6px rgba(196,150,72,.28)}
.tq-go:active{transform:translateY(1px)}
.tq-foot{margin-top:9px;text-align:center;font-size:11.5px;color:#a3a8ac;line-height:1.9}

/* 静态截图用：去掉入场动画 */
body.still .stage{animation:none !important}
body.still .slot .bars i{animation:none !important}
body.still .coin-inner{animation:none !important}

@media(max-width:680px){
  .tq-hex{padding:9px 10px 10px}
  .tq-row{column-gap:8px}
  .tq-cell{grid-template-columns:26px auto 28px 9px 12px;column-gap:3px;
    font-size:12.5px;min-height:33px}
  .tq-cell.no-god{grid-template-columns:auto 28px 9px 12px}
  .tq-bar{width:28px;height:7px}
  .tq-god{font-size:11.5px}
  .tq-mk{font-size:10px}
  .tq-sy{font-size:11px}
  .tq-fu{padding-left:29px;font-size:11px}
  .tq-hname{font-size:14.5px}
  .tq-hname i{font-size:10.5px}
  .tq-god-lbl{font-size:11.5px}
  .mg-l{width:38px;height:4px}
  .mg-n{font-size:12px}
  .mg-p{font-size:9px}
  .mg-t{font-size:10px}
  .gs-h span{display:none}
  .gs-body{gap:0}
  .tq-fields{font-size:13px;line-height:1.85}
  .tq-ava{width:36px;height:36px;flex-basis:36px;font-size:17px}
  .tq-ribbon{width:28px;font-size:11.5px;padding-top:22px}
  .tq-go{font-size:15px}
}
@media(max-width:520px){
  .ly-body .topbar .inner{gap:6px;padding:0 10px;height:50px}
  .ly-body .brand{font-size:12.5px;gap:6px}
  .ly-body .nav a{padding:5px 7px;font-size:11.5px}
  .tq-cell{grid-template-columns:24px auto 24px 8px 11px;font-size:12px;min-height:31px}
  .tq-cell.no-god{grid-template-columns:auto 24px 8px 11px}
  .tq-bar{width:24px;height:6px}
  .tq-hname{font-size:13.5px}
}

/* 六神配色 */
.g-qing{color:#1d6f5e}
.g-xuan{color:#2d3f52}
.g-hu{color:#5a5a5a}
.g-she{color:#8c4a5b}
.g-gou{color:#8a6535}
.g-zhu{color:#c0392b}


/* 静卦：右半区提示 */
.tq-hex.single{position:relative}
.tq-single-note{
  position:absolute;right:16px;top:52px;width:42%;text-align:center;
  font-size:13px;color:#9aa0a4;line-height:1.9;letter-spacing:.02em;
  padding:18px 8px;border-left:1px dashed #ebeef0;
}
.tq-single-note span{display:block;font-size:11.5px;color:#b4b9bd;margin-top:2px}

/* ── 摇卦进度与本次正反（对齐 6yao 的做法）── */
.toss-prog{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:-2px 2px 10px}
.toss-prog i{height:3px;border-radius:2px;background:#e8eaec;transition:background .25s}
.toss-prog i.on{background:#b8860b}
.toss-prog i.cur{background:#e3ce9a}

.toss-faces{display:flex;align-items:center;gap:7px;height:24px;margin:2px 0 0}
.toss-faces .fl{font-size:11.5px;color:#b0b5b9;letter-spacing:.12em;margin-right:1px}
.toss-faces b{font-size:12.5px;font-weight:600;line-height:20px;padding:0 7px;border-radius:4px;
  letter-spacing:.06em}
.toss-faces b.zi{color:#a06a12;background:#fbf2df}
.toss-faces b.bei{color:#4a4e51;background:#f0f2f3}
@keyframes faceIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .coins{gap:22px;height:200px}
  .coin{width:92px;height:92px}
}


/* 币坯厚度（9 片沿 Z 叠）
   注意：必须和 .face 用同一个 mask。早先用「中心透明圆」留孔，
   那个圆比方孔小，会把方孔的四个角糊成圆的。 */
.coin-inner .slice{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #5f5030 0%, #4a3d26 58%, #302718 100%);
  -webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' fill-rule='evenodd' d='M50 0a50 50 0 1 0 .01 0zM62 38H38v24h24z'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' fill-rule='evenodd' d='M50 0a50 50 0 1 0 .01 0zM62 38H38v24h24z'/%3E%3C/svg%3E");
  mask-size:100% 100%;
  mask-repeat:no-repeat;
}

/* ── 卦名可点（卦变条）───────────────── */
.mg-cell{cursor:pointer;transition:background .16s,transform .16s,box-shadow .16s}
.mg-cell:hover{background:#f7f8f9;transform:translateY(-1px)}
.mg-cell:focus-visible{outline:2px solid #7aa7c7;outline-offset:1px}
.mg-cell.is-ben:hover{background:#f8efe0}
.mg-cell:hover .mg-n{color:#c02d26}
.mg-cell .mg-n{transition:color .16s}

/* ── 卦名释义弹窗 ───────────────────── */
.gua-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  padding:20px}
.gua-modal[hidden]{display:none}
.gm-mask{position:absolute;inset:0;background:rgba(18,22,24,.42)}
.gm-card{position:relative;width:100%;max-width:352px;max-height:calc(100vh - 36px);overflow:auto;
  background:#fff;border-radius:16px;
  padding:20px 20px 16px;box-shadow:0 18px 48px rgba(14,20,24,.24);
  animation:gmPop .2s cubic-bezier(.2,.8,.3,1)}
@keyframes gmPop{from{transform:translateY(9px) scale(.975)}to{transform:none}}
.gm-x{position:absolute;right:10px;top:8px;width:30px;height:30px;border:0;background:transparent;
  font-size:20px;line-height:1;color:#b6bbbf;cursor:pointer;border-radius:50%}
.gm-x:hover{background:#f2f4f5;color:#6b7176}
.gm-head{display:flex;align-items:center;gap:12px;padding-bottom:13px;border-bottom:1px solid #f0f2f3}
.gm-sym{display:flex;flex-direction:column;gap:3px;width:42px;flex:0 0 42px}
.gm-yao{display:grid;grid-template-columns:1fr;column-gap:26%;height:3.5px}
.gm-yao i{background:#2b2722;border-radius:1px;display:block}
.gm-yao.yin{grid-template-columns:1fr 1fr}
.gm-tit{min-width:0}
.gm-name{font-size:19px;font-weight:700;color:#1c1e20;letter-spacing:.02em}
.gm-name small{font-size:11px;font-weight:400;color:#a3a8ac;margin-left:7px;letter-spacing:.06em}
.gm-tri{font-size:11.5px;color:#9aa0a4;margin-top:3px;letter-spacing:.02em}
.gm-body{padding:12px 0 4px}
.gm-row{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:6px 0;align-items:start}
.gm-row b{font-size:10.5px;font-weight:600;letter-spacing:.14em;color:#b0b5b9;padding-top:3px}
.gm-row span{font-size:13.5px;line-height:1.72;color:#33383b}
.gm-row .gm-ci{font-family:"Songti SC","Noto Serif SC",serif;color:#2c3134;
  background:#faf9f6;border-radius:6px;padding:5px 9px;font-size:13px;line-height:1.75}
.gm-row .gm-duan{color:#8a3a2e}
.gm-foot{padding-top:9px;border-top:1px solid #f2f4f5;font-size:10.5px;line-height:1.7;color:#b0b5b9}
@media(max-width:420px){
  .gua-modal{padding:14px}
  .gm-card{padding:17px 16px 13px;border-radius:14px}
    .gm-name{font-size:17px}
}