/* 新机制的静态标记（mechanic-fx.mjs）。全部 mx- 前缀；只依赖 #board、.orb-cell、.orb、.orb-state、.hero-card[data-hero]。 */
#mechanic-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:74;contain:strict}
.mx-layer{position:absolute;pointer-events:none;z-index:6}
.mx-cell,.mx-col{position:absolute;box-sizing:border-box;border-radius:16%;pointer-events:none}
.mx-sym{position:absolute;right:2px;top:1px;font:700 12px/1 Arial,'PingFang SC','Microsoft YaHei',sans-serif;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000,0 0 3px #000;letter-spacing:0}
.mx-ghost{opacity:.25}
/* 黑洞 ◎：同心圆螺纹（不只靠颜色）；成形中只是一圈细环 */
.mx-hole,.mx-hole-lethal{background:repeating-radial-gradient(circle,#0000 0 3px,#8f7bd655 3px 4px),radial-gradient(circle,#000c 0 30%,#1a0f2a99 55%,#0000 74%);box-shadow:inset 0 0 0 2px #7b5fd0aa}
.mx-hole-lethal{background:repeating-radial-gradient(circle,#0000 0 3px,#ff6ad555 3px 4px),radial-gradient(circle,#000d 0 32%,#3a063099 56%,#0000 76%);box-shadow:inset 0 0 0 2px #ff6ad5cc,0 0 10px #ff6ad566}
.mx-hole-forming{border:1px dashed #c9b6ff;border-radius:50%;animation:mx-spin 6s linear infinite;opacity:.25}
/* 星砂 ⌛：细密点状纹理 */
.mx-sand,.mx-sand-next{background:radial-gradient(#ffe6a1 .9px,#0000 1.4px) 0 0/6px 6px,#18205a99;box-shadow:inset 0 0 0 1px #ffe6a155}
/* 起结有序：起=实线圈，结=双线圈 */
.mx-start,.mx-start-next{border:2px solid #ffd76a;box-shadow:0 0 8px #ffd76a88,inset 0 0 8px #ffd76a55}
.mx-end,.mx-end-next{border:4px double #ffd76a;box-shadow:0 0 8px #ffd76a66}
.mx-start .mx-sym,.mx-end .mx-sym,.mx-start-next .mx-sym,.mx-end-next .mx-sym{left:2px;right:auto;top:auto;bottom:2px;color:#ffe9a0}
/* 暴风 ≋：整列斜线阴影 */
.mx-col.mx-storm,.mx-col.mx-storm-next{background:repeating-linear-gradient(135deg,#e6eef344 0 3px,#0000 3px 8px);box-shadow:inset 0 0 0 1px #e6eef366;border-radius:10px}
.mx-col .mx-sym{top:2px;left:50%;right:auto;transform:translateX(-50%)}
.orb-cell.mx-shake .orb{animation:mx-shake .22s steps(2) infinite;filter:saturate(.6)}
/* 吞星 ◐：亮度压到约 15%，只剩一圈虚线外圈 */
.mx-devoured{background:#05060bd9;border:2px dashed var(--mx-c,#fff);border-radius:50%}
.mx-devoured .mx-sym{color:var(--mx-c,#fff)}
.mx-turns{position:absolute;left:3px;bottom:2px;font:700 10px/1 Arial;color:#fff;font-style:normal;text-shadow:0 0 2px #000}
.mx-devour-next{border-bottom:2px dashed var(--mx-c,#fff);border-radius:0;opacity:1;animation:mx-breathe 1s ease-in-out infinite}
.mx-t-fire{--mx-c:#ff6938}.mx-t-water{--mx-c:#44ceff}.mx-t-wood{--mx-c:#7cf177}.mx-t-light{--mx-c:#ffe883}.mx-t-dark{--mx-c:#c483ff}.mx-t-heart{--mx-c:#ff91c6}
/* 镜律：拖动中会被镜子吃掉的格先叠一层裂纹 */
.mx-crack{background:linear-gradient(45deg,#0000 47%,#ffffffaa 48% 50%,#0000 51%),linear-gradient(-30deg,#0000 47%,#ffffff88 48% 49%,#0000 50%),linear-gradient(80deg,#0000 47%,#ffffff77 48% 49%,#0000 50%)}
.mx-axis{position:absolute;pointer-events:none}
.mx-axis-v{left:50%;top:-4px;bottom:-4px;border-left:2px dashed #e8eef7cc;transform:translateX(-1px)}
.mx-axis-h{top:50%;left:-4px;right:-4px;border-top:2px dashed #e8eef7cc;transform:translateY(-1px)}
.mx-axis-p{left:50%;top:50%;width:18px;height:18px;margin:-9px;border:2px dashed #e8eef7cc;border-radius:50%}
.mx-axis b{position:absolute;font:700 14px/1 Arial;color:#f2f6ff;text-shadow:0 0 3px #000}
.mx-axis-v b{top:-16px;left:-7px}.mx-axis-h b{left:-16px;top:-8px}.mx-axis-p b{left:1px;top:-1px}
/* 引力罗盘：大箭头=现在，小箭头=下一个；引力一侧的边框加粗 */
.mx-compass{flex:none;margin-left:auto;display:flex;align-items:center;gap:3px;padding:2px 6px;background:#0b0f18e6;border:1px solid #9fb0ff88;border-radius:10px;color:#dfe6ff;font:600 11px/1.3 Arial,'PingFang SC',sans-serif}
.mx-arrow{display:inline-block;width:0;height:0;border-left:9px solid #cfd8ff;border-top:6px solid #0000;border-bottom:6px solid #0000;transform:rotate(var(--rot));transition:transform .3s}
.mx-arrow-next,.mx-arrow-next2{border-left-width:6px;border-top-width:4px;border-bottom-width:4px;opacity:.6}.mx-arrow-next2{opacity:.35}
.mx-compass small{font-size:10px;opacity:.8}
.mx-edge{position:absolute;pointer-events:none;border-color:#9fb0ff;border-style:solid;border-width:0;inset:-3px;border-radius:10px}
.mx-edge-down{border-bottom-width:4px}.mx-edge-up{border-top-width:4px}.mx-edge-left{border-left-width:4px}.mx-edge-right{border-right-width:4px}
#board.mx-flipped{box-shadow:0 -3px 0 #b8c6ff66,0 3px 0 #b8c6ff66}
/* 预告条 */
.mx-telegraph{position:absolute;left:0;right:0;top:100%;margin-top:5px;display:flex;flex-wrap:wrap;gap:3px 4px;justify-content:flex-start;align-items:center;overflow:visible;pointer-events:none}
/* 预告条可以折成两三行（字不再被截断）；有预告时它占用棋盘下方提示行的位置，多出来的高度由 mechanic-fx.mjs 给 .board-wrap 补下边距。 */
.board-wrap:has(.mx-telegraph>*)+.board-hint{visibility:hidden}
.mx-chip{flex:0 0 auto;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;display:inline-flex;align-items:center;gap:4px;padding:1px 8px 1px 5px;border-radius:10px;background:#0b0f18e6;border:1px solid #c9b47a88;color:#f3ead2;font:600 11px/1.5 Arial,'PingFang SC','Microsoft YaHei',sans-serif;white-space:nowrap}
.mx-chip b{font-weight:700;color:#ffe9a0}
.mx-chip.mx-danger{border-color:#ff6ad5;color:#ffd6f2}
.mx-chip.mx-ready{border-color:#ffd76a;box-shadow:0 0 8px #ffd76a99}
.mx-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mx-c);border:1px dashed #fff}
.mx-shape{display:inline-grid;grid-template-columns:repeat(var(--c),4px);grid-auto-rows:4px;gap:1px;vertical-align:middle}
.mx-shape i{display:block;background:#ffffff22}.mx-shape i.on{background:#ffd76a}
.mx-fog-hint{position:absolute;inset:-2px;border-radius:10px;box-shadow:inset 0 0 16px 6px #dfe6ee55;pointer-events:none}
/* 前路茫茫 ☁：雾格不透明度 ≥0.92；燃烧、星砂、黑洞、起结、暴风与风化/电击/冻结仍可见 */
#board.mx-fogged .orb-cell:not(.selected):not(.mx-lit) .orb,#board.mx-fogged .orb-cell:not(.selected):not(.mx-lit) .orb-state.enhanced{visibility:hidden}
#board.mx-fogged .orb-cell:not(.selected):not(.mx-lit){background:radial-gradient(circle at 40% 35%,#eef2f6,#c6ced8) !important;opacity:.94}
#board.mx-fogged .orb-cell:not(.selected):not(.mx-lit)::before{content:'☁';position:absolute;right:3px;top:2px;font:12px/1 Arial;color:#55606e}
#board.mx-fogged .orb-cell.keyboard-focus{outline:3px solid #ffd76a}
/* 成员封印：锁链 + 剩余回合 + 灰度 80%；前一回合的标记按 Boss 主题换样式 */
.hero-card.mx-sealed{filter:grayscale(.8)}
.hero-card.mx-sealed::after{content:'';position:absolute;inset:6% 4%;border:3px dotted #d9d2bf;border-radius:14px;pointer-events:none}
.mx-seal-badge{position:absolute;right:4px;bottom:4px;z-index:3;padding:0 5px;border-radius:7px;background:#20232bf2;border:1px solid #d9d2bf;color:#f4efe2;font:700 11px/1.5 Arial,'PingFang SC',sans-serif}
.hero-card.mx-seal-marked .mx-seal-badge{background:#3a1f2af2;border-color:#ff9c9c}
.hero-card.mx-seal-marked{box-shadow:0 0 0 2px #ff9c9c88}
.hero-card[data-mx-mark=mirror-crack] .hero-portrait{transform:scaleX(-1)}
.hero-card[data-mx-mark=vine]{box-shadow:inset 0 -12px 10px -6px #3f8a4acc}
.hero-card[data-mx-mark=web]{box-shadow:inset 8px 8px 10px -6px #f4f4f4cc}
.hero-card[data-mx-mark=mask]{box-shadow:inset 0 0 0 40px #d8c8a833}
.hero-card[data-mx-mark=star]{box-shadow:0 -6px 14px #fff3cf}
/* 招式横幅与暗角 */
.mx-banner{position:fixed;z-index:79;transform:translate(-50%,-6px);padding:5px 18px;border-radius:4px;background:linear-gradient(90deg,#0000,#120d1ee6 18% 82%,#0000);color:#ffe9a0;font:700 20px/1.3 'PingFang SC','Microsoft YaHei',serif;letter-spacing:4px;text-shadow:0 0 8px #ffb84d;pointer-events:none;opacity:0;white-space:nowrap}
.mx-banner.show{animation:mx-banner .9s ease-out forwards}
.mx-vignette{position:fixed;inset:0;z-index:77;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,#0000 40%,#000 100%)}
@keyframes mx-banner{0%{opacity:0;transform:translate(-50%,6px)}18%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0}}
@keyframes mx-spin{to{transform:rotate(360deg)}}
@keyframes mx-shake{0%{transform:translate(-1px,0)}100%{transform:translate(1px,0)}}
@keyframes mx-breathe{0%,100%{opacity:.35}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){
  #mechanic-fx{display:none}
  .mx-hole-forming,.mx-devour-next,.orb-cell.mx-shake .orb{animation:none}
  .mx-hole-forming{border-style:double;border-width:3px}
  .mx-banner.show{animation:none;opacity:1;transform:translate(-50%,0)}
  .mx-arrow{transition:none}
}
@media(max-width:650px){.mx-chip{font-size:10px;padding:0 6px 0 4px}.mx-banner{font-size:16px;letter-spacing:2px}.mx-sym{font-size:10px}}
/* 第六章 Boss 专属演出（chapter6-fx.mjs）：画布在 #mechanic-fx 之下；横幅下一行小字；奇点倒数暗角（减少动态时也保留，最大 0.5）。 */
#chapter6-fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:73;contain:strict}
.mx-banner .c6-sub{display:block;margin-top:2px;font:500 12px/1.4 'PingFang SC','Microsoft YaHei',sans-serif;letter-spacing:1px;color:#f3e6ff;text-shadow:0 0 6px #000}
.c6-doom{position:fixed;inset:0;z-index:76;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,#0000 45%,#2a0420 82%,#000 100%);transition:opacity .4s}
@media (prefers-reduced-motion:reduce){#chapter6-fx{display:none}.c6-doom{transition:opacity .15s}}
@media(max-width:650px){.mx-banner .c6-sub{font-size:10px}}