/* ==========================================================================
   balance-board.css —— 势力 · 均势沙盘（类名前缀 bb-）
   沙盘铺满舞台；棋子与字随缩放反向缩放（--z），看大地形时棋子不会变成巨物。
   卷宗是牛皮纸（外部档案），和裁决席的黑皮火漆卷宗分得开；局是一面案情墙。
   ========================================================================== */
.bb { position: absolute; inset: 0; z-index: 9; background: transparent; opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; overflow: hidden; user-select: none; -webkit-user-select: none; }
.bb.is-open { opacity: 1; visibility: visible; transition: opacity .7s .25s, visibility 0s; }
.bb img { -webkit-user-drag: none; }

/* 沙盘：从桌心升起 */
.bb-view { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.bb-view.is-drag { cursor: grabbing; }
.bb-map { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.bb-sand { position: absolute; inset: 0; width: 100%; height: 100%; filter: saturate(.8) brightness(.92); }
.bb.is-rise .bb-map > * { animation: bb-rise 1.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes bb-rise { from { opacity: 0; transform: scale(.94) translateY(18px); } }
.bb-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 75% at 50% 50%, transparent 55%, rgba(4, 5, 6, .85)), linear-gradient(180deg, rgba(4, 5, 6, .7), transparent 16%, transparent 84%, rgba(4, 5, 6, .8)); }

/* 关系线：平时很淡；悬停一枚棋子时，它的线亮起来、写出注释 */
.bb-pieces { position: absolute; inset: 0; }
.bb-ties { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bb-tie path { fill: none; stroke-width: calc(2.2px * var(--z, 1)); opacity: .28; transition: opacity .3s; }
.bb-tie text { font-family: var(--serif); font-size: calc(19px * var(--z, 1)); letter-spacing: .1em; text-anchor: middle; fill: #f4ecdc; paint-order: stroke; stroke: rgba(4, 5, 6, .9); stroke-width: calc(5px * var(--z, 1)); opacity: 0; transition: opacity .3s; }
.bb-tie.is-ally path { stroke: #e3c27e; }
.bb-tie.is-foe path { stroke: #d0533f; stroke-dasharray: calc(10px * var(--z, 1)) calc(6px * var(--z, 1)); }
.bb-tie.is-hold path { stroke: #8fb4d8; }
.bb-tie.is-bet path { stroke: #b9a77e; stroke-dasharray: calc(3px * var(--z, 1)) calc(7px * var(--z, 1)); }
.bb-tie.is-other path { stroke: #b7a3d6; stroke-dasharray: calc(12px * var(--z, 1)) calc(4px * var(--z, 1)) calc(2px * var(--z, 1)) calc(4px * var(--z, 1)); }
.bb.has-hot .bb-tie path { opacity: .08; }
.bb-tie.is-hot path { opacity: 1 !important; stroke-width: calc(3.2px * var(--z, 1)); }
.bb-tie.is-hot text { opacity: 1; }

/* 棋子 */
.bb-pc, .bb-game { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -100%) scale(var(--z, 1)); transform-origin: 50% 100%; }
.bb-pc img, .bb-game img { display: block; height: 74px; margin: 0 auto; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .75)); transition: transform .25s; }
.bb-pc.is-outer img { height: 66px; }
.bb-pc.is-shadow img { height: 48px; }
.bb-pc.is-sealed img { height: 50px; }
.bb-plate { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 4px; display: flex; flex-direction: column; align-items: center; white-space: nowrap; padding: 3px 10px 4px; background: rgba(8, 9, 12, .78); border: 1px solid rgba(232, 208, 155, .3); font-family: var(--serif); pointer-events: none; }
.bb-plate b { font-weight: 500; font-size: 15px; letter-spacing: .08em; color: #f4ecdc; }
.bb-plate i { font-style: normal; font-size: 11px; letter-spacing: .1em; color: rgba(222, 226, 230, .62); }
.bb-pc.is-outer .bb-plate { border-color: rgba(200, 210, 220, .3); }
.bb-pc.is-shadow .bb-plate { border-color: rgba(150, 80, 70, .35); background: rgba(6, 4, 4, .82); }
.bb-pc.is-sealed .bb-plate { opacity: .7; }
.bb-pc:hover img, .bb-pc.is-hot img, .bb-game:hover img { transform: translateY(-6px); }
.bb-pc.is-hot .bb-plate { border-color: #e8d09b; }
.bb.has-hot .bb-pc:not(.is-hot) { opacity: .55; }
.bb-game img { height: 64px; }
.bb-game span { position: absolute; left: 58%; top: 2px; white-space: nowrap; padding: 2px 9px; font-family: var(--serif); font-size: 14px; letter-spacing: .12em; color: #fff1e6; background: #8e2a1c; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.bb-game.is-sealed span { background: #2a2622; color: rgba(222, 226, 230, .6); }
.bb-game:not(.is-sealed) img { animation: bb-pulse 3s ease-in-out infinite; }
@keyframes bb-pulse { 50% { filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .75)) drop-shadow(0 0 10px rgba(220, 70, 50, .8)); } }
.bb-pc:focus-visible, .bb-game:focus-visible { outline: 1px solid #e8d09b; outline-offset: 4px; }

/* 标题、图例、工具 */
.bb-head { position: absolute; left: clamp(20px, 3vw, 44px); top: 20px; pointer-events: none; font-family: var(--serif); }
.bb-head p { margin: 0; font-size: 12px; letter-spacing: .4em; color: rgba(232, 208, 155, .8); }
.bb-head h2 { margin: 6px 0 4px; font-weight: 300; font-size: clamp(30px, 3vw, 44px); letter-spacing: .5em; color: #f4ecdc; text-shadow: 0 2px 16px #000; }
.bb-head span { font-size: 13px; letter-spacing: .2em; color: rgba(222, 226, 230, .6); }
.bb-spoil { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; background: rgba(8, 9, 12, .8); border: 1px solid rgba(232, 208, 155, .35); color: #f2e8d2; text-align: left; }
.bb-spoil img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); transition: transform .3s; }
.bb-spoil span { display: flex; flex-direction: column; font-size: 11.5px; letter-spacing: .08em; color: rgba(222, 226, 230, .65); }
.bb-spoil b { font-weight: 500; font-size: 14px; letter-spacing: .3em; color: #f2dfae; }
.bb-spoil:hover img { transform: rotate(-12deg) scale(1.08); }
.bb.is-spoil .bb-spoil { border-color: rgba(208, 83, 63, .6); }
.bb.is-spoil .bb-spoil b { color: #e8907a; }

/* 抽屉：全部卷宗 */

/* 叠层：卷宗 / 案情墙 */
.bb-over { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(3, 4, 5, .72); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.bb-over.is-on { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
.bb-x { position: absolute; right: 2%; top: -46px; padding: 7px 18px; font-family: var(--serif); font-size: 13px; letter-spacing: .3em; color: #f2e8d2; background: rgba(8, 9, 12, .8); border: 1px solid rgba(232, 208, 155, .4); cursor: pointer; }

/* 牛皮纸卷宗：左页 21.5–49.6%，右页 51.6–81.3%（量自 bal-kraft.webp） */

/* 案情墙 */
.bb-wall { position: relative; width: min(96vw, 1400px, calc((100svh - 72px - 80px) * 1.778)); aspect-ratio: 16 / 9; margin-top: 30px; background: url(../img/bal-board.jpg) center / cover; box-shadow: 0 30px 60px rgba(0, 0, 0, .8); container-type: inline-size; }
.bb-strings { position: absolute; inset: 0; width: 100%; height: 100%; }
.bb-strings path { fill: none; stroke-width: .28; stroke: #b2281c; opacity: .9; filter: drop-shadow(0 .2px .3px rgba(0, 0, 0, .8)); }
.bb-strings path.is-ally { stroke: #c9a03e; } .bb-strings path.is-hold { stroke: #6d8fb4; } .bb-strings path.is-bet { stroke: #a08a5e; stroke-dasharray: .8 .8; } .bb-strings path.is-other { stroke: #7a6a9a; stroke-dasharray: 1.4 .5 .3 .5; }
.bb-note { position: absolute; padding: 1.2cqw 1.4cqw; background: #e9dfc6; color: #2a2016; font-family: var(--serif); box-shadow: 0 .5cqw 1.2cqw rgba(0, 0, 0, .6); }
.bb-note::before { content: ''; position: absolute; left: 50%; top: -.5cqw; width: 1.1cqw; height: 1.1cqw; margin-left: -.55cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e55, #811); box-shadow: 0 .15cqw .3cqw rgba(0, 0, 0, .6); }
.bb-note span { font-size: .9cqw; letter-spacing: .3em; color: #8a2a18; }
.bb-note.is-title { left: 37%; top: 52%; width: 22cqw; transform: translate(-50%, -50%) rotate(-1.5deg); text-align: center; z-index: 2; }
.bb-note.is-title h3 { margin: .3em 0 0; font-weight: 700; font-size: 2.2cqw; letter-spacing: .15em; }
.bb-note.is-title i { display: block; font-family: var(--display-latin); font-size: 1.05cqw; color: #6a4e30; }
.bb-note.is-title p { margin: .7em 0 0; font-size: 1.1cqw; line-height: 1.7; text-align: left; }
.bb-note.is-why { right: 3%; top: 50%; width: 24cqw; transform: translateY(-50%) rotate(1.2deg); z-index: 2; }
.bb-note.is-why ul { list-style: none; margin: .5em 0 0; padding: 0; }
.bb-note.is-why li { padding: .2em 0 .2em .9em; position: relative; font-size: 1.02cqw; line-height: 1.6; }
.bb-note.is-why li::before { content: '—'; position: absolute; left: 0; color: #8a2a18; }
.bb-note.is-why li.bb-sealed { color: #8a7a62; font-style: italic; }
.bb-tag { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 11cqw; padding: .9cqw .6cqw .7cqw; border: 0; background: #d9c39b; box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .55); transform: translate(-50%, -50%) rotate(var(--r)); cursor: pointer; font-family: var(--serif); color: #2a2016; transition: transform .25s; }
.bb-tag::before { content: ''; position: absolute; left: 50%; top: -.45cqw; width: .9cqw; height: .9cqw; margin-left: -.45cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ddd, #555); box-shadow: 0 .15cqw .3cqw rgba(0, 0, 0, .6); }
.bb-tag img { height: 3.6cqw; }
.bb-tag b { margin-top: .3em; font-weight: 600; font-size: 1.15cqw; text-align: center; line-height: 1.3; }
.bb-tag i { font-style: normal; font-size: .9cqw; color: #6a5038; }
.bb-tag.is-shadow { background: #3a3430; color: #e9dfc6; } .bb-tag.is-shadow i { color: #b9a68a; }
.bb-tag.is-outer { background: #cfcfc8; }
.bb-tag.is-sealed { background: #4a4440; color: #a99; cursor: default; }
.bb-tag:hover:not(:disabled) { transform: translate(-50%, -54%) rotate(var(--r)) scale(1.06); }
.bb-wall .bb-x { top: -42px; }


/* ==== 2026-10-27 第二版：开场序列帧、战旗、默认不显示字、大卷宗 ==== */
/* 开场：序列帧盖在最上层，逐张淡入；最后镜头扎进桌心的沙盘 */
/* 开场分层动画：.bb-ly 是 2048×1152 的桌面坐标系，JS 把它按 cover 缩放铺满（和桌面图严丝合缝）
   时间轴（.is-go 之后）：0.1s 徽记发金光 · 0.5s 金环开始转 · 1.0s 两扇门滑开 · 1.3s 竖井冷光 · 2.3s 沙盘升起 · 5.2s 镜头扎入（JS） */
.bb-rise { position: absolute; inset: 0; z-index: 6; overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .6s; }
.bb-rise.is-on { opacity: 1; visibility: visible; transition: opacity .15s; }
.bb.is-ready .bb-rise { opacity: 0; transition: opacity .9s; }
.bb-ly { position: absolute; left: 0; top: 0; width: 2048px; height: 1152px; transform-origin: 0 0; }
.bb-ly > * { position: absolute; }
.ly-pit { left: 0; top: 0; width: 2048px; height: 1152px; }
.bb-ly::after { content: ''; position: absolute; inset: 0; transform-origin: 50% 48%; } /* 占位：镜头扎入用 .bb-ly 自身 */
/* 竖井里的冷光 */
.ly-cold { left: 614px; top: 374px; width: 820px; height: 452px; border-radius: 50%; background: radial-gradient(closest-side, rgba(170, 205, 255, .55), rgba(120, 160, 230, .18) 55%, transparent); opacity: 0; }
/* 两扇门：限在井口椭圆里，滑出去就「缩进环下」看不见 */
.ly-doors { left: 0; top: 0; width: 2048px; height: 1152px; clip-path: ellipse(410px 226px at 1024px 600px); }
.ly-door { position: absolute; top: 374px; width: 410px; height: 452px; }
.ly-door.is-l { left: 614px; } .ly-door.is-r { left: 1024px; }
/* 外环：正圆素材，压回透视（scaleY .549）后绕中心旋转 */
.ly-ring { left: 550px; top: 126px; width: 948px; height: 948px; transform: scaleY(.549) rotate(0deg); }
/* 金光：先从徽记上亮起来 */
.ly-gold { left: 560px; top: 340px; width: 928px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 140, .7), rgba(232, 170, 80, .25) 50%, transparent); opacity: 0; }
/* 沙盘：从井里升起。裁切：井口椭圆下半弧以下看不见（被前沿挡住），其上都看得见 */
.ly-rise { left: 0; top: 0; width: 2048px; height: 1152px; clip-path: path('M0 0H2048V600H1434A410 226 0 0 1 614 600H0Z'); }
.ly-model { position: absolute; left: 626px; top: 327px; width: 796px; height: 500px; transform: translateY(540px) scale(.9); transform-origin: 50% 60%; will-change: transform; }

.bb-rise.is-go .ly-gold { animation: ly-gold 2.2s .1s ease-in-out both; }
@keyframes ly-gold { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.bb-rise.is-go .ly-door.is-l { animation: ly-door-l 1.7s 1.0s cubic-bezier(.65, 0, .3, 1) both; }
.bb-rise.is-go .ly-door.is-r { animation: ly-door-r 1.7s 1.0s cubic-bezier(.65, 0, .3, 1) both; }
@keyframes ly-door-glow { from { filter: brightness(1); } to { filter: brightness(1.35) sepia(.25); } }
@keyframes ly-door-l { from { transform: translateX(0); } to { transform: translateX(-440px); } }
@keyframes ly-door-r { from { transform: translateX(0); } to { transform: translateX(440px); } }
.bb-rise.is-go .ly-ring { animation: ly-ring 4.6s .5s cubic-bezier(.45, 0, .25, 1) both; }
@keyframes ly-ring { from { transform: scaleY(.549) rotate(0deg); } to { transform: scaleY(.549) rotate(150deg); } }
.bb-rise.is-go .ly-cold { animation: ly-cold 3.4s 1.3s ease-out both; }
@keyframes ly-cold { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: .55; } }
.bb-rise.is-go .ly-model { animation: ly-model 2.6s 2.3s cubic-bezier(.2, .7, .25, 1) both; }
@keyframes ly-model { from { transform: translateY(540px) scale(.9); opacity: .55; } 70% { opacity: 1; } to { transform: none; opacity: 1; } }
/* 镜头扎进沙盘 */
.bb-ly { transition: none; }
.bb-rise.is-on .bb-ly { will-change: transform; }
.bb.is-dive .bb-rise { transform: scale(2.4); transform-origin: 50% 47%; transition: transform 1.1s cubic-bezier(.55, 0, .3, 1), opacity .9s; }
.bb-rise { transform-origin: 50% 47%; }
.bb.is-ready .bb-map { animation: bb-land 1.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes bb-land { from { opacity: 0; } }

/* 战旗：比原来的小旗高，一眼分得出类型 */
.bb-pc img { height: 92px; }
.bb-pc.is-outer img { height: 84px; }
.bb-pc.is-shadow img { height: 70px; }
.bb-pc.is-sealed img { height: 46px; }
/* 字默认不显示：悬停那一面 + 和它有线的几面才浮出名字 */
.bb-plate { opacity: 0; transform: translateX(-50%) translateY(-4px); transition: opacity .25s, transform .25s; }
.bb-pc:hover .bb-plate, .bb-pc:focus-visible .bb-plate, .bb-pc.is-hot .bb-plate, .bb-pc.is-near .bb-plate { opacity: 1; transform: translateX(-50%); }
.bb-pc.is-near .bb-plate b { font-size: 13px; }
.bb-pc.is-near .bb-plate i { display: none; }
.bb.has-hot .bb-pc:not(.is-hot):not(.is-near) { opacity: .35; }
.bb-game span { opacity: 0; transition: opacity .25s; }
.bb-game:hover span, .bb-game:focus-visible span { opacity: 1; }

/* 图例：左下，两行——旗代表什么、线代表什么 */

/* 外部档案：大卷宗。左栏战旗与名字，右边各栏目，字够大，内容多时右边自己滚 */
/* 人物 */
/* 它会怎么出手：一张张牌 */
/* 架构图 */
/* 关系 */
.bb-pc.is-sealed .bb-plate { opacity: 0; }
.bb-pc.is-sealed:hover .bb-plate { opacity: .8; }
.bb-tie text { display: none; } /* 线上不写字（帝都一带会挤成一团），关系写进右下角的说明框 */
.cl-stage:has(.bb.has-over) .cl-tr { opacity: 0; pointer-events: none; }

/* ==== 蓝色法阵（SVG）与光点：和外环同一个椭圆，几层反向旋转；有限时长（关上时能倒放） ==== */
.ly-arcane { position: absolute; left: 524px; top: 100px; width: 1000px; height: 1000px; transform: scaleY(.549); opacity: 0; }
.ly-arcane img { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.bb-rise.is-go .ly-arcane { animation: ac-show 5.2s .15s ease-in-out both; }
@keyframes ac-show { 0% { opacity: 0; } 18% { opacity: .95; } 55% { opacity: 1; } 85% { opacity: .55; } 100% { opacity: .35; } }
.bb-rise.is-go .ac-a { animation: ac-a 5.2s .15s cubic-bezier(.4, 0, .3, 1) both; }
@keyframes ac-a { to { transform: rotate(120deg); } }
.bb-rise.is-go .ac-b { animation: ac-b 5.2s .15s cubic-bezier(.4, 0, .3, 1) both; }
@keyframes ac-b { to { transform: rotate(-200deg); } }
.bb-rise.is-go .ac-c { animation: ac-c 5.2s .15s cubic-bezier(.4, 0, .3, 1) both; }
@keyframes ac-c { to { transform: rotate(90deg); } }
.bb-rise.is-go .ac-d { animation: ac-d 5.2s .15s cubic-bezier(.4, 0, .3, 1) both; }
@keyframes ac-d { to { transform: rotate(-150deg); } }
.bb-rise.is-go .ac-e { animation: ac-e 5.2s .15s cubic-bezier(.4, 0, .3, 1) both; }
@keyframes ac-e { to { transform: rotate(260deg); } }
/* 每层各写一组关键帧（不用 CSS 变量，保证交给显卡合成） */
/* 金色几何的闪光保留：法阵亮起时，外环跟着闪两下 */
.bb-rise.is-go .ly-ring { animation: ly-ring 4.6s .5s cubic-bezier(.45, 0, .25, 1) both; }
@keyframes ly-ring-flash { 0%, 100% { filter: none; } 25% { filter: brightness(1.9) sepia(.4); } 50% { filter: brightness(1.1); } 70% { filter: brightness(1.6) sepia(.3); } }
.ly-sparks { left: 0; top: 0; width: 2048px; height: 1152px; opacity: 0; pointer-events: none; }
.ly-sparks i { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; background: radial-gradient(closest-side, #e6f6ff, rgba(143, 212, 255, .6) 45%, transparent); opacity: 0; }
.bb-rise.is-on .ly-sparks i { animation: ly-spark var(--t) var(--d) ease-out infinite; }
@keyframes ly-spark { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--y)) scale(1.2); } }
.bb-rise.is-go .ly-sparks { animation: ac-show 5.2s .15s ease-in-out both; }
/* 关上时：俯视沙盘与按钮先退，分层场景接手 */
.bb.is-back .bb-rise { transition: transform 1.1s cubic-bezier(.3, 0, .2, 1), opacity .4s; }

/* ==== 无缝：打开时不淡入整层（立即可见），分层场景直接盖在真桌面上 ==== */
.bb.is-open { transition: none; }
.bb-view { background: #040506; }
.ly-pit { clip-path: ellipse(412px 228px at 1024px 600px); } /* 只露井口里那一块，井外就是底下那张真桌面（带数字、火漆、雾） */
.bb-rise { transform-origin: 0 0; }
.bb.is-dive .bb-rise { transform: scale(2.4); } /* 中心点由 JS 写在 inline transform-origin（和底下的桌面同一个屏幕点） */
.bb.is-ready .bb-view { transition: opacity .9s .1s; }

/* 合成层：转动、滑动的都交给显卡 */
.ly-ring, .ly-door { will-change: transform; }
.ly-gold { opacity: 0; background: radial-gradient(closest-side, rgba(255, 214, 140, .55), rgba(232, 170, 80, .18) 50%, transparent); }
.ly-cold { background: radial-gradient(closest-side, rgba(170, 205, 255, .42), rgba(120, 160, 230, .12) 55%, transparent); }
/* 棋子在屏幕上大小固定：全图时也看得清 */
.bb-pc img { height: 78px; }
.bb-pc.is-outer img { height: 70px; }
.bb-pc.is-shadow img { height: 58px; }
.bb-pc.is-sealed img { height: 42px; }
.bb-game img { height: 52px; }
.bb-plate b { font-size: 16px; }
.bb-plate i { font-size: 12px; }
.ly-rims { left: 0; top: 0; width: 2048px; height: 1152px; font-size: 20.48px; pointer-events: none; }

/* ==== 2026-10-27 第三版：右侧窄栏切看法（格局 / 谱系 / 局）；卷宗从铁皮箱里抽出来 ==== */
.bb .bb-view, .bb .bb-head, .bb .bb-side { opacity: 0; transition: opacity .9s; }
.bb.is-ready .bb-view, .bb.is-ready .bb-head, .bb.is-ready .bb-side { opacity: 1; }
.bb.is-back .bb-view, .bb.is-back .bb-head, .bb.is-back .bb-side { opacity: 0; transition: opacity .5s; }
.bb-view { right: 340px; }
.bb-vig { right: 340px; }

/* 侧栏 */
.bb-side { position: absolute; right: 0; top: 0; bottom: 0; z-index: 2; width: 340px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 14px; background: linear-gradient(180deg, rgba(12, 11, 9, .96), rgba(8, 8, 10, .98)); border-left: 1px solid rgba(232, 208, 155, .22); font-family: var(--serif); color: #ece4d2; }
.bb.has-over .bb-side { pointer-events: none; }
.bb-side .bb-spoil { width: 100%; }
.bb-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.bb-modes button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 8px; border: 1px solid rgba(232, 208, 155, .25); background: none; color: rgba(236, 230, 214, .75); cursor: pointer; font-family: inherit; transition: background .25s, color .25s; }
.bb-modes b { font-weight: 500; font-size: 17px; letter-spacing: .3em; text-indent: .3em; }
.bb-modes i { font-style: normal; font-size: 11px; letter-spacing: .1em; opacity: .75; }
.bb-modes button:hover { border-color: #e8d09b; color: #fff4d8; }
.bb-modes button.is-on { background: #e8d09b; border-color: #e8d09b; color: #1d140a; }
.bb-panel { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-color: rgba(232, 208, 155, .3) transparent; }
.bb-p-lede { margin: 2px 0 12px; font-size: 14px; line-height: 1.85; color: rgba(222, 226, 230, .78); }
.bb-side .bb-reset { align-self: stretch; padding: 8px; font-family: inherit; font-size: 13px; letter-spacing: .3em; color: #f2e8d2; background: none; border: 1px solid rgba(232, 208, 155, .25); cursor: pointer; }
.bb-side .bb-reset:hover { border-color: #e8d09b; }

/* 格局：一类一行，悬停这一类亮 */
.bb-kinds { list-style: none; margin: 0; padding: 0; }
.bb-kinds li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 7px 8px; border-bottom: 1px solid rgba(232, 208, 155, .08); }
.bb-kinds li[data-kind]:hover { background: rgba(232, 208, 155, .07); }
.bb-kinds img { height: 38px; justify-self: center; }
.bb-kinds b { font-weight: 500; font-size: 15.5px; }
.bb-kinds span { font-size: 12.5px; color: rgba(222, 226, 230, .55); }
.bb-kinds .is-game img { height: 28px; }
.bb[data-kind="crown"] .bb-pc:not(.is-k-crown), .bb[data-kind="army"] .bb-pc:not(.is-k-army), .bb[data-kind="house"] .bb-pc:not(.is-k-house),
.bb[data-kind="nation"] .bb-pc:not(.is-k-nation), .bb[data-kind="shadow"] .bb-pc:not(.is-k-shadow) { opacity: .15; }
.bb[data-kind="crown"] .bb-pc.is-k-crown .bb-plate, .bb[data-kind="army"] .bb-pc.is-k-army .bb-plate, .bb[data-kind="house"] .bb-pc.is-k-house .bb-plate,
.bb[data-kind="nation"] .bb-pc.is-k-nation .bb-plate, .bb[data-kind="shadow"] .bb-pc.is-k-shadow .bb-plate { opacity: 1; transform: translateX(-50%); }
.bb-peek { display: grid; grid-template-columns: 48px 1fr; column-gap: 12px; align-items: start; margin-top: 16px; padding: 14px; min-height: 96px; border: 1px solid rgba(232, 208, 155, .2); background: rgba(255, 255, 255, .02); }
.bb-peek > p:only-child { grid-column: span 2; margin: 0; font-size: 13.5px; color: rgba(222, 226, 230, .5); }
.bb-peek img { grid-row: span 4; height: 64px; justify-self: center; }
.bb-peek b { font-weight: 600; font-size: 17px; color: #fbf4e4; }
.bb-peek i { font-style: normal; font-size: 12.5px; color: rgba(222, 226, 230, .6); }
.bb-peek p { margin: 6px 0 0; font-size: 14px; line-height: 1.75; }
.bb-peek span { margin-top: 6px; font-size: 12px; letter-spacing: .3em; color: #e8d09b; }

/* 谱系：分组的树 */
.bb-grp { margin-bottom: 14px; }
.bb-grp h5 { margin: 0 0 4px; padding: 4px 0; font-weight: 400; font-size: 12px; letter-spacing: .4em; color: #e8d09b; border-bottom: 1px solid rgba(232, 208, 155, .22); }
.bb-row { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; width: 100%; padding: 6px 6px; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font-family: inherit; }
.bb-row img { grid-row: span 2; height: 34px; justify-self: center; }
.bb-row b { font-weight: 500; font-size: 15px; color: #fbf4e4; }
.bb-row i { font-style: normal; font-size: 12px; color: rgba(222, 226, 230, .55); }
.bb-row:hover, .bb-row.is-hot { background: rgba(232, 208, 155, .09); }
.bb-sub { list-style: none; margin: 0 0 4px; padding: 0 0 0 46px; }
.bb-sub li { position: relative; padding: 2px 0 2px 12px; font-size: 12.5px; line-height: 1.6; color: rgba(222, 226, 230, .58); }
.bb-sub li::before { content: '—'; position: absolute; left: 0; color: rgba(232, 208, 155, .4); }
.bb-row-sealed { margin: 4px 0 0 6px; font-size: 12px; font-style: italic; color: rgba(222, 226, 230, .4); }

/* 局 */
.bb-games { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.bb-gbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(208, 83, 63, .35); background: none; color: #ece4d2; font-family: inherit; font-size: 13.5px; cursor: pointer; }
.bb-gbtn img { height: 18px; }
.bb-gbtn.is-on { background: #8e2a1c; border-color: #8e2a1c; color: #fff1e6; }
.bb-gbtn:disabled { opacity: .45; cursor: default; }
.bb-gcard h4 { margin: 0; font-weight: 600; font-size: 20px; letter-spacing: .12em; color: #fbf4e4; }
.bb-gcard > i { display: block; margin: 2px 0 8px; font-family: var(--display-latin); font-size: 14px; color: rgba(232, 208, 155, .7); }
.bb-gcard h5 { margin: 14px 0 4px; font-weight: 400; font-size: 12px; letter-spacing: .4em; color: #e8d09b; }
.bb-why { list-style: none; margin: 0; padding: 0; }
.bb-why li { position: relative; padding: 4px 0 4px 14px; font-size: 14px; line-height: 1.75; }
.bb-why li::before { content: '—'; position: absolute; left: 0; color: #c8573f; }
.bb-why li.bb-sealed, .bb-gcard li.bb-sealed { font-style: italic; color: rgba(222, 226, 230, .45); }
.bb-side .bb-lg-ties { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: rgba(236, 230, 214, .75); }
.bb-side .bb-lg-ties li { display: flex; align-items: center; gap: 6px; }
.bb-side .bb-lg-ties i { width: 20px; border-top: 2px solid; }
.bb-side .bb-lg-ties .is-ally i { border-color: #e3c27e; } .bb-side .bb-lg-ties .is-foe i { border-color: #d0533f; border-top-style: dashed; }
.bb-side .bb-lg-ties .is-hold i { border-color: #8fb4d8; } .bb-side .bb-lg-ties .is-bet i { border-color: #b9a77e; border-top-style: dotted; } .bb-side .bb-lg-ties .is-other i { border-color: #b7a3d6; border-top-style: dashed; }
.bb-wall-btn { width: 100%; margin-top: 16px; padding: 10px; font-family: inherit; font-size: 14px; letter-spacing: .4em; color: #fff1e6; background: #8e2a1c; border: 0; cursor: pointer; }
.bb-wall-btn:hover { background: #a8341f; }
.bb[data-mode="game"] .bb-pc.is-off { opacity: .14; }
.bb[data-mode="game"] .bb-pc.is-pin .bb-plate { opacity: 1; transform: translateX(-50%); }
.bb[data-mode="game"] .bb-tie path { opacity: .9; }
.bb[data-mode="game"] .bb-game:not(.is-cur) { opacity: .35; }
.bb-game.is-cur img { transform: scale(1.35); }
.bb-game.is-cur span { opacity: 1; }
.bb[data-mode="game"].has-hot .bb-tie:not(.is-hot) path { opacity: .25; }

/* ==== 卷宗：铁皮箱 + 牛皮纸（bal-kraft2：左页 8–47.5%，书脊 49.3%，右页 50.5–92.5%，上下 6–93%） ==== */
.bb-pull { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.bb-box { position: absolute; bottom: -3%; left: calc(50% - min(260px, 20vw)); width: min(520px, 40vw); transform: translateY(115%); filter: drop-shadow(0 -10px 30px rgba(0, 0, 0, .8)); z-index: 2; pointer-events: none; }
.bb-fd { container-type: inline-size; position: relative; width: min(84vw, calc((100svh - 72px - 96px) * 1.181)); aspect-ratio: 1058 / 896; margin-top: 34px; perspective: 2400px; font-family: var(--serif); color: #2a2016; font-size: clamp(14px, 1.85cqw, 19px); z-index: 3; }
.bb-fd-bg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .75)); }
.bb-fd-l, .bb-fd-r { position: absolute; top: 9%; height: 80%; box-sizing: border-box; }
.bb-fd-l { left: 10.5%; width: 34.5%; display: flex; flex-direction: column; }
.bb-fd-r { left: 53%; width: 37%; }
.bb-fd-stamp { align-self: flex-start; margin: 0; padding: .15em .6em; font-size: .78em; letter-spacing: .3em; color: #8a2a18; border: 2px solid rgba(138, 42, 24, .75); transform: rotate(-3deg); }
.bb-fd-crest { display: grid; place-items: center; width: 5.4em; height: 5.4em; margin: 1em 0 .2em; border-radius: 50%; border: 1px dashed rgba(90, 70, 50, .5); position: relative; }
.bb-fd-crest img { height: 4em; opacity: .35; filter: grayscale(.5); }
.bb-fd-crest span { position: absolute; bottom: -1.5em; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .7em; letter-spacing: .3em; color: #9a8a70; font-style: italic; }
.bb-fd-l h3 { margin: 1.2em 0 0; font-weight: 700; font-size: 1.9em; line-height: 1.25; letter-spacing: .06em; color: #1d150d; }
.bb-fd-en { margin: .2em 0 0; font-family: var(--display-latin); font-size: .95em; color: #6a4e30; }
.bb-fd-lead { margin: 1em 0 0; padding-top: .8em; border-top: 1px solid rgba(80, 55, 30, .3); font-size: 1.02em; line-height: 1.85; }
.bb-fd-first { margin: auto 0 0; padding-top: .8em; font-size: .78em; letter-spacing: .25em; color: #8a6d4c; }
.bb-todo { margin: .9em 0 0; padding: .45em .7em; font-size: .82em; line-height: 1.7; font-style: italic; color: #8f826c; border: 1px dashed rgba(120, 100, 75, .45); }
/* 右页：一页一个栏目 */
.bb-fd-pg { display: none; height: 100%; overflow: hidden; }
.bb-fd-pg.is-on { display: block; animation: bb-pg .3s ease both; }
@keyframes bb-pg { from { opacity: 0; transform: translateX(10px); } }
.bb-fd-pg h4 { margin: 0 0 .8em; padding-bottom: .3em; font-weight: 600; font-size: .9em; letter-spacing: .5em; color: #8a2a18; border-bottom: 2px solid rgba(138, 42, 24, .35); }
.bb-fd-pg h5 { margin: 1em 0 .35em; font-weight: 600; font-size: .78em; letter-spacing: .35em; color: #7a5a3a; }
.bb-fd-pg ul { list-style: none; margin: 0; padding: 0; }
.bb-fd-pg li { position: relative; padding: .22em 0 .22em 1em; line-height: 1.75; }
.bb-fd-pg li::before { content: ''; position: absolute; left: .1em; top: .85em; width: .38em; height: .38em; background: #8a6d4c; transform: rotate(45deg); }
.bb-fd-pg li.bb-sealed { color: #9a8a70; font-style: italic; }
.bb-fd-pg li.bb-sealed::before { background: #b23a2a; }
.bb-moves li { margin-bottom: .45em; padding: .5em .7em; background: rgba(142, 42, 28, .08); border-left: 3px solid #a8341f; }
.bb-moves li::before { display: none; }
.bb-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .9em .8em; }
.bb-photos figure { margin: 0; padding: .4em .4em .5em; background: #f4ecd9; box-shadow: 0 .2em .5em rgba(40, 25, 10, .35); }
.bb-photos figure:nth-child(odd) { transform: rotate(-1.2deg); } .bb-photos figure:nth-child(even) { transform: rotate(1deg); }
.bb-clip { display: none; }
.bb-ph { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #3a332b, #1d1915); overflow: hidden; }
.bb-ph img { height: 70%; opacity: .25; }
.bb-ph span { position: absolute; bottom: .4em; font-size: .62em; letter-spacing: .35em; color: rgba(236, 226, 205, .5); }
.bb-photos figcaption { margin-top: .4em; }
.bb-photos figcaption b { display: block; font-weight: 600; font-size: .9em; line-height: 1.35; }
.bb-photos figcaption span { display: block; font-size: .72em; line-height: 1.5; color: #6a5038; }
.bb-photos .bb-sealed { grid-column: span 2; margin: 0; font-size: .8em; font-style: italic; color: #9a8a70; }
.bb-org { display: flex; flex-direction: column; align-items: center; padding-top: .5em; }
.bb-org-top { padding: .45em 1.2em; font-weight: 600; background: #2a2016; color: #f4ecdc; }
.bb-org-kids { position: relative; display: flex; flex-direction: column; gap: .6em; width: 100%; margin-top: 1.4em; padding-left: 1.4em; box-sizing: border-box; border-left: 2px solid rgba(80, 55, 30, .45); }
.bb-org-kids::before { content: ''; position: absolute; left: -2px; top: -1.4em; height: 1.4em; border-left: 2px solid rgba(80, 55, 30, .45); }
.bb-org-kids > div { position: relative; padding: .45em .7em; line-height: 1.6; background: rgba(255, 255, 255, .45); border: 1px solid rgba(80, 55, 30, .3); }
.bb-org-kids > div::before { content: ''; position: absolute; left: calc(-1.4em - 1px); top: 50%; width: 1.4em; border-top: 2px solid rgba(80, 55, 30, .45); }
.bb-f-rel li { display: grid; grid-template-columns: 3.6em auto 1fr; gap: .5em; align-items: baseline; padding-left: 0; }
.bb-f-rel li::before { display: none; }
.bb-f-rel b { font-weight: 700; font-size: .85em; letter-spacing: .1em; }
.bb-f-rel .is-ally b { color: #8a6a1e; } .bb-f-rel .is-foe b { color: #a3321e; } .bb-f-rel .is-hold b { color: #3d5d7e; } .bb-f-rel .is-bet b { color: #6a5a3a; } .bb-f-rel .is-other b { color: #5a4a6a; }
.bb-f-rel button { padding: 0; border: 0; border-bottom: 1px solid rgba(42, 32, 22, .45); background: none; font: inherit; font-weight: 600; color: #1d150d; cursor: pointer; white-space: nowrap; }
.bb-f-rel button:hover { color: #8a2a18; border-color: #8a2a18; }
.bb-f-rel span { font-size: .88em; color: #5a4430; }
.bb-story li { padding-left: 0; }
.bb-story li::before { display: none; }
.bb-story em { display: inline-block; margin-right: .6em; padding: 0 .4em; font-style: normal; font-size: .75em; letter-spacing: .1em; color: #f4ecdc; background: #6a4e30; }
/* 索引标签：贴在右页外缘 */
.bb-tabs { position: absolute; left: 92.4%; top: 10%; display: flex; flex-direction: column; gap: .3em; z-index: 1; }
.bb-tabs button { writing-mode: vertical-rl; padding: .7em .32em; font-family: inherit; font-size: .78em; letter-spacing: .35em; color: #5a4430; background: #e2d5b8; border: 1px solid rgba(80, 55, 30, .35); border-left: 0; border-radius: 0 .5em .5em 0; box-shadow: .15em .15em .3em rgba(0, 0, 0, .35); cursor: pointer; transition: transform .2s, background .2s; }
.bb-tabs button:hover { transform: translateX(.2em); }
.bb-tabs button.is-on { background: #f6efdd; color: #8a2a18; font-weight: 700; transform: translateX(.25em); }
.bb-tabs button.is-todo { color: #a89a80; font-style: italic; }
/* 封面：盖在右半边，开场向左翻开 */
.bb-fd-cover { position: absolute; left: 49.3%; top: 0; width: 50.7%; height: 100%; transform-origin: 0 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; z-index: 2; pointer-events: none; }
.bb-fd-cover img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bb-fd-cover span { position: absolute; left: 50%; top: 30%; transform: translateX(-50%) rotate(-4deg); padding: .2em .7em; font-size: .9em; letter-spacing: .35em; color: #8a2a18; border: 2px solid rgba(138, 42, 24, .75); white-space: nowrap; }
.bb-fd-cover b { position: absolute; left: 0; right: 0; top: 45%; text-align: center; font-size: 1.5em; letter-spacing: .1em; color: #2a2016; }
.bb-fd .bb-x { top: -42px; right: 0; }
@media (prefers-reduced-motion: reduce) { .bb, .bb-over { transition: none; } .bb.is-rise .bb-map > *, .bb-game img { animation: none; } }

/* 地图上的名牌缩小一号（地图放进左边之后变小了），局里只显示名字 */
.bb-plate { padding: 2px 8px 3px; }
.bb-plate b { font-size: 14px; }
.bb-plate i { font-size: 11px; }
.bb[data-mode="game"] .bb-pc.is-pin .bb-plate i { display: none; }
.bb-over { background: rgba(3, 4, 5, .86); }
.bb-fd-first { align-self: flex-end; }
.bb-map.is-glide { transition: transform .8s cubic-bezier(.3, .7, .2, 1); }

/* 局：所有旗照常显示，牵涉其中的加亮、写名字（作者：不该把其他旗变透明） */
.bb[data-mode="game"] .bb-pc.is-off { opacity: .7; }
.bb[data-mode="game"] .bb-pc.is-pin img { filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .75)) drop-shadow(0 0 10px rgba(255, 210, 130, .85)); }
.bb[data-mode="game"] .bb-pc.is-pin .bb-plate { border-color: #e8d09b; }
/* 格局：勾选显示哪几类 */
.bb-pc.is-hidden { opacity: 0 !important; pointer-events: none; }
.bb-kinds label { display: contents; cursor: pointer; }
.bb-kinds li[data-kind] { grid-template-columns: 18px 36px 1fr auto; }
.bb-kinds input { width: 15px; height: 15px; margin: 0; accent-color: #c9a868; cursor: pointer; }
/* 局：线上写字（只在「局」里有线，所以不挤） */
.bb[data-mode="game"] .bb-tie text { display: block; opacity: 1; font-family: var(--serif); font-size: calc(14px * var(--z, 1)); letter-spacing: .04em; text-anchor: middle; fill: #f4ecdc; paint-order: stroke; stroke: rgba(6, 6, 8, .92); stroke-width: calc(5px * var(--z, 1)); stroke-linejoin: round; }
.bb[data-mode="game"] .bb-tie text .k { font-weight: 700; }
.bb-tie.is-ally text .k { fill: #f0cf86; } .bb-tie.is-foe text .k { fill: #ff8c74; } .bb-tie.is-hold text .k { fill: #a9cdf0; } .bb-tie.is-bet text .k { fill: #d8c9a0; }
.bb[data-mode="game"].has-hot .bb-tie:not(.is-hot) text { opacity: .25; }
.bb-fd-crest:not(.is-todo) { border: 0; } .bb-fd-crest img.is-crest { height: 5.2em; opacity: 1; filter: drop-shadow(0 .2em .3em rgba(40, 25, 10, .4)); }