/* 六爻起卦 · 摇卦页：进度/铜钱动画/掷卦结果/六爻搭建 */
.progress{text-align:center;font-size:16px;letter-spacing:3px;color:var(--ink-light);margin-bottom:4px}
.progress b{color:var(--cinnabar);font-size:19px;letter-spacing:2px}
.coin-stage{display:flex;justify-content:center;padding:26px 0 10px}
.coins{display:flex;gap:clamp(16px,5vw,30px)}
.coins.shaking{animation:shake .12s linear infinite}
@keyframes shake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(4px,-3px) rotate(2deg)}50%{transform:translate(-4px,3px) rotate(-2deg)}75%{transform:translate(3px,1px) rotate(1.2deg)}100%{transform:translate(0,0) rotate(0)}}
.coin-wrap{width:var(--coin);height:var(--coin);perspective:640px;--coin:clamp(76px,21vw,96px)}
.coin{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.75,.3,1)}
.coin.spinning{animation:coinspin .34s linear infinite;transition:none}
@keyframes coinspin{from{transform:rotateX(0)}to{transform:rotateX(360deg)}}
.face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(60,45,20,.3),inset 0 0 0 3px rgba(122,93,51,.5),inset 0 2px 6px rgba(255,240,200,.5)}
.front{background:radial-gradient(circle at 35% 30%,#ecd7a4,#cbaa6d 62%,#a58850)}
.back{transform:rotateX(180deg);background:radial-gradient(circle at 62% 32%,#e2c890,#bd9d63 60%,#967746)}
.hole{position:absolute;left:50%;top:50%;width:24%;height:24%;transform:translate(-50%,-50%);background:var(--paper);box-shadow:inset 0 1px 3px rgba(90,66,24,.55),0 0 0 2px rgba(122,93,51,.45)}
.cq{position:absolute;font-weight:700;font-size:calc(var(--coin)*.17);color:#5a4218;text-shadow:0 1px 0 rgba(255,246,214,.5)}
.cq.t{top:7%}.cq.b{bottom:7%}.cq.l{left:11%}.cq.r{right:11%}
.mw{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66%;height:66%;opacity:.85}
.toss-result{min-height:52px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:17px;font-weight:600}
.chips{display:inline-flex;gap:5px;align-items:center}
.chip{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;font-size:15px}
.chip.zi{background:#f2e9d2;color:#4a4234;border:1.5px solid #8b7c5e}
.chip.bei{background:linear-gradient(150deg,#dcc28c,#b3945c);color:#43340f;border:1.5px solid #8a6f3f;text-shadow:0 1px 0 rgba(255,246,214,.45)}
.toss-result .arrow{color:var(--ink-light);margin:0 4px}
.toss-result .red{color:var(--cinnabar)}
.toss-result .sym{font-size:15px;color:var(--ink-light);letter-spacing:1px}
#btnToss{margin-top:14px}
#btnSeeResult{margin-top:12px}
.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 6px 18px rgba(166,58,42,.35)}50%{box-shadow:0 6px 28px rgba(166,58,42,.62)}}
.build-wrap{margin-top:22px;border-top:1px dashed var(--line);padding-top:14px}
.build-title{text-align:center;font-size:13.5px;color:var(--ink-light);letter-spacing:2px;margin-bottom:12px}
.hex{display:flex;flex-direction:column;align-items:center;gap:8px}
.slot{position:relative;height:16px;width:min(210px,64vw)}
.slot.empty::before{content:'';position:absolute;inset:0;border:1px dashed rgba(110,100,85,.28);border-radius:3px}
.slot .bar{position:absolute;top:0;bottom:0;background:var(--ink);border-radius:2.5px}
.slot.yang .bar{left:5%;right:5%}
.slot.yin .bar.b1{left:5%;width:37%}
.slot.yin .bar.b2{right:5%;width:37%}
.slot.dong .bar{background:var(--cinnabar)}
.slot .mark{position:absolute;right:-30px;top:50%;transform:translateY(-52%);color:var(--cinnabar);font-size:16px;font-weight:700;animation:breath 1.6s ease-in-out infinite}
@keyframes breath{0%,100%{opacity:.65}50%{opacity:1}}
.slot.appear{animation:yaogrow .5s ease-out}
@keyframes yaogrow{from{transform:scaleX(.12);opacity:0}}
/* ---------- 中断恢复横条 ---------- */
.resume-bar{margin-top:12px;padding:11px 14px;border:1px solid rgba(166,58,42,.4);border-left:4px solid var(--cinnabar);border-radius:10px;background:rgba(166,58,42,.06);font-size:14.5px;color:#5a4034;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;letter-spacing:.5px}
.resume-bar button{flex:1;min-width:88px;border:1px solid rgba(166,58,42,.55);background:rgba(255,253,246,.8);color:var(--cinnabar);font-size:14px;padding:8px 6px;border-radius:8px;letter-spacing:1px}
.resume-bar button+button{border-color:var(--line);color:var(--ink-light)}