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

/* ═══════════════ 画框画廊：每张稿子一个固定尺寸的画框，按列宽缩放；?frame=id 时只显示那一张、不缩放 ═══════════════ */
.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; }

/* ═══════════════ 演出语法（11-14 补）：夜里的章、天亮回放、旧账卡、珍藏卡 ═══════════════ */
/* 章：像素图，五种。飞行中带一串点，落在头像右上角盖住 */
.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; }

/* ═══════════════ 手机头像栏改一排（11-14 Tong：两排太挤）：12 个小头像一排，只有说话的人放大带名字 ═══════════════ */
@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; }
}

/* ═══════════════ 矮横屏 844×390（手机横过来）：顶栏和头像栏合成一行，侧边进度收成 pill，字幕一行，主角 250 高 ═══════════════ */
@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; }
}