/* 首杀 FirstBlood — 组件样式（firstblood.css）
   依赖 tokens.css 里的变量。所有类名以 fb- 开头，包在 .fb 容器里用。
   响应式用容器查询：组件看的是自己所在容器的宽度，不看屏幕。
   三条规矩：霓虹只给招牌和小怪兽；游戏物件（按钮、筹码、期号）用像素切角加厚底；
   信息区（表格、局势板、工具按钮）用小圆角、细线、不发光。 */

/* ───────── 基础 ───────── */
.fb, .fb *, .fb *::before, .fb *::after { box-sizing: border-box; }
.fb { font-family: var(--font-body); font-size: 15px; line-height: 25px; color: var(--fb-ink); background: var(--fb-night); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; }
:where(.fb) a { color: inherit; text-decoration: none; }
:where(.fb) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:where(.fb) img { display: block; max-width: 100%; }
:where(.fb) h1, :where(.fb) h2, :where(.fb) h3, :where(.fb) p, :where(.fb) ol, :where(.fb) ul, :where(.fb) blockquote { margin: 0; padding: 0; }
:where(.fb) ol, :where(.fb) ul { list-style: none; }
.fb :focus-visible { outline: 0; box-shadow: var(--fb-ring-focus); }

/* 像素切角：角上缺一个 --fb-n 见方的小方块，和小怪兽同一种格子感 */
.fb-px, .fb-btn::before, .fb-btn::after, .fb-react__btn::before, .fb-react__btn::after, .fb-ep, .fb-badge, .fb-nameplate, .fb-replay__play, .fb-bet__opt::before, .fb-bet__opt::after {
  clip-path: polygon(0 var(--fb-n), var(--fb-n) var(--fb-n), var(--fb-n) 0, calc(100% - var(--fb-n)) 0, calc(100% - var(--fb-n)) var(--fb-n), 100% var(--fb-n), 100% calc(100% - var(--fb-n)), calc(100% - var(--fb-n)) calc(100% - var(--fb-n)), calc(100% - var(--fb-n)) 100%, var(--fb-n) 100%, var(--fb-n) calc(100% - var(--fb-n)), 0 calc(100% - var(--fb-n)));
}
.fb-px { --fb-n: 4px; }

/* ───────── 招牌字和标题 ───────── */
.fb-sign { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; color: var(--fb-tube); text-shadow: var(--fb-glow-green); text-wrap: balance; }
.fb-sign--magenta { text-shadow: var(--fb-glow-magenta); }
.fb-sign--cyan { text-shadow: var(--fb-glow-cyan); }
.fb-sign--flicker { animation: fb-flicker 7s linear infinite; }
.fb-h { font-family: var(--font-display); font-weight: 400; letter-spacing: .02em; color: var(--fb-ink); text-wrap: balance; }
.fb-kicker { font-family: var(--font-latin); font-size: 12px; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--fb-neon-green); }
.fb-kicker--dim { color: var(--fb-ink-3); }
.fb-num { font-family: var(--font-latin); font-weight: 400; }
.fb-time { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .02em; font-weight: 500; color: var(--fb-ink-2); white-space: nowrap; }
.fb-crt { position: relative; }
.fb-crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px); }

/* ───────── 小怪兽 ───────── */
.fb-monster { --m: 18px; display: inline-block; flex: none; width: var(--m); height: var(--m); background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 9 9%22 shape-rendering=%22crispEdges%22%3E%3Cpath fill=%22%23ff2fd1%22 d=%22M2 0h1v1H2zM6 0h1v1H6zM1 1h3v1H1zM5 1h3v1H5zM0 2h9v1H0zM0 3h2v1H0zM4 3h1v1H4zM7 3h2v1H7z%22/%3E%3Cpath fill=%22%23ffffff%22 d=%22M2 3h1v1H2zM5 3h1v1H5z%22/%3E%3Cpath fill=%22%230a0d0f%22 d=%22M3 3h1v1H3zM6 3h1v1H6z%22/%3E%3Cpath fill=%22%2322e3ff%22 d=%22M0 4h9v1H0zM1 5h7v1H1zM3 6h1v1H3zM5 6h1v1H5z%22/%3E%3Cpath fill=%22%2339ff8f%22 d=%22M1 6h2v1H1zM4 6h1v1H4zM6 6h2v1H6zM0 7h2v1H0zM3 7h1v1H3zM5 7h1v1H5zM7 7h2v1H7z%22/%3E%3Cpath fill=%22%23c8561b%22 d=%22M0 8h1v1H0zM3 8h1v1H3zM5 8h1v1H5zM8 8h1v1H8z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; image-rendering: pixelated; vertical-align: middle; }
.fb-monster--up { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 11 11%22 shape-rendering=%22crispEdges%22%3E%3Cpath fill=%22%2339ff8f%22 d=%22M1 0h1v1H1zM9 0h1v1H9zM2 8h2v1H2zM5 8h1v1H5zM7 8h2v1H7zM1 9h2v1H1zM4 9h1v1H4zM6 9h1v1H6zM8 9h2v1H8z%22/%3E%3Cpath fill=%22%23ff2fd1%22 d=%22M5 0h1v1H5zM3 2h1v1H3zM7 2h1v1H7zM2 3h3v1H2zM6 3h3v1H6zM1 4h9v1H1zM1 5h1v1H1zM4 5h2v1H4zM8 5h2v1H8z%22/%3E%3Cpath fill=%22%23ffffff%22 d=%22M2 5h2v1H2zM6 5h2v1H6z%22/%3E%3Cpath fill=%22%2322e3ff%22 d=%22M1 6h9v1H1zM2 7h7v1H2zM4 8h1v1H4zM6 8h1v1H6z%22/%3E%3Cpath fill=%22%23c8561b%22 d=%22M1 10h1v1H1zM4 10h1v1H4zM6 10h1v1H6zM9 10h1v1H9z%22/%3E%3C/svg%3E"); }
.fb-monster--down { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 11 11%22 shape-rendering=%22crispEdges%22%3E%3Cpath fill=%22%238a4a80%22 d=%22M3 2h1v1H3zM7 2h1v1H7zM2 3h3v1H2zM6 3h3v1H6zM1 4h9v1H1zM1 5h1v1H1zM4 5h2v1H4zM8 5h1v1H8z%22/%3E%3Cpath fill=%22%230a0d0f%22 d=%22M2 5h2v1H2zM6 5h2v1H6z%22/%3E%3Cpath fill=%22%2322e3ff%22 d=%22M9 5h1v1H9z%22/%3E%3Cpath fill=%22%233d8793%22 d=%22M1 6h9v1H1zM2 7h7v1H2zM4 8h1v1H4zM6 8h1v1H6z%22/%3E%3Cpath fill=%22%234f8f6c%22 d=%22M2 8h2v1H2zM5 8h1v1H5zM7 8h2v1H7zM1 9h2v1H1zM4 9h1v1H4zM6 9h1v1H6zM8 9h2v1H8z%22/%3E%3Cpath fill=%22%2375462c%22 d=%22M1 10h1v1H1zM4 10h1v1H4zM6 10h1v1H6zM9 10h1v1H9z%22/%3E%3C/svg%3E"); }
.fb-monster--walk { animation: fb-walk .64s var(--fb-ease-pixel) infinite; }
.fb-monster--glow { filter: drop-shadow(0 0 6px rgba(255,47,209,.7)) drop-shadow(0 0 18px rgba(255,47,209,.35)); }
.fb-loading { display: inline-flex; align-items: center; gap: 10px; color: var(--fb-ink-2); font-size: 13px; line-height: 20px; }

/* ───────── 按钮：游戏键（像素切角 + 厚底） ───────── */
.fb-btn { --face: var(--fb-surface-2); --edge: var(--fb-line-strong); --key: var(--fb-night-deep); --txt: var(--fb-ink); --fb-n: 4px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--fb-control-md); padding: 0 20px;
  font: 500 14px/20px var(--font-body); color: var(--txt); white-space: nowrap; user-select: none;
  filter: drop-shadow(0 3px 0 var(--key)); transition: transform var(--fb-dur-press) var(--fb-ease-out), filter var(--fb-dur-state) var(--fb-ease-out); }
.fb-btn::before, .fb-btn::after { content: ""; position: absolute; }
.fb-btn::before { inset: 0; z-index: -2; background: var(--edge); }
.fb-btn::after { inset: 2px; z-index: -1; background: var(--face); transition: background var(--fb-dur-state); }
.fb-btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.fb-btn:hover { --face: var(--fb-surface-3); --edge: var(--fb-ink-2); }
.fb-btn:active { transform: translateY(2px); filter: drop-shadow(0 1px 0 var(--key)); }
/* 看：一屏只有一个 */
.fb-btn--play { --face: var(--fb-neon-green); --edge: var(--fb-neon-green); --key: var(--fb-green-key); --txt: var(--fb-on-green); font-weight: 700; }
.fb-btn--play:hover { --face: var(--fb-neon-green); --edge: var(--fb-tube); filter: drop-shadow(0 3px 0 var(--key)) drop-shadow(var(--fb-glow-soft)); }
/* 进店：开机 → Discord */
.fb-btn--join { --face: var(--fb-neon-magenta); --edge: var(--fb-neon-magenta); --key: var(--fb-magenta-key); --txt: var(--fb-on-magenta); font-weight: 700; }
.fb-btn--join:hover { --face: var(--fb-neon-magenta); --edge: var(--fb-tube); filter: drop-shadow(0 3px 0 var(--key)) drop-shadow(0 0 18px rgba(255,47,209,.35)); }
.fb-btn--ghost { --face: var(--fb-night); --key: transparent; }
.fb-btn--sm { height: var(--fb-control-sm); padding: 0 14px; font-size: 13px; }
.fb-btn--lg { height: var(--fb-control-lg); padding: 0 28px; font-size: 16px; line-height: 22px; }
.fb-btn--sign { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: .08em; }
.fb-btn--lg.fb-btn--sign { font-size: 24px; }
.fb-btn--block { display: flex; width: 100%; }
.fb-btn:disabled, .fb-btn[aria-disabled="true"] { --face: var(--fb-surface-2); --edge: var(--fb-line); --key: transparent; --txt: var(--fb-ink-off); cursor: not-allowed; transform: none; filter: none; }
.fb-btn[aria-busy="true"] { pointer-events: none; }
.fb-link { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/20px var(--font-body); color: var(--fb-ink); padding: 4px 0; border-bottom: 2px solid var(--fb-line-strong); transition: border-color var(--fb-dur-state); }
.fb-link:hover { border-color: var(--fb-neon-green); }

/* 圆键：播放控制 */
.fb-iconbtn { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--fb-radius-pill); color: var(--fb-ink-2); transition: color var(--fb-dur-state), background var(--fb-dur-state), transform var(--fb-dur-press); }
.fb-iconbtn svg, .fb-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fb-iconbtn:hover { color: var(--fb-ink); background: var(--fb-surface-2); }
.fb-iconbtn:active { transform: scale(.94); }
.fb-iconbtn:disabled { color: var(--fb-ink-off); background: none; cursor: not-allowed; }
.fb-iconbtn--play { width: 52px; height: 52px; color: var(--fb-neon-green); background: var(--fb-green-tint); border: 2px solid var(--fb-neon-green); }
.fb-iconbtn--play svg { width: 24px; height: 24px; fill: currentColor; stroke-width: 1.2; }
.fb-iconbtn--play:hover { color: var(--fb-on-green); background: var(--fb-neon-green); }
.fb-iconbtn--line { border: 1px solid var(--fb-line-strong); }

/* 工具按钮：信息区用，规整、不发光 */
.fb-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--fb-control-sm); padding: 0 12px; border-radius: var(--fb-radius-sm); border: 1px solid var(--fb-line); background: var(--fb-surface-2); color: var(--fb-ink-2); font: 500 13px/18px var(--font-body); white-space: nowrap; transition: color var(--fb-dur-state), border-color var(--fb-dur-state), background var(--fb-dur-state); }
.fb-tool:hover { color: var(--fb-ink); border-color: var(--fb-line-strong); }
.fb-tool[aria-pressed="true"], .fb-tool.is-on { color: var(--fb-neon-green); background: var(--fb-green-tint); border-color: var(--fb-green-key); }
.fb-tool:disabled { color: var(--fb-ink-off); cursor: not-allowed; }

/* 上帝视角：金＝权限 */
.fb-god { display: inline-flex; align-items: center; gap: 8px; height: var(--fb-control-md); padding: 0 16px 0 12px; border-radius: var(--fb-radius-pill); border: 1.5px solid var(--fb-gold); background: var(--fb-gold-tint); color: var(--fb-gold); font: 700 14px/20px var(--font-body); white-space: nowrap; transition: background var(--fb-dur-state), color var(--fb-dur-state); }
.fb-god svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fb-god small { font: 500 12px/16px var(--font-body); opacity: .85; }
.fb-god:hover { background: var(--fb-surface-3); }
.fb-god[aria-pressed="true"] { background: var(--fb-gold); color: var(--fb-on-gold); }

/* ───────── 标签、筹码、徽章 ───────── */
.fb-tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--fb-radius-xs); background: var(--fb-surface-3); color: var(--fb-ink-2); font: 500 12px/18px var(--font-body); white-space: nowrap; }
.fb-tag--line { background: none; border: 1px solid var(--fb-line-strong); }
.fb-tag--alive { color: var(--fb-neon-green); background: var(--fb-green-tint); }
.fb-tag--out { color: var(--fb-ink-3); background: none; border: 1px solid var(--fb-line); }
.fb-tag--wolf { color: var(--fb-role-wolf); background: var(--fb-wolf-tint); }
.fb-tag--god { color: var(--fb-role-god); background: var(--fb-cyan-tint); }
.fb-tag--villager { color: var(--fb-role-villager); background: var(--fb-surface-3); }
.fb-tag--gold { color: var(--fb-gold); background: var(--fb-gold-tint); }
.fb-tag--warn { color: var(--fb-rust-text); background: var(--fb-rust-tint); }
.fb-tag--info { color: var(--fb-neon-cyan); background: var(--fb-cyan-tint); }
.fb-tag--new { color: var(--fb-neon-magenta); background: var(--fb-magenta-tint); }

.fb-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--fb-radius-pill); border: 1px solid var(--fb-line-strong); color: var(--fb-ink); font: 500 14px/20px var(--font-body); white-space: nowrap; transition: background var(--fb-dur-state), border-color var(--fb-dur-state), color var(--fb-dur-state); }
.fb-chip__n { font-family: var(--font-latin); font-size: 12px; line-height: 16px; color: var(--fb-ink-3); }
.fb-chip:hover { border-color: var(--fb-ink-2); background: var(--fb-surface-2); }
.fb-chip[aria-pressed="true"] { background: var(--fb-neon-green); border-color: var(--fb-neon-green); color: var(--fb-on-green); font-weight: 700; }
.fb-chip[aria-pressed="true"] .fb-chip__n { color: var(--fb-on-green); }

.fb-badge, .fb-ep { --fb-n: 2px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; font-family: var(--font-latin); font-size: 12px; line-height: 22px; letter-spacing: .04em; white-space: nowrap; background: var(--fb-night); color: var(--fb-ink); }
.fb-ep { height: 26px; padding: 0 10px; font-size: 13px; }
.fb-badge--new { background: var(--fb-neon-magenta); color: var(--fb-on-magenta); }
.fb-badge--live { background: var(--fb-neon-green); color: var(--fb-on-green); }
.fb-badge--live::before { content: ""; width: 6px; height: 6px; background: currentColor; animation: fb-blink 1.2s steps(2, end) infinite; }
.fb-badge--mvp { background: var(--fb-gold); color: var(--fb-on-gold); }
.fb-badge--mvp::before { content: ""; width: 15px; height: 5px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 9 3%22 shape-rendering=%22crispEdges%22%3E%3Cpath fill=%22%231d1404%22 d=%22M0 0h1v1H0zM4 0h1v1H4zM8 0h1v1H8zM0 1h2v1H0zM3 1h3v1H3zM7 1h2v1H7zM0 2h9v1H0z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; image-rendering: pixelated; }
.fb-badge--time { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--fb-ink); }

/* ───────── 头像和名牌色 ───────── */
.fb-avatar { --s: var(--fb-avatar-md); position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: var(--fb-radius-pill); background: var(--a, var(--fb-surface-3)); }
.fb-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.fb-avatar--xs { --s: var(--fb-avatar-xs); }
.fb-avatar--sm { --s: var(--fb-avatar-sm); }
.fb-avatar--lg { --s: var(--fb-avatar-lg); }
.fb-avatar--sq { border-radius: var(--fb-radius-sm); }
.fb-stack { display: inline-flex; align-items: center; }
.fb-stack .fb-avatar { box-shadow: 0 0 0 2px var(--fb-surface-1); }
.fb-stack .fb-avatar + .fb-avatar { margin-left: -8px; }
.fb-stack__more { margin-left: 6px; font-family: var(--font-latin); font-size: 11px; line-height: 16px; color: var(--fb-ink-3); }
.fb-nameplate { --fb-n: 3px; display: inline-flex; align-items: center; height: 30px; padding: 0 14px; background: var(--a, var(--fb-surface-3)); color: var(--a-ink, var(--fb-ink)); font-family: var(--font-display); font-size: 20px; line-height: 26px; letter-spacing: .04em; white-space: nowrap; }
.fb-a-zhanggui { --a: var(--fb-artist-zhanggui); --a-ink: var(--fb-night); }
.fb-a-tangtang { --a: var(--fb-artist-tangtang); --a-ink: var(--fb-night); }
.fb-a-ala { --a: var(--fb-artist-ala); --a-ink: var(--fb-night); }
.fb-a-lengyue { --a: var(--fb-artist-lengyue); --a-ink: var(--fb-night); }
.fb-a-laok { --a: var(--fb-artist-laok); --a-ink: var(--fb-night); }
.fb-a-dida { --a: var(--fb-artist-dida); --a-ink: var(--fb-night); }
.fb-a-lingxiao { --a: var(--fb-artist-lingxiao); --a-ink: var(--fb-tube); }
.fb-a-naigai { --a: var(--fb-artist-naigai); --a-ink: var(--fb-night); }
.fb-a-luzong { --a: var(--fb-artist-luzong); --a-ink: var(--fb-ink); }
.fb-a-xiaoman { --a: var(--fb-artist-xiaoman); --a-ink: var(--fb-night); }
.fb-a-xuanji { --a: var(--fb-artist-xuanji); --a-ink: var(--fb-ink); }
.fb-a-linghao { --a: var(--fb-artist-linghao); --a-ink: var(--fb-night); }
.fb-a-baicheng { --a: var(--fb-artist-baicheng); --a-ink: var(--fb-night); }
.fb-a-tanchuang { --a: var(--fb-artist-tanchuang); --a-ink: var(--fb-night); }
.fb-a-yihao { --a: var(--fb-artist-yihao); --a-ink: var(--fb-night); }
.fb-a-nanfeng { --a: var(--fb-artist-nanfeng); --a-ink: var(--fb-night); }
.fb-a-wenda { --a: var(--fb-artist-wenda); --a-ink: var(--fb-night); }

/* ───────── 记号：头像上的一套图标语言 ─────────
   圈＝此刻的状态；四个固定位置各管一件事：
   正上方 当下的事（验人牌、下一位）｜左上 警徽｜右上 票数｜右下 身份章（只在上帝视角出现） */
.fb-seat { --s: var(--fb-avatar-md); --ring: var(--fb-line); position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: calc(var(--s) + 24px); padding-top: 22px; transition: transform var(--fb-dur-enter) var(--fb-ease-pop), opacity var(--fb-dur-enter); }
.fb-seat__face { position: relative; width: var(--s); height: var(--s); border-radius: var(--fb-radius-pill); background: var(--a, var(--fb-surface-3)); box-shadow: 0 0 0 2px var(--fb-night), 0 0 0 4px var(--ring); }
.fb-seat__face img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.fb-seat__name { font: 500 12px/14px var(--font-body); color: var(--fb-ink-2); white-space: nowrap; }
.fb-seat--sm { --s: var(--fb-avatar-sm); width: calc(var(--s) + 10px); gap: 4px; }
.fb-seat--sm .fb-seat__name { font-size: 10px; line-height: 12px; }
.fb-seat--xs { --s: 26px; width: calc(var(--s) + 4px); gap: 3px; }
.fb-seat--xs .fb-seat__name { font-size: 9px; line-height: 10px; }
.fb-seat--xs .fb-mark-role { right: -5px; bottom: -4px; width: 15px; height: 15px; font-size: 9px; box-shadow: 0 0 0 1.5px var(--fb-night); }
.fb-seat--xs .fb-mark-sheriff { left: -6px; top: -6px; width: 15px; height: 18px; font-size: 8px; }
.fb-seat--xs .fb-mark-votes { right: -9px; top: -7px; min-width: 18px; height: 15px; font-size: 9px; line-height: 15px; }
.fb-seat.is-speak { --ring: var(--fb-tube); z-index: 2; }
.fb-seat.is-speak .fb-seat__face { transform: scale(1.14); box-shadow: 0 0 0 2px var(--fb-night), 0 0 0 4px var(--ring), 0 0 18px 4px rgba(255,255,255,.35); }
.fb-seat.is-speak .fb-seat__name { color: var(--fb-tube); font-weight: 700; }
.fb-seat.is-target { --ring: var(--fb-neon-cyan); }
.fb-seat.is-wolf { --ring: var(--fb-role-wolf); }
.fb-seat.is-next .fb-seat__face { outline: 2px dashed var(--fb-ink-2); outline-offset: 5px; animation: fb-breathe var(--fb-dur-breathe) ease-in-out infinite; }
.fb-seat.is-out { opacity: .62; }
.fb-seat.is-out .fb-seat__face img { filter: grayscale(1) brightness(.55); }
.fb-seat.is-out .fb-seat__face::after { content: ""; position: absolute; inset: 20%; background: linear-gradient(45deg, transparent 43%, var(--fb-rust-text) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--fb-rust-text) 43% 57%, transparent 57%); }
.fb-seat.is-out .fb-seat__name { text-decoration: line-through; color: var(--fb-ink-3); }

.fb-mark-role, .fb-mark-sheriff, .fb-mark-votes { position: absolute; z-index: 3; display: grid; place-items: center; font-style: normal; animation: fb-pop var(--fb-dur-enter) var(--fb-ease-pop) both; }
/* 身份章：右下，圆形，一个字 */
.fb-mark-role { right: -7px; bottom: -5px; width: 19px; height: 19px; border-radius: var(--fb-radius-pill); background: var(--fb-role-villager); color: var(--fb-night); font: 700 11px/1 var(--font-body); box-shadow: 0 0 0 2px var(--fb-night); }
.fb-mark-role--wolf { background: var(--fb-role-wolf); color: var(--fb-on-wolf); }
.fb-mark-role--god { background: var(--fb-role-god); color: var(--fb-on-cyan); }
/* 警徽：左上，盾形，金 */
.fb-mark-sheriff { left: -8px; top: -7px; width: 19px; height: 22px; padding-bottom: 4px; background: var(--fb-gold); color: var(--fb-on-gold); font: 900 10px/1 var(--font-body); clip-path: polygon(0 0, 100% 0, 100% 64%, 50% 100%, 0 64%); filter: none; }
/* 票数：右上，白底票根，数字用 Bungee */
.fb-mark-votes { right: -11px; top: -8px; grid-auto-flow: column; gap: 1px; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 3px; background: var(--fb-ink); color: var(--fb-night); font-family: var(--font-latin); font-size: 11px; line-height: 18px; font-weight: 400; box-shadow: 0 0 0 2px var(--fb-night); }
.fb-mark-votes i { font: 700 9px/18px var(--font-body); font-style: normal; }
.fb-mark-novote { display: inline-flex; align-items: center; height: 14px; padding: 0 4px; border: 1px dashed var(--fb-line-strong); border-radius: 3px; color: var(--fb-ink-3); font: 700 10px/12px var(--font-body); white-space: nowrap; }
.fb-mark-role.is-inline, .fb-mark-sheriff.is-inline, .fb-mark-votes.is-inline { position: static; display: inline-grid; vertical-align: middle; box-shadow: none; animation: none; }
/* 旗：正上方，说的是「此刻发生在这个人身上的事」 */
.fb-flag { position: absolute; z-index: 4; left: 50%; top: 0; transform: translateX(-50%); display: inline-flex; align-items: stretch; height: 16px; border-radius: 3px; font: 700 10px/16px var(--font-body); white-space: nowrap; box-shadow: 0 0 0 1.5px var(--fb-night); }
.fb-flag::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 4px; margin-left: -1px; background: var(--fb-ink-3); }
.fb-flag.is-inline { position: relative; left: auto; top: auto; transform: none; }
.fb-flag.is-inline::after { content: none; }
.fb-flag--lg { height: 22px; font-size: 12px; line-height: 22px; border-radius: var(--fb-radius-xs); }
/* 验人牌：左半「验」＝预言家验过；右半＝验出来的结果 */
.fb-check > i { display: inline-flex; align-items: center; gap: 3px; padding: 0 4px 0 4px; border-radius: 3px 0 0 3px; background: var(--fb-cyan-tint); color: var(--fb-neon-cyan); font-style: normal; }
.fb-check > i::before { content: ""; width: 9px; height: 7px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 7 5%22 shape-rendering=%22crispEdges%22%3E%3Cpath fill=%22%2322e3ff%22 d=%22M2 0h3v1H2zM1 1h1v1H1zM5 1h1v1H5zM0 2h1v1H0zM3 2h1v1H3zM6 2h1v1H6zM1 3h1v1H1zM5 3h1v1H5zM2 4h3v1H2z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; image-rendering: pixelated; }
.fb-check > b { padding: 0 5px; border-radius: 0 3px 3px 0; font-weight: 700; background: var(--fb-neon-green); color: var(--fb-on-green); }
.fb-check--wolf > b { background: var(--fb-role-wolf); color: var(--fb-on-wolf); }
.fb-flag--lg.fb-check > i { padding: 0 6px; gap: 4px; }
.fb-flag--lg.fb-check > i::before { width: 12px; height: 9px; }
.fb-flag--lg.fb-check > b { padding: 0 8px; }
.fb-turn { padding: 0 6px; background: var(--fb-surface-3); color: var(--fb-ink); border: 1px dashed var(--fb-ink-2); line-height: 14px; }
.fb-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--fb-ink-2); font-size: 12px; line-height: 18px; }
.fb-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ───────── 导航 ───────── */
.fb-nav { container: fbnav / inline-size; background: rgba(10,13,15,.84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--fb-line); }
.fb-nav--clear { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.fb-nav__in { display: flex; align-items: center; gap: var(--fb-space-8); max-width: calc(var(--fb-page-max) + 80px); min-height: 68px; margin: 0 auto; padding: 0 var(--fb-space-10); }
.fb-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.fb-brand .fb-monster { --m: 27px; }
.fb-brand__name { font-family: var(--font-display); font-size: 28px; line-height: 34px; letter-spacing: .04em; color: var(--fb-tube); text-shadow: var(--fb-glow-magenta); }
.fb-brand__en { font-family: var(--font-latin); font-size: 10px; line-height: 12px; letter-spacing: .16em; color: var(--fb-ink-3); }
.fb-nav__links { display: flex; align-items: stretch; gap: var(--fb-space-6); margin-left: auto; align-self: stretch; }
.fb-nav__links a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0 2px; color: var(--fb-ink-2); font: 500 14px/20px var(--font-body); white-space: nowrap; transition: color var(--fb-dur-state); }
.fb-nav__links a:hover { color: var(--fb-ink); }
.fb-nav__links a.is-on, .fb-nav__links a[aria-current="page"] { color: var(--fb-ink); }
.fb-nav__links a.is-on::after, .fb-nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--fb-neon-green); }
@container fbnav (max-width: 720px) {
  .fb-nav__in { flex-wrap: wrap; gap: 0 var(--fb-space-3); min-height: 0; padding: 10px var(--fb-space-4) 0; }
  .fb-nav__in > .fb-btn { margin-left: auto; }
  .fb-brand__en { display: none; }
  .fb-nav__links { order: 3; width: 100%; margin: 8px 0 0; gap: var(--fb-space-5); overflow-x: auto; scrollbar-width: none; }
  .fb-nav__links a { height: var(--fb-touch); }
}

/* ───────── 页脚 ───────── */
.fb-footer { container: fbfoot / inline-size; border-top: 1px solid var(--fb-line); background: var(--fb-night); color: var(--fb-ink-2); font-size: 13px; line-height: 20px; }
.fb-footer__in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--fb-space-8); max-width: calc(var(--fb-page-max) + 80px); margin: 0 auto; padding: var(--fb-space-12) var(--fb-space-10) var(--fb-space-8); }
.fb-footer__say { margin-top: var(--fb-space-3); max-width: 28em; }
.fb-footer h3 { margin-bottom: var(--fb-space-3); font-family: var(--font-latin); font-size: 11px; line-height: 16px; letter-spacing: .14em; color: var(--fb-ink-3); font-weight: 400; }
.fb-footer li + li { margin-top: 6px; }
.fb-footer a:hover { color: var(--fb-ink); }
.fb-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; max-width: calc(var(--fb-page-max) + 80px); margin: 0 auto; padding: var(--fb-space-4) var(--fb-space-10) var(--fb-space-6); border-top: 1px solid var(--fb-line); color: var(--fb-ink-3); font-size: 12px; line-height: 18px; }
@container fbfoot (max-width: 720px) {
  .fb-footer__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fb-space-6); padding: var(--fb-space-8) var(--fb-space-4) var(--fb-space-6); }
  .fb-footer__in > :first-child { grid-column: 1 / -1; }
  .fb-footer__base { padding-inline: var(--fb-space-4); }
}

/* ───────── 直播状态条 ───────── */
.fb-live { container: fblive / inline-size; }
.fb-live__in { display: flex; align-items: center; gap: var(--fb-space-3); min-height: var(--fb-touch); padding: 6px 8px 6px var(--fb-space-4); border: 1px solid var(--fb-line); border-radius: var(--fb-radius-pill); background: var(--fb-surface-1); font-size: 14px; line-height: 20px; }
.fb-live__dot { flex: none; width: 10px; height: 10px; border-radius: var(--fb-radius-pill); background: var(--fb-ink-off); }
.fb-live__state { flex: none; font-weight: 700; color: var(--fb-ink); white-space: nowrap; }
.fb-live__what { min-width: 0; color: var(--fb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-live__meta { margin-left: auto; flex: none; color: var(--fb-ink-3); white-space: nowrap; }
.fb-live__go { flex: none; }
.fb-live--on .fb-live__in { border-color: var(--fb-green-key); background: var(--fb-green-tint); }
.fb-live--on .fb-live__dot { background: var(--fb-neon-green); box-shadow: var(--fb-glow-green); animation: fb-breathe var(--fb-dur-breathe) ease-in-out infinite; }
.fb-live--on .fb-live__state { color: var(--fb-neon-green); }
.fb-live--soon .fb-live__dot { background: none; border: 2px solid var(--fb-neon-cyan); }
.fb-live--soon .fb-live__meta { color: var(--fb-neon-cyan); }
.fb-live--warn .fb-live__dot { background: var(--fb-rust-text); }
.fb-live--warn .fb-live__state { color: var(--fb-rust-text); }
@container fblive (max-width: 560px) {
  .fb-live__in { flex-wrap: wrap; gap: 4px var(--fb-space-2); padding: 10px var(--fb-space-3); border-radius: var(--fb-radius-lg); font-size: 13px; }
  .fb-live__what { order: 5; width: 100%; white-space: normal; }
  .fb-live__go { order: 6; width: 100%; margin-top: 6px; }
  .fb-live__go.fb-btn { display: flex; }
}

/* ───────── 分段环节条 ───────── */
.fb-phase { container: fbphase / inline-size; }
.fb-phase__in { display: flex; align-items: center; gap: var(--fb-space-2); padding: 5px; border: 1px solid var(--fb-line); border-radius: 10px; background: rgba(16,23,26,.92); }
.fb-phase__steps { display: flex; align-items: center; gap: 2px; min-width: 0; }
.fb-phase__steps li { display: inline-flex; align-items: center; gap: 6px; height: var(--fb-control-sm); padding: 0 12px; border-radius: var(--fb-radius-sm); color: var(--fb-ink-3); font: 500 13px/18px var(--font-body); white-space: nowrap; }
.fb-phase__steps li i { font-family: var(--font-latin); font-size: 11px; font-style: normal; }
.fb-phase__steps li.is-done { color: var(--fb-ink-2); }
.fb-phase__steps li.is-done::before { content: ""; width: 9px; height: 5px; margin-top: -3px; border-left: 2px solid var(--fb-neon-green); border-bottom: 2px solid var(--fb-neon-green); transform: rotate(-45deg); }
.fb-phase__steps li.is-now { background: var(--fb-neon-green); color: var(--fb-on-green); font-weight: 700; }
.fb-phase__day { flex: none; padding: 0 10px; color: var(--fb-ink-2); font: 500 13px/18px var(--font-body); white-space: nowrap; border-left: 1px solid var(--fb-line); }
.fb-phase__tools { display: flex; gap: 6px; margin-left: auto; flex: none; }
@container fbphase (max-width: 560px) {
  .fb-phase__in { gap: 4px; padding: 3px; }
  .fb-phase__steps li { display: none; padding: 0 8px; }
  .fb-phase__steps li.is-now, .fb-phase__steps li.is-now + li, .fb-phase__steps li:has(+ li.is-now) { display: inline-flex; }
  .fb-phase__steps li i { display: none; }
  .fb-phase__steps li.is-now + li::before { content: "›"; color: var(--fb-ink-3); }
  .fb-phase__day { padding: 0 6px; font-size: 12px; }
  .fb-phase__tools { gap: 4px; }
  .fb-phase__tools .fb-tool { padding: 0 8px; }
}

/* ───────── 局势板 ───────── */
.fb-board { container: fbboard / inline-size; display: flex; flex-direction: column; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-xl); background: var(--fb-surface-1); box-shadow: var(--fb-shadow-pop); overflow: hidden; }
.fb-board__head { display: flex; align-items: center; gap: var(--fb-space-3); padding: var(--fb-space-4) var(--fb-space-4) var(--fb-space-4) var(--fb-space-6); border-bottom: 1px solid var(--fb-line); }
.fb-board__head h2 { font: 700 18px/26px var(--font-body); }
.fb-board__head .fb-iconbtn { margin-left: auto; }
.fb-board__body { display: grid; gap: var(--fb-space-6); padding: var(--fb-space-6); }
.fb-board__cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--fb-space-6); align-items: start; }
.fb-board__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fb-space-3); margin-bottom: var(--fb-space-3); font: 700 15px/22px var(--font-body); }
.fb-board__h small { font: 400 12px/18px var(--font-body); color: var(--fb-ink-3); }
.fb-board__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: var(--fb-space-3) var(--fb-space-6); border-top: 1px solid var(--fb-line); color: var(--fb-ink-3); font-size: 12px; line-height: 18px; }
.fb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fb-space-3); }
.fb-stat { display: flex; align-items: center; justify-content: space-between; gap: var(--fb-space-3); min-height: 64px; padding: var(--fb-space-3) var(--fb-space-5); border: 1px solid var(--fb-line); border-radius: var(--fb-radius-md); background: var(--fb-surface-2); }
.fb-stat span { color: var(--fb-ink-2); font-size: 13px; line-height: 20px; white-space: nowrap; }
.fb-stat b { font-family: var(--font-latin); font-weight: 400; font-size: 32px; line-height: 36px; color: var(--fb-ink); white-space: nowrap; }
.fb-stat b.is-name { font-family: var(--font-display); font-size: 28px; letter-spacing: .04em; }
.fb-stat--live b { color: var(--fb-neon-green); }
.fb-stat--honor b { color: var(--fb-gold); }
.fb-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-md); overflow: hidden; font-size: 14px; line-height: 20px; }
.fb-table th { padding: 8px var(--fb-space-3); background: var(--fb-surface-2); color: var(--fb-ink-3); font: 400 12px/18px var(--font-body); text-align: left; white-space: nowrap; }
.fb-table td { padding: 7px var(--fb-space-3); border-top: 1px solid var(--fb-line); vertical-align: middle; }
.fb-table tbody tr:hover td { background: var(--fb-surface-2); }
.fb-table .is-num { width: 1%; padding-right: 0; font-family: var(--font-latin); font-size: 11px; color: var(--fb-ink-3); white-space: nowrap; }
.fb-table tr.is-out .fb-who b { color: var(--fb-ink-3); text-decoration: line-through; }
.fb-table tr.is-out .fb-avatar img { filter: grayscale(1) brightness(.6); }
.fb-who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.fb-who b { font-weight: 500; white-space: nowrap; }
.fb-who .fb-mark-sheriff.is-inline { margin-left: 2px; }
.fb-tally { display: grid; gap: var(--fb-space-3); margin-bottom: var(--fb-space-3); padding: var(--fb-space-4); border: 1px solid var(--fb-line); border-radius: var(--fb-radius-md); background: var(--fb-surface-2); }
.fb-tally__cap { color: var(--fb-ink-3); font-size: 12px; line-height: 18px; }
.fb-tally__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
.fb-tally__row b { font-weight: 500; }
.fb-tally__n { font-family: var(--font-latin); font-size: 18px; line-height: 22px; color: var(--fb-ink); white-space: nowrap; }
.fb-tally__n small { font: 500 12px/18px var(--font-body); color: var(--fb-ink-2); }
/* 票数条：一格一票的像素血条 */
.fb-bar { grid-column: 1 / -1; height: 8px; background: repeating-linear-gradient(90deg, var(--fb-surface-3) 0 10px, transparent 10px 12px); }
.fb-bar i { display: block; height: 100%; width: var(--v, 0%); background: repeating-linear-gradient(90deg, var(--fb-neon-green) 0 10px, transparent 10px 12px); }
.fb-bar--plain i { background: repeating-linear-gradient(90deg, var(--fb-ink-2) 0 10px, transparent 10px 12px); }
@container fbboard (max-width: 640px) {
  .fb-board__head { padding: var(--fb-space-3) var(--fb-space-3) var(--fb-space-3) var(--fb-space-4); }
  .fb-board__body { gap: var(--fb-space-4); padding: var(--fb-space-3); }
  .fb-board__cols { grid-template-columns: minmax(0, 1fr); gap: var(--fb-space-4); }
  .fb-board__foot { padding: var(--fb-space-3) var(--fb-space-4); }
  .fb-stats { gap: var(--fb-space-2); }
  .fb-stat { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 60px; padding: var(--fb-space-2) var(--fb-space-3); }
  .fb-stat span { font-size: 12px; line-height: 16px; }
  .fb-stat b { font-size: 24px; line-height: 30px; }
  .fb-stat b.is-name { font-size: 22px; }
  .fb-table th, .fb-table td { padding-inline: var(--fb-space-2); }
}

/* ───────── 台词卡 ───────── */
.fb-speech { container: fbspeech / inline-size; }
.fb-speech__in { padding: var(--fb-space-5) var(--fb-space-6) var(--fb-space-6); border: 1px solid var(--fb-line); border-radius: var(--fb-radius-lg); background: rgba(10,13,15,.9); box-shadow: var(--fb-shadow-pop); }
.fb-speech__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fb-space-2) var(--fb-space-3); margin-bottom: var(--fb-space-4); }
.fb-speech__to { display: inline-flex; align-items: center; gap: 6px; color: var(--fb-ink-2); font-size: 13px; line-height: 20px; white-space: nowrap; }
.fb-speech__to b { color: var(--fb-neon-cyan); font-weight: 500; }
.fb-speech__ord { margin-left: auto; color: var(--fb-ink-3); font-size: 12px; line-height: 18px; white-space: nowrap; }
.fb-speech__text { font: 500 22px/36px var(--font-body); color: var(--fb-ink); text-wrap: pretty; }
.fb-speech__text .is-ahead { color: var(--fb-ink-3); }
.fb-speech--think .fb-speech__in { border-style: dashed; border-color: var(--fb-line-strong); }
.fb-speech--think .fb-speech__text { font-style: italic; color: var(--fb-ink-2); }
@container fbspeech (max-width: 560px) {
  .fb-speech__in { padding: var(--fb-space-3) var(--fb-space-4) var(--fb-space-4); }
  .fb-speech__head { margin-bottom: var(--fb-space-2); }
  .fb-speech__text { font-size: 17px; line-height: 28px; }
  .fb-nameplate { height: 26px; padding: 0 10px; font-size: 17px; }
}

/* ───────── 播放控制条 ───────── */
.fb-player { container: fbplayer / inline-size; }
.fb-timeline { position: relative; padding: 22px 0 22px; }
.fb-timeline__track { display: flex; gap: 3px; height: 6px; }
.fb-timeline__track > i { position: relative; flex: var(--w, 1) 1 0; min-width: 2px; background: var(--fb-surface-3); transition: background var(--fb-dur-state); }
.fb-timeline__track > i:hover { background: var(--fb-line-strong); }
.fb-timeline__track > i.is-done { background: var(--fb-neon-green); }
.fb-timeline__track > i.is-now { background: linear-gradient(90deg, var(--fb-neon-green) var(--f, 50%), var(--fb-surface-3) var(--f, 50%)); }
.fb-timeline__track > i > span { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); color: var(--fb-ink-3); font: 400 11px/14px var(--font-body); font-style: normal; white-space: nowrap; }
.fb-timeline__track > i.is-now > span { color: var(--fb-ink); font-weight: 700; }
.fb-timeline__mon { position: absolute; left: var(--p, 0%); top: 0; transform: translateX(-50%); }
.fb-timeline__mon .fb-monster { --m: 18px; display: block; }
.fb-player__row { display: flex; align-items: center; gap: var(--fb-space-2); }
.fb-player__gap { flex: 1 1 auto; }
.fb-player__row .fb-time { margin-left: var(--fb-space-3); }
.fb-speed { display: inline-grid; place-items: center; min-width: 44px; height: 32px; padding: 0 8px; border-radius: var(--fb-radius-sm); border: 1px solid var(--fb-line-strong); font-family: var(--font-latin); font-size: 12px; line-height: 16px; color: var(--fb-ink); transition: background var(--fb-dur-state); }
.fb-speed:hover { background: var(--fb-surface-2); }
@container fbplayer (max-width: 560px) {
  .fb-timeline__track > i > span.is-wide { display: none; }
  .fb-player__row { gap: 0; }
  .fb-player__row .fb-time { margin-left: var(--fb-space-2); }
  .fb-player__row .fb-react { display: none; }
  .fb-iconbtn--play { width: 48px; height: 48px; }
}

/* ───────── 反应：上头 / 下头 ───────── */
.fb-react { display: inline-flex; align-items: center; gap: var(--fb-space-2); }
.fb-react__btn { --face: var(--fb-surface-2); --edge: var(--fb-line-strong); --key: var(--fb-night-deep); --fb-n: 4px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; height: var(--fb-touch); padding: 0 14px 0 10px; color: var(--fb-ink-2); font: 500 14px/20px var(--font-body); white-space: nowrap; user-select: none;
  filter: drop-shadow(0 3px 0 var(--key)); transition: transform var(--fb-dur-press) var(--fb-ease-out), filter var(--fb-dur-state), color var(--fb-dur-state); }
.fb-react__btn::before, .fb-react__btn::after { content: ""; position: absolute; }
.fb-react__btn::before { inset: 0; z-index: -2; background: var(--edge); }
.fb-react__btn::after { inset: 2px; z-index: -1; background: var(--face); transition: background var(--fb-dur-state); }
.fb-react__btn .fb-monster { --m: 24px; }
.fb-react__n { font-family: var(--font-latin); font-weight: 400; font-size: 15px; line-height: 20px; color: var(--fb-ink); min-width: 1.4em; text-align: right; }
.fb-react__btn:hover { --edge: var(--fb-ink-2); color: var(--fb-ink); }
.fb-react__btn:hover .fb-monster { animation: fb-walk .5s var(--fb-ease-pixel) infinite; }
.fb-react__btn:active { transform: translateY(2px); filter: drop-shadow(0 1px 0 var(--key)); }
.fb-react__btn--up[aria-pressed="true"] { --face: var(--fb-magenta-tint); --edge: var(--fb-neon-magenta); --key: var(--fb-magenta-key); color: var(--fb-neon-magenta); }
.fb-react__btn--down[aria-pressed="true"] { --face: var(--fb-rust-tint); --edge: var(--fb-rust-text); --key: var(--fb-rust); color: var(--fb-rust-text); }
.fb-react__btn[aria-pressed="true"] .fb-monster { animation: fb-hop var(--fb-dur-hop) var(--fb-ease-pixel) 1; }
.fb-react__btn[aria-pressed="true"] .fb-react__n { animation: fb-pop var(--fb-dur-enter) var(--fb-ease-pop) 1; }
.fb-react__btn.is-pending .fb-react__n { opacity: .5; }
.fb-react__btn.is-pending::before { background: repeating-linear-gradient(90deg, var(--edge) 0 6px, var(--fb-night) 6px 10px); }
.fb-react__btn:disabled { --edge: var(--fb-line); --key: transparent; color: var(--fb-ink-off); cursor: not-allowed; filter: none; }
.fb-react__btn:disabled .fb-react__n { color: var(--fb-ink-off); }
.fb-react__btn:disabled .fb-monster { filter: grayscale(1) opacity(.5); animation: none; }
.fb-react__err { display: inline-flex; align-items: center; gap: 6px; color: var(--fb-danger); font-size: 12px; line-height: 18px; }
.fb-react--sm .fb-react__btn { height: 36px; padding: 0 10px 0 8px; font-size: 13px; }
.fb-react--sm .fb-react__btn .fb-monster { --m: 18px; }
.fb-react--sm .fb-react__n { font-size: 13px; }
/* 只读小计数：回放卡上用 */
.fb-react--mini { gap: var(--fb-space-3); color: var(--fb-ink-2); }
.fb-react--mini > span { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-latin); font-size: 12px; line-height: 16px; }
.fb-react--mini .fb-monster { --m: 14px; }

/* 押注筹码 */
.fb-bet { display: grid; gap: var(--fb-space-3); padding: var(--fb-space-4); border: 1px solid var(--fb-line); border-radius: var(--fb-radius-lg); background: var(--fb-surface-1); }
.fb-bet__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--fb-space-3); }
.fb-bet__head small { color: var(--fb-ink-3); font-size: 12px; line-height: 18px; }
.fb-bet__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fb-space-3); }
.fb-bet__opt { --face: var(--fb-surface-2); --edge: var(--fb-line-strong); --key: var(--fb-night-deep); --tone: var(--fb-ink-2); --fb-n: 4px;
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 10px; height: var(--fb-control-lg); padding: 0 14px; color: var(--fb-ink); font: 700 15px/20px var(--font-body); white-space: nowrap;
  filter: drop-shadow(0 3px 0 var(--key)); transition: transform var(--fb-dur-press) var(--fb-ease-out), filter var(--fb-dur-state); }
.fb-bet__opt::before, .fb-bet__opt::after { content: ""; position: absolute; }
.fb-bet__opt::before { inset: 0; z-index: -2; background: var(--edge); }
.fb-bet__opt::after { inset: 2px; z-index: -1; background: var(--face); }
.fb-bet__opt b { margin-left: auto; font-family: var(--font-latin); font-weight: 400; font-size: 15px; }
.fb-bet__opt:hover { --edge: var(--tone); }
.fb-bet__opt:active { transform: translateY(2px); filter: drop-shadow(0 1px 0 var(--key)); }
.fb-bet__opt--good { --tone: var(--fb-neon-green); }
.fb-bet__opt--wolf { --tone: var(--fb-role-wolf); }
.fb-bet__opt--good[aria-pressed="true"] { --face: var(--fb-green-tint); --edge: var(--fb-neon-green); --key: var(--fb-green-key); }
.fb-bet__opt--wolf[aria-pressed="true"] { --face: var(--fb-wolf-tint); --edge: var(--fb-role-wolf); --key: var(--fb-magenta-key); }
.fb-chipico { flex: none; width: 20px; height: 20px; border-radius: var(--fb-radius-pill); border: 4px dashed var(--tone); background: var(--fb-night); box-shadow: 0 0 0 1.5px var(--tone); }
.fb-bet__bar { display: flex; height: 8px; gap: 3px; }
.fb-bet__bar i { flex: var(--v, 1) 1 0; background: repeating-linear-gradient(90deg, var(--fb-neon-green) 0 6px, transparent 6px 8px); }
.fb-bet__bar i + i { background: repeating-linear-gradient(90deg, var(--fb-role-wolf) 0 6px, transparent 6px 8px); }

/* 霓虹牌：点了才亮 */
.fb-neonsign { display: inline-flex; align-items: center; gap: 8px; height: var(--fb-touch); padding: 0 16px; border: 2px solid var(--fb-line-strong); border-radius: var(--fb-radius-md); color: var(--fb-ink-2); font-family: var(--font-display); font-size: 20px; line-height: 26px; letter-spacing: .06em; white-space: nowrap; transition: color var(--fb-dur-state), border-color var(--fb-dur-state), box-shadow var(--fb-dur-state), text-shadow var(--fb-dur-state); }
.fb-neonsign b { font-family: var(--font-latin); font-weight: 400; font-size: 12px; letter-spacing: 0; color: var(--fb-ink-3); }
.fb-neonsign:hover { color: var(--fb-ink); border-color: var(--fb-ink-2); }
.fb-neonsign[aria-pressed="true"] { --lit: var(--fb-neon-green); color: var(--fb-tube); border-color: var(--lit); text-shadow: 0 0 10px var(--lit), 0 0 24px var(--lit); box-shadow: 0 0 12px -2px var(--lit), inset 0 0 12px -4px var(--lit); }
.fb-neonsign[aria-pressed="true"] b { color: var(--fb-ink); text-shadow: none; }
.fb-neonsign--magenta[aria-pressed="true"] { --lit: var(--fb-neon-magenta); }
.fb-neonsign--cyan[aria-pressed="true"] { --lit: var(--fb-neon-cyan); }

/* ───────── 回放卡 ───────── */
.fb-replay { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-lg); background: var(--fb-surface-1); overflow: hidden; transition: transform var(--fb-dur-state) var(--fb-ease-out), border-color var(--fb-dur-state), box-shadow var(--fb-dur-state); }
.fb-replay__cover { position: relative; aspect-ratio: 16 / 9; background: var(--fb-surface-3); overflow: hidden; }
.fb-replay__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--fb-dur-enter) var(--fb-ease-out), filter var(--fb-dur-state); filter: brightness(.86); }
.fb-replay__cover::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, transparent, rgba(5,6,8,.7)); pointer-events: none; }
.fb-replay__cover .fb-ep { position: absolute; z-index: 1; left: 10px; top: 10px; }
.fb-replay__cover .fb-badge--live, .fb-replay__cover .fb-badge--new { position: absolute; z-index: 1; right: 10px; top: 10px; }
.fb-replay__cover .fb-badge--time { position: absolute; z-index: 1; right: 10px; bottom: 10px; }
.fb-replay__play { --fb-n: 4px; position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; background: var(--fb-neon-green); color: var(--fb-on-green); opacity: 0; transform: scale(.8); transition: opacity var(--fb-dur-state), transform var(--fb-dur-state) var(--fb-ease-pop); }
.fb-replay__play svg { width: 24px; height: 24px; fill: currentColor; }
.fb-replay__prog { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(232,236,239,.25); }
.fb-replay__prog::after { content: ""; display: block; height: 100%; width: var(--p, 0%); background: var(--fb-neon-green); }
.fb-replay__body { display: flex; flex-direction: column; gap: 6px; padding: var(--fb-space-4); flex: 1; }
.fb-replay__title { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: .03em; color: var(--fb-ink); }
.fb-replay__meta { color: var(--fb-ink-2); font-size: 13px; line-height: 20px; }
.fb-replay__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--fb-space-3); margin-top: auto; padding-top: var(--fb-space-3); }
.fb-replay:hover, .fb-replay.is-hover { transform: translateY(-4px); border-color: var(--fb-line-strong); box-shadow: var(--fb-shadow-card); }
.fb-replay:hover .fb-replay__cover img, .fb-replay.is-hover .fb-replay__cover img { transform: scale(1.04); filter: brightness(1); }
.fb-replay:hover .fb-replay__play, .fb-replay.is-hover .fb-replay__play { opacity: 1; transform: scale(1); }
.fb-replay.is-live { border-color: var(--fb-neon-green); }
.fb-replay.is-watched .fb-replay__title { color: var(--fb-ink-2); }
.fb-replay.is-loading { pointer-events: none; }
.fb-replay.is-loading .fb-replay__cover, .fb-skel { background: linear-gradient(90deg, var(--fb-surface-2) 25%, var(--fb-surface-3) 37%, var(--fb-surface-2) 63%) 0 0 / 400% 100%; animation: fb-skel 1.4s ease infinite; }
.fb-skel { display: block; height: 14px; border-radius: var(--fb-radius-xs); }
.fb-replay--row { flex-direction: row; align-items: stretch; }
.fb-replay--row .fb-replay__cover { flex: none; width: 136px; aspect-ratio: auto; min-height: 96px; }
.fb-replay--row .fb-replay__cover .fb-ep { left: 6px; top: 6px; height: 22px; padding: 0 6px; font-size: 11px; }
.fb-replay--row .fb-replay__cover .fb-badge--time { right: 6px; bottom: 6px; }
.fb-replay--row .fb-replay__body { padding: var(--fb-space-3); gap: 2px; }
.fb-replay--row .fb-replay__title { font-size: 20px; line-height: 26px; }
.fb-replay--row .fb-replay__foot { padding-top: 6px; }
.fb-replay--row:hover, .fb-replay--row.is-hover { transform: none; }
/* 结局默认收起 */
.fb-spoiler { font-size: 12px; line-height: 18px; color: var(--fb-ink-2); }
.fb-spoiler summary { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px dashed var(--fb-line-strong); border-radius: var(--fb-radius-xs); color: var(--fb-ink-2); cursor: pointer; list-style: none; white-space: nowrap; }
.fb-spoiler summary::-webkit-details-marker { display: none; }
.fb-spoiler[open] summary { display: none; }

/* ───────── 首杀封面卡 ───────── */
.fb-cover { container: fbcover / inline-size; display: flex; flex-direction: column; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-lg); background: var(--fb-night-deep); overflow: hidden; }
.fb-cover__art { position: relative; aspect-ratio: 1080 / 1040; background: var(--fb-surface-3); overflow: hidden; }
.fb-cover__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.fb-cover__art::after { content: ""; position: absolute; inset: 62% 0 0; background: linear-gradient(180deg, transparent, var(--fb-night-deep)); pointer-events: none; }
.fb-cover__art .fb-ep { position: absolute; left: 12px; top: 12px; }
.fb-cover__info { position: relative; display: grid; gap: var(--fb-space-2); margin-top: -40px; padding: 0 var(--fb-space-5) var(--fb-space-4); }
.fb-cover__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--fb-space-3); }
.fb-cover__name { font-family: var(--font-display); font-weight: 400; font-size: 64px; line-height: 68px; letter-spacing: .04em; color: var(--fb-tube); }
.fb-cover__top .fb-badge { height: 30px; padding: 0 12px; font-size: 16px; --fb-n: 3px; margin-bottom: 10px; }
.fb-cover__model { display: inline-flex; align-items: center; gap: 6px; color: var(--fb-ink-2); font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .04em; }
.fb-cover__model::before { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 9 9%22 shape-rendering=%22crispEdges%22%3E%3Cpath fill=%22%23a7b4b8%22 d=%22M2 0h1v1H2zM4 0h1v1H4zM6 0h1v1H6zM1 1h7v1H1zM0 2h2v1H0zM7 2h2v1H7zM1 3h1v1H1zM3 3h3v1H3zM7 3h1v1H7zM0 4h2v1H0zM3 4h3v1H3zM7 4h2v1H7zM1 5h1v1H1zM3 5h3v1H3zM7 5h1v1H7zM0 6h2v1H0zM7 6h2v1H7zM1 7h7v1H1zM2 8h1v1H2zM4 8h1v1H4zM6 8h1v1H6z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; image-rendering: pixelated; }
.fb-cover__quote { font: 700 17px/28px var(--font-body); color: var(--fb-ink); text-wrap: pretty; }
.fb-cover__meta { color: var(--fb-ink-3); font-size: 12px; line-height: 18px; }
.fb-cover__meta b { font-family: var(--font-display); font-weight: 400; font-size: 14px; color: var(--fb-neon-green); letter-spacing: .04em; }
.fb-cover__win { display: flex; align-items: center; justify-content: space-between; gap: var(--fb-space-3); padding: var(--fb-space-3) var(--fb-space-5); border-top: 4px solid var(--fb-rust); font-size: 13px; line-height: 20px; color: var(--fb-ink-2); }
.fb-cover__win .fb-stack .fb-avatar { box-shadow: 0 0 0 2px var(--fb-night-deep); }
@container fbcover (max-width: 300px) {
  .fb-cover__name { font-size: 40px; line-height: 46px; }
  .fb-cover__quote { font-size: 15px; line-height: 24px; }
  .fb-cover__info { margin-top: -28px; padding-inline: var(--fb-space-4); }
  .fb-cover__win { padding-inline: var(--fb-space-4); }
}

/* ───────── 艺人卡 ───────── */
.fb-artist { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-lg); background: var(--fb-surface-1); overflow: hidden; transition: transform var(--fb-dur-state) var(--fb-ease-out), border-color var(--fb-dur-state), box-shadow var(--fb-dur-state); }
.fb-artist__plate { position: relative; aspect-ratio: 1; background: var(--a, var(--fb-surface-3)); overflow: hidden; }
.fb-artist__plate img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--fb-dur-enter) var(--fb-ease-out); }
.fb-artist__plate .fb-tag { position: absolute; left: 8px; top: 8px; }
.fb-artist__body { display: grid; gap: 4px; padding: var(--fb-space-3) var(--fb-space-4) var(--fb-space-4); }
.fb-artist__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 34px; letter-spacing: .04em; color: var(--fb-ink); }
.fb-artist__name .fb-tag { font-family: var(--font-body); letter-spacing: 0; }
.fb-artist__where { color: var(--fb-ink-3); font-size: 12px; line-height: 18px; }
.fb-artist:hover, .fb-artist.is-hover { transform: translateY(-4px); border-color: var(--fb-line-strong); box-shadow: var(--fb-shadow-card); }
.fb-artist:hover .fb-artist__plate img, .fb-artist.is-hover .fb-artist__plate img { transform: scale(1.05); }
.fb-artist.is-off .fb-artist__plate img { filter: grayscale(1) brightness(.7); }
.fb-artist--row { flex-direction: row; align-items: center; gap: var(--fb-space-3); padding: var(--fb-space-2); }
.fb-artist--row .fb-artist__plate { flex: none; width: 64px; border-radius: var(--fb-radius-md); }
.fb-artist--row .fb-artist__body { flex: 1; min-width: 0; padding: 0; gap: 0; }
.fb-artist--row .fb-artist__name { font-size: 22px; line-height: 28px; }
.fb-artist--row:hover { transform: none; }

/* ───────── 页面骨架 ───────── */
.fb-page { container: fbpage / inline-size; position: relative; min-height: 100%; overflow-x: clip; }
.fb-wrap { max-width: calc(var(--fb-page-max) + 80px); margin: 0 auto; padding-inline: var(--fb-space-10); }
.fb-sec { padding-block: var(--fb-space-16); }
.fb-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--fb-space-4); margin-bottom: var(--fb-space-6); }
.fb-sec__head .fb-h { margin-top: 6px; font-size: 40px; line-height: 46px; }
.fb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col, 280px)), 1fr)); gap: var(--fb-space-6); }
@container fbpage (max-width: 720px) {
  .fb-wrap { padding-inline: var(--fb-space-4); }
  .fb-sec { padding-block: var(--fb-space-12); }
  .fb-sec__head { margin-bottom: var(--fb-space-4); }
  .fb-sec__head .fb-h { font-size: 28px; line-height: 34px; }
  .fb-grid { gap: var(--fb-space-3); }
}

/* ───────── 动效 ───────── */
@keyframes fb-walk { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes fb-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); } 70% { transform: translateY(-2px); } }
@keyframes fb-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fb-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes fb-blink { 0% { opacity: 1; } 100% { opacity: .2; } }
@keyframes fb-flicker { 0%, 91%, 93.5%, 96%, 100% { opacity: 1; } 92%, 95% { opacity: .72; } }
@keyframes fb-skel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .fb *, .fb *::before, .fb *::after { animation: none !important; transition-duration: 0s !important; }
}

/* ───────── 主题色色块、卡片、淡滤镜（2026-11-15 并进设计系统）─────────
   老板 11-14 23:3x 认的两样：艺人页「主题色色块上放深色圆角卡、底边一道主题色」的卡片样式；图片上一层很淡的主题色滤镜、边缘渐变融进底色。
   主题色只认一个变量 --theme，没给就用 --a（挂了 fb-a-<cid> 就是那位艺人的名牌色），再没有就是青。 */
/* 主题色色块：整片平铺的主题色，带一层很淡的扫描线。字色 --on 自己挑深浅；--card / --card-line / --f-deep 给上面的卡用。算法跟艺人页 .is-pure 是同一套 */
.fb-block { --theme: var(--a, var(--fb-neon-cyan));
  --f1: color-mix(in srgb, var(--theme) 86%, #000); --f-deep: color-mix(in srgb, var(--theme) 45%, #000); --on: var(--fb-night);
  --card: color-mix(in srgb, var(--theme) 9%, #0b0e12); --card-line: color-mix(in srgb, var(--theme) 14%, #050608);
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px), var(--f1); color: var(--on); }
@supports (color: oklch(from red l c h)) {
  .fb-block { --f1: oklch(from var(--theme) calc(l * .86) min(.25, calc(c * 1.25)) h); --f-deep: oklch(from var(--theme) calc(l * .86 - .27) min(.19, calc(c * 1.05)) h);
    --on: oklch(from var(--f1) clamp(.2, calc((.66 - l) * 100), .99) .04 h); --card: oklch(from var(--theme) .165 min(.035, c) h); --card-line: oklch(from var(--theme) .1 min(.03, c) h); }
}
.fb-block.fb-a-luzong { --theme: #3f74c4; } .fb-block.fb-a-xuanji { --theme: #2f9b78; }   /* 名牌色太深的两位，跟艺人页 --her-wash 同一个提亮值 */
/* 卡片：深色圆角，底边一道主题色厚边；指上去抬起来，按下去往厚边里陷。放在 fb-block 上用它的颜色，放在别处是夜色 */
.fb-card { position: relative; display: block; border: 1px solid var(--card-line, var(--fb-line)); border-radius: var(--fb-radius-lg); background: var(--card, var(--fb-surface-1)); color: var(--fb-ink);
  box-shadow: 0 5px 0 var(--f-deep, var(--fb-night-deep)); transition: transform var(--fb-dur-state) var(--fb-ease-out), box-shadow var(--fb-dur-state) var(--fb-ease-out), border-color var(--fb-dur-state); }
a.fb-card, button.fb-card { -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { a.fb-card:hover, button.fb-card:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--f-deep, var(--fb-night-deep)); } }
a.fb-card:active, button.fb-card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--f-deep, var(--fb-night-deep)); transition-duration: var(--fb-dur-press); }
/* 淡滤镜：套在图片外面那层盒子上（<div class="fb-wash"><img></div>）。一层很淡的主题色（--wash-k，默认 .16），边缘化进盒子后面真正的底色（用遮罩，不用知道底下是什么颜色）。
   默认只化下沿；--tb 上下都化；--side 只化右边（图在左、字在右的横卡）；--none 只上色不化边。需要的地方才套：封面、幕图、场景图；头像、贴纸、图标不套 */
.fb-wash { --wash: var(--theme, var(--a, var(--fb-neon-magenta))); --wash-k: .16; --wash-fade: 26%; --wash-mask: linear-gradient(180deg, #000 calc(100% - var(--wash-fade)), transparent);
  position: relative; isolation: isolate; overflow: hidden; -webkit-mask-image: var(--wash-mask); mask-image: var(--wash-mask); }
.fb-wash > img, .fb-wash > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fb-wash::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--wash); mix-blend-mode: color; opacity: var(--wash-k); pointer-events: none; }
.fb-wash--tb { --wash-mask: linear-gradient(180deg, transparent, #000 var(--wash-fade), #000 calc(100% - var(--wash-fade)), transparent); }
.fb-wash--side { --wash-mask: linear-gradient(90deg, #000 calc(100% - var(--wash-fade)), transparent); }
.fb-wash--none { --wash-mask: none; }
@media (prefers-reduced-motion: reduce) { .fb-card { transition: none; } a.fb-card:hover, button.fb-card:hover, a.fb-card:active, button.fb-card:active { transform: none; } }