/* ==========================================================================
   council.css —— 势力 · 苍鸦堡黑铁王座厅（类名前缀 cl-）
   厅（全景）→ 桌（同一张桌子的近景，卷宗画在图里）→ 卷（卷宗飞起翻开）；另有「阵」。
   卷宗是纸，P5 的字只在右页——大号数字、代表色斜条、黑底称号；左页只放立绘。每席一种代表色（--c）。
   ========================================================================== */
body[data-page="factions"] { background: #050608; }

/* ── 舞台 ── */
.cl-stage { position: relative; height: calc(100svh - 72px); min-height: 560px; margin-top: 72px; overflow: hidden; background: #050608; --c: #e8d09b; user-select: none; -webkit-user-select: none; }
.cl-stage img { -webkit-user-drag: none; }
html.is-board-lock, html.is-board-lock body { overflow: hidden; overscroll-behavior: none; }

/* ── 厅：全景；入座时镜头往桌面扎进去 ── */
.cl-hall { position: absolute; inset: 0; transform-origin: 50% 60%; transition: transform 1.2s cubic-bezier(.6, 0, .25, 1), opacity .7s .35s; }
.cl-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 2.4s cubic-bezier(.2, .6, .2, 1); }
.cl-stage.is-push .cl-bg { transform: scale(1.08); transition: none; }
.cl-stage:not([data-view="hall"]) .cl-hall { transform: scale(2.1); opacity: 0; pointer-events: none; }
.cl-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 90% at 50% 45%, transparent 50%, rgba(3, 4, 6, .75)), linear-gradient(180deg, rgba(3, 4, 6, .55), transparent 22%, transparent 78%, rgba(3, 4, 6, .65)); }
.cl-sit { position: absolute; left: 50%; top: 79%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 40px; border: 0; background: none; cursor: pointer; color: #f2dfae; font-family: var(--serif); }
.cl-sit b { font-weight: 400; font-size: clamp(26px, 2.4vw, 36px); letter-spacing: .6em; text-indent: .6em; text-shadow: 0 0 24px rgba(232, 190, 110, .7), 0 2px 8px #000; transition: letter-spacing .4s, color .3s; }
.cl-sit span { font-size: 13px; letter-spacing: .4em; text-indent: .4em; color: rgba(236, 230, 214, .75); text-shadow: 0 2px 6px #000; }
.cl-sit:hover b, .cl-sit:focus-visible b { color: #fff4d8; letter-spacing: .75em; text-indent: .75em; }

/* ── 桌：同一张桌子的近景；卷宗本来就画在图里，按钮只是热区 ── */
.cl-desk { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .7s .45s; }
.cl-stage:is([data-view="desk"], [data-view="seat"], [data-view="file"]) .cl-desk { opacity: 1; }
.cl-stage[data-view="desk"] .cl-desk { pointer-events: auto; }
.cl-desk-in { position: absolute; transform: scale(1.18); transition: transform 1.1s cubic-bezier(.4, 0, .2, 1); }
.cl-stage:is([data-view="desk"], [data-view="seat"], [data-view="file"], [data-view="board"]) .cl-desk-in { transform: none; }
.cl-stage .cl-desk-in.is-push { transform: scale(2.6); transition: transform 1.1s cubic-bezier(.55, 0, .25, 1); } /* 朝那份卷宗推过去 */
.cl-table { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-desk-vig { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3, 4, 6, .5), transparent 18%, transparent 82%, rgba(3, 4, 6, .6)); }
/* 桌沿刻字：金色浅刻的罗马数字，压扁成躺在桌面上的透视 */
.cl-rim { position: absolute; transform: translate(-50%, -50%) scaleY(.5); font-family: var(--display-latin); font-weight: 400; font-size: 2em; line-height: 1; color: #e3c27e; pointer-events: none; transition: color .3s, text-shadow .3s;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 236, 190, .45), 0 0 .25em rgba(0, 0, 0, .95), 0 0 .6em rgba(0, 0, 0, .8); } /* 暗晕托底：压在桌面反光处也看得清 */
.cl-rim.is-hot { color: #fff1c8; text-shadow: 0 0 .25em rgba(0, 0, 0, .95), 0 0 .5em rgba(232, 190, 110, .9); }
.cl-fold.is-next { opacity: 1; } /* 换席途中：下一席那份先亮起来 */
.cl-fold { position: absolute; padding: 0; border: 0; background: radial-gradient(closest-side, rgba(232, 208, 155, .3), transparent); opacity: 0; cursor: pointer; transition: opacity .3s; }
.cl-fold:hover, .cl-fold:focus-visible { opacity: 1; outline: none; } /* 悬停：那份卷宗上亮起一团烛光 */

/* ── 座：坐在这一席看出去（视角图）；换席时左右甩过去 ── */
.cl-povs { position: absolute; inset: 0; pointer-events: none; }
.cl-pov { position: absolute; opacity: 0; transition: opacity .6s ease; will-change: transform, opacity; }
.cl-pov.is-on { opacity: 1; }
.cl-stage[data-view="seat"] .cl-pov.is-on { pointer-events: auto; cursor: pointer; }
.cl-pov > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.cl-pov::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3, 4, 6, .55), transparent 20%, transparent 80%, rgba(3, 4, 6, .5)); }
.cl-pov-at { position: absolute; }
.cl-patch { position: absolute; opacity: 0; pointer-events: none; background-repeat: no-repeat; -webkit-mask: radial-gradient(closest-side, #000 75%, transparent); mask: radial-gradient(closest-side, #000 75%, transparent); }
.cl-pov.is-lift .cl-patch { opacity: 1; }
.cl-stage[data-view="seat"] .cl-pov.is-on:hover .cl-pov-at { background: radial-gradient(closest-side, rgba(232, 208, 155, .22), transparent); }
.cl-cap { position: absolute; left: 50%; bottom: 22px; z-index: 6; transform: translateX(-50%); margin: 0; white-space: nowrap; font-family: var(--serif); font-size: 20px; letter-spacing: .3em; color: #f4ecdc; text-shadow: 0 2px 10px #000; pointer-events: none; }
.cl-cap em { font-style: normal; font-family: var(--display-latin); font-size: 30px; letter-spacing: 0; margin-right: 14px; }
.cl-cap span { margin-left: 18px; font-size: 14px; letter-spacing: .24em; color: rgba(236, 230, 214, .7); }
.cl-cap:has(> span:only-child) span { margin: 0; }

/* ── 卷：卷宗飞起、翻开。1em = 卷宗宽的 1/100，里面的字都跟着卷宗缩放。书脊在 51.3% ── */
.cl-open { position: absolute; inset: 0; z-index: 6; pointer-events: none; perspective: 1800px; }
.cl-open::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(3, 4, 6, .45), rgba(3, 4, 6, .9)); opacity: 0; transition: opacity .5s; }
.cl-stage[data-view="file"] .cl-open { pointer-events: auto; }
.cl-stage[data-view="file"] .cl-open::before { opacity: 1; }
.cl-spread { --W: min(94vw, 1560px, calc((100svh - 72px - 36px) * 1.4494)); --sp: 51.3%; position: absolute; left: 50%; top: 50%; width: var(--W); aspect-ratio: 1332 / 919;
  margin: calc(var(--W) / -2.8988) 0 0 calc(var(--W) / -2); transform-origin: 75.6% 50%; transform-style: preserve-3d; font-size: calc(var(--W) / 100); }
.cl-spread::before { content: ''; position: absolute; inset: 5% 3% -2%; border-radius: 3%; background: rgba(0, 0, 0, .75); filter: blur(30px); opacity: 0; transition: opacity .4s; }
.cl-spread.is-open::before { opacity: 1; }
.cl-half-r { position: absolute; left: var(--sp); top: 0; width: calc(100% - var(--sp)); height: 100%; background: url(../img/cl-dossier.webp) 100% 0 / 205.34% 100% no-repeat; }
.cl-flip { position: absolute; left: var(--sp); top: 0; width: calc(100% - var(--sp)); height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.45, 0, .2, 1); }
.cl-spread.is-open .cl-flip { transform: rotateY(-180deg); }
.cl-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cl-front > img:first-child { display: block; width: 100%; height: 100%; }
.cl-front-seal { position: absolute; left: 55%; top: 45%; width: 30%; transform: translate(-50%, -50%) rotate(-8deg); filter: drop-shadow(0 .3em .4em rgba(0, 0, 0, .55)); }
.cl-rear { transform: rotateY(180deg); background: url(../img/cl-dossier.webp) 0 0 / 194.93% 100% no-repeat; }

/* 左页：只放立绘，像贴进档案的大相片 */
.cl-pl { position: absolute; left: 18.9%; width: 78.6%; top: 4.5%; height: 90.5%; }
.cl-por { position: absolute; inset: 3% 4%; width: 92%; height: 94%; object-fit: cover; object-position: 50% 10%; box-sizing: border-box; border: .5em solid #efe5cf; box-shadow: 0 .4em 1em rgba(40, 25, 10, .45); transform: rotate(-1deg); }
.cl-por.is-none { display: grid; place-items: center; background: #e6dcc4; font-family: var(--serif); font-size: 1.6em; letter-spacing: .4em; color: #8a7a62; }

/* 右页：档案。P5 的字都在这一页 */
.cl-pr { position: absolute; left: 2.5%; width: 83%; top: 4.5%; height: 90.5%; padding: 5% 8% 0 9%; box-sizing: border-box; font-family: var(--serif); color: #2a1f15; }
.cl-p5 { position: relative; height: 15em; }
.cl-p5 em { position: absolute; left: -.04em; top: -.06em; font-family: var(--display-latin); font-style: italic; font-size: 9.5em; line-height: 1; color: var(--c); -webkit-text-stroke: .025em #111; text-shadow: .05em .05em 0 #111; opacity: 0; transform: scale(1.6) rotate(-6deg); transform-origin: 20% 60%; transition: opacity .2s .1s, transform .34s .1s cubic-bezier(.3, 1.4, .5, 1); }
.cl-slash { position: absolute; left: -12%; right: -14%; top: 8.4em; height: 4.6em; background: var(--c); box-shadow: .3em .3em 0 rgba(0, 0, 0, .5); transform: skewX(-18deg) scaleX(0); transform-origin: 0 50%; transition: transform .3s .16s cubic-bezier(.7, 0, .2, 1); }
.cl-p5 h2 { position: absolute; left: 1.4em; top: 2.05em; margin: 0; padding: .1em .45em .08em; white-space: nowrap; font-family: var(--serif); font-weight: 700; font-size: 4.2em; letter-spacing: .1em; line-height: 1.15; color: #fbf4e4; background: #111; transform: translateX(-1em) skewX(-10deg); opacity: 0; transition: opacity .2s .24s, transform .3s .24s cubic-bezier(.2, .9, .2, 1); }
.cl-spread.is-read .cl-p5 em { opacity: 1; transform: none; }
.cl-spread.is-read .cl-slash { transform: skewX(-18deg) scaleX(1); }
.cl-spread.is-read .cl-p5 h2 { opacity: 1; transform: skewX(-10deg); }
.cl-pr > :not(.cl-p5):not(.cl-seal) { opacity: 0; transform: translateY(.6em); transition: opacity .35s, transform .35s; }
.cl-spread.is-read .cl-pr > :not(.cl-p5):not(.cl-seal) { opacity: 1; transform: none; }
.cl-spread.is-read .cl-pr > :nth-child(2) { transition-delay: .34s; } .cl-spread.is-read .cl-pr > :nth-child(3) { transition-delay: .4s; }
.cl-spread.is-read .cl-pr > :nth-child(4) { transition-delay: .46s; } .cl-spread.is-read .cl-pr > :nth-child(5) { transition-delay: .52s; } .cl-spread.is-read .cl-pr > :nth-child(6) { transition-delay: .58s; }
.cl-en { display: block; margin-top: 1.4em; font-family: var(--display-latin); font-size: 1.9em; color: #5a3d24; }
.cl-name { display: inline-block; margin: .6em 0 0; padding: .3em .7em; white-space: nowrap; font-size: 1.75em; letter-spacing: .08em; color: #f4ecdc; background: #16110c; box-shadow: .22em .22em 0 var(--c); transform: skewX(-6deg); }
.cl-meta { margin: 1.3em 0 0; font-size: 1.4em; line-height: 1.75; }
.cl-meta div { display: grid; grid-template-columns: 3.4em 1fr; padding: .25em 0; border-bottom: 1px solid rgba(80, 55, 30, .25); }
.cl-meta dt { color: #8a6d4c; letter-spacing: .2em; }
.cl-meta dd { margin: 0; }
.cl-line { margin: 1em 0 0; font-size: 1.6em; line-height: 1.85; color: #3a2a1a; }
.cl-foot { position: absolute; left: 9%; bottom: 5%; margin: 0; display: flex; flex-direction: column; gap: .5em; }
.cl-foot a { font-size: 1.45em; letter-spacing: .2em; color: #2a1f15; text-decoration: none; border-bottom: 1px solid rgba(42, 31, 21, .5); padding-bottom: .15em; align-self: flex-start; }
.cl-foot a:hover { color: #7a3a26; border-color: #7a3a26; }
.cl-foot span { font-size: 1.1em; letter-spacing: .3em; color: #7a3a26; }
.cl-seal { position: absolute; right: 4%; bottom: 3%; width: 25%; opacity: 0; transform: scale(1.9) rotate(-18deg); filter: drop-shadow(0 .3em .4em rgba(40, 20, 5, .5)); transition: transform .26s .8s cubic-bezier(.5, 0, .9, .5), opacity .1s .8s; }
.cl-spread.is-read .cl-seal { opacity: 1; transform: scale(1) rotate(-12deg); }

/* ── 标题、切换、返回 ── */
.cl-top { position: absolute; left: clamp(20px, 3vw, 44px); top: 22px; z-index: 7; transition: opacity .3s; }
.cl-k { font-family: var(--serif); font-size: 13px; letter-spacing: .4em; color: rgba(232, 208, 155, .85); margin: 0; }
.cl-k i { font-family: var(--display-latin); font-size: 16px; letter-spacing: .04em; }
.cl-top h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 2.8vw, 42px); letter-spacing: .4em; color: #f4ecdc; margin: 8px 0 14px; text-shadow: 0 2px 20px #000; transition: opacity .4s; }
.cl-stage:not([data-view="hall"]) .cl-top h1 { opacity: 0; }
.cl-stage[data-view="file"] .cl-top { opacity: 0; }
.cl-views { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(8, 10, 13, .7); border: 1px solid rgba(232, 208, 155, .3); transition: opacity .3s; }
.cl-stage[data-view="file"] .cl-views { opacity: 0; pointer-events: none; }
.cl-views button { font-family: var(--serif); font-size: 15px; letter-spacing: .3em; text-indent: .3em; color: rgba(236, 230, 214, .7); background: none; border: 0; border-radius: 999px; padding: 6px 18px; cursor: pointer; }
.cl-views button.is-on { color: #1d140a; background: #e8d09b; }
.cl-tr { position: absolute; right: clamp(20px, 3vw, 44px); top: 24px; z-index: 8; display: flex; gap: 10px; align-items: center; }
.cl-back { font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: #f2e8d2; background: rgba(8, 10, 13, .75); border: 1px solid rgba(232, 208, 155, .4); border-radius: 999px; padding: 8px 18px; cursor: pointer; }
.cl-stage:is([data-view="file"], [data-view="seat"]) .cl-tr { right: auto; left: clamp(12px, 1.6vw, 28px); } /* 卷宗几乎占满高度：合上按钮挪到左上角卷宗外 */
.cl-down { position: absolute; left: 50%; bottom: 16px; z-index: 7; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; font-family: var(--serif); transition: opacity .3s, left .5s, transform .5s; }
.cl-down span { font-size: 11px; letter-spacing: .5em; text-indent: .5em; color: rgba(236, 230, 214, .6); }
.cl-down b { font-weight: 400; font-size: 14px; letter-spacing: .4em; text-indent: .4em; color: #f2dfae; padding: 6px 16px; border: 1px solid rgba(232, 208, 155, .4); background: rgba(5, 6, 8, .45); animation: cl-down-pulse 3.2s ease-in-out 4s infinite; }
@keyframes cl-down-pulse { 0%, 70%, 100% { border-color: rgba(232, 208, 155, .4); } 82% { border-color: rgba(255, 226, 160, .95); } }
.cl-down:hover b { border-color: #e8d09b; color: #fff4d8; }
/* 桌面、坐席里提示挪到右下角，不压字幕；翻开卷宗时藏起来 */
.cl-stage:is([data-view="desk"], [data-view="seat"]) .cl-down { left: auto; right: clamp(20px, 3vw, 44px); transform: none; }
@keyframes cl-drip { 50% { transform: translateY(6px); opacity: .4; } }
.cl-stage[data-view="file"] .cl-down { opacity: 0; pointer-events: none; }

/* 上一席 / 下一席：贴在左右两边（桌上是转桌子，卷宗里是换一份） */
.cl-step { position: absolute; top: 50%; z-index: 8; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 54px; padding: 18px 0; border: 1px solid rgba(232, 208, 155, .35); background: rgba(8, 10, 13, .7); color: #f2e8d2; cursor: pointer; transform: translateY(-50%) skewY(-6deg); opacity: 0; pointer-events: none; transition: opacity .3s, background .2s, color .2s; }
.cl-step.is-prev { left: clamp(10px, 1.6vw, 28px); }
.cl-step.is-next { right: clamp(10px, 1.6vw, 28px); }
.cl-step i { font-style: normal; font-family: var(--display-latin); font-size: 34px; line-height: .8; }
.cl-step span { font-family: var(--serif); font-size: 13px; letter-spacing: .3em; writing-mode: vertical-rl; }
.cl-stage:is([data-view="file"], [data-view="seat"]) .cl-step { opacity: 1; pointer-events: auto; }
.cl-step:hover { background: var(--c); color: #0b0805; border-color: var(--c); }

/* ── 推门 ── */
.cl-door { position: absolute; inset: 0; z-index: 20; perspective: 1400px; pointer-events: none; }
.cl-door i { position: absolute; top: 0; bottom: 0; width: 50%; background: url(../img/cl-door.jpg) no-repeat; background-size: 200% 100%; transition: transform 1.6s cubic-bezier(.6, 0, .25, 1), filter 1.6s; box-shadow: 0 0 60px #000; }
.cl-door .l { left: 0; background-position: 0 0; transform-origin: left center; }
.cl-door .r { right: 0; background-position: 100% 0; transform-origin: right center; }
.cl-door p { position: absolute; left: 0; right: 0; bottom: 14%; text-align: center; font-family: var(--serif); font-size: 15px; letter-spacing: .8em; text-indent: .8em; color: rgba(242, 223, 174, .8); transition: opacity .4s; }
.cl-door.is-open .l { transform: rotateY(-100deg); filter: brightness(.4); }
.cl-door.is-open .r { transform: rotateY(100deg); filter: brightness(.4); }
.cl-door.is-open p { opacity: 0; }

/* ── 往下：裁决席是什么 ── */
.cl-about { position: relative; padding: 0 0 120px; background: #050608; }
.cl-about-h { padding-top: clamp(80px, 12vh, 140px); }
/* 王座厅底边渐暗进黑，和下面档案馆的顶边渐亮接上，中间不留硬边 */
.cl-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; z-index: 5; pointer-events: none; background: linear-gradient(180deg, transparent, #050608); }
.cl-stage[data-view="file"]::after { opacity: 0; }
.cl-w { max-width: 980px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.cl-sec-h h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 4.6vw, 64px); letter-spacing: .3em; color: #f4ecdc; margin: 14px 0 4px; }
.cl-sec-h i { font-family: var(--display-latin); font-size: 20px; color: var(--frost); }
.cl-lead { font-family: var(--serif); font-size: 19px; line-height: 2; color: #ece4d2; margin: 36px 0 0; }
.cl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 40px 0 0; border-top: 1px solid rgba(232, 208, 155, .2); border-bottom: 1px solid rgba(232, 208, 155, .2); }
.cl-stats div { padding: 18px 0; }
.cl-stats dt { font-family: var(--serif); font-size: 12px; letter-spacing: .3em; color: rgba(232, 208, 155, .7); }
.cl-stats dd { margin: 8px 0 0; font-family: var(--display-latin); font-size: 30px; color: #f4ecdc; }


@media (max-width: 860px) {
    .cl-spread { --W: 96vw; }
  .cl-step { width: 40px; }


}
@media (prefers-reduced-motion: reduce) { .cl-hall, .cl-bg, .cl-desk, .cl-desk-in, .cl-flip, .cl-slash, .cl-p5 *, .cl-pr > *, .cl-seal { transition: none !important; animation: none !important; } }

/* 坐下以后：桌面退到暗处（转身时不从底下透出来），标题让位给按钮 */
.cl-stage.is-sat .cl-desk { opacity: 0; transition: opacity .5s; }
.cl-stage:is([data-view="file"], [data-view="seat"]) .cl-top { opacity: 0; pointer-events: none; }
/* 视角图里那份卷宗的火漆：换成这一席的火漆，按透视压扁、压暗，和拿起来以后封面上的是同一枚 */
.cl-pov-seal { position: absolute; transform: translate(-50%, -50%) scaleY(var(--sq)); filter: brightness(.62) saturate(.85) drop-shadow(0 .35em .25em rgba(0, 0, 0, .7)); pointer-events: none; }
.cl-desk-seal { position: absolute; transform: translate(-50%, -50%) scaleY(.6); filter: brightness(.6) saturate(.85) drop-shadow(0 .1em .1em rgba(0, 0, 0, .7)); pointer-events: none; } /* 桌上八份卷宗的火漆：同样换成各席自己的那枚 */

/* ── 氛围层：雾 + 微尘（council-fx.js 挂进来；厅、桌、坐席、档案馆共用） ── */
.cl-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* 整屏薄雾：可平铺纹理，层宽多出一个 tile，平移正好一个 tile 再回到起点，所以无缝循环、没有边界 */
.cl-fx-haze { position: absolute; inset: 0; opacity: var(--h); animation: cl-fx-breathe 14s ease-in-out infinite alternate;
  -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .7) 45%, #000); mask: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .7) 45%, #000); }
.cl-fx-haze i { position: absolute; left: 0; top: 0; width: calc(100% + var(--tile)); height: 100%; background-size: var(--tile) var(--tile); background-repeat: repeat; filter: blur(6px); animation: cl-fx-flow var(--t) linear infinite; }
.cl-fx-haze i.is-2 { left: calc(var(--tile) * -1); opacity: .7; animation-name: cl-fx-flow-r; }
@keyframes cl-fx-flow { to { transform: translateX(calc(var(--tile) * -1)); } }
@keyframes cl-fx-flow-r { to { transform: translateX(var(--tile)); } }
@keyframes cl-fx-breathe { from { opacity: calc(var(--h) * .75); } to { opacity: var(--h); } }
/* 一缕雾：从左边外面飘到右边外面（is-rev 反向），途中淡入、长大、散开淡出；单位用 vw，跟容器宽一致（这几个容器都是满宽） */
.cl-fx-mist { position: absolute; left: 0; aspect-ratio: 3 / 2; opacity: 0; animation: cl-fx-mist var(--t) linear var(--d) infinite; }
.cl-fx-mist.is-rev { animation-name: cl-fx-mist-rev; }
.cl-fx-mist img { width: 100%; height: 100%; -webkit-mask: radial-gradient(closest-side, #000 35%, transparent); mask: radial-gradient(closest-side, #000 35%, transparent); } /* 边缘全部融掉，看不出是一张图 */
@keyframes cl-fx-mist {
  0% { opacity: 0; transform: translate(-60vw, 0) scale(.85); }
  20% { opacity: var(--o); }
  65% { opacity: calc(var(--o) * .8); }
  100% { opacity: 0; transform: translate(105vw, var(--y)) scale(var(--g)); }
}
@keyframes cl-fx-mist-rev {
  0% { opacity: 0; transform: translate(105vw, 0) scaleX(-1) scale(.85); }
  20% { opacity: var(--o); }
  65% { opacity: calc(var(--o) * .8); }
  100% { opacity: 0; transform: translate(-60vw, var(--y)) scaleX(-1) scale(var(--g)); }
}
.cl-fx-mote { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 234, 246, .95), rgba(226, 234, 246, 0)); opacity: 0; animation: cl-fx-mote var(--t) linear var(--d) infinite; }
@keyframes cl-fx-mote { 0% { opacity: 0; transform: translate(0, 0); } 15%, 80% { opacity: var(--o); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
.cl-fx.is-paused *, .cl-stage:not([data-view="hall"]) .cl-hall .cl-fx *, .cl-stage[data-view="hall"] .cl-desk .cl-fx * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cl-fx * { animation: none !important; } }
.cl-povs > .cl-fx { opacity: 0; transition: opacity .6s; }
.cl-stage.is-sat .cl-povs > .cl-fx { opacity: 1; }
.cl-stage:not(.is-sat) .cl-povs > .cl-fx * { animation-play-state: paused; }

/* 圆桌中央的徽记：点它展开均势沙盘 */
.cl-mid { position: absolute; left: 50%; top: 52%; width: 40%; height: 40%; transform: translate(-50%, -50%); padding: 0; border: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 208, 155, .22), transparent); opacity: .0; cursor: pointer; transition: opacity .35s; }
.cl-mid span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--serif); font-size: 1.6em; letter-spacing: .6em; text-indent: .6em; color: #fff1c8; text-shadow: 0 0 .6em rgba(0, 0, 0, .9), 0 0 1.2em rgba(232, 190, 110, .7); }
.cl-mid:hover, .cl-mid:focus-visible { opacity: 1; outline: none; }
@keyframes cl-mid-hint { 40%, 60% { opacity: .75; } }
/* 沙盘打开时，王座厅自己的标题、切换、提示都让开 */
.cl-stage[data-view="board"] :is(.cl-top, .cl-views, .cl-down, .cl-cap, .cl-step) { opacity: 0 !important; pointer-events: none !important; }
.cl-stage[data-view="board"] .cl-tr { z-index: 12; right: auto; left: clamp(20px, 3vw, 44px); top: auto; bottom: 64px; }
.cl-stage[data-view="board"] .cl-desk { opacity: 1; }

/* 桌心平时不转（静止时转动和座位视角对不上）：只让金色徽记轻轻呼吸，告诉人这里能点；悬停更亮。点下去才出现蓝色法阵 */
.cl-mid-glow { position: absolute; left: 30%; top: 32%; width: 40%; height: 40%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 214, 140, .32), rgba(232, 170, 80, .08) 55%, transparent); opacity: 0; animation: cl-mid-breath 3.6s ease-in-out infinite; }
@keyframes cl-mid-breath { 50% { opacity: 1; } }
.cl-desk:has(.cl-mid:hover) .cl-mid-glow { animation: none; opacity: 1; }
.cl-stage:not([data-view="desk"]) .cl-mid-glow { animation: none; opacity: 0; }
.cl-mid { opacity: 1 !important; background: none; }
.cl-mid span { top: auto; bottom: 6%; font-size: 1.4em; letter-spacing: .5em; transition: color .3s; }
.cl-mid i { position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-family: var(--serif); font-size: .85em; letter-spacing: .3em; color: rgba(190, 225, 255, .8); text-shadow: 0 0 .6em #000; animation: cl-mid-breathe 3s ease-in-out infinite; }
@keyframes cl-mid-breathe { 50% { opacity: .45; } }
.cl-mid:hover span { color: #fff; }
.cl-stage[data-view="board"] .cl-mid { opacity: 0 !important; pointer-events: none; }