/* 首杀艺人页 · 由 cast_site.py 生成，改 pass.css / home.css / ix.css / pick.css 再跑 */
/* ── pass.css ── */
/* 首杀 · 大屏与艺人页 第二稿（2026-11-14）
   依赖 tokens.css + firstblood.css。这里只管「摆放」：舞台（st-）、艺人页（cs-）、画框画廊（fr-）。
   所有颜色、字号、间距、动效时长都取 tokens；不自造。 */

.fr-page { min-height: 100vh; background: var(--fb-night-deep); color: var(--fb-ink); }
.fr-head { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: var(--fb-space-3) var(--fb-space-6); padding: var(--fb-space-3) var(--fb-space-6); background: rgba(10,13,15,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--fb-line); }
.fr-head h1 { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 28px; letter-spacing: .03em; }
.fr-head p { color: var(--fb-ink-3); font-size: 13px; line-height: 18px; }
.fr-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.fr-nav a { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-sm); color: var(--fb-ink-2); font-size: 12px; line-height: 16px; white-space: nowrap; }
.fr-nav a:hover { color: var(--fb-ink); border-color: var(--fb-line-strong); }
.fr-list { display: grid; gap: var(--fb-space-12); padding: var(--fb-space-8) var(--fb-space-6) var(--fb-space-16); max-width: 1500px; margin: 0 auto; }
.fr-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--fb-space-8); align-items: start; }
.fr { display: grid; gap: var(--fb-space-3); min-width: 0; scroll-margin-top: 80px; }
.fr__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.fr__cap h2 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: .03em; }
.fr__cap .fb-tag { font-family: var(--font-mono); letter-spacing: .02em; }
.fr__cap p { flex-basis: 100%; color: var(--fb-ink-2); font-size: 13px; line-height: 20px; max-width: 70ch; }
.fr__cap a { color: var(--fb-neon-cyan); font-size: 12px; }
.fr__view { position: relative; width: 100%; height: calc(var(--fh) * var(--k, 1)); border: 1px solid var(--fb-line); border-radius: var(--fb-radius-sm); overflow: hidden; background: var(--fb-night); }
.fr__box { position: absolute; left: 0; top: 0; width: var(--fw); height: var(--fh); transform: scale(var(--k, 1)); transform-origin: 0 0; }
.fr--mobile .fr__view { width: calc(var(--fw) * var(--k, 1)); }
body.fr-solo { margin: 0; background: var(--fb-night-deep); }
body.fr-solo .fr-head, body.fr-solo .fr-list > *:not(.fr-solo-host) { display: none; }
body.fr-solo .fr-list { display: block; padding: 0; max-width: none; }
body.fr-solo .fr-solo-host .fr:not(.is-solo) { display: none; }
body.fr-solo .fr.is-solo .fr__cap { display: none; }
body.fr-solo .fr.is-solo .fr__view { width: var(--fw); height: var(--fh); border: 0; border-radius: 0; --k: 1; }

.st { container: fbstage / size; position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--fb-night-deep); color: var(--fb-ink); }
.st__bg { position: absolute; inset: 0; }
.st__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; scale: 1.08; }
/* 遮罩：上方压暗给头像栏，下方压暗给字幕；中间留给人。背景本身不动。 */
.st__shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(5,6,8,.86) 0, rgba(5,6,8,.55) 22%, rgba(5,6,8,.28) 45%, rgba(5,6,8,.5) 72%, rgba(5,6,8,.94) 100%),
  radial-gradient(70% 60% at 50% 48%, transparent 40%, rgba(5,6,8,.55) 100%); }
.st--night .st__shade { background: linear-gradient(180deg, rgba(5,6,8,.9) 0, rgba(5,6,8,.6) 24%, rgba(6,10,16,.45) 50%, rgba(5,6,8,.7) 75%, rgba(5,6,8,.96) 100%); }
.st--den .st__shade { background: linear-gradient(180deg, rgba(5,6,8,.92) 0, rgba(5,6,8,.72) 24%, rgba(20,6,14,.62) 50%, rgba(5,6,8,.8) 78%, rgba(5,6,8,.97) 100%); }
.st--end .st__shade { background: linear-gradient(180deg, rgba(5,6,8,.82) 0, rgba(5,6,8,.42) 22%, rgba(40,28,10,.18) 48%, rgba(5,6,8,.5) 72%, rgba(5,6,8,.94) 100%); }
.st--end .st__bg img { filter: brightness(1.15) saturate(1.05); }

/* 顶栏：一条，左边牌子和期号，右边三个面板入口和上帝视角 */
.st__top { position: absolute; z-index: 10; left: 28px; right: 28px; top: 10px; display: flex; align-items: center; gap: var(--fb-space-3); height: 44px; }
.st__title { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 26px; letter-spacing: .04em; color: var(--fb-ink); white-space: nowrap; }
.st__gap { flex: 1; }
.st__tools { display: flex; gap: 6px; }
.st__live { display: inline-flex; align-items: center; gap: 6px; height: var(--fb-control-sm); padding: 0 10px; border: 1px solid var(--fb-line-strong); border-radius: var(--fb-radius-sm); color: var(--fb-ink-2); font-size: 12px; line-height: 16px; white-space: nowrap; }
.st__live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fb-neon-green); }

/* 头像栏：沿用现有的圆头像 + 右下身份章，说话的人白圈放大；夜里没睁眼的压暗 + 闭眼记号 */
.st__rail { position: absolute; z-index: 9; left: 150px; right: 150px; top: 60px; display: flex; justify-content: space-between; }
.st__rail .fb-seat.is-asleep .fb-seat__face img { filter: brightness(.42) saturate(.5); }
.st__rail .fb-seat.is-asleep .fb-seat__face::before { content: ""; position: absolute; z-index: 2; left: 29%; top: 46%; width: 42%; height: 2px; border-radius: 2px; background: var(--fb-ink-2); box-shadow: 0 0 0 1px rgba(5,6,8,.6); }
.st__rail .fb-seat.is-asleep .fb-seat__name { color: var(--fb-ink-3); }
.st__rail .fb-seat.is-speak .fb-seat__face::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); animation: st-ping var(--fb-dur-enter) var(--fb-ease-out) 1 both; }
.st__rail .fb-seat.is-dim { opacity: .55; }
.st__rail .fb-seat.is-target { --ring: var(--fb-neon-cyan); }
.st--end .st__rail .fb-seat.is-out { opacity: .9; }
.st--end .st__rail .fb-seat.is-out .fb-seat__face img { filter: grayscale(.6) brightness(.8); }
.st--end .st__rail .fb-seat.is-out .fb-seat__face::after { inset: auto; left: -7px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(45deg, transparent 42%, var(--fb-rust-text) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--fb-rust-text) 42% 58%, transparent 58%), var(--fb-night); box-shadow: 0 0 0 1.5px var(--fb-night); }
.fb-flag--bid { padding: 0 6px; background: var(--fb-gold); color: var(--fb-on-gold); }
.fb-flag--exile { padding: 0 6px; background: var(--fb-rust); color: #fff; }
.fb-flag--mvp { padding: 0 6px; background: var(--fb-gold); color: var(--fb-on-gold); }

/* 侧边：竖向环节进度，放左边（右上角要留给心里话气泡和反应格） */
.st__side { position: absolute; z-index: 9; left: 28px; top: 186px; width: 104px; }
.st-steps { display: grid; gap: 2px; }
.st-steps__day { margin-bottom: 8px; color: var(--fb-ink-3); font-family: var(--font-latin); font-size: 11px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; }
.st-steps li { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 12px; border-radius: var(--fb-radius-sm); color: var(--fb-ink-3); font: 500 13px/18px var(--font-body); white-space: nowrap; }
.st-steps li i { width: 18px; font-family: var(--font-latin); font-size: 11px; font-style: normal; color: var(--fb-ink-3); }
.st-steps li::before { content: ""; position: absolute; left: -1px; top: 34px; width: 2px; height: 2px; background: var(--fb-line-strong); }
.st-steps li:last-child::before { content: none; }
.st-steps li.is-done { color: var(--fb-ink-2); }
.st-steps li.is-done i { color: var(--fb-neon-green); }
.st-steps li.is-done i::before { content: "✓"; }
.st-steps li.is-done i span { display: none; }
.st-steps li.is-now { background: var(--fb-neon-green); color: var(--fb-on-green); font-weight: 700; box-shadow: 0 0 0 1px var(--fb-green-key), var(--fb-glow-soft); }
.st-steps li.is-now i { color: var(--fb-on-green); }
.st-steps li.is-now::after { content: ""; position: absolute; right: -6px; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; border-left-color: var(--fb-neon-green); border-right: 0; }

/* 舞台：固定一块区域，人按舞台定位，不按窗口。字幕卡压住脚面 26px，是故意的（短剧字幕） */
.st__arena { position: absolute; z-index: 3; left: 150px; right: 150px; top: 176px; bottom: 150px; }
.st-kick { position: absolute; z-index: 5; left: 0; top: 0; display: inline-flex; align-items: center; gap: 10px; height: 26px; padding: 0 10px; border-radius: var(--fb-radius-xs); background: rgba(10,13,15,.72); border: 1px solid var(--fb-line); color: var(--fb-ink-2); font-size: 12px; line-height: 16px; white-space: nowrap; }
.st-kick b { color: var(--fb-ink); font-weight: 700; }
.st-kick .fb-tag { height: 18px; font-size: 11px; }
.st-kick--night { border-color: rgba(255,61,139,.45); }
.st-kick--night b { color: var(--fb-role-wolf); }
.st-actor { position: absolute; bottom: 0; left: var(--x, 50%); height: var(--h, 100%); width: auto; max-width: none; transform: translateX(-50%); transform-origin: 50% 100%; pointer-events: none; filter: brightness(var(--b, 1)) saturate(var(--sat, 1)); transition: filter var(--fb-dur-state), transform var(--fb-dur-enter) var(--fb-ease-out), opacity var(--fb-dur-enter); }
.st-actor.is-back { bottom: 110px; z-index: 1; --b: .72; --sat: .9; }
.st-actor.is-side { --b: .66; --sat: .85; z-index: 2; }
.st-actor.is-lead { z-index: 4; filter: drop-shadow(0 0 36px rgba(255,255,255,.18)); animation: st-step var(--fb-dur-enter) var(--fb-ease-out) 1 both; }
.st-actor__name { position: absolute; z-index: 5; left: var(--x, 50%); bottom: var(--ny, 42px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 3px; background: rgba(10,13,15,.82); color: var(--fb-ink-2); font: 500 12px/16px var(--font-body); white-space: nowrap; box-shadow: 0 0 0 1px var(--fb-line); }
.st-actor__name.is-lead { background: var(--a, var(--fb-surface-3)); color: var(--a-ink, var(--fb-night)); font-weight: 700; box-shadow: none; }
.st-actor__name.is-lead b { font-family: var(--font-display); font-weight: 400; font-size: 15px; letter-spacing: .04em; }
/* 聚光：一条从上打下来的锥形光，加地面一圈。只给正在说的人。 */
.st-spot { position: absolute; z-index: 0; bottom: -40px; left: var(--x, 50%); width: 720px; height: 120%; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0, rgba(255,255,255,.07) 45%, rgba(255,255,255,0) 100%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.st-spot::after { content: ""; position: absolute; left: 50%; bottom: 20px; width: 70%; height: 70px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%); }
.st--den .st-spot, .st--night .st-spot { background: linear-gradient(180deg, rgba(255,61,139,.14) 0, rgba(255,61,139,.05) 50%, transparent 100%); }
.st--end .st-spot { background: linear-gradient(180deg, rgba(242,193,78,.16) 0, rgba(242,193,78,.06) 50%, transparent 100%); }

/* 心里话：漫画思考泡，挂在说话人头的右上角，两颗小泡指向他 */
.st-bubble { position: absolute; z-index: 6; left: var(--bx, 60%); top: var(--by, 8px); width: 340px; padding: 12px 16px 14px; border: 1.5px dashed var(--fb-line-strong); border-radius: var(--fb-radius-lg); background: rgba(10,13,15,.9); box-shadow: var(--fb-shadow-pop); animation: st-pop var(--fb-dur-enter) var(--fb-ease-pop) 1 both; }
.st-bubble::before, .st-bubble::after { content: ""; position: absolute; border: 1.5px dashed var(--fb-line-strong); border-radius: 50%; background: rgba(10,13,15,.9); }
.st-bubble::before { left: -22px; bottom: -8px; width: 16px; height: 16px; }
.st-bubble::after { left: -38px; bottom: -22px; width: 9px; height: 9px; }
.st-bubble--left::before { left: auto; right: -22px; }
.st-bubble--left::after { left: auto; right: -38px; }
.st-bubble__who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--fb-ink-3); font-size: 12px; line-height: 16px; }
.st-bubble__who b { color: var(--fb-ink-2); font-weight: 700; }
.st-bubble__who .fb-tag { height: 18px; font-size: 11px; margin-left: auto; }
.st-bubble__text { font: 500 15px/24px var(--font-body); font-style: italic; color: var(--fb-ink-2); text-wrap: pretty; }
.st-bubble__text b { color: var(--fb-ink); font-style: normal; font-weight: 500; }

/* 反应格：「主要对谁说」的那位，一个小漫画格，青色边 */
.st-react { position: absolute; z-index: 5; right: 0; top: 92px; width: 168px; display: grid; gap: 0; border: 2px solid var(--fb-neon-cyan); border-radius: var(--fb-radius-md); background: rgba(10,13,15,.82); overflow: hidden; box-shadow: var(--fb-glow-cyan); animation: st-pop var(--fb-dur-enter) var(--fb-ease-pop) 1 both; }
.st-react img { width: 100%; height: 150px; object-fit: cover; object-position: 50% 0; }
.st-react__cap { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px; border-top: 1px solid var(--fb-line); color: var(--fb-ink); font: 700 13px/18px var(--font-body); }
.st-react__cap small { color: var(--fb-neon-cyan); font-weight: 500; font-size: 11px; }

/* 字幕卡：沿用 Speech，舞台里两行封顶；拍点条在名牌右边 */
.st__sub { position: absolute; z-index: 8; left: 190px; right: 190px; bottom: 108px; }
.st__sub .fb-speech__in { padding: 14px 22px 16px; }
.st__sub .fb-speech__head { margin-bottom: 8px; }
.st__sub .fb-speech__text { font-size: 20px; line-height: 32px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st__sub .fb-speech__text.is-three { -webkit-line-clamp: 3; }
.st-beats { display: inline-flex; align-items: center; gap: 4px; }
.st-beats i { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 3px; border: 1px solid var(--fb-line); color: var(--fb-ink-3); font: 500 11px/16px var(--font-body); font-style: normal; }
.st-beats i.is-done { color: var(--fb-ink-2); border-color: var(--fb-line-strong); }
.st-beats i.is-now { color: var(--fb-on-green); background: var(--fb-neon-green); border-color: var(--fb-neon-green); font-weight: 700; }
.fb-speech--narr .fb-speech__in { border-color: var(--fb-line); background: rgba(16,23,26,.92); }
.fb-speech--narr .fb-speech__text { font-size: 18px; line-height: 30px; color: var(--fb-ink-2); }
.fb-speech--narr .fb-speech__text b { color: var(--fb-ink); }
.fb-speech--narr .fb-speech__text .is-exile { color: var(--fb-rust-text); font-weight: 700; }

/* 播放条：沿用，⏮⏭ 改成按拍，「下一位」单独一颗键 */
.st__bar { position: absolute; z-index: 8; left: 28px; right: 28px; bottom: 6px; }
.st__bar .fb-timeline { padding: 18px 0 20px; }
.st__bar .fb-timeline__track > i > span.is-wide { display: none; }
.fb-keybtn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--fb-radius-sm); border: 1px solid var(--fb-line-strong); color: var(--fb-ink); font: 500 13px/18px var(--font-body); white-space: nowrap; transition: background var(--fb-dur-state); }
.fb-keybtn:hover { background: var(--fb-surface-2); }
.fb-keybtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── 开场群像：两排，前排 6 后排 6，错开站；说话的人上前、打光 ── */
/* ── 竞选：上警的站成一排，说的人在中间；头顶一枚警徽 ── */
.st-prize { position: absolute; z-index: 5; left: 0; top: 34px; display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 10px; border-radius: var(--fb-radius-sm); background: rgba(10,13,15,.8); border: 1px solid rgba(242,193,78,.5); color: var(--fb-gold); font: 700 13px/18px var(--font-body); white-space: nowrap; }
.st-prize .fb-mark-sheriff.is-inline { width: 22px; height: 26px; font-size: 12px; }
.st-prize small { color: var(--fb-ink-2); font-weight: 500; }

/* ── 狼队密室：漫画分格。中间一大格是今晚的目标，狼各占一格围着它。格数跟狼数变。 ── */
.st-den { position: absolute; inset: 36px 0 34px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.st-den[data-wolves="3"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.st-den[data-wolves="3"] .st-cell:nth-child(2) { grid-row: 1 / 3; }
.st-den[data-wolves="2"] { grid-template-rows: 1fr; }
.st-den .st-target { grid-column: 2; grid-row: 1 / -1; }
.st-cell { position: relative; display: flex; flex-direction: column; border: 2px solid var(--fb-line-strong); border-radius: var(--fb-radius-md); background: rgba(10,13,15,.72); overflow: hidden; transition: border-color var(--fb-dur-state), box-shadow var(--fb-dur-state), opacity var(--fb-dur-state); }
.st-cell img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); filter: brightness(.6) saturate(.8); transition: filter var(--fb-dur-state); }
.st-cell__head { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.st-cell__head .fb-nameplate { height: 26px; padding: 0 10px; font-size: 16px; }
.st-cell__state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 3px; background: rgba(10,13,15,.8); color: var(--fb-ink-2); font: 500 12px/16px var(--font-body); white-space: nowrap; }
.st-cell__state.is-decided { color: var(--fb-role-wolf); }
.st-cell__state.is-lean { color: var(--fb-ink); }
.st-cell__state.is-wait { color: var(--fb-ink-3); border: 1px dashed var(--fb-line-strong); background: none; }
.st-cell__state .fb-avatar { --s: 18px; }
.st-cell.is-speak { border-color: var(--fb-role-wolf); box-shadow: 0 0 0 1px var(--fb-role-wolf), var(--fb-glow-magenta); }
.st-cell.is-speak img { filter: brightness(1) saturate(1); left: 27%; }
.st-cell.is-speak .st-cell__state { background: var(--fb-role-wolf); color: var(--fb-on-wolf); font-weight: 700; }
.st-cell.is-wait { opacity: .7; }
.st-den .st-bubble { position: absolute; left: auto; right: 8px; top: 40px; width: 230px; padding: 10px 12px 12px; }
.st-den .st-bubble::before { left: -18px; bottom: 14px; width: 12px; height: 12px; }
.st-den .st-bubble::after { left: -28px; bottom: 6px; width: 7px; height: 7px; }
.st-den .st-bubble__text { font-size: 14px; line-height: 22px; }
.st-target { display: grid; align-content: center; justify-items: center; gap: 10px; padding: 20px 18px; border: 2px solid rgba(255,61,139,.55); border-radius: var(--fb-radius-md); background: linear-gradient(180deg, rgba(40,10,24,.85), rgba(10,13,15,.9)); box-shadow: inset 0 0 60px rgba(255,61,139,.12); text-align: center; }
.st-target__kick { color: var(--fb-role-wolf); font: 700 13px/18px var(--font-body); letter-spacing: .08em; }
.st-target .fb-avatar { --s: 120px; box-shadow: 0 0 0 3px var(--fb-night), 0 0 0 6px var(--fb-role-wolf), 0 0 40px rgba(255,61,139,.45); }
.st-target__name { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 50px; letter-spacing: .04em; color: var(--fb-tube); }
.st-target__tally { display: inline-flex; align-items: baseline; gap: 6px; color: var(--fb-ink-2); font-size: 13px; line-height: 18px; }
.st-target__tally b { font-family: var(--font-latin); font-weight: 400; font-size: 26px; line-height: 30px; color: var(--fb-role-wolf); }
.st-target__chips { display: flex; justify-content: center; gap: 6px; }
.st-target__chips .fb-avatar { --s: 26px; box-shadow: 0 0 0 2px var(--fb-night), 0 0 0 3px var(--fb-role-wolf); }
.st-target__chips .fb-avatar.is-wait { opacity: .35; box-shadow: 0 0 0 2px var(--fb-night), 0 0 0 3px var(--fb-line-strong); }
.st-target__note { margin-top: 4px; color: var(--fb-ink-3); font-size: 12px; line-height: 18px; }
.st-target .fb-bar { width: 100%; }
.st-target .fb-bar i { background: repeating-linear-gradient(90deg, var(--fb-role-wolf) 0 10px, transparent 10px 12px); }

/* ── 投票：被投的站台上，头顶一摞票；每张票是一枚投票人的小头像 ── */
.st-tally { position: absolute; z-index: 5; left: var(--x, 50%); top: 0; width: 250px; translate: -50% 0; display: grid; gap: 8px; padding: 12px 14px 14px; border: 1px solid var(--fb-line-strong); border-radius: var(--fb-radius-md); background: rgba(10,13,15,.86); text-align: center; animation: st-pop var(--fb-dur-enter) var(--fb-ease-pop) 1 both; }
.st-tally__n { display: inline-flex; align-items: baseline; justify-content: center; gap: 6px; }
.st-tally__n b { font-family: var(--font-latin); font-weight: 400; font-size: 40px; line-height: 44px; color: var(--fb-ink); }
.st-tally__n small { color: var(--fb-ink-2); font: 700 14px/18px var(--font-body); }
.st-tally__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.st-tally__chips .fb-avatar { --s: 22px; box-shadow: 0 0 0 2px var(--fb-night), 0 0 0 3px var(--fb-ink); animation: st-drop var(--fb-dur-enter) var(--fb-ease-pop) 1 backwards; } /* 实现时每枚延迟 40ms 依次落下；稿子里不错开，免得截图时还没落完 */
.st-tally__chips .fb-avatar.is-sheriff { box-shadow: 0 0 0 2px var(--fb-night), 0 0 0 3px var(--fb-gold); }
.st-tally.is-out { border-color: var(--fb-rust); }
.st-tally.is-out .st-tally__n b { color: var(--fb-rust-text); }
.st-tally__verdict { display: inline-flex; justify-content: center; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 3px; background: var(--fb-rust); color: #fff; font: 700 12px/16px var(--font-body); }
.st-tally__verdict.is-safe { background: var(--fb-surface-3); color: var(--fb-ink-2); }
.st-tally::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 14px; margin-left: -1px; background: var(--fb-line-strong); }
.st-novote { position: absolute; z-index: 5; right: 0; top: 0; display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--fb-line-strong); border-radius: var(--fb-radius-md); background: rgba(10,13,15,.7); color: var(--fb-ink-3); font-size: 12px; line-height: 16px; }
.st-novote .fb-stack .fb-avatar { --s: 22px; }

/* ── 散场采访：灯打亮，MVP 戴冠，结果卡在左上 ── */
.st-result { position: absolute; z-index: 5; left: 0; top: 36px; width: 330px; display: grid; gap: 10px; padding: 16px 18px 18px; border: 1px solid rgba(242,193,78,.45); border-radius: var(--fb-radius-lg); background: rgba(10,13,15,.86); box-shadow: var(--fb-shadow-pop); }
.st-result__win { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 36px; letter-spacing: .04em; color: var(--fb-tube); text-shadow: var(--fb-glow-green); }
.st-result__row { display: flex; align-items: center; gap: 10px; }
.st-result__row .fb-avatar { --s: 40px; box-shadow: 0 0 0 2px var(--fb-night), 0 0 0 4px var(--fb-gold); }
.st-result__row b { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: .04em; }
.st-result__why { color: var(--fb-ink-2); font-size: 13px; line-height: 20px; }
.st-result__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-result__side { display: grid; gap: 6px; padding: 8px 10px; border-radius: var(--fb-radius-sm); background: var(--fb-surface-2); font-size: 12px; line-height: 16px; color: var(--fb-ink-2); }
.st-result__side b { color: var(--fb-ink); }
.st-result__side.is-win b { color: var(--fb-neon-green); }
.st-result__side.is-lose b { color: var(--fb-role-wolf); }
.st-result__side .fb-stack .fb-avatar { --s: 22px; box-shadow: 0 0 0 2px var(--fb-surface-2); }
.st-crown { position: absolute; z-index: 5; left: var(--x, 50%); top: var(--cy, 10px); width: 54px; height: 20px; translate: -50% 0; 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%23f2c14e%22 d=%22M0 0h1v1H0zM4 0h1v1H4zM8 0h1v1H8zM0 1h2v1H0zM3 1h3v1H3zM7 1h2v1H7zM0 2h9v1H0z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 0 8px rgba(242,193,78,.7)); animation: fb-walk 1.4s var(--fb-ease-pixel) infinite; }
.st-mic { position: absolute; z-index: 5; left: 50%; top: 2px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: var(--fb-radius-sm); background: rgba(10,13,15,.8); border: 1px solid var(--fb-line-strong); color: var(--fb-ink); font: 700 13px/18px var(--font-body); white-space: nowrap; }
.st-mic small { color: var(--fb-ink-3); font-weight: 500; }

/* ── 二级面板：盖在舞台上，一张卡 ── */
.st__modal { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(5,6,8,.68); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.st-panel { display: flex; flex-direction: column; width: min(1040px, calc(100% - 80px)); max-height: calc(100% - 80px); 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; animation: st-pop var(--fb-dur-enter) var(--fb-ease-pop) 1 both; }
.st-panel__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); }
.st-panel__head h2 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: .04em; }
.st-panel__head p { color: var(--fb-ink-3); font-size: 13px; line-height: 18px; }
.st-panel__head .fb-iconbtn { margin-left: auto; }
.st-panel__body { display: grid; gap: var(--fb-space-6); padding: var(--fb-space-6); overflow: auto; }
.st-panel__foot { display: flex; flex-wrap: wrap; 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; }
.st-panel__h { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--fb-space-3); font: 700 15px/22px var(--font-body); }
.st-panel__h small { color: var(--fb-ink-3); font-weight: 400; font-size: 12px; }
.st-cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--fb-space-6); align-items: start; }
/* 怎么玩：身份卡 */
.st-roles { display: grid; gap: 8px; }
.st-role { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-md); background: var(--fb-surface-2); }
.st-role .fb-mark-role.is-inline { width: 30px; height: 30px; font-size: 15px; }
.st-role b { display: block; font-size: 14px; line-height: 20px; }
.st-role span { display: block; color: var(--fb-ink-3); font-size: 12px; line-height: 18px; }
.st-role small { font-family: var(--font-latin); color: var(--fb-ink-3); font-size: 12px; }
.st-role--wolf { border-color: rgba(255,61,139,.4); }
.st-flow { display: grid; gap: 0; }
.st-flow li { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 7px 0 7px; font-size: 14px; line-height: 20px; }
.st-flow li i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--fb-surface-3); color: var(--fb-ink-2); font-family: var(--font-latin); font-size: 11px; font-style: normal; }
.st-flow li.is-night i { background: rgba(255,61,139,.2); color: var(--fb-role-wolf); }
.st-flow li.is-day i { background: var(--fb-green-tint); color: var(--fb-neon-green); }
.st-flow li span { color: var(--fb-ink-3); font-size: 12px; display: block; }
.st-flow li::before { content: ""; position: absolute; left: 12.5px; top: 33px; bottom: -7px; width: 1px; background: var(--fb-line); }
.st-flow li:last-child::before { content: none; }
.st-win { display: grid; gap: 10px; }
.st-win__card { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--fb-radius-md); border: 1px solid var(--fb-line); background: var(--fb-surface-2); }
.st-win__card b { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: .04em; }
.st-win__card.is-wolf b { color: var(--fb-role-wolf); }
.st-win__card.is-good b { color: var(--fb-neon-green); }
.st-win__card span { color: var(--fb-ink-2); font-size: 13px; line-height: 20px; }
.st-tip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--fb-radius-md); background: var(--fb-green-tint); border: 1px solid var(--fb-green-key); color: var(--fb-ink); font-size: 13px; line-height: 20px; }
.st-tip .fb-god { flex: none; height: 32px; padding: 0 12px 0 10px; font-size: 13px; pointer-events: none; }
/* 前情：战报时间线 */
.st-log { display: grid; gap: 0; }
.st-log__day { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; font: 700 13px/18px var(--font-body); color: var(--fb-ink-2); }
.st-log__day::after { content: ""; flex: 1; height: 1px; background: var(--fb-line); }
.st-log__day.is-night { color: var(--fb-role-wolf); }
.st-log li { display: grid; grid-template-columns: 58px 22px 1fr; align-items: start; gap: 8px; padding: 5px 0; font-size: 14px; line-height: 22px; }
.st-log li .fb-time { padding-top: 3px; }
.st-log li i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fb-surface-3); font-size: 12px; font-style: normal; }
.st-log li.is-god { color: var(--fb-ink-2); }
.st-log li.is-god i { background: rgba(242,193,78,.18); }
.st-log li .fb-tag { vertical-align: middle; margin-left: 6px; }
.st-log li b { font-weight: 700; }
.st-log li .is-wolf { color: var(--fb-role-wolf); }
.st-log li .is-good { color: var(--fb-neon-green); }
.st-log li .is-exile { color: var(--fb-rust-text); }
.st-log li.is-now { background: var(--fb-surface-2); border-radius: var(--fb-radius-sm); margin: 0 -8px; padding-inline: 8px; }
.st-prev { padding: 12px 14px; border: 1px dashed var(--fb-line-strong); border-radius: var(--fb-radius-md); color: var(--fb-ink-2); font-size: 13px; line-height: 20px; }
.st-prev b { color: var(--fb-ink); }
/* 上帝视角说明：开/关对照 */
.st-godex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fb-space-4); }
.st-godex__card { display: grid; align-content: start; gap: 10px; padding: 14px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-md); background: var(--fb-surface-2); }
.st-godex__card h4 { font: 700 14px/20px var(--font-body); }
.st-godex__card p { color: var(--fb-ink-2); font-size: 13px; line-height: 20px; }
.st-godex__demo { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 96px; padding: 10px; border-radius: var(--fb-radius-sm); background: var(--fb-night); }
.st-godex__demo .st-bubble { position: static; width: auto; max-width: 260px; animation: none; }
.st-godex__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-godex__pair > div { display: grid; gap: 6px; justify-items: center; padding: 10px 8px; border-radius: var(--fb-radius-sm); background: var(--fb-night); color: var(--fb-ink-3); font-size: 12px; text-align: center; }
.st-godex__pair > div.is-on { outline: 1px solid rgba(242,193,78,.5); color: var(--fb-gold); }

/* ── 手机竖屏 ── */
@container fbstage (max-width: 600px) {
  .st__top { left: 10px; right: 10px; top: 8px; gap: var(--fb-space-2); height: 40px; }
  .st__top .fb-brand__en, .st__top .fb-tag, .st__title, .st__tools, .st__live { display: none; }
  .st__top .fb-brand .fb-monster { --m: 22px; }
  .st__top .fb-brand__name { font-size: 24px; line-height: 30px; }
  .st__top .fb-god { height: 34px; padding: 0 12px 0 10px; font-size: 13px; }
  .st__rail { left: 6px; right: 6px; top: 50px; flex-wrap: wrap; justify-content: center; gap: 8px 4px; }
  .st__rail .fb-seat { --s: 30px; flex: 0 0 calc((100% - 20px) / 6); width: auto; gap: 3px; padding-top: 18px; }
  .st__rail .fb-seat__name { font-size: 9px; line-height: 10px; }
  .st__rail .fb-mark-role { right: -5px; bottom: -4px; width: 15px; height: 15px; font-size: 9px; box-shadow: 0 0 0 1.5px var(--fb-night); }
  .st__rail .fb-mark-sheriff { left: -6px; top: -6px; width: 15px; height: 18px; font-size: 8px; }
  .st__rail .fb-mark-votes { right: -9px; top: -7px; min-width: 18px; height: 15px; font-size: 9px; line-height: 15px; }
  .st__rail .fb-flag { height: 14px; font-size: 9px; line-height: 14px; }
  .st__rail .fb-seat.is-speak .fb-seat__face::after { inset: -6px; }
  .st__rail .fb-seat.is-speak .fb-seat__face { transform: scale(1.08) translateY(-2px); }
  .st__rail .fb-seat.is-speak .fb-seat__name { margin-top: 2px; }
  /* 侧边进度收成一枚「当前环节 ▾」，和三个入口排成一行 */
  .st__side { left: 10px; right: 10px; top: 188px; width: auto; display: flex; align-items: center; gap: 6px; }
  .st-steps { display: contents; }
  .st-steps__day, .st-steps li:not(.is-now) { display: none; }
  .st-steps li.is-now { height: 30px; padding: 0 10px; font-size: 13px; box-shadow: none; }
  .st-steps li.is-now::after { content: "▾"; position: static; width: auto; height: auto; margin: 0 0 0 2px; border: 0; }
  .st__side .st-tools-m { display: flex; gap: 4px; margin-left: auto; }
  .st__side .st-tools-m .fb-tool { height: 30px; padding: 0 9px; font-size: 12px; background: rgba(16,23,26,.9); }
  .st__arena { left: 10px; right: 10px; top: 228px; bottom: 236px; }
  .st-kick { height: 22px; padding: 0 8px; font-size: 11px; gap: 6px; }
  .st-react { width: 96px; top: auto; bottom: 26px; }
  .st-react img { height: 84px; }
  .st-react__cap { padding: 4px 6px; font-size: 11px; gap: 3px; }
  .st-react__cap small { display: none; }
  .st-bubble { width: 170px; padding: 8px 10px 10px; left: auto; right: 0; top: 26px; }
  .st__arena > .st-actor.is-lead, .st__arena > .st-actor__name.is-lead, .st__arena > .st-spot { left: 42%; }
  .st-bubble__text { font-size: 13px; line-height: 20px; }
  .st-bubble::before { left: -16px; bottom: 10px; width: 12px; height: 12px; }
  .st-bubble::after { left: -26px; bottom: 2px; width: 7px; height: 7px; }
  .st-spot { width: 320px; }
  .st__sub { left: 10px; right: 10px; bottom: 116px; }
  .st__sub .fb-speech__in { padding: 10px 14px 12px; }
  .st__sub .fb-speech__text { font-size: 16px; line-height: 26px; -webkit-line-clamp: 3; }
  .st__sub .fb-speech__ord, .st__sub .fb-speech__to .fb-avatar { display: none; }
  .st__bar { left: 10px; right: 10px; bottom: 4px; }
  .st__bar .fb-timeline { padding: 14px 0 18px; }
  .st__bar .fb-timeline__track > i:not(.is-now) > span:not(.is-major) { display: none; }
  .st__bar .fb-timeline__track > i.is-now + i > span, .st__bar .fb-timeline__track > i:has(+ i.is-now) > span { display: none; }
  .st-total { display: none; }
  .st__bar .fb-player__row .fb-time { font-size: 11px; }
  .st__bar .fb-keybtn { height: 32px; padding: 0 9px; font-size: 12px; }
  .st__bar .fb-keybtn span { display: none; }
  .st__bar .fb-speed { min-width: 36px; }
  /* 密室：目标横着放在上面，狼 2×2 */
  .st-den { inset: 30px 0 22px; grid-template-columns: 1fr 1fr; grid-template-rows: 88px repeat(2, minmax(0, 1fr)); gap: 8px; }
  .st-den .st-target { grid-column: 1 / -1; grid-row: 1; grid-template-columns: auto 1fr auto; grid-template-areas: "av kick tally" "av name tally"; align-content: center; align-items: center; justify-items: start; gap: 0 12px; padding: 10px 14px; text-align: left; }
  .st-target .fb-avatar { --s: 56px; grid-area: av; }
  .st-target__kick { grid-area: kick; font-size: 11px; align-self: end; }
  .st-target__name { grid-area: name; font-size: 28px; line-height: 32px; align-self: start; }
  .st-target__tally { grid-area: tally; flex-direction: column; align-items: flex-end; gap: 0; font-size: 11px; }
  .st-target__tally b { font-size: 26px; line-height: 28px; }
  .st-target__chips, .st-target__note, .st-target .fb-bar { display: none; }
  .st-den[data-wolves="3"] .st-cell:nth-child(2) { grid-row: auto; }
  .st-cell__head { padding: 6px 8px; }
  .st-cell__head .fb-nameplate { height: 22px; padding: 0 8px; font-size: 14px; }
  .st-cell__state { height: 20px; padding: 0 6px; font-size: 11px; }
  .st-den .st-bubble { display: none; }
  .st-cell.is-speak img { left: 50%; }
  .st-cell__tgt { display: none; }
  .st-panel { width: calc(100% - 16px); max-height: calc(100% - 16px); border-radius: var(--fb-radius-lg); }
  .st-panel__body { padding: var(--fb-space-4); gap: var(--fb-space-4); }
  .st-cols { grid-template-columns: minmax(0, 1fr); gap: var(--fb-space-4); }
}

.cs { position: relative; min-height: 100%; background: var(--fb-night); color: var(--fb-ink); overflow: hidden; }
.cs .fb-nav { position: relative; z-index: 2; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cs__wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--fb-space-8); }
.cs-hero { position: relative; padding: var(--fb-space-10) 0 var(--fb-space-8); }
.cs-hero__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--fb-space-6); }
.cs-hero h1 { margin-top: 8px; font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 60px; letter-spacing: .04em; color: var(--fb-tube); text-shadow: var(--fb-glow-green); }
.cs-hero p { margin-top: 10px; color: var(--fb-ink-2); font-size: 15px; line-height: 24px; max-width: 56ch; }
.cs-filters { display: flex; flex-wrap: wrap; gap: var(--fb-space-3); align-items: center; }
.cs-seg { display: inline-flex; padding: 3px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-sm); background: var(--fb-surface-1); }
.cs-seg button { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 6px; color: var(--fb-ink-2); font: 500 13px/18px var(--font-body); white-space: nowrap; }
.cs-seg button[aria-pressed="true"] { background: var(--fb-neon-green); color: var(--fb-on-green); font-weight: 700; }
.cs-sort { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-sm); background: var(--fb-surface-1); color: var(--fb-ink-2); font-size: 13px; }
.cs-sort b { color: var(--fb-ink); font-weight: 500; }
/* 前三名：像素小怪兽名次徽章 */
.cs-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fb-space-4); margin: var(--fb-space-6) 0; }
.cs-top { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; padding: var(--fb-space-5); border: 1px solid var(--fb-line); border-radius: var(--fb-radius-lg); background: var(--fb-surface-1); overflow: hidden; }
.cs-top::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0, var(--rank-tint), transparent 70%); pointer-events: none; }
.cs-top--1 { --rank: var(--fb-gold); --rank-tint: rgba(242,193,78,.18); border-color: rgba(242,193,78,.5); }
.cs-top--2 { --rank: #c9d3dc; --rank-tint: rgba(201,211,220,.14); }
.cs-top--3 { --rank: var(--fb-rust-text); --rank-tint: rgba(236,122,63,.14); }
.cs-top .fb-avatar { --s: 72px; grid-row: 1 / 4; box-shadow: 0 0 0 2px var(--fb-night), 0 0 0 4px var(--rank); }
.cs-top__name { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 32px; letter-spacing: .04em; }
.cs-top__name .fb-tag { font-family: var(--font-body); letter-spacing: 0; }
.cs-top__nums { display: flex; gap: 16px; color: var(--fb-ink-2); font-size: 12px; line-height: 16px; }
.cs-top__nums b { display: block; font-family: var(--font-latin); font-weight: 400; font-size: 22px; line-height: 26px; color: var(--fb-ink); }
.cs-top__model { color: var(--fb-ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; }
.cs-rank { position: absolute; right: 14px; top: 12px; display: grid; justify-items: center; gap: 2px; }
.cs-rank .fb-monster { --m: 34px; filter: drop-shadow(0 0 8px var(--rank)); }
.cs-rank b { font-family: var(--font-latin); font-size: 14px; color: var(--rank); }
.cs-rank--1 .fb-monster { background-image: 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%23f2c14e%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%23ffe9a8%22 d=%22M0 4h9v1H0zM1 5h7v1H1zM3 6h1v1H3zM5 6h1v1H5z%22/%3E%3Cpath fill=%22%23c9972a%22 d=%22M1 6h2v1H1zM4 6h1v1H4zM6 6h2v1H6zM0 7h2v1H0zM3 7h1v1H3zM5 7h1v1H5zM7 7h2v1H7z%22/%3E%3Cpath fill=%22%238a5a10%22 d=%22M0 8h1v1H0zM3 8h1v1H3zM5 8h1v1H5zM8 8h1v1H8z%22/%3E%3C/svg%3E"); }
.cs-rank--2 .fb-monster { background-image: 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%23c9d3dc%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%23eef2f5%22 d=%22M0 4h9v1H0zM1 5h7v1H1zM3 6h1v1H3zM5 6h1v1H5z%22/%3E%3Cpath fill=%22%238fa0ad%22 d=%22M1 6h2v1H1zM4 6h1v1H4zM6 6h2v1H6zM0 7h2v1H0zM3 7h1v1H3zM5 7h1v1H5zM7 7h2v1H7z%22/%3E%3Cpath fill=%22%235b6a75%22 d=%22M0 8h1v1H0zM3 8h1v1H3zM5 8h1v1H5zM8 8h1v1H8z%22/%3E%3C/svg%3E"); }
.cs-rank--3 .fb-monster { background-image: 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%23ec7a3f%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%23ffc9a6%22 d=%22M0 4h9v1H0zM1 5h7v1H1zM3 6h1v1H3zM5 6h1v1H5z%22/%3E%3Cpath fill=%22%23b4562a%22 d=%22M1 6h2v1H1zM4 6h1v1H4zM6 6h2v1H6zM0 7h2v1H0zM3 7h1v1H3zM5 7h1v1H5zM7 7h2v1H7z%22/%3E%3Cpath fill=%22%236e3416%22 d=%22M0 8h1v1H0zM3 8h1v1H3zM5 8h1v1H5zM8 8h1v1H8z%22/%3E%3C/svg%3E"); }
.cs-rank__crown { width: 30px; height: 11px; 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%23f2c14e%22 d=%22M0 0h1v1H0zM4 0h1v1H4zM8 0h1v1H8zM0 1h2v1H0zM3 1h3v1H3zM7 1h2v1H7zM0 2h9v1H0z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; image-rendering: pixelated; }
/* 榜单表 */
.cs-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-lg); overflow: hidden; background: var(--fb-surface-1); font-size: 14px; line-height: 20px; }
.cs-table th { padding: 10px 14px; background: var(--fb-surface-2); color: var(--fb-ink-3); font: 400 12px/18px var(--font-body); text-align: left; white-space: nowrap; }
.cs-table th.is-sort { color: var(--fb-neon-green); }
.cs-table th.is-sort::after { content: " ▾"; }
.cs-table td { padding: 10px 14px; border-top: 1px solid var(--fb-line); vertical-align: middle; white-space: nowrap; }
.cs-table tr:hover td { background: var(--fb-surface-2); }
.cs-table .is-rank { width: 1%; font-family: var(--font-latin); font-size: 13px; color: var(--fb-ink-3); }
.cs-table .is-rank .fb-monster { --m: 20px; vertical-align: middle; }
.cs-table .is-rank.is-1 .fb-monster { background-image: 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%23f2c14e%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%23ffe9a8%22 d=%22M0 4h9v1H0zM1 5h7v1H1zM3 6h1v1H3zM5 6h1v1H5z%22/%3E%3Cpath fill=%22%23c9972a%22 d=%22M1 6h2v1H1zM4 6h1v1H4zM6 6h2v1H6zM0 7h2v1H0zM3 7h1v1H3zM5 7h1v1H5zM7 7h2v1H7z%22/%3E%3Cpath fill=%22%238a5a10%22 d=%22M0 8h1v1H0zM3 8h1v1H3zM5 8h1v1H5zM8 8h1v1H8z%22/%3E%3C/svg%3E"); }
.cs-table .is-rank.is-2 .fb-monster { background-image: 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%23c9d3dc%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%23eef2f5%22 d=%22M0 4h9v1H0zM1 5h7v1H1zM3 6h1v1H3zM5 6h1v1H5z%22/%3E%3Cpath fill=%22%238fa0ad%22 d=%22M1 6h2v1H1zM4 6h1v1H4zM6 6h2v1H6zM0 7h2v1H0zM3 7h1v1H3zM5 7h1v1H5zM7 7h2v1H7z%22/%3E%3Cpath fill=%22%235b6a75%22 d=%22M0 8h1v1H0zM3 8h1v1H3zM5 8h1v1H5zM8 8h1v1H8z%22/%3E%3C/svg%3E"); }
.cs-table .is-rank.is-3 .fb-monster { background-image: 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%23ec7a3f%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%23ffc9a6%22 d=%22M0 4h9v1H0zM1 5h7v1H1zM3 6h1v1H3zM5 6h1v1H5z%22/%3E%3Cpath fill=%22%23b4562a%22 d=%22M1 6h2v1H1zM4 6h1v1H4zM6 6h2v1H6zM0 7h2v1H0zM3 7h1v1H3zM5 7h1v1H5zM7 7h2v1H7z%22/%3E%3Cpath fill=%22%236e3416%22 d=%22M0 8h1v1H0zM3 8h1v1H3zM5 8h1v1H5zM8 8h1v1H8z%22/%3E%3C/svg%3E"); }
.cs-table .is-num { font-family: var(--font-latin); font-size: 15px; }
.cs-table .is-num small { font-family: var(--font-body); font-size: 12px; color: var(--fb-ink-3); margin-left: 2px; }
.cs-table .is-dim { color: var(--fb-ink-3); }
.cs-table .fb-who .fb-tag { margin-left: 6px; }
.cs-rate { display: inline-grid; grid-template-columns: 44px 90px; align-items: center; gap: 8px; }
.cs-rate b { font-family: var(--font-latin); font-weight: 400; font-size: 15px; }
.cs-rate .fb-bar { grid-column: auto; width: 90px; height: 6px; }
.cs-rate .fb-bar i { background: repeating-linear-gradient(90deg, var(--fb-neon-green) 0 6px, transparent 6px 8px); }
.cs-rate.is-wolf .fb-bar i { background: repeating-linear-gradient(90deg, var(--fb-role-wolf) 0 6px, transparent 6px 8px); }
.cs-model { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--fb-line); color: var(--fb-ink-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; white-space: nowrap; }
.cs-model::before { content: ""; width: 11px; height: 11px; 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; }
.cs-mvp { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-latin); font-size: 15px; color: var(--fb-gold); }
.cs-mvp::before { content: ""; width: 16px; height: 6px; 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%23f2c14e%22 d=%22M0 0h1v1H0zM4 0h1v1H4zM8 0h1v1H8zM0 1h2v1H0zM3 1h3v1H3zM7 1h2v1H7zM0 2h9v1H0z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; image-rendering: pixelated; }
.cs-mvp.is-zero { color: var(--fb-ink-3); }
.cs-mvp.is-zero::before { opacity: .3; }
.cs-note { margin-top: var(--fb-space-4); color: var(--fb-ink-3); font-size: 12px; line-height: 18px; }

/* 个人战绩主页 */
.cs-profile { position: relative; }
.cs-splash { position: absolute; inset: 0 0 auto; height: 760px; overflow: hidden; }
.cs-splash img { width: 100%; height: 100%; object-fit: cover; object-position: var(--sx, 68%) 20%; filter: brightness(.9); }
.cs-splash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--fb-night) 0, rgba(10,13,15,.92) 32%, rgba(10,13,15,.35) 58%, rgba(10,13,15,.1) 100%), linear-gradient(180deg, rgba(10,13,15,.55) 0, transparent 20%, transparent 60%, var(--fb-night) 100%); }
.cs-head { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 560px) 1fr; padding: var(--fb-space-12) 0 var(--fb-space-8); min-height: 600px; }
.cs-head__kick { display: flex; align-items: center; gap: 12px; }
.cs-head__kick .fb-kicker { color: var(--fb-ink-3); }
.cs-head h1 { margin-top: 10px; font-family: var(--font-display); font-weight: 400; font-size: 96px; line-height: 96px; letter-spacing: .04em; color: var(--fb-tube); text-shadow: 0 0 14px var(--a), 0 0 34px color-mix(in srgb, var(--a) 60%, transparent); }
.cs-head__tag { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: .06em; color: var(--a); }
.cs-head__intro { margin-top: 18px; font: 500 18px/30px var(--font-body); color: var(--fb-ink); text-wrap: pretty; }
.cs-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.cs-stat { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-md); background: rgba(16,23,26,.86); }
.cs-stat b { font-family: var(--font-latin); font-weight: 400; font-size: 30px; line-height: 34px; color: var(--fb-ink); }
.cs-stat b small { font-family: var(--font-body); font-size: 13px; color: var(--fb-ink-2); margin-left: 3px; }
.cs-stat span { color: var(--fb-ink-3); font-size: 12px; line-height: 16px; white-space: nowrap; }
.cs-stat--mvp b { color: var(--fb-gold); }
.cs-stat--wolf b { color: var(--fb-role-wolf); }
.cs-stat--rate b { color: var(--fb-neon-green); }
.cs-head__acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
.cs-head__model { margin-top: 18px; display: flex; gap: 8px; align-items: center; color: var(--fb-ink-3); font-size: 12px; }
.cs-sec { position: relative; z-index: 1; padding: var(--fb-space-8) 0 0; }
.cs-sec__h { display: flex; align-items: baseline; gap: 12px; margin-bottom: var(--fb-space-4); }
.cs-sec__h h2 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 36px; letter-spacing: .04em; }
.cs-sec__h small { color: var(--fb-ink-3); font-size: 13px; }
.cs-sec__h a { margin-left: auto; color: var(--fb-neon-cyan); font-size: 13px; }
/* 最近战绩：一行一局 */
.cs-matches { display: grid; gap: 8px; }
.cs-match { display: grid; grid-template-columns: 72px 150px 92px 72px 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-md); background: var(--fb-surface-1); transition: border-color var(--fb-dur-state), transform var(--fb-dur-state) var(--fb-ease-out); }
.cs-match:hover { border-color: var(--fb-line-strong); transform: translateX(4px); }
.cs-match.is-win { border-left: 3px solid var(--fb-neon-green); }
.cs-match.is-lose { border-left: 3px solid var(--fb-line-strong); }
.cs-match .fb-ep { justify-self: start; }
.cs-match__what { color: var(--fb-ink-2); font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-match__what small { display: block; color: var(--fb-ink-3); font-size: 11px; }
.cs-match__res { font: 700 14px/18px var(--font-body); }
.cs-match__res.is-win { color: var(--fb-neon-green); }
.cs-match__res.is-lose { color: var(--fb-ink-3); }
.cs-match__res small { display: block; color: var(--fb-ink-3); font-weight: 400; font-size: 11px; }
.cs-match__quote { color: var(--fb-ink); font-size: 14px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-match__quote::before { content: "「"; color: var(--fb-ink-3); }
.cs-match__quote::after { content: "」"; color: var(--fb-ink-3); }
.cs-match__quote.is-none { color: var(--fb-ink-3); font-size: 13px; }
.cs-match__quote.is-none::before, .cs-match__quote.is-none::after { content: none; }
.cs-match__go { display: inline-flex; align-items: center; gap: 4px; color: var(--fb-neon-cyan); font-size: 13px; white-space: nowrap; }
.cs-match__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-more { display: flex; justify-content: center; margin-top: 12px; }
/* 下面三块：贴纸、常和谁、档案 */
.cs-grid3 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--fb-space-6); }
.cs-faces { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.cs-face { display: grid; gap: 4px; justify-items: center; padding: 6px 4px 8px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-md); background: var(--fb-surface-1); color: var(--fb-ink-3); font-size: 11px; transition: border-color var(--fb-dur-state), transform var(--fb-dur-state) var(--fb-ease-pop); }
.cs-face img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 0; border-radius: var(--fb-radius-sm); }
.cs-face:hover { border-color: var(--a); transform: translateY(-3px); color: var(--fb-ink); }
.cs-ties { display: grid; gap: 8px; }
.cs-tie { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-md); background: var(--fb-surface-1); font-size: 13px; line-height: 18px; }
.cs-tie .fb-avatar { --s: 32px; }
.cs-tie b { font-weight: 700; white-space: nowrap; }
.cs-tie .fb-tag { justify-self: start; }
.cs-tie span { color: var(--fb-ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-lines { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-lines span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--fb-line-strong); border-radius: var(--fb-radius-pill); color: var(--fb-ink-2); font-size: 13px; }
.cs-dossier { margin-top: var(--fb-space-6); border: 1px dashed var(--fb-line-strong); border-radius: var(--fb-radius-md); }
.cs-dossier summary { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: var(--fb-ink-2); font-size: 14px; cursor: pointer; list-style: none; }
.cs-dossier summary::-webkit-details-marker { display: none; }
.cs-dossier summary::after { content: "展开"; margin-left: auto; color: var(--fb-neon-cyan); font-size: 12px; }
.cs-dossier[open] summary::after { content: "收起"; }
.cs-dossier dl { display: grid; grid-template-columns: 72px 1fr; gap: 8px 16px; padding: 0 16px 16px; font-size: 14px; line-height: 22px; }
.cs-dossier dt { color: var(--fb-ink-3); }
.cs-dossier dd { margin: 0; color: var(--fb-ink-2); }
.cs-dossier dd.is-lock { color: var(--fb-ink-3); font-style: italic; }
.cs-castbar { position: relative; z-index: 1; display: flex; gap: 6px; justify-content: space-between; padding: var(--fb-space-6) 0 var(--fb-space-8); margin-top: var(--fb-space-10); border-top: 1px solid var(--fb-line); }
.cs-castbar .fb-seat { --s: 48px; padding-top: 0; width: auto; flex: 1; }
.cs-castbar .fb-seat.is-here .fb-seat__face { box-shadow: 0 0 0 2px var(--fb-night), 0 0 0 4px var(--a); }
.cs-castbar .fb-seat.is-here .fb-seat__name { color: var(--fb-ink); font-weight: 700; }

/* 艺人页中等宽（< 1000，手机横屏）：前三名一行一张，表收掉后几列，换人栏换行 */
.cs--s .cs-podium { grid-template-columns: 1fr; gap: 10px; }
.cs--s .cs-top { grid-template-columns: auto 1fr auto; }
.cs--s .cs-top .fb-avatar { --s: 56px; grid-row: 1 / 3; }
.cs--s .cs-top__name { font-size: 24px; line-height: 28px; }
.cs--s .cs-top__nums { flex-wrap: wrap; gap: 8px 14px; }
.cs--s .cs-top__nums span { white-space: nowrap; }
.cs--s .cs-top__model { grid-column: 2; }
.cs--s .cs-rank { position: static; grid-row: 1 / 4; grid-column: 3; align-self: center; }
.cs--s .cs-table th:nth-child(n+7), .cs--s .cs-table td:nth-child(n+7) { display: none; }
.cs--s .cs-table th, .cs--s .cs-table td { padding-inline: 10px; }
.cs--s .cs-castbar { flex-wrap: wrap; justify-content: flex-start; gap: 10px 0; }
.cs--s .cs-castbar .fb-seat { flex: 0 0 12.5%; }
.cs--s .cs-hero__row { flex-direction: column; align-items: flex-start; }
/* 中等宽的人页头部：场景图在上、字在下，和手机一样 */
.cs--s .cs-splash { height: 560px; }
.cs--s .cs-splash img { object-position: var(--sx, 68%) 0; }
.cs--s .cs-splash::after, .cs--s.cs-profile--right .cs-splash::after { background: linear-gradient(180deg, rgba(10,13,15,.5) 0, rgba(10,13,15,.1) 30%, rgba(10,13,15,.75) 62%, var(--fb-night) 100%); }
.cs--s .cs-head, .cs--s.cs-profile--right .cs-head { grid-template-columns: 1fr; min-height: 0; padding: 340px 0 var(--fb-space-6); }
.cs--s.cs-profile--right .cs-head > div { grid-column: 1; }
.cs--s .cs-head h1 { font-size: 72px; line-height: 72px; }
/* 艺人页手机 */
.cs--m .cs-table th:nth-child(n+6), .cs--m .cs-table td:nth-child(n+6) { display: none; }
.cs--m .cs-table th, .cs--m .cs-table td { padding: 8px 8px; }
.cs--m .cs-table .fb-who .fb-tag { display: none; }
.cs--m .cs-rate { grid-template-columns: auto; }
.cs--m .cs-rate .fb-bar { display: none; }
.cs--m .cs-top__nums { gap: 6px 12px; font-size: 11px; }
.cs--m .cs-top__nums b { font-size: 18px; line-height: 22px; }
.cs--m .cs-filters { gap: 8px; }
.cs--m .cs-seg button { height: 28px; padding: 0 9px; font-size: 12px; }
.cs--m .cs-hero h1 { font-size: 44px; line-height: 48px; }
.cs--m .cs__wrap { padding-inline: 16px; }
.cs--m .cs-splash { height: 520px; }
.cs--m .cs-splash img { object-position: var(--sx, 68%) 0; }
.cs--m .cs-splash::after { background: linear-gradient(180deg, rgba(10,13,15,.5) 0, rgba(10,13,15,.1) 30%, rgba(10,13,15,.75) 62%, var(--fb-night) 100%); }
.cs--m .cs-head { grid-template-columns: 1fr; min-height: 0; padding: 320px 0 var(--fb-space-6); }
.cs--m .cs-head h1 { font-size: 64px; line-height: 64px; }
.cs--m .cs-head__tag { font-size: 20px; }
.cs--m .cs-head__intro { font-size: 15px; line-height: 25px; }
.cs--m .cs-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.cs--m .cs-stat { padding: 10px 12px; }
.cs--m .cs-stat b { font-size: 24px; line-height: 28px; }
.cs--m .cs-head__acts .fb-btn { flex: 1; }
.cs--m .cs-sec { padding-top: var(--fb-space-6); }
.cs--m .cs-sec__h h2 { font-size: 24px; line-height: 30px; }
.cs--m .cs-match { grid-template-columns: auto 1fr auto; grid-template-areas: "ep what res" "quote quote quote" "go go go"; gap: 8px 10px; padding: 10px 12px; }
.cs--m .cs-match .fb-ep { grid-area: ep; }
.cs--m .cs-match__what { grid-area: what; }
.cs--m .cs-match__role { display: none; }
.cs--m .cs-match__res { grid-area: res; text-align: right; }
.cs--m .cs-match__mvp { display: none; }
.cs--m .cs-match__quote { grid-area: quote; white-space: normal; }
.cs--m .cs-match__go { grid-area: go; }
.cs--m .cs-grid3 { grid-template-columns: 1fr; }
.cs--m .cs-tie { grid-template-columns: auto auto 1fr; grid-template-areas: "av name tag" "av say say"; gap: 2px 10px; }
.cs--m .cs-tie .fb-avatar { grid-area: av; }
.cs--m .cs-tie b { grid-area: name; }
.cs--m .cs-tie .fb-tag { grid-area: tag; }
.cs--m .cs-tie span:last-child { grid-area: say; white-space: normal; }
.cs--m .cs-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs--m .cs-castbar { flex-wrap: wrap; justify-content: flex-start; gap: 8px 0; }
.cs--m .cs-castbar .fb-seat { flex: 0 0 25%; --s: 44px; }

@keyframes st-step { 0% { transform: translateX(-50%) translateY(8px); opacity: 0; } 100% { transform: translateX(-50%) translateY(0); opacity: 1; } }
@keyframes st-pop { 0% { transform: scale(.92); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes st-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes st-drop { 0% { transform: translateY(-10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

.st [data-view="audience"] { display: none; }
.st[data-god="off"] [data-view="god"] { display: none; }
.st[data-god="off"] .st__rail[data-view="audience"] { display: flex; }
.st[data-god="off"] .st-den, .st[data-god="off"] .st-den + .st-bubble { display: none; }
.st[data-god="off"] .st-nightcard { display: grid; }
.st-nightcard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 8px; justify-items: center; padding: 28px 40px; border: 1px solid var(--fb-line-strong); border-radius: var(--fb-radius-lg); background: rgba(10,13,15,.82); text-align: center; }
.st-nightcard b { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 46px; letter-spacing: .04em; color: var(--fb-tube); }
.st-nightcard span { color: var(--fb-ink-2); font-size: 14px; line-height: 22px; }
.st[data-god="off"] .st-log li.is-god { filter: blur(4px); pointer-events: none; }
.st__modal[hidden] { display: none; }
.st-tools-m { display: none; }

/* 章：像素图，五种。飞行中带一串点，落在头像右上角盖住 */
.st-stamp { display: inline-block; width: 36px; height: 36px; background: center / 100% 100% no-repeat; image-rendering: pixelated; flex: none; }
.st-stamp--kill { background-image: 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%23ff3d8b%22 d=%22M8 0h1v1H8zM7 1h2v1H7zM6 2h2v1H6zM5 3h2v1H5zM4 4h2v1H4zM3 5h2v1H3zM3 6h1v1H3z%22/%3E%3Cpath fill=%22%231d1404%22 d=%22M0 5h2v1H0zM1 6h2v1H1zM0 7h4v1H0zM0 8h1v1H0zM3 8h1v1H3z%22/%3E%3C/svg%3E"); } .st-stamp--guard { background-image: 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%2322e3ff%22 d=%22M0 0h9v1H0zM0 1h1v1H0zM8 1h1v1H8zM0 2h1v1H0zM3 2h3v1H3zM8 2h1v1H8zM0 3h1v1H0zM3 3h1v1H3zM5 3h1v1H5zM8 3h1v1H8zM0 4h1v1H0zM3 4h3v1H3zM8 4h1v1H8zM1 5h1v1H1zM7 5h1v1H7zM1 6h1v1H1zM7 6h1v1H7zM2 7h1v1H2zM6 7h1v1H6zM3 8h3v1H3z%22/%3E%3C/svg%3E"); } .st-stamp--check { background-image: 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"); }
.st-stamp--save { background-image: 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%2339ff8f%22 d=%22M3 0h3v1H3zM4 1h1v1H4zM3 2h3v1H3zM2 3h1v1H2zM6 3h1v1H6zM1 4h1v1H1zM7 4h1v1H7zM1 5h1v1H1zM3 5h3v1H3zM7 5h1v1H7zM1 6h1v1H1zM3 6h3v1H3zM7 6h1v1H7zM1 7h7v1H1zM2 8h5v1H2z%22/%3E%3C/svg%3E"); } .st-stamp--poison { background-image: 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%23b36cff%22 d=%22M3 0h3v1H3zM4 1h1v1H4zM3 2h3v1H3zM2 3h1v1H2zM6 3h1v1H6zM1 4h1v1H1zM7 4h1v1H7zM1 5h1v1H1zM3 5h3v1H3zM7 5h1v1H7zM1 6h1v1H1zM3 6h3v1H3zM7 6h1v1H7zM1 7h7v1H1zM2 8h5v1H2z%22/%3E%3C/svg%3E"); }
.st-fly { position: absolute; z-index: 7; left: var(--x1); top: var(--y1); width: var(--len); height: 2px; transform-origin: 0 50%; rotate: var(--r); pointer-events: none; }
.st-fly::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--c, var(--fb-neon-cyan)) 0 6px, transparent 6px 14px); opacity: .75; }
.st-fly .st-stamp { position: absolute; right: -18px; top: -18px; rotate: calc(var(--r) * -1); filter: drop-shadow(0 0 10px var(--c, var(--fb-neon-cyan))); animation: fb-walk .64s var(--fb-ease-pixel) infinite; }
.st__rail .fb-seat .st-stamp { position: absolute; z-index: 5; right: -16px; top: 2px; width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(0,0,0,.8)); animation: st-pop var(--fb-dur-enter) var(--fb-ease-pop) 1 both; }
.st__rail .fb-seat .st-stamp + .st-stamp { right: -16px; top: 24px; }
.st-legend { position: absolute; z-index: 5; left: 0; top: 40px; display: flex; gap: 14px; padding: 10px 14px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-md); background: rgba(10,13,15,.84); }
.st-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--fb-ink-2); font-size: 12px; white-space: nowrap; }
.st-legend .st-stamp { width: 22px; height: 22px; }
/* 夜里单人行动：舞台中央一个人，粉光；选谁，谁的头像青圈 */
.st--night .st-actor.is-lead { filter: brightness(.92) drop-shadow(0 0 28px rgba(255,61,139,.18)); }
/* 天亮回放：三秒，舞台中央两枚章撞在一起，横幅出结果 */
.st-dawn { position: absolute; z-index: 6; left: 31%; top: 30px; translate: -50% 0; display: grid; justify-items: center; gap: 10px; }
.st-dawn__clash { display: flex; align-items: center; gap: 4px; }
.st-dawn__clash .st-stamp { width: 72px; height: 72px; }
.st-dawn__clash .st-stamp--kill { rotate: -12deg; } .st-dawn__clash .st-stamp--save { rotate: 10deg; }
.st-dawn__vs { font-family: var(--font-display); font-size: 28px; color: var(--fb-ink-3); }
.st-dawn__banner { display: inline-flex; align-items: baseline; gap: 10px; padding: 6px 18px; border-radius: var(--fb-radius-sm); background: rgba(10,13,15,.86); border: 1px solid var(--fb-line-strong); }
.st-dawn__banner b { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 44px; letter-spacing: .04em; color: var(--fb-tube); text-shadow: var(--fb-glow-green); }
.st-dawn__banner.is-dead b { color: var(--fb-rust-text); text-shadow: none; }
.st-dawn__banner span { color: var(--fb-ink-2); font-size: 14px; }
.st-dawn__who { display: flex; gap: 10px; }
.st-dawn__who span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: var(--fb-radius-pill); background: rgba(10,13,15,.8); border: 1px solid var(--fb-line); color: var(--fb-ink-2); font-size: 12px; }
.st-dawn__who .fb-avatar { --s: 22px; } .st-dawn__who .st-stamp { width: 18px; height: 18px; }
/* 旧账卡：说话的人提到前几局的事，字幕卡右上冒一张小卡，点进那一局 */
.st-old { position: absolute; z-index: 9; right: 0; top: -58px; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px 0 8px; border-radius: var(--fb-radius-md); background: rgba(16,23,26,.96); border: 1px solid var(--fb-line-strong); box-shadow: var(--fb-shadow-pop); animation: st-pop var(--fb-dur-enter) var(--fb-ease-pop) 1 both; }
.st-old .fb-ep { height: 22px; font-size: 11px; }
.st-old b { font: 700 13px/18px var(--font-body); color: var(--fb-ink); }
.st-old small { color: var(--fb-ink-3); font-size: 12px; }
.st-old a { color: var(--fb-neon-cyan); font-size: 12px; white-space: nowrap; }
.st-old::after { content: ""; position: absolute; right: 24px; bottom: -6px; width: 10px; height: 10px; rotate: 45deg; background: rgba(16,23,26,.96); border-right: 1px solid var(--fb-line-strong); border-bottom: 1px solid var(--fb-line-strong); }
.st__sub { overflow: visible; }
/* 珍藏卡：采访时他把一句话留进了珍藏，舞台右下冒一张金边小卡，点进他的家 */
.st-memento { position: absolute; z-index: 6; right: 0; top: 296px; width: 300px; display: grid; gap: 6px; padding: 12px 14px 12px 22px; border: 1px solid rgba(242,193,78,.5); border-radius: var(--fb-radius-md); background: rgba(22,18,8,.9); animation: st-pop var(--fb-dur-enter) var(--fb-ease-pop) 1 both; }
.st-memento::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 12px; width: 4px; background: repeating-linear-gradient(180deg, rgba(242,193,78,.6) 0 4px, transparent 4px 12px); }
.st-memento__h { display: flex; align-items: center; gap: 6px; color: var(--fb-gold); font: 700 12px/16px var(--font-body); }
.st-memento__h i { width: 18px; height: 7px; 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%23f2c14e%22 d=%22M0 0h1v1H0zM4 0h1v1H4zM8 0h1v1H8zM0 1h2v1H0zM3 1h3v1H3zM7 1h2v1H7zM0 2h9v1H0z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; image-rendering: pixelated; }
.st-memento__text { font: 500 14px/22px var(--font-body); color: var(--fb-ink); }
.st-memento a { color: var(--fb-neon-cyan); font-size: 12px; }

@container fbstage (max-width: 600px) {
  .st__rail { left: 8px; right: 8px; top: 52px; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; gap: 0; height: 64px; }
  .st__rail .fb-seat { --s: 24px; flex: 0 0 auto; width: 26px; gap: 2px; padding-top: 10px; }
  .st__rail .fb-seat__name { display: none; }
  .st__rail .fb-seat.is-speak { --s: 36px; width: 38px; padding-top: 4px; margin: 0 -6px; }
  .st__rail .fb-seat.is-speak .fb-seat__face { transform: none; box-shadow: 0 0 0 2px var(--fb-night), 0 0 0 3px var(--fb-tube), 0 0 14px 2px rgba(255,255,255,.3); }
  .st__rail .fb-seat.is-speak .fb-seat__name { display: block; font-size: 10px; line-height: 12px; margin-top: 1px; }
  .st__rail .fb-seat.is-speak .fb-seat__face::after { inset: -5px; }
  .st__rail .fb-seat.is-target .fb-seat__face { box-shadow: 0 0 0 1.5px var(--fb-night), 0 0 0 3px var(--fb-neon-cyan); }
  .st__rail .fb-seat .fb-seat__face { box-shadow: 0 0 0 1.5px var(--fb-night), 0 0 0 2.5px var(--ring); }
  .st__rail .fb-mark-role { right: -4px; bottom: -3px; width: 12px; height: 12px; font-size: 7px; box-shadow: 0 0 0 1px var(--fb-night); }
  .st__rail .fb-mark-sheriff { left: -5px; top: -5px; width: 12px; height: 14px; font-size: 7px; }
  .st__rail .fb-mark-votes { right: -7px; top: -6px; min-width: 15px; height: 13px; font-size: 8px; line-height: 13px; padding: 0 3px; }
  .st__rail .fb-mark-votes i { display: none; }
  .st__rail .fb-flag { height: 12px; font-size: 8px; line-height: 12px; top: -2px; }
  .st__rail .fb-flag::after { height: 2px; }
  .st__rail .fb-check > i { padding: 0 3px; gap: 2px; } .st__rail .fb-check > i::before { width: 7px; height: 5px; } .st__rail .fb-check > b { padding: 0 3px; }
  .st__rail .fb-turn { display: none; }
  .st__rail .fb-seat.is-next .fb-seat__face { outline-offset: 3px; outline-width: 1.5px; }
  .st__rail .fb-seat.is-asleep .fb-seat__face::before { height: 1.5px; }
  .st__rail .st-stamp { width: 16px; height: 16px; right: -9px; top: -4px; }
  .st__rail .xp-trail { display: none; }
  /* 下面的东西全部上移 */
  .st__side { top: 124px; }
  .st__arena { top: 160px; bottom: 236px; }
  .st--day .st__shade { background: linear-gradient(180deg, rgba(5,6,8,.9) 0, rgba(5,6,8,.5) 14%, rgba(5,6,8,.28) 45%, rgba(5,6,8,.5) 72%, rgba(5,6,8,.94) 100%); }
}

/* 后排群像：全员在场（Tong 11-14：「人太少，我们是舞台剧的思想」）。后排比主角矮、暗、靠后；主角脚下的光把前后分开 */
.st-actor.is-back { bottom: 118px; --b: .42; --sat: .7; }
.st--end .st-actor.is-back { --b: .62; --sat: .9; }
.st-actor.is-lead { filter: drop-shadow(0 0 36px rgba(255,255,255,.18)) drop-shadow(0 18px 24px rgba(0,0,0,.6)); }
@container fbstage (max-width: 600px) {
  .st-actor.is-back { bottom: 150px; --h: 200px !important; }
}

/* 手机：心里话不挡人（Tong 11-14：气泡挡住人、人还小）。气泡贴到舞台底、字幕上方，通栏两行，只压腿不压脸；人放大到 480 */
@container fbstage (max-width: 600px) {
  .st__arena { top: 160px; bottom: 196px; }
  .st-bubble { left: 0; right: 0; width: auto; top: auto; bottom: 0; padding: 7px 12px 8px; border-radius: 10px; animation: none; }
  .st-bubble::before, .st-bubble::after { display: none; }
  .st-bubble__who { margin-bottom: 1px; font-size: 11px; }
  .st-bubble__who .fb-tag { height: 16px; font-size: 10px; }
  .st-bubble__text { font-size: 12px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .st-react { top: 0; bottom: auto; right: 0; width: 84px; }
  .st-react img { height: 70px; }
  .st__arena > .st-actor.is-lead { --h: 480px !important; }
  .st-actor.is-back { bottom: 190px; --h: 220px !important; }
  .st-kick { max-width: 60%; white-space: normal; height: auto; line-height: 16px; padding: 3px 8px; }
}
/* 手机投票：两张计票卡上下排，不并排 */
@container fbstage (max-width: 600px) {
  .st-tally { width: 100%; left: 50% !important; padding: 8px 10px 10px; gap: 4px; grid-template-columns: auto 1fr auto; align-items: center; text-align: left; }
  .st-tally { top: 30px; }
  .st-tally + .st-tally { top: 118px; }
  .st-tally__n b { font-size: 26px; line-height: 30px; }
  .st-tally__chips { justify-content: flex-start; gap: 3px; }
  .st-tally__chips .fb-avatar { --s: 18px; }
  .st-tally::after { display: none; }
  .st-novote { display: none; }
  .st-tally.is-out .st-tally__verdict { order: 3; }
  .st__arena > .st-actor__name.is-lead { display: none; }
}

@container fbstage (max-height: 520px) and (min-width: 601px) {
  .st__top { left: 10px; right: 10px; top: 6px; height: 34px; gap: 8px; }
  .st__top .fb-tag, .st__title, .st__live, .fb-brand__en { display: none; }
  .st__top .fb-brand .fb-monster { --m: 20px; } .st__top .fb-brand__name { font-size: 20px; line-height: 26px; }
  .st__top .fb-god { height: 30px; padding: 0 10px 0 8px; font-size: 12px; } .st__top .fb-god svg { width: 16px; height: 16px; }
  .st__top .st__tools .fb-tool { height: 28px; padding: 0 8px; font-size: 12px; }
  /* 头像栏缩成一行小的，塞进顶栏中间 */
  .st__rail { left: 150px; right: 330px; top: 6px; height: 34px; align-items: center; justify-content: flex-start; gap: 2px; }
  .st__rail .fb-seat { --s: 22px; width: 24px; padding-top: 0; gap: 0; flex: 0 0 auto; }
  .st__rail .fb-seat__name { display: none; }
  .st__rail .fb-seat.is-speak { --s: 30px; width: 32px; margin: 0 2px; }
  .st__rail .fb-seat.is-speak .fb-seat__face { transform: none; }
  .st__rail .fb-seat.is-speak .fb-seat__name { display: none; }
  .st__rail .fb-mark-role { right: -3px; bottom: -3px; width: 11px; height: 11px; font-size: 7px; box-shadow: 0 0 0 1px var(--fb-night); }
  .st__rail .fb-mark-sheriff { left: -4px; top: -4px; width: 11px; height: 13px; font-size: 6px; }
  .st__rail .fb-mark-votes { right: -6px; top: -5px; min-width: 13px; height: 12px; font-size: 7px; line-height: 12px; padding: 0 2px; }
  .st__rail .fb-mark-votes i, .st__rail .fb-flag, .st__rail .fb-seat.is-next .fb-seat__face { display: none; outline: 0; }
  .st__rail .st-stamp { width: 14px; height: 14px; right: -7px; top: -4px; }
  /* 侧边进度：一枚 pill 放左上 */
  .st__side { left: 10px; top: 46px; width: auto; }
  .st-steps { display: flex; gap: 2px; }
  .st-steps__day { display: none; }
  .st-steps li { height: 22px; padding: 0 7px; font-size: 11px; gap: 4px; }
  .st-steps li i { display: none; }
  .st-steps li:not(.is-now):not(.is-done) { display: none; }
  .st-steps li.is-done { padding: 0 4px; } .st-steps li.is-done::before { content: none; }
  .st-steps li.is-done i { display: inline; width: auto; font-size: 10px; }
  .st-steps li.is-now::after { display: none; }
  .st-steps li::before { display: none; }
  /* 舞台 */
  .st__arena { left: 60px; right: 60px; top: 48px; bottom: 100px; }
  .st-kick { display: none; }
  .st__arena > .st-actor.is-lead { --h: 270px !important; }
  .st-actor.is-side { --h: 200px !important; }
  .st-actor.is-back { --h: 150px !important; bottom: 60px; }
  .st-spot { width: 360px; }
  .st-bubble { width: 240px; padding: 8px 10px; top: 0; }
  .st-bubble__text { font-size: 12px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .st-bubble__who { font-size: 11px; margin-bottom: 2px; } .st-bubble__who .fb-tag { height: 16px; font-size: 10px; }
  .st-react { width: 100px; top: 0; } .st-react img { height: 78px; } .st-react__cap { padding: 3px 6px; font-size: 11px; } .st-react__cap small { display: none; }
  .st-prize { top: 0; height: 26px; font-size: 11px; }
  .st-tally { width: 170px; padding: 6px 8px 8px; gap: 4px; } .st-tally__n b { font-size: 24px; line-height: 28px; } .st-tally__chips .fb-avatar { --s: 18px; } .st-novote { display: none; }
  .st-result { width: 230px; padding: 10px 12px; gap: 6px; top: 0; } .st-result__win { font-size: 20px; line-height: 24px; } .st-result__why { display: none; } .st-result__sides { display: none; }
  .st-mic { display: none; }
  .st-den { inset: 28px 0 0; gap: 8px; grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); }
  .st-target { padding: 8px; gap: 4px; } .st-target .fb-avatar { --s: 54px; } .st-target__name { font-size: 24px; line-height: 28px; } .st-target__chips, .st-target__note, .st-target .fb-bar { display: none; } .st-target__tally b { font-size: 18px; line-height: 22px; }
  .st-cell__head { padding: 4px 6px; } .st-cell__head .fb-nameplate { height: 20px; padding: 0 7px; font-size: 13px; } .st-cell__state { height: 18px; font-size: 10px; padding: 0 5px; } .st-cell__tgt { display: none; }
  .st-den .st-bubble { display: none; }
  .st-legend { display: none; }
  .st-dawn { top: 0; gap: 4px; } .st-dawn__clash .st-stamp { width: 40px; height: 40px; } .st-dawn__banner b { font-size: 22px; line-height: 28px; } .st-dawn__who { display: none; }
  .st-old, .st-memento { display: none; }
  /* 字幕一行，播放条贴底 */
  .st__sub { left: 60px; right: 60px; bottom: 44px; }
  .st__sub .fb-speech__in { padding: 6px 12px 8px; }
  .st__sub .fb-speech__head { margin-bottom: 2px; gap: 6px; }
  .st__sub .fb-speech__text { font-size: 14px; line-height: 22px; -webkit-line-clamp: 1; }
  .st__sub .fb-speech__ord, .st__sub .st-beats { display: none; }
  .st__sub .fb-nameplate { height: 22px; padding: 0 8px; font-size: 13px; }
  .st__bar { left: 10px; right: 10px; bottom: 0; }
  .st__bar .fb-timeline { padding: 6px 0 2px; }
  .st__bar .fb-timeline__track > i > span { display: none; }
  .st__bar .fb-timeline__mon { display: none; }
  .st__bar .fb-player__row { gap: 2px; }
  .st__bar .fb-iconbtn { width: 30px; height: 30px; } .st__bar .fb-iconbtn svg { width: 18px; height: 18px; }
  .st__bar .fb-iconbtn--play { width: 34px; height: 34px; }
  .st__bar .fb-keybtn { height: 28px; padding: 0 8px; } .st__bar .fb-keybtn span { display: none; }
  .st__bar .fb-time { font-size: 11px; } .st-total { display: none; }
  .st__bar .fb-react { display: none; } .st__bar .fb-speed { min-width: 32px; height: 26px; }
  .st-nightcard { padding: 12px 20px; } .st-nightcard b { font-size: 24px; line-height: 28px; } .st-nightcard span { font-size: 12px; }
}

/* ── home.css ── */
/* 首杀 · 艺人的家（2026-11-14，第一个样板：糖糖）
   家 = 她的本子（个人线）+ 她的连续剧（世界线）。依赖 tokens.css + firstblood.css + pass.css（cs- 那套）。
   这一页自己是响应式的：宽度小于 760 时根上加 .cs--m。 */

.hm { --her: var(--a); }
/* 场景图里人在左边时，文字放右边 */
.cs-profile--right .cs-splash::after { background: linear-gradient(270deg, var(--fb-night) 0, rgba(10,13,15,.92) 32%, rgba(10,13,15,.35) 58%, rgba(10,13,15,.1) 100%), linear-gradient(180deg, rgba(10,13,15,.55) 0, transparent 20%, transparent 60%, var(--fb-night) 100%); }
.cs-profile--right .cs-head { grid-template-columns: 1fr minmax(0, 560px); }
.cs-profile--right .cs-head > div { grid-column: 2; }
.cs--m.cs-profile--right .cs-head { grid-template-columns: 1fr; }
.cs--m.cs-profile--right .cs-head > div { grid-column: 1; }
.cs--m.cs-profile--right .cs-splash::after { background: linear-gradient(180deg, rgba(10,13,15,.5) 0, rgba(10,13,15,.1) 30%, rgba(10,13,15,.75) 62%, var(--fb-night) 100%); }
.hm-job { margin-top: 12px; color: var(--fb-ink-2); font-size: 14px; line-height: 23px; }

/* ── 怎么跟我玩：三行 ── */
.hm-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fb-space-3); }
.hm-how li { display: grid; grid-template-columns: 30px 1fr; gap: 4px 12px; padding: 14px 16px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-md); background: var(--fb-surface-1); }
.hm-how li i { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; background: var(--her); color: var(--a-ink, var(--fb-night)); font-family: var(--font-latin); font-size: 14px; font-style: normal; --fb-n: 3px; }
.hm-how li b { font: 700 15px/22px var(--font-body); }
.hm-how li span { color: var(--fb-ink-2); font-size: 13px; line-height: 20px; }
.hm-how li.is-locked { border-style: dashed; }
.hm-how li.is-locked i { background: var(--fb-surface-3); color: var(--fb-ink-3); }
.hm-how li.is-locked b { color: var(--fb-ink-2); }

/* ── 和她说话 + 小本本 ── */
.hm-two { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: var(--fb-space-6); align-items: stretch; margin-top: var(--fb-space-4); }
.hm-chat { display: flex; flex-direction: column; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-lg); background: var(--fb-surface-1); overflow: hidden; }
.hm-chat__head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--fb-line); }
.hm-chat__head .fb-avatar { --s: 40px; box-shadow: 0 0 0 2px var(--fb-night), 0 0 0 4px var(--her); }
.hm-chat__head b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 24px; letter-spacing: .04em; }
.hm-chat__head span { display: block; color: var(--fb-ink-3); font-size: 12px; line-height: 16px; }
.hm-chat__head .fb-tag { margin-left: auto; }
.hm-chat__list { flex: 1 1 auto; display: grid; align-content: start; gap: 14px; min-height: 340px; padding: 18px 16px; }
.hm-msg { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; max-width: 88%; }
.hm-msg__face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--her); box-shadow: 0 0 0 2px var(--fb-night), 0 0 0 3px var(--her); }
.hm-msg__bubble { justify-self: start; padding: 10px 14px; border-radius: 4px 14px 14px 14px; background: var(--fb-surface-2); border: 1px solid var(--fb-line); font: 400 15px/24px var(--font-body); color: var(--fb-ink); }
.hm-msg--me { grid-template-columns: minmax(0, 1fr); justify-self: end; justify-items: end; }
.hm-msg--me .hm-msg__bubble { justify-self: end; border-radius: 14px 4px 14px 14px; background: var(--fb-surface-3); }
.hm-react { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin-top: 6px; padding: 0 8px 0 4px; border-radius: var(--fb-radius-pill); border: 1px solid var(--fb-line-strong); background: var(--fb-night); color: var(--fb-ink-2); font-size: 12px; line-height: 16px; animation: st-pop var(--fb-dur-enter) var(--fb-ease-pop) 1 both; }
.hm-react i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: var(--her); color: var(--a-ink, var(--fb-night)); font: 700 10px/1 var(--font-body); font-style: normal; }
.hm-react b { font-family: var(--font-latin); font-weight: 400; font-size: 13px; }
.hm-react.is-up b { color: var(--fb-neon-green); }
.hm-react.is-down b { color: var(--fb-rust-text); }
.hm-chat__foot { display: grid; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--fb-line); }
.hm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-chips button { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--fb-line-strong); border-radius: var(--fb-radius-pill); color: var(--fb-ink); font-size: 13px; white-space: nowrap; transition: border-color var(--fb-dur-state), background var(--fb-dur-state), transform var(--fb-dur-state) var(--fb-ease-pop); }
.hm-chips button:hover { border-color: var(--her); background: var(--fb-surface-2); transform: translateY(-2px); }
.hm-input { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px 0 16px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-pill); background: var(--fb-night); color: var(--fb-ink-3); font-size: 14px; }
.hm-input span { flex: 1; }
.hm-input .fb-btn { height: 32px; padding: 0 14px; }
.hm-hint { color: var(--fb-ink-3); font-size: 12px; line-height: 18px; }

/* 小本本：左边一排线圈孔，边是她的颜色 */
.hm-book { position: relative; display: grid; align-content: start; gap: 14px; padding: 18px 18px 18px 40px; border: 1px solid color-mix(in srgb, var(--her) 45%, var(--fb-line)); border-radius: var(--fb-radius-lg); background: linear-gradient(180deg, color-mix(in srgb, var(--her) 9%, var(--fb-surface-1)), var(--fb-surface-1) 30%); }
.hm-book::before { content: ""; position: absolute; left: 14px; top: 20px; bottom: 20px; width: 10px; background: radial-gradient(circle at 5px 5px, var(--fb-night) 0 4px, transparent 4.5px) 0 0 / 10px 26px repeat-y; }
.hm-book__top { display: flex; align-items: flex-end; gap: 12px; }
.hm-book__top h3 { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 38px; letter-spacing: .04em; color: var(--her); }
.hm-book__top small { padding-bottom: 6px; color: var(--fb-ink-3); font-size: 12px; }
.hm-you { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; padding: 12px 14px; border-radius: var(--fb-radius-md); background: var(--fb-night); }
.hm-you__n { grid-row: 1 / 3; font-family: var(--font-latin); font-size: 40px; line-height: 44px; color: var(--fb-ink); }
.hm-you__n.is-bump { animation: fb-pop var(--fb-dur-enter) var(--fb-ease-pop) 1; }
.hm-you b { font: 700 14px/20px var(--font-body); }
.hm-you span { color: var(--fb-ink-3); font-size: 12px; line-height: 16px; }
.hm-you__rank { grid-row: 1 / 3; grid-column: 3; display: grid; justify-items: center; color: var(--fb-ink-2); font-size: 12px; }
.hm-you__rank b { font-family: var(--font-latin); font-weight: 400; font-size: 20px; color: var(--fb-ink); }
.hm-tabs { display: inline-flex; padding: 3px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-sm); background: var(--fb-night); justify-self: start; }
.hm-tabs button { height: 30px; padding: 0 12px; border-radius: 6px; color: var(--fb-ink-2); font: 500 13px/18px var(--font-body); white-space: nowrap; }
.hm-tabs button[aria-pressed="true"] { background: var(--her); color: var(--a-ink, var(--fb-night)); font-weight: 700; }
.hm-entries { display: grid; }
.hm-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px dashed var(--fb-line); }
.hm-entry:last-child { border-bottom: 0; }
.hm-entry__text { font: 400 14px/22px var(--font-body); color: var(--fb-ink); text-wrap: pretty; }
.hm-entry__meta { grid-column: 1; color: var(--fb-ink-3); font-size: 11px; line-height: 16px; }
.hm-entry.is-new { animation: st-pop var(--fb-dur-enter) var(--fb-ease-pop) 1 both; }
.hm-entry a { color: var(--fb-neon-cyan); }
.hm-stamp { grid-row: 1 / 3; grid-column: 2; align-self: center; display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 8px; font-family: var(--font-latin); font-size: 14px; --fb-n: 3px; rotate: -5deg; }
.hm-stamp.is-up { background: var(--fb-neon-green); color: var(--fb-on-green); }
.hm-stamp.is-down { background: var(--fb-rust); color: #fff; }
.hm-stamp.is-zero { background: var(--fb-surface-3); color: var(--fb-ink-2); }
.hm-lock { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed var(--fb-line-strong); border-radius: var(--fb-radius-md); color: var(--fb-ink-3); font: 400 13px/20px var(--font-body); font-style: italic; }
.hm-lock i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 4px; background: var(--fb-surface-3); color: var(--fb-ink-2); font: 700 11px/1 var(--font-body); font-style: normal; }
.hm-rank { display: grid; gap: 6px; }
.hm-rank__h { color: var(--fb-ink-3); font-size: 12px; line-height: 16px; }
.hm-rank li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--fb-radius-sm); background: var(--fb-night); font-size: 13px; }
.hm-rank li i { font-family: var(--font-latin); font-size: 12px; font-style: normal; color: var(--fb-ink-3); }
.hm-rank li b { font-family: var(--font-latin); font-weight: 400; font-size: 14px; }
.hm-rank li.is-first i { width: 20px; height: 8px; 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%23f2c14e%22 d=%22M0 0h1v1H0zM4 0h1v1H4zM8 0h1v1H8zM0 1h2v1H0zM3 1h3v1H3zM7 1h2v1H7zM0 2h9v1H0z%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; image-rendering: pixelated; font-size: 0; }
.hm-rank li.is-you { box-shadow: 0 0 0 1px var(--her); }

/* ── 连续剧 ── */
.hm-serial__title { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 44px; letter-spacing: .03em; color: var(--fb-tube); text-wrap: balance; }
.hm-serial { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr) 96px minmax(0, 1fr); align-items: stretch; margin-top: var(--fb-space-4); }
.hm-ep { display: grid; align-content: start; gap: 10px; padding: 16px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-lg); background: var(--fb-surface-1); }
.hm-ep__head { display: flex; align-items: center; gap: 8px; }
.hm-ep__head .fb-tag { margin-left: auto; }
.hm-ep.is-win { border-top: 3px solid var(--fb-neon-green); }
.hm-ep.is-lose { border-top: 3px solid var(--fb-line-strong); }
.hm-ep__sum { font: 500 15px/24px var(--font-body); color: var(--fb-ink); text-wrap: pretty; }
.hm-q { display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: start; font-size: 14px; line-height: 22px; }
.hm-q i { display: inline-grid; place-items: center; height: 22px; border-radius: 4px; font: 700 11px/1 var(--font-body); font-style: normal; }
.hm-q--say i { background: var(--fb-surface-3); color: var(--fb-ink); }
.hm-q--think i { border: 1px dashed var(--fb-line-strong); color: var(--fb-ink-2); }
.hm-q--think span { font-style: italic; color: var(--fb-ink-2); }
.hm-ep__go { margin-top: auto; padding-top: 6px; color: var(--fb-neon-cyan); font-size: 13px; }
.hm-link { display: grid; align-content: center; justify-items: center; gap: 6px; padding: 0 6px; color: var(--fb-ink-2); font-size: 12px; line-height: 16px; text-align: center; }
.hm-link::before { content: ""; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, var(--her) 0 6px, transparent 6px 10px); }
.hm-link::after { content: ""; width: 0; height: 0; border: 6px solid transparent; border-left-color: var(--her); margin-top: -14px; justify-self: end; }
.hm-threads { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--fb-space-4); }
.hm-thread { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 8px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-pill); background: var(--fb-surface-1); color: var(--fb-ink-2); font-size: 13px; white-space: nowrap; }
.hm-thread b { color: var(--fb-ink); font-weight: 700; }
.hm-thread .fb-stack .fb-avatar { --s: 26px; box-shadow: 0 0 0 2px var(--fb-surface-1); }

/* ── 窄屏 ── */
.cs--m .hm-how { grid-template-columns: 1fr; }
.cs--m .hm-two { grid-template-columns: 1fr; }
.cs--m .hm-chat__list { min-height: 0; }
.cs--m .hm-serial { grid-template-columns: 1fr; }
.cs--m .hm-serial__title { font-size: 26px; line-height: 34px; }
.cs--m .hm-link { grid-auto-flow: column; justify-content: start; align-items: center; padding: 10px 6px; }
.cs--m .hm-link::before { width: 2px; height: 22px; background: repeating-linear-gradient(180deg, var(--her) 0 6px, transparent 6px 10px); }
.cs--m .hm-link::after { display: none; }
.cs--m .hm-thread { height: auto; padding: 8px 14px 8px 8px; white-space: normal; }

/* ── 艺人页：表情贴纸（半身那套，大）和常说（表情包 + 口头禅） 11-14 Tong：不统一、太小、常说不好看 ── */
.cs-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cs-face { padding: 0 0 10px; gap: 8px; background: var(--fb-surface-1); border-radius: var(--fb-radius-lg); font-size: 13px; color: var(--fb-ink-2); }
.cs-face img { aspect-ratio: 1; object-fit: cover; object-position: 50% 0; border-radius: var(--fb-radius-lg) var(--fb-radius-lg) 0 0; background: radial-gradient(70% 60% at 50% 60%, color-mix(in srgb, var(--a) 22%, transparent), transparent 70%); }
.cs-says { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cs-say { display: grid; justify-items: center; gap: 8px; padding: 14px 10px 12px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-lg); background: var(--fb-surface-1); transition: border-color var(--fb-dur-state), transform var(--fb-dur-state) var(--fb-ease-pop); }
.cs-say img { width: 120px; height: 120px; image-rendering: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.cs-say img + b { display: none; }   /* 表情包自带配字，下面不再重复 */
.cs-say b { --fb-n: 3px; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; background: var(--a, var(--fb-surface-3)); color: var(--a-ink, var(--fb-night)); font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: .04em; white-space: nowrap; 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))); }
.cs-say:hover { border-color: var(--a); transform: translateY(-3px); }
.cs-say:hover img { animation: fb-hop var(--fb-dur-hop) var(--fb-ease-pixel) 1; }
.cs-say--plain { padding: 14px 12px; }
.cs--m .cs-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cs--m .cs-face { font-size: 11px; gap: 6px; padding-bottom: 6px; }
.cs--m .cs-says { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cs--m .cs-say img { width: 88px; height: 88px; }
.cs--m .cs-say b { height: 26px; font-size: 15px; padding: 0 10px; }

/* ── 当众说 / 悄悄说（11-14 定）：输入框左边一个开关；悄悄说的气泡虚线边、顶上一行小字；每天名额 ── */
.hm-mode { display: inline-flex; padding: 3px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-pill); background: var(--fb-night); flex: none; }
.hm-mode button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: var(--fb-radius-pill); color: var(--fb-ink-3); font: 500 12px/16px var(--font-body); white-space: nowrap; }
.hm-mode button[aria-pressed="true"] { background: var(--her); color: var(--a-ink, var(--fb-night)); font-weight: 700; }
.hm-mode button[data-mode="quiet"][aria-pressed="true"] { background: var(--fb-surface-3); color: var(--fb-ink); }
.hm-input { padding-left: 6px; gap: 8px; }
.hm-input span { padding-left: 6px; }
.hm-quota { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--fb-ink-3); font-size: 12px; line-height: 18px; }
.hm-quota b { color: var(--fb-ink-2); font-weight: 500; }
.hm-quota .fb-bar { width: 90px; height: 6px; }
.hm-quota .fb-bar i { background: repeating-linear-gradient(90deg, var(--her) 0 6px, transparent 6px 8px); }
.hm-msg--quiet .hm-msg__bubble { border-style: dashed; background: var(--fb-night); }
.hm-msg--quiet .hm-msg__note { grid-column: 1 / -1; justify-self: end; color: var(--fb-ink-3); font-size: 11px; line-height: 16px; }
.hm-msg--her.hm-msg--quiet .hm-msg__bubble { border-style: dashed; }
.hm-chat.is-quiet .hm-chat__list { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.02) 14px 16px); }
.hm-chat__head .hm-mode-hint { margin-left: auto; color: var(--fb-ink-3); font-size: 12px; }

/* ── 每位艺人的页浸在他自己的颜色里（11-14 Tong：「要把人粉晕」）：--her 名牌色，--her-glow 提亮后发光用；底色 = 夜 + 18% 他的色；三团大光晕；标题、数字、键、线全跟他的色 ── */
.cs-profile { --her: var(--a); --her-glow: color-mix(in oklch, var(--a) 72%, #ffffff); --her-ink: var(--a-ink, var(--fb-night));
  background: color-mix(in srgb, var(--her) 18%, var(--fb-night)); }
/* 名牌色太深的两位：发光用提亮过的同色相 */
.cs-profile.fb-a-luzong { --her-glow: #6aa0e8; } .cs-profile.fb-a-xuanji { --her-glow: #5cc49c; } .cs-profile.fb-a-lengyue { --her-glow: #a7a9ff; } .cs-profile.fb-a-lingxiao { --her-glow: #b57cff; }
.cs-profile::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 18% 12%, color-mix(in srgb, var(--her) 60%, transparent), transparent 70%),
              radial-gradient(45% 40% at 90% 45%, color-mix(in srgb, var(--her) 40%, transparent), transparent 70%),
              radial-gradient(40% 18% at 12% 62%, color-mix(in srgb, var(--her) 30%, transparent), transparent 70%),
              radial-gradient(70% 30% at 50% 100%, color-mix(in srgb, var(--her) 45%, transparent), transparent 70%); }
.cs-profile .cs__wrap { position: relative; z-index: 1; }
.cs-profile .cs-splash::after { background: linear-gradient(90deg, color-mix(in srgb, var(--her) 22%, var(--fb-night)) 0, color-mix(in srgb, var(--her) 10%, rgba(10,13,15,.92)) 32%, color-mix(in srgb, var(--her) 8%, rgba(10,13,15,.35)) 58%, rgba(10,13,15,.1) 100%), linear-gradient(180deg, rgba(10,13,15,.5) 0, transparent 20%, transparent 55%, color-mix(in srgb, var(--her) 18%, var(--fb-night)) 100%); }
.cs-profile.cs-profile--right .cs-splash::after { background: linear-gradient(270deg, color-mix(in srgb, var(--her) 22%, var(--fb-night)) 0, color-mix(in srgb, var(--her) 10%, rgba(10,13,15,.92)) 32%, color-mix(in srgb, var(--her) 8%, rgba(10,13,15,.35)) 58%, rgba(10,13,15,.1) 100%), linear-gradient(180deg, rgba(10,13,15,.5) 0, transparent 20%, transparent 55%, color-mix(in srgb, var(--her) 18%, var(--fb-night)) 100%); }
.cs-profile .cs-head h1 { color: #fff; text-shadow: 0 0 2px #fff, 0 0 10px var(--her-glow), 0 0 28px var(--her-glow), 0 0 60px var(--her-glow), 0 0 120px color-mix(in srgb, var(--her-glow) 70%, transparent); }
.cs-profile .cs-head__tag { color: var(--her-glow); text-shadow: 0 0 12px color-mix(in srgb, var(--her-glow) 60%, transparent); }
.cs-profile .cs-head__kick .fb-kicker { color: var(--her-glow); }
.cs-profile .cs-stat { border-color: color-mix(in srgb, var(--her) 35%, var(--fb-line)); background: color-mix(in srgb, var(--her) 10%, rgba(16,23,26,.86)); }
.cs-profile .cs-stat b, .cs-profile .cs-stat--rate b, .cs-profile .cs-stat--mvp b, .cs-profile .cs-stat--wolf b { color: var(--her-glow); }
.cs-profile .cs-stat--mvp b { color: var(--fb-gold); } .cs-profile .cs-stat--wolf b { color: var(--fb-role-wolf); }
.cs-profile .cs-head__acts .fb-btn--join, .cs-profile .cs-chap__go { --face: var(--her); --edge: var(--her); --key: color-mix(in srgb, var(--her) 55%, #000); --txt: var(--her-ink); }
.cs-profile .cs-head__acts .fb-btn--join:hover { --edge: #fff; filter: drop-shadow(0 3px 0 var(--key)) drop-shadow(0 0 18px color-mix(in srgb, var(--her-glow) 50%, transparent)); }
.cs-profile .cs-sec__h h2 { color: var(--her-glow); text-shadow: 0 0 16px color-mix(in srgb, var(--her-glow) 45%, transparent); }
.cs-profile .cs-sec__h a { color: var(--her-glow); }
.cs-profile .cs-match.is-win { border-left-color: var(--her-glow); }
.cs-profile .cs-match__go { color: var(--her-glow); }
.cs-profile .cs-match, .cs-profile .cs-tie, .cs-profile .cs-face, .cs-profile .cs-say, .cs-profile .hm-how li, .cs-profile .hm-chat, .cs-profile .hm-ep, .cs-profile .hm-thread { border-color: color-mix(in srgb, var(--her) 22%, var(--fb-line)); background: color-mix(in srgb, var(--her) 6%, var(--fb-surface-1)); }
.cs-profile .cs-match:hover, .cs-profile .cs-tie:hover, .cs-profile .cs-say:hover { border-color: var(--her-glow); }
.cs-profile .hm-how li i { background: var(--her); color: var(--her-ink); }
.cs-profile .hm-serial__title { color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--her-glow) 60%, transparent); }
.cs-profile .hm-link::before { background: repeating-linear-gradient(90deg, var(--her-glow) 0 6px, transparent 6px 10px); } .cs-profile .hm-link::after { border-left-color: var(--her-glow); }
.cs-profile .hm-book { border-color: color-mix(in srgb, var(--her) 55%, var(--fb-line)); background: linear-gradient(180deg, color-mix(in srgb, var(--her) 22%, var(--fb-surface-1)), color-mix(in srgb, var(--her) 8%, var(--fb-surface-1)) 40%); box-shadow: 0 0 40px -10px color-mix(in srgb, var(--her) 60%, transparent); }
.cs-profile .hm-book__top h3 { color: var(--her-glow); text-shadow: 0 0 12px color-mix(in srgb, var(--her-glow) 50%, transparent); }
.cs-profile .hm-you { background: color-mix(in srgb, var(--her) 10%, var(--fb-night)); }
.cs-profile .hm-you__n { color: var(--her-glow); }
.cs-profile .hm-tabs button[aria-pressed="true"] { background: var(--her); color: var(--her-ink); }
.cs-profile .hm-msg__bubble { border-color: color-mix(in srgb, var(--her) 25%, var(--fb-line)); }
.cs-profile .hm-msg--her .hm-msg__bubble { background: color-mix(in srgb, var(--her) 12%, var(--fb-surface-2)); }
.cs-profile .hm-react i { background: var(--her); color: var(--her-ink); }
.cs-profile .hm-mode button[aria-pressed="true"] { background: var(--her); color: var(--her-ink); }
.cs-profile .hm-quota .fb-bar i { background: repeating-linear-gradient(90deg, var(--her-glow) 0 6px, transparent 6px 8px); }
.cs-profile .cs-say b { background: var(--her); color: var(--her-ink); }
.cs-profile .cs-face img { background: radial-gradient(70% 60% at 50% 60%, color-mix(in srgb, var(--her) 38%, transparent), transparent 70%); }
.cs-profile .cs-dossier { border-color: color-mix(in srgb, var(--her) 35%, var(--fb-line-strong)); }
.cs-profile .cs-dossier summary::after { color: var(--her-glow); }
.cs-profile .cs-castbar { border-top-color: color-mix(in srgb, var(--her) 30%, var(--fb-line)); }
.cs-profile .cs-castbar .fb-seat.is-here .fb-seat__face { box-shadow: 0 0 0 2px var(--fb-night), 0 0 0 4px var(--her-glow), 0 0 18px var(--her-glow); }
.cs-profile .cs-castbar .fb-seat.is-here .fb-seat__name { color: var(--her-glow); }
.cs-profile .fb-nav { background: none; }
.cs-profile .cs-head__model .cs-model { border-color: color-mix(in srgb, var(--her) 35%, var(--fb-line)); }

.cs-profile .cs-splash { position: absolute; inset: 0 0 auto; height: min(100vh, 900px); z-index: 0; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
.cs-profile .cs-splash img { object-position: var(--sx, 68%) 25%; }
.cs-profile .cs-splash::after { background: linear-gradient(90deg, rgba(10,13,15,.78) 0, rgba(10,13,15,.5) 38%, rgba(10,13,15,.1) 60%), linear-gradient(180deg, rgba(10,13,15,.3) 0, rgba(10,13,15,.1) 25%, rgba(10,13,15,.5) 72%, rgba(10,13,15,.5) 100%); }
.cs-profile.cs-profile--right .cs-splash::after { background: linear-gradient(270deg, rgba(10,13,15,.78) 0, rgba(10,13,15,.5) 38%, rgba(10,13,15,.1) 60%), linear-gradient(180deg, rgba(10,13,15,.3) 0, rgba(10,13,15,.1) 25%, rgba(10,13,15,.5) 72%, rgba(10,13,15,.5) 100%); }
.cs-profile .cs-head { min-height: min(calc(100vh - 80px), 760px); }
.cs-profile .cs__wrap > .cs-head > div { text-shadow: 0 2px 12px rgba(0,0,0,.6); }

/* 内容区：从英雄区往下，一块整的深底，顶边是雾不是线 */
.cs-profile .cs-body { position: relative; z-index: 1; margin-top: -40px; padding-top: 40px; }
.cs-profile .cs-blur { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cs-profile { overflow: hidden; }
.cs-profile .cs-blur img { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); object-fit: cover; object-position: var(--sx, 50%) 30%; filter: blur(48px) saturate(1.3) brightness(.55); opacity: .7; }
.cs-profile .cs-blur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--her) 18%, var(--fb-night)) 900px, color-mix(in srgb, var(--her) 10%, var(--fb-night)) 100%); opacity: .75; }
.cs-profile .cs-body > * { position: relative; }
/* 带底图的 section：图在后面压暗、糊一点，边缘雾进去 */
.cs-bg { position: relative; margin: var(--fb-space-8) calc(-1 * var(--fb-space-12)) 0; padding: var(--fb-space-10) var(--fb-space-12) var(--fb-space-12); isolation: isolate; }
.cs-bg > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: brightness(.5) saturate(.95) blur(1px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-composite: intersect; }
.cs-bg::after { content: none; }
.cs-bg .cs-sec { padding-top: 0; }
.cs-bg--cover > img { object-position: 50% 30%; filter: brightness(.42) saturate(1) blur(2px); }
/* 中等宽和手机：钉住的图在手机上用固定高度顶部，不做 fixed（iOS 的 fixed 背景会抖） */
.cs--s.cs-profile .cs-splash { position: absolute; height: 640px; }
.cs--s.cs-profile .cs-head { min-height: 0; padding-top: 360px; }

.cs--s .cs-bg { margin-inline: -16px; padding-inline: 16px; }

.cs-dossier { margin-top: var(--fb-space-6); border: 1px solid color-mix(in srgb, var(--her) 30%, var(--fb-line)); border-radius: var(--fb-radius-lg); background: color-mix(in srgb, var(--her) 6%, var(--fb-surface-1)); overflow: hidden; }
.cs-dossier summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: var(--fb-ink); font: 500 14px/20px var(--font-body); cursor: pointer; list-style: none; transition: background var(--fb-dur-state); }
.cs-dossier summary:hover { background: color-mix(in srgb, var(--her) 10%, transparent); }
.cs-dossier summary:focus, .cs-dossier summary:focus-visible { box-shadow: none; outline: 0; }
.cs-dossier summary::after { content: none; }
.cs-dossier summary i { --fb-n: 3px; display: grid; place-items: center; width: 26px; height: 26px; background: var(--her); color: var(--her-ink, var(--fb-night)); font: 700 12px/1 var(--font-body); font-style: normal; }
.cs-dossier__hint { margin-left: auto; color: var(--her-glow); font-size: 12px; }
.cs-dossier__hint::after { content: " ▾"; }
.cs-dossier[open] .cs-dossier__hint::after { content: " ▴"; }
.cs-dossier[open] summary { border-bottom: 1px dashed color-mix(in srgb, var(--her) 30%, var(--fb-line)); }
.cs-dossier__body { padding: 16px 18px 18px; }
.cs-dossier dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; padding: 0; font-size: 14px; line-height: 23px; }
.cs-dossier dt { display: inline-flex; align-items: center; align-self: start; height: 23px; padding: 0 8px; border-radius: var(--fb-radius-xs); background: color-mix(in srgb, var(--her) 18%, var(--fb-surface-2)); color: var(--her-glow); font-size: 12px; white-space: nowrap; }
.cs-dossier dd { margin: 0; color: var(--fb-ink); }
.cs-profile :focus-visible { box-shadow: 0 0 0 2px var(--fb-night), 0 0 0 4px var(--her-glow); }
.cs-profile .cs-sec__h { align-items: center; }
.cs-profile .cs-sec__h h2::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background: var(--her); vertical-align: 2px; clip-path: polygon(0 3px, 3px 3px, 3px 0, 7px 0, 7px 3px, 10px 3px, 10px 7px, 7px 7px, 7px 10px, 3px 10px, 3px 7px, 0 7px); }
.cs-profile .cs-sec__h small { color: var(--fb-ink-3); }
.cs-profile .fb-tag--line { border-color: color-mix(in srgb, var(--her) 40%, var(--fb-line-strong)); }
.cs-profile .cs-head__kick .fb-tag--line { color: var(--fb-ink-2); background: rgba(10,13,15,.5); }
.cs-profile .cs-tie .fb-tag { background: color-mix(in srgb, var(--her) 14%, var(--fb-surface-3)); border: 0; color: var(--her-glow); }
.cs-profile .cs-match .fb-ep { background: color-mix(in srgb, var(--her) 18%, var(--fb-surface-3)); color: var(--fb-ink); }
.cs-profile .cs-match__what small { color: var(--fb-ink-3); }
.cs-profile .cs-castbar .fb-seat__face { transition: transform var(--fb-dur-state) var(--fb-ease-pop); }
.cs-profile .cs-castbar .fb-seat:hover .fb-seat__face { transform: translateY(-4px); }
.cs-profile .cs-castbar .fb-seat:hover .fb-seat__name { color: var(--fb-ink); }
.cs-profile .hm-serial__title::before { content: "「"; color: var(--her-glow); } .cs-profile .hm-serial__title::after { content: "」"; color: var(--her-glow); }

.hm-table { position: relative; margin-top: var(--fb-space-4); aspect-ratio: 1920 / 1080; width: 100%; border-radius: var(--fb-radius-xl); overflow: hidden; border: 1px solid color-mix(in srgb, var(--her) 30%, var(--fb-line)); box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--her) 60%, transparent); container: hmtable / inline-size; }
.hm-table__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: opacity var(--fb-dur-enter); }
.hm-table__bg.is-night { opacity: 0; }
.hm-table.is-night .hm-table__bg.is-night { opacity: 1; }
.hm-table__her { position: absolute; left: 25.6%; top: 19.6%; width: 42.5%; height: auto; clip-path: inset(0 0 46% 0); filter: drop-shadow(0 10px 18px rgba(0,0,0,.55)); transition: filter var(--fb-dur-state); }
.hm-table.is-night .hm-table__her { filter: brightness(.82) drop-shadow(0 10px 18px rgba(0,0,0,.7)); }
.hm-table__say { position: absolute; left: 49%; top: 26%; max-width: 36%; padding: 12px 16px; border-radius: 4px 16px 16px 16px; background: rgba(10,13,15,.9); border: 1px solid color-mix(in srgb, var(--her) 45%, var(--fb-line)); color: var(--fb-ink); font: 500 16px/25px var(--font-body); box-shadow: var(--fb-shadow-pop); animation: st-pop var(--fb-dur-enter) var(--fb-ease-pop) 1 both; }
.hm-table__say::before { content: ""; position: absolute; left: -10px; top: 14px; border: 6px solid transparent; border-right-color: color-mix(in srgb, var(--her) 45%, var(--fb-line)); border-left: 0; }
.hm-table__say small { display: block; margin-bottom: 4px; color: var(--her-glow); font-size: 12px; line-height: 16px; }
.hm-table__note { position: absolute; left: 49%; top: 60%; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: var(--fb-radius-pill); background: rgba(10,13,15,.85); border: 1px solid color-mix(in srgb, var(--her) 45%, var(--fb-line)); color: var(--fb-ink-2); font-size: 12px; animation: st-pop var(--fb-dur-enter) var(--fb-ease-pop) 1 both; }
.hm-table__note i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; background: var(--her); color: var(--her-ink); font: 700 11px/1 var(--font-body); font-style: normal; }
.hm-table__note b { font-family: var(--font-latin); font-weight: 400; color: var(--fb-neon-green); }
.hm-table__note.is-down b { color: var(--fb-rust-text); }
.hm-table__note[hidden] { display: none; }
.hm-table__clock { position: absolute; right: 14px; top: 12px; display: inline-flex; padding: 3px; border-radius: var(--fb-radius-pill); background: rgba(10,13,15,.7); border: 1px solid var(--fb-line); }
.hm-table__clock button { height: 26px; padding: 0 10px; border-radius: var(--fb-radius-pill); color: var(--fb-ink-3); font-size: 12px; }
.hm-table__clock button[aria-pressed="true"] { background: var(--fb-surface-3); color: var(--fb-ink); }
.hm-table__where { position: absolute; left: 14px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--fb-radius-pill); background: rgba(10,13,15,.7); border: 1px solid var(--fb-line); color: var(--fb-ink-2); font-size: 12px; }
.hm-table__where i { width: 8px; height: 8px; border-radius: 50%; background: var(--fb-neon-green); box-shadow: 0 0 8px var(--fb-neon-green); }
@container hmtable (max-width: 700px) {
  .hm-table__say { max-width: 46%; font-size: 13px; line-height: 20px; padding: 8px 10px; }
  .hm-table__note { font-size: 11px; }
}
.cs--m .hm-table { aspect-ratio: 4 / 3; border-radius: var(--fb-radius-lg); }
.cs--m .hm-table__bg { object-position: 42% 50%; }
.cs--m .hm-table__her { left: 19%; width: 56%; top: 18%; clip-path: inset(0 0 46% 0); }
.cs--m .hm-table__say { left: 50%; top: 14%; max-width: 48%; }
.cs--m .hm-table__where { display: none; }

/* 浓底（is-pure）：上面是招牌大图，下面整片是他的主题色，内容卡嵌在色里。不加这个类就是原来的夜底 */
@supports (color: oklch(from red l c h)) {
.cs-profile.is-pure { --her-wash: var(--a); --f1: oklch(from var(--her-wash) calc(l * .86) min(.25, calc(c * 1.25)) h); --f2: oklch(from var(--her-wash) calc(l * .86 - .10) min(.24, calc(c * 1.25)) h); --f-hi: oklch(from var(--her-wash) calc(l * .86 + .09) min(.21, calc(c * 1.1)) h); --f-deep: oklch(from var(--her-wash) 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(--her-wash) .165 min(.035, c) h); --card-line: oklch(from var(--her-wash) .1 min(.03, c) h); background: linear-gradient(180deg, var(--f1) 0, var(--f1) 1000px, var(--f2) 100%); }
.cs-profile.is-pure.fb-a-luzong { --her-wash: #3f74c4; } .cs-profile.is-pure.fb-a-xuanji { --her-wash: #2f9b78; }
.cs-profile.is-pure::before { background: radial-gradient(70% 16% at 88% 30%, var(--f-hi), transparent 70%), radial-gradient(60% 14% at 6% 52%, var(--f-hi), transparent 70%), radial-gradient(70% 14% at 92% 76%, var(--f-hi), transparent 70%), repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px); }
.cs-profile.is-pure .cs-blur { display: none; }
.cs-profile.is-pure .cs-bg > img { display: none; }
.cs-profile.is-pure .cs-splash { -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent 100%); mask-image: linear-gradient(180deg, #000 64%, transparent 100%); }
.cs-profile.is-pure .cs-splash::after { background: linear-gradient(90deg, rgba(10,6,12,.74) 0, rgba(10,6,12,.46) 34%, transparent 58%), linear-gradient(180deg, rgba(10,6,12,.4) 0, transparent 16%); }
.cs-profile.is-pure.cs-profile--right .cs-splash::after { background: linear-gradient(270deg, rgba(10,6,12,.74) 0, rgba(10,6,12,.46) 34%, transparent 58%), linear-gradient(180deg, rgba(10,6,12,.4) 0, transparent 16%); }
.cs--s.cs-profile.is-pure .cs-splash { height: 980px; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
.cs--s.cs-profile.is-pure .cs-splash::after, .cs--s.cs-profile.is-pure.cs-profile--right .cs-splash::after { background: linear-gradient(180deg, rgba(10,6,12,.45) 0, transparent 14%, transparent 30%, rgba(10,6,12,.72) 46%, rgba(10,6,12,.72) 100%); }
.cs-profile.is-pure .cs-bg:not(:has(.cs-sec)) { display: none; }
.cs-profile.is-pure .cs-sec__h h2 { color: var(--on); text-shadow: none; }
.cs-profile.is-pure .cs-sec__h h2::before { background: var(--on); }
.cs-profile.is-pure .cs-sec__h small { color: var(--on); opacity: .8; font-weight: 500; }
.cs-profile.is-pure .cs-sec__h a { color: var(--on); font-weight: 700; }
.cs-profile.is-pure .hm-serial__title { color: var(--on); text-shadow: none; }
.cs-profile.is-pure .hm-link::before { background: repeating-linear-gradient(90deg, var(--on) 0 6px, transparent 6px 10px); } .cs-profile.is-pure .hm-link::after { border-left-color: var(--on); }
.cs-profile.is-pure .hm-link { color: var(--on); }
.cs-profile.is-pure .cs-match, .cs-profile.is-pure .cs-tie, .cs-profile.is-pure .cs-face, .cs-profile.is-pure .cs-say, .cs-profile.is-pure .hm-how li, .cs-profile.is-pure .hm-chat, .cs-profile.is-pure .hm-ep, .cs-profile.is-pure .hm-thread, .cs-profile.is-pure .cs-dossier, .cs-profile.is-pure .hm-table, .cs-profile.is-pure .cs-castbar { background: var(--card); border-color: var(--card-line); box-shadow: 0 5px 0 var(--f-deep); }
.cs-profile.is-pure .cs-match:hover, .cs-profile.is-pure .cs-tie:hover, .cs-profile.is-pure .cs-say:hover { border-color: var(--her-glow); }
.cs-profile.is-pure .hm-book { border-color: var(--card-line); background: linear-gradient(180deg, color-mix(in srgb, var(--her) 22%, var(--card)), var(--card) 40%); box-shadow: 0 5px 0 var(--f-deep); }
.cs-profile.is-pure .cs-castbar { border: 1px solid var(--card-line); border-radius: var(--fb-radius-lg); padding: var(--fb-space-5) var(--fb-space-4); margin-bottom: var(--fb-space-10); }
.cs-profile.is-pure .cs-stat { background: color-mix(in srgb, var(--her-wash) 8%, rgba(14,13,18,.86)); }
@media (prefers-reduced-motion: no-preference) {
  .cs-profile.is-pure .cs-splash img { animation: cs-pure-in 1.4s cubic-bezier(.2,.8,.2,1) both; }
  .cs-profile.is-pure .cs-head h1 { animation: cs-pure-slam .55s .15s cubic-bezier(.2,1.4,.4,1) both; }
}
@keyframes cs-pure-in { from { transform: scale(1.07); filter: brightness(1.5) saturate(1.3); } to { transform: none; filter: none; } }
@keyframes cs-pure-slam { from { opacity: 0; transform: translateY(18px) scale(1.12); } to { opacity: 1; transform: none; } }
.hm-note__bg { margin-left: 14px; display: inline-flex; gap: 4px; vertical-align: middle; }
.hm-note__bg button { font: inherit; font-size: 12px; padding: 2px 10px; border: 1px solid var(--fb-line-strong); border-radius: 999px; background: none; color: var(--fb-ink-2); cursor: pointer; }
.hm-note__bg button[aria-pressed="true"] { background: var(--fb-ink); color: var(--fb-night); border-color: var(--fb-ink); }
.cs--s.cs-profile.is-pure .cs-head__model { color: rgba(255,255,255,.88); }
.cs--s.cs-profile.is-pure .cs-head__model .cs-model { background: var(--card); border-color: var(--card-line); color: var(--fb-ink); }
}

/* 幕图（cs-chap）：每一段开头一张通栏大图，上下溶进底色，左下是幕名。从上往下滚像翻分镜 */
.cs-chap { position: relative; width: 100vw; margin: var(--fb-space-12) 0 0 calc(50% - 50vw); height: clamp(300px, 46vw, 680px); isolation: isolate; }
.cs-chap__img { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 72%, transparent 100%); }
.cs-chap__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--oy, 45%); }
.cs-chap__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,6,12,.66) 0, rgba(10,6,12,.3) 30%, transparent 52%); }
.cs-chap__cap { position: absolute; left: max(16px, calc(50% - 588px)); bottom: 27%; max-width: min(560px, calc(100% - 32px)); text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.cs-chap__no { display: inline-block; padding: 3px 10px 2px; background: var(--her); color: var(--her-ink); font: 700 13px/20px var(--font-body); letter-spacing: .3em; text-shadow: none; clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px)); }
.cs-chap__cap h2 { margin-top: 10px; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 68px); line-height: 1.1; letter-spacing: .04em; color: #fff; text-shadow: 0 0 2px #fff, 0 0 14px var(--her-glow), 0 0 44px var(--her-glow); }
.cs-chap__cap p { margin-top: 8px; color: rgba(255,255,255,.92); font-size: 16px; line-height: 24px; }
.cs-chap + .cs-sec--chap, .cs-sec--chap { padding-top: 0; margin-top: calc(-1 * var(--fb-space-10)); position: relative; }
.cs-sec__h--bare { margin-bottom: var(--fb-space-3); }
.cs-chap--home { height: clamp(420px, 52vw, 760px); margin-top: var(--fb-space-6); margin-bottom: calc(-1 * var(--fb-space-10)); }
.cs-chap--home .cs-chap__img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 74%, transparent 100%); }
.cs-chap--home .cs-chap__img::after { content: none; }
.cs-chap--home .cs-chap__img img { transition: opacity var(--fb-dur-enter); }
.cs-chap--home .cs-chap__img img.is-night { opacity: 0; }
.cs-chap--home.is-night .cs-chap__img img.is-night { opacity: 1; }
.cs-chap__in { position: absolute; top: 15%; left: max(16px, calc(50% - 588px)); right: max(16px, calc(50% - 588px)); display: flex; justify-content: space-between; align-items: center; }
.cs-chap__in .hm-table__where, .cs-chap__in .hm-table__clock { position: static; }
.cs-chap--home .hm-table__say { left: 63%; top: 36%; max-width: min(30%, 400px); }
.cs-chap--home .hm-table__note { left: 62%; top: auto; bottom: 30%; }
.hm-two { position: relative; }
.cs--m .cs-chap__cap { bottom: 24%; } .cs--m .cs-chap__cap p { font-size: 14px; line-height: 21px; }
.cs--m .cs-chap--home .hm-table__say { left: 16px; right: 16px; top: auto; bottom: 9%; max-width: none; }
.cs--m .cs-chap--home .hm-table__say::before { content: none; }
.cs--m .cs-chap--home .hm-table__note { left: 16px; bottom: auto; top: 22%; }
.cs--m .cs-chap__in { top: 12%; justify-content: flex-end; }
.has-reveal .cs-chap__img img { transform: scale(1.08); transition: transform 1.8s cubic-bezier(.2,.7,.2,1), opacity var(--fb-dur-enter); }
.has-reveal .cs-chap.is-in .cs-chap__img img { transform: none; }
.has-reveal .cs-chap__cap { opacity: 0; transform: translateY(18px); transition: opacity .6s .15s, transform .6s .15s cubic-bezier(.2,.8,.2,1); }
.has-reveal .cs-chap.is-in .cs-chap__cap { opacity: 1; transform: none; }
/* 艺人页用的幕图变体：他的地盘（人在正中的整张场景，高一点），名场面引语卡，没有表情包时的口头禅 */
.cs-chap--tall { height: clamp(360px, 52vw, 760px); }
.cs-chap--tall .cs-chap__img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 11%, #000 74%, transparent 100%); }
.cs-chap--tall .cs-chap__img::after { background: linear-gradient(90deg, rgba(10,6,12,.5) 0, rgba(10,6,12,.2) 24%, transparent 40%); }
.cs-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fb-space-4); }
.cs-quote { display: grid; align-content: start; gap: 12px; padding: 20px; border: 1px solid var(--fb-line); border-radius: var(--fb-radius-lg); background: var(--fb-surface-1); color: var(--fb-ink); transition: border-color var(--fb-dur-state), transform var(--fb-dur-state); }
.cs-quote:hover { transform: translateY(-3px); border-color: var(--her-glow); }
.cs-quote p { font: 500 18px/29px var(--font-body); }
.cs-quote small { color: var(--fb-ink-3); font-size: 12px; line-height: 18px; }
.cs-quote__go { color: var(--her-glow); font-size: 13px; }
.cs--s .cs-quotes { grid-template-columns: 1fr; }
.cs-profile.is-pure .cs-quote { background: var(--card, var(--fb-surface-1)); border-color: var(--card-line, var(--fb-line)); box-shadow: 0 5px 0 var(--f-deep, transparent); }
.cs-says--plain { display: flex; flex-wrap: wrap; gap: 10px; }
.cs-says--plain .cs-say, .cs-profile.is-pure .cs-says--plain .cs-say { display: inline-flex; padding: 0; border: 0; background: none; box-shadow: none; }
.cs-says--plain .cs-say b { height: auto; min-height: 30px; padding: 4px 12px; line-height: 22px; white-space: normal; }
.cs-more { margin-top: 4px; }
.cs-more summary { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; border: 1px dashed color-mix(in srgb, var(--her-glow, var(--fb-ink-3)) 55%, transparent); border-radius: var(--fb-radius-lg); background: var(--card, var(--fb-surface-1)); color: var(--fb-ink-2); font-size: 13px; cursor: pointer; list-style: none; }
.cs-more summary::-webkit-details-marker { display: none; }
.cs-more summary span { color: var(--her-glow); }
.cs-more[open] summary { margin-bottom: 8px; } .cs-more[open] summary span { display: none; }
.cs--m .cs-chap { height: 86vw; } .cs--m .cs-chap--tall { height: 112vw; } .cs--m .cs-chap--home { height: clamp(420px, 52vw, 760px); }
.cs--m .cs-chap:not(.cs-chap--tall):not(.cs-chap--home) .cs-chap__img img { object-position: 78% var(--oy, 45%); }
.cs--m .cs-chap__img::after, .cs--m .cs-chap--tall .cs-chap__img::after { background: linear-gradient(0deg, rgba(10,6,12,.8) 0, rgba(10,6,12,.45) 34%, transparent 58%); }
.cs--m .cs-chap--home .cs-chap__img::after { content: none; }
.cs--m .cs-chap__cap { bottom: 15%; } .cs--m .cs-chap__cap h2 { font-size: 34px; margin-top: 6px; }
.cs-profile.is-pure .cs-says--plain .cs-say b { background: var(--card); color: var(--fb-ink); }
.cs-more { display: block; width: 100%; } .cs-more > summary { width: 100%; box-sizing: border-box; }
.cs-chap__go { margin-top: 14px; text-shadow: none; }
.cs-chap__go:hover { --edge: #fff; }
.cs--m .cs-head__acts--3 .fb-btn--join { flex: 1 0 100%; }

/* 怎么拼由生成器按张数定，总拼成一整块：头版 --wide（画面左、字右，通栏）/ 对开 --half / 大张 --lead（两栏两行），其余每张三分之一。卡片看自己有多宽换字号（容器查询），不看屏幕 */
.cs-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--fb-space-4); }
.cs-photo { grid-column: span 2; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--card-line, var(--fb-line)); border-radius: var(--fb-radius-lg); background: var(--card, var(--fb-surface-1)); box-shadow: 0 5px 0 var(--f-deep, transparent); color: var(--fb-ink); overflow: hidden; container: csphoto / inline-size; transition: border-color var(--fb-dur-state), transform var(--fb-dur-state) var(--fb-ease-out); }
.cs-photo:hover { border-color: var(--her-glow); transform: translateY(-3px); }
.cs-photo--half { grid-column: span 3; }
.cs-photo--lead { grid-column: span 4; grid-row: span 2; }
.cs-photo--wide { grid-column: 1 / -1; flex-direction: row; }
/* 画面：首帧垫底，片子叠在上面，放起来了才显出来。上面不压任何东西，脸不会被挡 */
.cs-photo__shot { position: relative; display: block; flex: none; overflow: hidden; background: #06070a center / cover no-repeat; }
.cs-photo__shot::before { content: ""; display: block; padding-top: 56.25%; }   /* 16:9。不用 aspect-ratio：里面的图和片子都是绝对定位，老浏览器不认 aspect-ratio 的话整张会塌成 0 高 */
.cs-photo--wide .cs-photo__shot { flex: 0 0 calc(66.667% - var(--fb-space-4) / 3); align-self: flex-start; }
.cs-photo__shot img, .cs-photo__v { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cs-photo__v { opacity: 0; transition: opacity var(--fb-dur-enter); }
.cs-photo__shot.is-live .cs-photo__v { opacity: 1; }
/* 字：局号、身份、那句话；点了从那一刻看回放 */
.cs-photo__cap { display: flex; flex-direction: column; flex: 1; gap: var(--fb-space-2); min-width: 0; padding: var(--fb-space-3) var(--fb-space-4) var(--fb-space-4); }
.cs-photo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cs-photo .fb-ep { background: color-mix(in srgb, var(--her) 18%, var(--fb-surface-3)); color: var(--fb-ink); }
.cs-photo__what { display: none; color: var(--fb-ink-3); font-size: 12px; line-height: 18px; white-space: nowrap; }
.cs-photo__go { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--her-glow); font-size: 13px; line-height: 18px; white-space: nowrap; }
.cs-photo__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cs-photo__quote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--fb-ink); font: 500 15px/24px var(--font-body); }
.cs-photo__quote::before { content: "「"; color: var(--her-glow); } .cs-photo__quote::after { content: "」"; color: var(--her-glow); }
.cs-photo__btn { display: none; align-self: flex-start; margin-top: auto; font-weight: 700; }
.cs-photo .cs-photo__btn, .cs-photo .cs-photo__btn:hover { --face: var(--her); --edge: var(--her-glow); --key: color-mix(in srgb, var(--her) 55%, #000); --txt: var(--her-ink); }   /* 键面跟艺人色（同「进他的家」那颗）；描边用提亮的那一档，名牌色很深的两位（陆总、玄机）在深底卡上也看得见 */
.cs-photo:hover .cs-photo__btn { --edge: #fff; }
/* 宽卡（对开、大张、头版）：那句话放大当标题（18/29，跟名场面引语卡一样），底下一颗键 */
@container csphoto (min-width: 480px) {
  .cs-photo__cap { gap: var(--fb-space-3); padding: var(--fb-space-4) var(--fb-space-5) var(--fb-space-5); }
  .cs-photo__what { display: inline; margin-left: 4px; }
  .cs-photo__go { display: none; }
  .cs-photo__btn { display: inline-flex; }
  .cs-photo__quote { font-size: 18px; line-height: 29px; -webkit-line-clamp: 3; }
}
/* 最宽的两种（大张、头版）：台词字号 22/36 */
@container csphoto (min-width: 700px) {
  .cs-photo__quote { font-size: 22px; line-height: 36px; }
}
.cs-photo--wide .cs-photo__cap { padding: var(--fb-space-6); }
.cs-photo--wide .cs-photo__quote { -webkit-line-clamp: 6; }
/* 窄卡（手机上两张一排、手机横屏的三分之一）：只留局号、身份、那句话 */
@container csphoto (max-width: 259px) {
  .cs-photo__cap { padding: var(--fb-space-2) var(--fb-space-3) var(--fb-space-3); }
  .cs-photo__go, .cs-photo__mark { display: none; }
  .cs-photo .fb-ep { height: 22px; padding: 0 7px; font-size: 11px; }
  .cs-photo .cs-mvp { gap: 0; font-size: 0; }
  .cs-photo__quote { font-size: 13px; line-height: 20px; -webkit-line-clamp: 3; }
}
/* 没出彩的票根：这局出了照片、没有他的。灰的一排，点了看那一局 */
.cs-stubs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: var(--fb-space-4); color: var(--on, var(--fb-ink-3)); font-size: 12px; line-height: 18px; }
.cs-stubs > span { margin-right: 4px; font-weight: 500; opacity: .8; }
.cs-stub { height: 22px; padding: 0 8px; font-size: 11px; background: color-mix(in srgb, var(--card, var(--fb-surface-1)) 55%, transparent); color: var(--fb-ink-2); transition: background var(--fb-dur-state), color var(--fb-dur-state); }
.cs-stub:hover { background: var(--card, var(--fb-surface-1)); color: var(--fb-ink); }
/* 墙底下折着的两条：更早的照片、全部战绩。都合着就并排，打开哪条哪条通栏 */
.cs-folds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px var(--fb-space-4); margin-top: var(--fb-space-4); }
.cs-folds > .cs-more { margin-top: 0; }
.cs-folds > .cs-more:only-child, .cs-folds > .cs-more[open] { grid-column: 1 / -1; }
.cs-folds:has(> .cs-more[open]) > .cs-more { grid-column: 1 / -1; }
.cs-wall--more { margin-top: var(--fb-space-2); }
/* 手机横屏：间距收一点；头版右边那栏窄，字号跟着收 */
.cs--s .cs-wall { gap: var(--fb-space-3); }
.cs--s .cs-photo--wide .cs-photo__shot { flex-basis: calc(66.667% - var(--fb-space-3) / 3); }
.cs--s:not(.cs--m) .cs-photo--wide .cs-photo__cap { gap: var(--fb-space-2); padding: var(--fb-space-4); }
.cs--s:not(.cs--m) .cs-photo--wide .cs-photo__quote { font-size: 17px; line-height: 28px; -webkit-line-clamp: 5; }
/* 手机竖屏：打头那张通栏，后面两张一排；后面是单数张，最后一张也通栏，不留空格 */
.cs--m .cs-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fb-space-3) var(--fb-space-2); }
.cs--m .cs-wall > .cs-photo { grid-column: span 1; grid-row: auto; flex-direction: column; }
.cs--m .cs-wall > .cs-photo:first-child, .cs--m .cs-wall > .cs-photo:last-child:nth-child(even) { grid-column: 1 / -1; }
.cs--m .cs-wall--more > .cs-photo:first-child, .cs--m .cs-wall--more > .cs-photo:last-child:nth-child(even) { grid-column: span 1; }
.cs--m .cs-wall--more > .cs-photo:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cs--m .cs-photo--wide .cs-photo__shot { flex: none; align-self: stretch; }
.cs--m .cs-photo--wide .cs-photo__cap { padding: var(--fb-space-3) var(--fb-space-4) var(--fb-space-4); }
.cs--m .cs-photo__quote, .cs--m .cs-photo--wide .cs-photo__quote { -webkit-line-clamp: 3; }
.cs--m .cs-folds { grid-template-columns: minmax(0, 1fr); }
@media (prefers-reduced-motion: reduce) { .cs-photo__v { display: none; } .cs-photo { transition: none; } .cs-photo:hover { transform: none; } }

/* ── ix.css ── */
/* 首杀 · 艺人页的门槛翻页和手感（ix，2026-11-14 Fable）。脚本是同目录的 ix.js，cast_site.py 把这两份接在 cast.css / cast.js 后面
   老板 11-14：「这个粉色是一个色块，是一个平铺色，是一个 box 在那儿挡着……永远在用户视线的最下面……是一个交互的转折点……鼠标往下滑，它就翻页了」
   做法：页面切成一幕一幕（招牌 + 每张幕图带着它后面的内容）。每一幕底下垫着下一幕的色块，色块只露出顶上一条贴在屏幕底（门槛）。
   这一幕滚到底，再滚：这一幕钉住不动，色块跟着滚动 1:1 涨上来盖满；盖满那一刻下一幕已经垫在底下，色块自己从顶上离场。
   全是 sticky + 文档流 + scroll-snap，没有脚本逐帧算位置；脚本只管「到没到」和滚轮、键盘那一下。
   html 上没有 .ix（没脚本、老浏览器、开了减少动态效果）时下面的结构规则都不生效，就是原来的页面。 */

/* ───────── 结构：幕、垫片、色块 ───────── */
html.ix { scroll-snap-type: y mandatory; scroll-padding-bottom: var(--ix-s, 72px); }   /* 屏幕底下那一条归门槛：吸附和「滚到可见」都不算它 */
html.ix.ix-tween { scroll-snap-type: none; }                       /* 脚本自己推滚动那半秒，先别让浏览器吸附 */
html.ix #cs-root { --V: 100vh; --S: 72px; --R: calc(var(--V) - var(--S)); overflow: clip; }
@supports (height: 100lvh) { html.ix #cs-root { --V: 100lvh; } }   /* 手机地址栏收起后的整屏高，色块按它量，盖得住 */
/* 色块的颜色：这位艺人自己的颜色（--a），纯平铺。--ix-on 是压在色块上的字，亮底用深字、暗底用浅字；--ix-lip 是上沿那道亮边；--ix-tone 是同色调的暗纹。
   .ix-tone 给「下一位艺人」用：元素上再挂一个 fb-a-<他>，就按他的颜色重算一遍 */
html.ix #cs-root, html.ix .ix-tone { --ix-c: var(--a); --ix-on: var(--a-ink, var(--fb-night)); --ix-lip: color-mix(in srgb, var(--a) 70%, #fff); --ix-tone: color-mix(in srgb, var(--a) 90%, #000); }
@supports (color: oklch(from red l c h)) {
  html.ix #cs-root.is-pure, html.ix #cs-root.is-pure .ix-tone { --ix-c: oklch(from var(--ix-w, var(--a)) calc(l * .86 + .09) min(.21, calc(c * 1.1)) h); --ix-on: oklch(from var(--ix-c) clamp(.2, calc((.66 - l) * 100), .99) .04 h); --ix-lip: oklch(from var(--ix-c) calc(l + .1) calc(c * .8) h); --ix-tone: oklch(from var(--ix-c) calc(l - .045) c h); }
  html.ix .ix-tone { --ix-w: initial; }
  html.ix .fb-a-luzong { --ix-w: #3f74c4; } html.ix .fb-a-xuanji { --ix-w: #2f9b78; }   /* 名牌色太深的两位，跟 .is-pure 的 --her-wash 用同一个提亮值 */
}
html.ix #cs-root.cs--m { --S: 56px; }
@media (max-height: 480px) { html.ix #cs-root, html.ix #cs-root.cs--m { --S: 44px; } }

html.ix .cs-profile .cs-body { margin-top: 0; padding-top: 0; z-index: auto; }
html.ix .ix-wrap { position: relative; }
html.ix .ix-wrap + .ix-wrap { margin-top: calc(-1 * var(--V)); }   /* 下一幕垫在上一幕的色块底下 */
html.ix .ix-wrap:not(:last-child)::before { content: ""; display: block; height: var(--R); }   /* 垫片：这一幕滚到底以后，多钉住 R 这么长，给色块涨 */
html.ix .ix-act { position: sticky; bottom: 0; z-index: 1; display: flow-root; box-sizing: border-box; min-height: var(--V); transform: translateY(calc(var(--p, 0) * -32px)); }   /* 色块涨上来时，这一幕被往上顶一点 */
html.ix .ix-wrap.is-cur > .ix-act { will-change: transform; }   /* 只有眼前这一幕单独成层，被顶起来的时候不重画 */
html.ix .ix-act::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px), var(--f1, color-mix(in srgb, var(--her) 18%, var(--fb-night))); }
html.ix .ix-act::after { content: ""; position: absolute; z-index: 5; inset: 0 calc(50% - 50vw); background: #0a060c; opacity: calc(var(--p, 0) * .5); pointer-events: none; will-change: opacity; }
/* 停靠点的记号（看不见，ix.js 按每一幕的内容排好、摆上去）：每一幕开头一个、中间每一段一个、到底一个。手指、惯性、拖滚动条都只停在这些位置上，
   甩得再猛也是一次走一个（snap-stop）；门槛半道上没有记号，停不住。Chrome 实测过：记号要小（1px），别用一整块高的区域去「罩住」一幕——
   别的记号只要探进屏幕里，罩着的位置就不算数、会被拽走 */
html.ix .ix-stop { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; }
html.ix .ix-stop.ix-off { scroll-snap-align: none; }   /* 手指按着的这一下，离眼前超过一个的停靠点先摘掉（ix.js 的 one()）：一下只走一个 */

html.ix .ix-gate { position: sticky; bottom: calc(var(--S) - var(--V)); box-sizing: border-box; width: 100vw; height: var(--V); margin: calc(-1 * var(--V)) 0 0 calc(50% - 50vw); background: var(--ix-c); color: var(--ix-on); box-shadow: inset 0 3px 0 var(--ix-lip); transition: transform var(--fb-dur-hop) cubic-bezier(.65, 0, .2, 1); }
html.ix .ix-gate.is-past { transform: translateY(-100%); }          /* 翻过去了：色块收在下一幕的头顶上；往回拉的时候它跟着压下来 */
/* 门槛有两个样子（老板 11-14 晚：「我不敢多滑，怕又滑到下一个」）：这一幕还有内容没看——收着，字淡，写「还有 N 屏」；
   到了最后一屏——抬起来 10px、上沿的亮边加粗、字亮起来、箭头点头，写「再往下翻到下一幕」（最后一幕写「到底了 · 点这里」）。抬起来的高度随色块往上涨收回去（盖满时正好是 0） */
html.ix .ix-gate { --lift: 0px; translate: 0 calc(var(--lift) * (1 - var(--p, 0))); transition: transform var(--fb-dur-hop) cubic-bezier(.65, 0, .2, 1), translate var(--fb-dur-enter) var(--fb-ease-pop), box-shadow var(--fb-dur-enter); }
html.ix .ix-gate.is-ready { --lift: -10px; box-shadow: inset 0 6px 0 var(--ix-lip); }
html.ix.ix-init .ix-gate, html.ix.ix-jump .ix-gate { transition: none; }
/* 手指从幕里面起手的那一下，这一幕的门槛按在屏幕底不涨（ix.js 挂 .is-held）：改成 fixed，位置跟 sticky 贴底时分毫不差。门槛在文档流里本来就不占高度（上边距 -V、高 V），改了不动版面 */
html.ix .ix-wrap.is-held > .ix-gate { position: fixed; left: 0; bottom: calc(var(--S) - var(--V)); margin: 0; }

/* ───────── 门槛上的字：下一幕叫什么、现在在第几幕 ───────── */
html.ix .ix-sill { display: flex; align-items: center; gap: var(--fb-space-4); height: var(--S); padding-inline: max(16px, calc(50% - 588px)); opacity: calc(1 - var(--p, 0) * 2.4); }
html.ix .ix-next { display: flex; align-items: center; gap: var(--fb-space-3); flex: 1 1 auto; min-width: 0; height: 100%; color: inherit; -webkit-tap-highlight-color: transparent; }
html.ix .ix-no { flex: none; padding: 3px 9px 2px 12px; background: var(--ix-on); color: var(--ix-c); font: 700 13px/20px var(--font-body); letter-spacing: .3em; white-space: nowrap; clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px)); }
html.ix .ix-next b { flex: none; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 36px; letter-spacing: .04em; white-space: nowrap; }
html.ix .ix-next small { flex: 0 1 auto; min-width: 0; font-size: 14px; line-height: 20px; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.ix .ix-arrow { flex: none; display: none; width: 21px; height: 15px; margin-left: 2px; background: currentColor; -webkit-mask: var(--ix-arrow) center / 100% 100% no-repeat; mask: var(--ix-arrow) center / 100% 100% no-repeat; animation: ix-bob 1.1s steps(2, jump-none) infinite; }
html.ix #cs-root { --ix-arrow: 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 d=%22M0 0h1v1H0zM6 0h1v1H6zM0 1h2v1H0zM5 1h2v1H5zM1 2h2v1H1zM4 2h2v1H4zM2 3h3v1H2zM3 4h1v1H3z%22/%3E%3C/svg%3E"); }
@keyframes ix-bob { from { translate: 0 -2px; } to { translate: 0 2px; } }
html.ix .ix-gate.is-ready .ix-arrow { display: block; }
html.ix .ix-next > .ix-no, html.ix .ix-next > b, html.ix .ix-next > .ix-face { opacity: .5; transition: opacity var(--fb-dur-enter); }
html.ix .ix-gate.is-ready .ix-next > .ix-no, html.ix .ix-gate.is-ready .ix-next > b, html.ix .ix-gate.is-ready .ix-next > .ix-face { opacity: 1; }
html.ix .ix-hint { flex: none; margin-left: auto; padding: 4px 10px 3px; font: 700 13px/20px var(--font-body); letter-spacing: .08em; white-space: nowrap; opacity: .8; }
html.ix .ix-gate.is-ready .ix-hint { background: var(--ix-on); color: var(--ix-c); opacity: 1; clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px)); }
html.ix .ix-hint:empty { display: none; }
html.ix .ix-gate:not(.is-ready) .ix-hint::before { content: ""; display: inline-block; width: 11px; height: 8px; margin-right: 6px; background: currentColor; -webkit-mask: var(--ix-arrow) center / 100% 100% no-repeat; mask: var(--ix-arrow) center / 100% 100% no-repeat; }   /* 还有内容没看：一个往下的小箭头 */
html.ix .ix-pips { display: flex; flex: none; height: 100%; }
html.ix .ix-pip { display: grid; place-items: center; width: 20px; height: 100%; color: inherit; -webkit-tap-highlight-color: transparent; }
html.ix .ix-pip::before { content: ""; width: 8px; height: 8px; background: currentColor; opacity: .32; transition: opacity var(--fb-dur-state), scale var(--fb-dur-state) var(--fb-ease-pop); }
html.ix .ix-pip.is-on::before { opacity: 1; scale: 1.5; }
@media (hover: hover) {
  html.ix .ix-pip:hover::before { opacity: .8; }
  html.ix .ix-next:hover b { translate: 0 -2px; }
  html.ix .ix-next b { transition: translate var(--fb-dur-state) var(--fb-ease-out); }
}
html.ix .ix-gate:has(.ix-next:active) { translate: 0 calc(var(--lift) + 4px); transition: translate var(--fb-dur-press), transform var(--fb-dur-hop) cubic-bezier(.65, 0, .2, 1); }   /* 按门槛：整条往下陷一点 */
html.ix .ix-gate :focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--ix-c), 0 0 0 4px var(--ix-on); }   /* 键盘焦点圈：压在色块上要用色块上的字色，原来的发光圈在这儿看不清 */
html.ix #cs-root.cs--m .ix-next b { font-size: 22px; line-height: 28px; }
html.ix #cs-root.cs--m .ix-next small { display: none; }
html.ix #cs-root.cs--m .ix-no { font-size: 12px; padding: 2px 6px 1px 9px; }
html.ix #cs-root.cs--m .ix-pip { width: 14px; }
html.ix #cs-root.cs--m .ix-sill { gap: var(--fb-space-2); }
html.ix #cs-root.cs--m .ix-next { gap: var(--fb-space-2); }
html.ix #cs-root.cs--m .ix-hint { padding: 3px 7px 2px; font-size: 12px; letter-spacing: 0; }
html.ix #cs-root.cs--m .ix-gate.is-ready .ix-pips { display: none; }   /* 手机竖屏放不下全部：门槛亮着的时候那句「再往下翻到下一幕」要紧，小方点先让位 */
html.ix #cs-root.cs--m .ix-pip::before { width: 6px; height: 6px; }
@media (max-height: 480px) { html.ix .ix-next b, html.ix #cs-root.cs--m .ix-next b { font-size: 22px; line-height: 28px; } }

/* 最后一幕底下的门槛：下一位艺人，用他的颜色。它只是一条（不涨），点它 = 换人 */
html.ix .ix-gate--end { bottom: 0; z-index: 6; height: var(--S); margin-top: 0; transform: none; }
html.ix .ix-gate--end.is-ready { translate: none; }   /* 最后这条只有一条那么高，抬起来底下会露缝：只亮不抬 */
html.ix .ix-gate--end .ix-sill { opacity: 1; }
html.ix .ix-face { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--ix-on); }
html.ix .ix-gate--end .ix-arrow { rotate: -90deg; animation-name: ix-bob-x; }
@keyframes ix-bob-x { from { translate: -2px 0; } to { translate: 2px 0; } }
html.ix #cs-root.cs--m .ix-face { width: 28px; height: 28px; }

/* 盖满那一拍：色块正中是下一幕的大标题（长在色块上，跟着它一起上来、一起走），右边一个同色调的大幕号 */
html.ix .ix-card { position: absolute; left: max(16px, calc(50% - 588px)); right: max(16px, calc(50% - 588px)); top: 50%; display: grid; justify-items: start; gap: clamp(8px, 2vh, 20px); translate: 0 -56%; opacity: calc((var(--p, 0) - .3) * 10); pointer-events: none; }
html.ix .ix-gate.is-past .ix-card { opacity: calc((var(--p, 0) - .9) * 20); }   /* 往回拉的时候色块上不带字 */
html.ix .ix-card .ix-no { font-size: clamp(13px, 2.4vh, 20px); line-height: 1.6; padding: 3px 12px 2px 16px; }
html.ix .ix-card b { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, min(21vw, 30vh), 232px); line-height: 1.02; letter-spacing: .04em; }
html.ix .ix-card small { font-size: clamp(14px, 2.6vh, 22px); line-height: 1.5; font-weight: 500; opacity: .82; text-wrap: balance; }
/* 大幕号：同色调压在色块上，不抢字。横屏在右边居中；竖屏放大了沉在右下，标题在它上面 */
html.ix .ix-gate::after, html.ix .ix-veil::after { content: attr(data-n); position: absolute; z-index: -1; right: max(16px, calc(50% - 588px)); top: 50%; translate: 0 -54%; font-family: var(--font-latin); font-size: min(66vh, 44vw); line-height: .8; color: var(--ix-tone); opacity: calc((var(--p, 0) - .3) * 10); pointer-events: none; }
html.ix .ix-gate.is-past::after { opacity: calc((var(--p, 0) - .9) * 20); }
html.ix .ix-veil::after { opacity: 1; }
@media (orientation: portrait) {
  html.ix .ix-card { top: 40%; }
  html.ix .ix-gate::after, html.ix .ix-veil::after { top: auto; bottom: calc(var(--S) + 5vh); right: 3vw; translate: none; font-size: min(92vw, 52vh); }
}

/* 跳幕用的整屏色块（点圆点、点「看最近一局」这种隔着好几幕的）：先盖满，底下换好，再离场 */
html.ix .ix-veil { position: fixed; inset: 0; z-index: 60; background: var(--ix-c); color: var(--ix-on); transform: translateY(100%); visibility: hidden; }
html.ix .ix-veil.is-back { transform: translateY(-100%); }
html.ix .ix-veil.is-up { transform: none; visibility: visible; transition: transform .34s cubic-bezier(.3, 0, .1, 1); }
html.ix .ix-veil.is-out { transform: translateY(-100%); visibility: visible; transition: transform var(--fb-dur-hop) cubic-bezier(.65, 0, .2, 1); }
html.ix .ix-veil.is-back.is-out { transform: translateY(100%); }
html.ix .ix-veil.is-now { transition: none; }
html.ix .ix-veil .ix-card { opacity: 1; }

/* ───────── 招牌这一幕：图铺到门槛为止，不再往粉色里化 ───────── */
html.ix .ix-act--hero { display: flex; flex-direction: column; padding-bottom: var(--S); }
html.ix .ix-act--hero::before { content: none; }
html.ix #cs-root .ix-act--hero > .cs-splash { position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; height: auto; -webkit-mask-image: none; mask-image: none; }
html.ix #cs-root .ix-act--hero > .cs-head { flex: 1 0 auto; min-height: 0; }
html.ix #cs-root.cs--s .ix-act--hero > .cs-head { align-items: end; padding-top: calc(360px - var(--ix-lift, 0px)); }   /* --ix-lift：手机横屏时名字整个在门槛底下，ix.js 把它往上提到露个头 */

/* ───────── 幕里面：幕图钉在后面当布景，幕名和内容从门槛底下升上来盖过它 ─────────
   横屏（电脑、手机横着拿）：布景铺满门槛以上的整屏，翻过来第一眼只有这张图和幕名；竖屏：布景照原来的横幅高度，内容跟在下面。
   不挪 DOM：.cs-chap 这层盒子用 display: contents 拆掉，里面的图（钉住）和幕名（跟着内容走）直接排进这一幕。
   这样别的脚本照旧在 .cs-chap 里找得到 .cs-chap__cap（账号脚本往幕名底下挂「小本本」那条提示，就是这么找的）。
   竖屏那四个横幅高度是照 home.css 里 .cs-chap 的高度抄的，那边改了这里跟着改 */
html.ix .ix-act > .cs-chap { display: contents; }
html.ix .ix-act > .cs-chap > .cs-chap__img { position: sticky; inset: 0 auto auto auto; z-index: 0; width: 100vw; height: clamp(300px, 46vw, 680px); margin-left: calc(50% - 50vw); -webkit-mask-image: none; mask-image: none; }
html.ix .ix-act > .cs-chap--tall > .cs-chap__img { height: clamp(360px, 52vw, 760px); }
html.ix #cs-root.cs--m .ix-act > .cs-chap > .cs-chap__img { height: 86vw; }
html.ix #cs-root.cs--m .ix-act > .cs-chap--tall > .cs-chap__img { height: 112vw; }
html.ix .ix-act > .cs-chap > .cs-chap__cap { position: relative; inset: -40px auto auto auto; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; height: 0; max-width: min(560px, 100%); }   /* 一条没有高度的线，字从线上往上长：压在布景底边上面 40px，不占地方 */
html.ix .ix-act > .cs-chap > .cs-chap__cap > * { flex: none; }
html.ix .ix-sheet { position: relative; z-index: 1; margin-top: -96px; padding: 104px 0 calc(var(--S) + var(--fb-space-8)); }
html.ix .ix-sheet::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px), linear-gradient(180deg, transparent 0, var(--f1, color-mix(in srgb, var(--her) 18%, var(--fb-night))) 96px); }
html.ix .ix-wrap:last-child .ix-sheet { padding-bottom: var(--fb-space-2); }
html.ix .ix-sheet > .cs-sec--chap { margin-top: 0; }
@media (orientation: landscape) {
  /* 老板 11-14 夜：「如果用户不用鼠标滚轮……他可能都不知道这个 session 里面还藏着内容……主动就漏一点……漏一点什么边」。
     幕图不再顶到门槛：让出一条（--ix-peek，ix.js 照内容量好写在这一幕上），内容这张「纸」的头从门槛上面露出来，带着它第一个小标题。
     纸的上沿是一道实的亮边（原来是从图里慢慢化出来的，露一条看不出是纸） */
  html.ix #cs-root .ix-act > .cs-chap > .cs-chap__img { height: calc(var(--V) - var(--S) - var(--ix-peek, 0px)); }
  html.ix .ix-sheet { margin-top: 0; padding-top: 16px; }
  html.ix .ix-sheet::before { background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px), linear-gradient(180deg, var(--ix-lip) 0 3px, var(--f1, color-mix(in srgb, var(--her) 18%, var(--fb-night))) 3px); }
}
/* 幕图清单里的横向焦点（acts.json 的 ox，生成器写成 --ox）：「他的地盘」竖着裁成整屏时人要在画面里。没写就是居中 */
html.ix .ix-act > .cs-chap--tall > .cs-chap__img img { object-position: var(--ox, 50%) var(--oy, 45%); }
/* 只有幕图、没有内容的幕：竖屏也让布景铺满门槛以上的整屏，不然横幅底下空着半屏粉色 */
html.ix #cs-root.cs-profile .ix-act.ix-act--bare > .cs-chap > .cs-chap__img { height: calc(var(--V) - var(--S)); }   /* 选择器写这么重是为了压过上面竖屏那两条 */
html.ix .ix-act--bare > .ix-sheet { margin-top: 0; padding: 0 0 var(--S); }
html.ix .ix-act--bare > .ix-sheet::before { content: none; }
html.ix .ix-wrap .cs-chap__img img { transform: scale(1.08); }
html.ix .ix-wrap.is-cur .cs-chap__img img { transform: none; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1) .12s, opacity var(--fb-dur-enter); }
html.ix .ix-wrap .cs-chap__cap > * { opacity: 0; translate: 0 18px; }
html.ix .ix-wrap.is-cur .cs-chap__cap > * { opacity: 1; translate: none; transition: opacity .5s .3s, translate .6s cubic-bezier(.2, .8, .2, 1) .3s; }
html.ix .ix-wrap.is-cur .cs-chap__cap > :nth-child(2) { transition-delay: .36s; }
html.ix .ix-wrap.is-cur .cs-chap__cap > :nth-child(3) { transition-delay: .42s; }
html.ix .ix-wrap.is-cur .cs-chap__cap > :nth-child(4) { transition-delay: .48s; }

/* ───────── 手感：按下去往厚底里陷；悬停只给有鼠标的；数字数上来；立绘跟着鼠标偏一点 ───────── */
.cs-profile a.cs-match, .cs-profile a.cs-tie, .cs-profile a.cs-say, .cs-profile a.cs-quote, .cs-profile a.cs-photo, .cs-profile .cs-face, .cs-profile .cs-more > summary { -webkit-tap-highlight-color: transparent; }
.cs-profile.is-pure a.cs-match:active, .cs-profile.is-pure a.cs-tie:active, .cs-profile.is-pure a.cs-say:active, .cs-profile.is-pure a.cs-quote:active, .cs-profile.is-pure a.cs-photo:active, .cs-profile.is-pure .cs-face:active, .cs-profile.is-pure .cs-dossier:has(> summary:active) { transform: translateY(4px); box-shadow: 0 1px 0 var(--f-deep); transition-duration: var(--fb-dur-press); }
.cs-profile .cs-more > summary:active { transform: translateY(2px); }
@media (hover: hover) { .cs-profile.is-pure a.cs-match:active { transform: translate(4px, 4px); } }   /* 战绩行悬停时本来就往右挪了 4px，按下去接着往下陷，不跳回去 */
.cs-profile .cs-castbar .fb-seat:active .fb-seat__face { transform: translateY(2px) scale(.94); transition-duration: var(--fb-dur-press); }
@media (hover: none) {   /* 触屏：点完不留悬停的残影 */
  .cs-profile a.cs-match:hover, .cs-profile a.cs-say:hover, .cs-profile a.cs-quote:hover, .cs-profile a.cs-photo:hover, .cs-profile .cs-face:hover { transform: none; }
  .cs-profile a.cs-match:active, .cs-profile a.cs-say:active, .cs-profile a.cs-quote:active, .cs-profile a.cs-photo:active, .cs-profile .cs-face:active { transform: translateY(4px); }
  .cs-profile .cs-castbar .fb-seat:hover .fb-seat__face { transform: none; }
}
.cs-stat b.ix-pop { animation: ix-pop var(--fb-dur-enter) var(--fb-ease-pop) 1; transform-origin: 0 100%; }
@keyframes ix-pop { 0% { scale: 1.22; } 100% { scale: 1; } }
html.ix #cs-root .ix-act--hero > .cs-splash img { scale: 1.04; translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -10px); transition: translate .6s var(--fb-ease-out); }
/* 探头：下面还有内容、人停着没动，露在门槛上面的那一截（下一块的头）隔一会儿自己往上探一下。只动还没轮到的那一块，正在看的不动 */
html.ix .ix-peek { animation: ix-peek 1.1s var(--fb-ease-out) 1; }
@keyframes ix-peek { 0%, 100% { translate: 0 0; } 28% { translate: 0 -14px; } 52% { translate: 0 0; } 68% { translate: 0 -5px; } 84% { translate: 0 0; } }
html.ix .ix-gate.is-nudge { animation: ix-nudge 1.2s var(--fb-ease-out) 1; }   /* 停着不动的客人：门槛自己抬一下，提示能往下 */
@keyframes ix-nudge { 0%, 100% { translate: 0 var(--lift); } 28% { translate: 0 calc(var(--lift) - 18px); } 52% { translate: 0 var(--lift); } 68% { translate: 0 calc(var(--lift) - 7px); } 84% { translate: 0 var(--lift); } }
/* 开着页面中途打开「减少动态效果」（一打开就开着的，ix.js 整套不启用、是原来的普通页面）：探头、门槛抬一下、箭头点头都不动，露着的那一截照样露着 */
@media (prefers-reduced-motion: reduce) { html.ix .ix-peek, html.ix .ix-gate.is-nudge, html.ix .ix-arrow { animation: none; } }

/* ── pick.css ── */
/* ───────── 艺人页首屏「选英雄」（pick.js）。人像卡、信息卡、键是 /design/heroflow.css 那套，这里只摆位置 ─────────
   整块一片主题色色块（设计系统 fb-block），颜色跟着中间那位；底下的战绩榜还是夜色。手机上一张卡要占得住，信息卡上下排。 */
.cs-pick { position: relative; z-index: 1; padding: 0 0 var(--fb-space-10); transition: background-color var(--fb-dur-enter) var(--fb-ease-out); }
.cs-pick__in { max-width: 1240px; margin: 0 auto; padding-inline: var(--fb-space-8); }
.cs-pick__head { display: flex; align-items: baseline; gap: 16px; padding: 22px 0 4px; }
.cs-pick__title { margin: 0; font: 400 44px/1.05 var(--font-display); letter-spacing: .04em; color: var(--on); }
.cs-pick__kick { margin: 0; font: 400 12px/16px var(--font-latin); letter-spacing: .14em; color: var(--on); opacity: .78; }
.cs-pick__kick i { font-style: normal; opacity: .6; }
.cs-pick__jump { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--on); font: 700 14px/20px var(--font-body); text-decoration: none; }
.cs-pick__jump svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-pick__jump:hover { text-decoration: underline; }
.cs-flow { color: var(--on); margin-top: 6px; }
.cs-pick .hf-info { margin-top: 14px; }
a.hf-info__media { display: block; color: inherit; }
/* 「当狼」「MVP」旁边那颗霓虹棋子（/kit/roles/）。棋子身子是深色的，放在深色卡上描一圈很淡的白光，认得出 */
.cs-piece { display: inline-block; width: 20px; height: 20px; vertical-align: -5px; object-fit: contain; filter: drop-shadow(0 0 1px rgba(255,255,255,.75)) drop-shadow(0 0 5px rgba(255,255,255,.18)); }
.hf-info__stats .cs-piece { width: 22px; height: 22px; margin-right: 3px; vertical-align: -6px; }
.cs-table th .cs-piece { width: 20px; height: 20px; margin-right: 4px; vertical-align: -6px; }
.cs-top__nums .cs-piece { width: 18px; height: 18px; margin-right: 2px; vertical-align: -5px; }

/* 战绩榜挪到选英雄底下：标题不再是整页的大标题 */
.cs-hero .fb-sign { margin-top: 8px; font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 60px; letter-spacing: .04em; color: var(--fb-tube); text-shadow: var(--fb-glow-green); }
.cs-hero { scroll-margin-top: calc(var(--fb-shell-slim, 44px) + 12px); }
.cs--m .cs-hero .fb-sign { font-size: 44px; line-height: 48px; }

@media (min-width: 768px) and (max-width: 1099px) { .cs-pick__in { padding-inline: 16px; } }
@media (max-width: 767px) {
  .cs-pick__in { padding-inline: 12px; }
  .cs-pick__head { padding: 14px 4px 0; gap: 10px; flex-wrap: wrap; }
  .cs-pick__title { font-size: 34px; }
  .cs-pick__kick { font-size: 11px; }
  .cs-pick .hf-info { margin-top: 10px; }
}
@media (min-width: 768px) and (max-height: 480px) {
  .cs-pick__in { padding-inline: 16px; }
  .cs-pick__head { padding: 10px 0 0; } .cs-pick__title { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .cs-pick { transition: none; } }