/* 共享专业细版样式：沿用八字模块排盘界面 */
@import url("../../bazi/assets/style.css");

/* ───── 六爻断卦增补（仅本模块） ───── */
/* 旺衰徽标 */
.ws{display:inline-block;border-radius:999px;padding:1px 7px;font-size:11px;line-height:1.5;border:1px solid transparent}
.ws-旺{color:#5fd07a;border-color:rgba(95,208,122,.45);background:rgba(95,208,122,.12)}
.ws-相{color:#6fa8e0;border-color:rgba(111,168,224,.45);background:rgba(111,168,224,.12)}
.ws-休{color:var(--muted);border-color:var(--line);background:rgba(255,255,255,.04)}
.ws-囚{color:#d9a23b;border-color:rgba(217,162,59,.45);background:rgba(217,162,59,.12)}
.ws-死{color:#d76b5d;border-color:rgba(215,107,93,.45);background:rgba(215,107,93,.12)}
/* 爻象小标记（空/破/墓/暗动/进退神/回头生克…） */
.ly-mk{display:inline-flex;flex-wrap:wrap;gap:3px;margin-top:3px;justify-content:center}
.ly-mk i{font-style:normal;border-radius:5px;padding:0 5px;font-size:10px;line-height:1.6;border:1px solid var(--line);color:var(--muted);background:rgba(0,0,0,.18)}
.ly-mk i.good{color:#5fd07a;border-color:rgba(95,208,122,.4)}
.ly-mk i.bad{color:#d76b5d;border-color:rgba(215,107,93,.4)}
.ly-mk i.warn{color:#d9a23b;border-color:rgba(217,162,59,.4)}
/* 用神高亮行 */
.ly-row.use{background:linear-gradient(90deg,rgba(212,168,76,.16),rgba(212,168,76,.04))}
.ly-row .cellbody{display:flex;flex-direction:column;align-items:center;gap:2px}
.ly-row .qin{font-weight:700;color:var(--paper)}
.ly-row .najia{color:var(--muted);font-size:12px}
.ly-row .role{display:inline-block;border-radius:999px;padding:0 6px;font-size:10px;margin-top:2px;border:1px solid var(--line2);color:var(--gold2);background:rgba(212,168,76,.12)}
/* 断卦提纲卡片 */
.jd-list{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.jd-list li{position:relative;border:1px solid var(--line);border-radius:13px;background:rgba(0,0,0,.16);padding:10px 12px 10px 30px;color:var(--paper);font-size:13px;line-height:1.7}
.jd-list li::before{content:"";position:absolute;left:12px;top:15px;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#e8cd8a,#b88b35)}
.jd-list li.tip{padding-left:12px;color:var(--muted);font-size:12px;background:rgba(212,168,76,.06);border-color:rgba(212,168,76,.22)}
.jd-list li.tip::before{display:none}
.jd-yong{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.jd-yong div{border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.18);padding:10px;text-align:center}
.jd-yong span{display:block;color:var(--muted);font-size:11px;margin-bottom:5px;letter-spacing:1px}
.jd-yong b{display:block;color:var(--paper);font-size:14px;line-height:1.4}
.jd-yong small{display:block;margin-top:3px;color:var(--gold2);font-size:11px}
@media(max-width:560px){.jd-yong{grid-template-columns:1fr}.ly-row .najia{font-size:11px}}

/* ───── 铜钱摇卦 · 投掷动画（仅本模块） ───── */
.sk-card .sk-count{float:right;font-size:12px;color:var(--muted);letter-spacing:0;font-weight:400}
.sk-stage{display:flex;gap:22px;justify-content:center;align-items:center;min-height:104px;perspective:760px;margin:4px 0 2px;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.sk-stage.busy{cursor:default}
.coin-wrap{width:60px;height:60px;transform-style:preserve-3d;will-change:transform}
.coin-wrap.toss{animation:coinToss .8s cubic-bezier(.33,.02,.3,1)}
@keyframes coinToss{0%{transform:translateY(0) rotateZ(0)}30%{transform:translateY(-64px) rotateZ(200deg)}62%{transform:translateY(-20px) rotateZ(430deg)}100%{transform:translateY(0) rotateZ(720deg)}}
.coin{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .3s ease}
.coin.spin{animation:coinSpin .22s linear infinite;transition:none}
@keyframes coinSpin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.coin.back{transform:rotateY(180deg)}
.coin .face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:radial-gradient(circle at 34% 28%,#eccb80,#c89a46 56%,#9a6c2c);border:1px solid #7c551f;box-shadow:inset 0 0 0 2px rgba(255,247,222,.25),inset 0 0 9px rgba(60,38,8,.5),0 5px 12px rgba(0,0,0,.45)}
.coin .face.b{transform:rotateY(180deg);background:radial-gradient(circle at 34% 28%,#dcbc6e,#b78b3d 56%,#8a6126)}
.coin .hole{position:absolute;left:50%;top:50%;width:15px;height:15px;transform:translate(-50%,-50%);background:#15120e;border-radius:2px;box-shadow:inset 0 0 4px rgba(0,0,0,.85),0 0 0 1px rgba(40,26,8,.6)}
.coin .ch{position:absolute;font-family:"Songti SC","Noto Serif CJK SC",serif;font-weight:800;font-size:13px;color:#3a2810;text-shadow:0 1px 0 rgba(255,247,222,.3)}
.coin .ch.t{top:5px;left:50%;transform:translateX(-50%)}
.coin .ch.b{bottom:5px;left:50%;transform:translateX(-50%)}
.coin .ch.l{left:6px;top:50%;transform:translateY(-50%)}
.coin .ch.r{right:6px;top:50%;transform:translateY(-50%)}
.coin .mark{position:absolute;left:50%;width:5px;height:11px;border-radius:2px;background:rgba(58,40,16,.5);transform:translateX(-50%)}
.coin .mark.m1{top:9px}
.coin .mark.m2{bottom:9px}
.sk-result{text-align:center;font-family:"Songti SC",serif;font-size:16px;color:var(--gold2);min-height:22px;letter-spacing:1px;margin:2px 0 6px}
.sk-result b{color:var(--paper)}
.sk-tip{text-align:center;color:var(--muted);font-size:12px;line-height:1.6;margin-bottom:11px}
.sk-lines{display:grid;gap:6px;margin-bottom:12px}
.sk-line{display:grid;grid-template-columns:48px 84px 1fr;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.16);padding:7px 11px;opacity:.5;transition:opacity .25s,border-color .25s,background .25s}
.sk-line.done{opacity:1;border-color:rgba(212,168,76,.32);background:rgba(212,168,76,.07)}
.sk-line .sk-pos{color:var(--gold2);font-size:13px}
.sk-line .sk-name{color:var(--paper);font-size:13px;text-align:right}
.yao-bar.empty i{background:rgba(255,255,255,.16)}
.sk-btns{display:flex;gap:8px;flex-wrap:wrap}
.sk-btn{flex:1;min-width:96px;min-height:44px;border-radius:13px;border:1px solid var(--line);background:rgba(255,244,214,.05);color:var(--gold2);font-size:14px;letter-spacing:1px;transition:opacity .2s}
.sk-btn.primary{border:0;background:linear-gradient(135deg,#e8cd8a,#b88b35);color:#251708;font-weight:800}
.sk-btn.ghost{flex:0 0 auto;min-width:72px;color:var(--muted)}
.sk-btn:disabled{opacity:.45;cursor:default}
@media(max-width:560px){.sk-stage{gap:14px}.coin-wrap{width:54px;height:54px}.sk-line{grid-template-columns:42px 76px 1fr}}
@media(prefers-reduced-motion:reduce){.coin-wrap.toss{animation-duration:.3s}.coin.spin{animation-duration:.12s}}