/* Runtime bridge to Fable's checked-in pass.css. Dimensions below are from
   pass-1114, including its final mobile and short-landscape corrections. */
body.fable-v2211 #stage #fable-frame {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--stage-scale,1));transform-origin:center;background:transparent;overflow:visible;z-index:10}
body.fable-v2211 #stage .bg img {animation:none!important;transform:none!important;scale:1.08;object-fit:cover}
body.fable-v2211 #shot,body.fable-v2211 #scene-people,body.fable-v2211 #stage-den,body.fable-v2211 .program-den-table,body.fable-v2211 .program-den-names,body.fable-v2211 .program-lamp,body.fable-v2211 .program-lamp-beam,body.fable-v2211 #arcs,body.fable-v2211 #scene-den-label {visibility:hidden!important;pointer-events:none!important}
body.fable-v2211 #stage #fable-frame>.top {position:absolute!important;inset:10px 28px auto!important;width:auto!important;height:44px!important;padding:0!important;transform:none!important;background:none!important;border:0!important;z-index:20}
body.fable-v2211 #stage #fable-frame #cast {position:absolute!important;inset:60px 150px auto!important;display:flex!important;width:auto!important;height:86px!important;justify-content:space-between!important;gap:0!important;padding:0!important;transform:none!important;z-index:15;background:none!important;overflow:visible!important}
body.fable-v2211 #stage #fable-frame #cast .seat {flex:0 1 auto!important;width:auto!important;min-width:0!important;--s:44px}
body.fable-v2211 #stage #fable-frame #cast .seat .face {width:44px!important;height:44px!important}
body.fable-v2211 #stage #fable-frame #cast .seat.speak .face {transform:scale(1.14);box-shadow:0 0 0 2px var(--fb-ink)}
body.fable-v2211 #stage #fable-frame #cast .seat.is-asleep .face img {filter:brightness(.42) saturate(.5)}
body.fable-v2211 #stage #fable-frame #cast .seat.is-asleep .face::before {content:'—';position:absolute;inset:26% 20%;z-index:4;color:var(--fb-ink-2);text-align:center}
body.fable-v2211 #stage #fable-frame #cast .seat.is-target .face {outline:2px solid var(--fb-neon-cyan)}
body.fable-v2211 #stage #fable-frame #cast .seat.speak .face::after {content:'';position:absolute;inset:-10px;border:2px solid var(--fb-ink-2);border-radius:50%;animation:st-ping var(--fb-dur-enter) var(--fb-ease-out) 1 both}
/* 头像上头的小牌（「验 好人」「下一位」）：电脑上头像栏离顶栏只有 6 像素，上提 24 像素会压到顶栏的节目名和「AI 实时生成」（22.11 线上就这样，22.12 截图自查查出来），收到 14 像素 */
@media (min-width:601px) and (min-height:521px){body.fable-v2211 #stage #fable-frame #cast .check,body.fable-v2211 #stage #fable-frame #cast .face:not(:has(.check)) .turn-pill{top:-14px!important}
 body.fable-v2211 #stage #fable-frame #cast .stampx{top:calc(100% + 22px)!important}} /* 「做」落下时头像底下那颗「投 零号」：原来压着名字的下半截，往下挪 5 像素 */
@media (max-width:600px){body.fable-v2211 #stage #fable-frame #cast .check{top:-8px!important}} /* 手机竖屏：「验 好人」原来顶到顶栏里、压着「EP.28」，收到头像上沿 */
body.fable-v2211 #stage #fable-frame #flow {position:static!important;display:contents!important;transform:none!important}
body.fable-v2211 #flow>.flow-row,body.fable-v2211 #flow>.flow-hint,body.fable-v2211 #flow .sx-steps,body.fable-v2211 #p1-phase,body.fable-v2211 #p1-tools {display:none!important}
body.fable-v2211 #flow .sx-bar {position:static!important;display:contents!important}
body.fable-v2211 #stage #fable-frame #program-tools.sx-actions {position:absolute!important;top:16px!important;right:160px!important;left:auto!important;display:flex!important;flex-direction:row!important;gap:6px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;z-index:21}
body.fable-v2211 .st__side {z-index:17}
body.fable-v2211 #fable-phase {display:none}
body.fable-v2211 .st__arena {overflow:visible}
body.fable-v2211 .fable-people,body.fable-v2211 .fable-decor {position:absolute;inset:0}
body.fable-v2211 .fable-decor {pointer-events:none}
body.fable-v2211 #fable-frame>.fx-layer {position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden} /* 身份 / 技能特效层（fable-stage.js 建的空层，FableFX.mount 直接用它） */
body.fable-v2211 .st-react img {object-fit:contain}
body.fable-v2211 .st-bubble {left:calc(50% + 100px);top:4px;max-height:236px;overflow:auto;scrollbar-width:thin}
body.fable-v2211 .st-bubble__text {white-space:pre-wrap}
body.fable-v2211 .st-cell>.st-bubble {left:auto;right:8px;top:40px;bottom:auto;width:230px;max-height:calc(100% - 50px)}
body.fable-v2211 .st-cell.is-speak img {left:27%}
body.fable-v2211 .st-target__portrait {width:120px;height:120px;object-fit:contain;border-radius:50%}
body.fable-v2211 .fable-hidden {display:grid;place-content:center;height:100%;text-align:center;gap:var(--fb-space-4);color:var(--fb-ink-2)}
body.fable-v2211 .fable-hidden b {font:400 40px/48px var(--font-display)}
body.fable-v2211 #stage #fable-frame #sub {position:absolute!important;inset:auto 190px 108px!important;width:auto!important;max-width:none!important;transform:none!important;z-index:12;visibility:visible!important;pointer-events:auto!important}
body.fable-v2211 #stage #fable-frame #who {position:static!important;transform:none!important;display:flex!important;gap:var(--fb-space-3);margin-bottom:var(--fb-space-2)}
body.fable-v2211 #stage #fable-frame #line {position:static!important;transform:none!important;width:auto!important;max-width:none!important;height:auto!important;max-height:96px!important;overflow:auto!important;font:500 20px/32px var(--font-body)!important;padding:0!important;white-space:pre-wrap}
body.fable-v2211 #stage #fable-frame #sub {padding:14px 22px 16px!important;border:1px solid var(--fb-line-strong);border-radius:var(--fb-radius-md);background:var(--fb-surface-1);box-shadow:var(--fb-shadow-pop)}
body.fable-v2211 #stage #fable-frame .dock {position:absolute!important;inset:auto 28px 6px!important;width:auto!important;transform:none!important;padding:0!important;background:none!important;z-index:15}
body.fable-v2211 #stage #card {inset:0!important;z-index:35}
body.fable-v2211 #poster {z-index:40}
body.fable-v2211 #sheet,body.fable-v2211 #howto-card,body.fable-v2211 #scene-log-panel,body.fable-v2211 .sx-board {z-index:50}
body.fable-v2211 .st__side.is-open {padding:var(--fb-space-2);background:var(--fb-surface-1);border:1px solid var(--fb-line);border-radius:var(--fb-radius-md)}
/* Bets reuses panel, role-card, avatar and button components. */
#bets-dialog {position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:var(--fb-night-deep)}
#bets-dialog[hidden] {display:none}
#bets-dialog .st-panel {width:min(1040px,calc(100% - 16px));max-height:calc(100% - 16px)}
.bets-grid {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--fb-space-3)}
.bets-choice {display:grid;justify-items:center;gap:var(--fb-space-2);padding:var(--fb-space-3);border:1px solid var(--fb-line);border-radius:var(--fb-radius-md);background:var(--fb-surface-2);color:var(--fb-ink)}
.bets-choice img {width:44px;height:44px;object-fit:cover;border-radius:50%}
.bets-choice[aria-pressed=true] {border-color:var(--fb-neon-green);box-shadow:var(--fb-glow-soft)}
#bets-open {position:absolute;right:28px;top:150px;z-index:18}
@media(max-width:600px) {
 body.fable-v2211 #stage #fable-frame>.top {inset:8px 10px auto!important;height:40px!important}
 body.fable-v2211 #stage #fable-frame .aibug,body.fable-v2211 #ep-name {display:none!important}
 body.fable-v2211 #stage #fable-frame #cast {inset:50px 6px auto!important;height:64px!important;flex-wrap:nowrap!important;align-items:flex-start!important}
 body.fable-v2211 #stage #fable-frame #cast .seat {--s:24px!important;flex:1!important;padding:0!important}
 body.fable-v2211 #stage #fable-frame #cast .seat .face {width:24px!important;height:24px!important}
 body.fable-v2211 #stage #fable-frame #cast .seat .nm {display:none!important}
 body.fable-v2211 #stage #fable-frame #cast .seat.speak .face {width:36px!important;height:36px!important;transform:none!important}
 body.fable-v2211 #stage #fable-frame #cast .seat.speak .nm {display:block!important;font-size:9px!important}
 body.fable-v2211 #stage #fable-frame #cast .seat .role {font-size:7px!important;width:12px!important;height:12px!important}
 body.fable-v2211 #stage #fable-frame #cast .turn-pill {display:none!important}
 body.fable-v2211 #fable-phase {display:block;height:30px}
 body.fable-v2211 .st__side .st-steps {display:none}
 body.fable-v2211 .st__side.is-open .st-steps {display:grid}
 body.fable-v2211 .st__side.is-open .st-steps li {display:flex}
 body.fable-v2211 #stage #fable-frame #program-tools.sx-actions {top:124px!important;right:10px!important;gap:4px!important}
 body.fable-v2211 #stage #fable-frame #program-tools button {padding:0 9px!important;height:30px!important;font-size:12px!important;min-width:0!important}
 body.fable-v2211 #stage #fable-frame #sub {inset:auto 10px 116px!important;padding:10px 12px!important}
 body.fable-v2211 #stage #fable-frame #line {font-size:16px!important;line-height:26px!important;max-height:78px!important}
 body.fable-v2211 #stage #fable-frame .dock {inset:auto 10px 4px!important}
 body.fable-v2211 .st-bubble {inset:auto 0 0!important;width:auto!important;max-height:96px!important;overflow:auto}
 body.fable-v2211 .st-cell>.st-bubble {inset:auto 0 0!important;width:auto!important;max-height:50%!important}
 body.fable-v2211 .st-target__portrait {width:44px;height:44px}
 #bets-open {right:10px;top:160px}
 .bets-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-height:520px) and (min-width:601px) {
 body.fable-v2211 #stage #fable-frame>.top {inset:4px 10px auto!important;height:36px!important;right:72%!important}
 body.fable-v2211 #stage #fable-frame .aibug,body.fable-v2211 #stage #fable-frame .ep {display:none!important}
 body.fable-v2211 #stage #fable-frame #cast {inset:4px 180px auto 260px!important;height:44px!important}
 body.fable-v2211 #stage #fable-frame #cast .seat .face {width:24px!important;height:24px!important}
 body.fable-v2211 #stage #fable-frame #cast .seat .nm,body.fable-v2211 #stage #fable-frame #cast .turn-pill {display:none!important}
 body.fable-v2211 #stage #fable-frame #program-tools.sx-actions {top:48px!important;right:10px!important}
 body.fable-v2211 .st__side {top:48px;left:10px;width:auto}
 body.fable-v2211 #fable-phase {display:block}
 body.fable-v2211 .st__side .st-steps {display:none}
 body.fable-v2211 .st__side.is-open .st-steps {display:grid}
 body.fable-v2211 .st__side.is-open .st-steps li {display:flex}
 body.fable-v2211 #stage #fable-frame #sub {inset:auto 120px 70px!important;padding:6px 10px!important}
 body.fable-v2211 #stage #fable-frame #line {font-size:16px!important;line-height:26px!important;max-height:26px!important}
 body.fable-v2211 #stage #fable-frame #who {margin-bottom:0!important}
 body.fable-v2211 #stage #fable-frame .dock {inset:auto 10px 4px!important}
 body.fable-v2211 .st-bubble {top:0;width:196px;max-height:96px}
 #bets-open {right:10px;top:88px}
}
@media(prefers-reduced-motion:reduce){body.fable-v2211 *,body.fable-v2211 *::after{animation:none!important;transition:none!important}}
body.fable-v2211 dialog.st-panel {position:fixed;margin:auto;color:var(--fb-ink);z-index:100}
body.fable-v2211 dialog.st-panel:not([open]) {display:none}
body.fable-v2211 dialog.st-panel::backdrop {background:var(--fb-night-deep)}
body.fable-v2211 dialog.st-panel p {white-space:pre-wrap}
@media(max-width:600px){body.fable-v2211 .fable-people>.st-actor.is-lead {--h:480px!important}body.fable-v2211 .st-den .st-bubble {display:none}}
@media(max-height:520px) and (min-width:601px){body.fable-v2211 .fable-people>.st-actor.is-lead {--h:270px!important}}

body.fable-v2211 #stage #fable-frame #bar {position:relative!important;inset:auto!important;width:100%!important;transform:none!important;display:block!important;padding:18px 0 20px!important}
body.fable-v2211 #stage #fable-frame .fable-mobile-thought {display:none}
@media(max-width:600px),(max-height:520px){body.fable-v2211 #stage #fable-frame .fable-mobile-thought:not([hidden]){display:block;max-height:78px;overflow:auto;font:500 16px/26px var(--font-body);color:var(--fb-ink-2)}}
/* The chorus is calm; only the speaking actor uses the committed action frame. */
body.fable-v2211 #stage #fable-frame #who .st-beats {margin-left:auto}
body.fable-v2211 #stage #fable-frame #play,body.fable-v2211 #stage #fable-frame #next-person {min-width:calc(var(--fb-touch) / var(--stage-scale,1));min-height:calc(var(--fb-touch) / var(--stage-scale,1))}
@media(max-width:600px),(max-height:520px){body.fable-v2211 #stage #fable-frame {width:100vw!important;height:100vh!important;transform:translate(-50%,-50%)!important;--stage-scale:1!important}}
/* Fable XP: data-driven additions sit beside, never replace, spoken subtitles. */
body.fable-v2211 #xp-sides {position:absolute;z-index:6;left:0;top:34px;width:252px}
body.fable-v2211 #xp-sides[hidden],body.fable-v2211 #xp-gist[hidden],body.fable-v2211 #xp-mybet[hidden],body.fable-v2211 .xp-credit[hidden],body.fable-v2211 .xp-note[hidden] {display:none}
body.fable-v2211 #stage #fable-frame .has-gist #line {font-size:15px!important;line-height:24px!important;max-height:72px!important}
body.fable-v2211 #stage #fable-frame #xp-gist {font:700 24px/32px var(--font-body);color:var(--fb-ink);margin:0 0 8px}
body.fable-v2211 #xp-mybet {position:absolute;left:150px;bottom:210px;z-index:18}
body.fable-v2211 .xp-terms {max-height:56px;overflow:auto}
body.fable-v2211 .xp-sides__sum {display:block}
body.fable-v2211 .xp-credit {font-size:11px;color:var(--fb-ink-3);overflow:hidden;text-overflow:ellipsis;max-width:240px;white-space:nowrap}
body.fable-v2211 .xp-trail .fb-avatar {--s:14px}
body.fable-v2211.is-betting #cast .role,body.fable-v2211.is-betting .st-bubble,body.fable-v2211.is-betting .xp-note {visibility:hidden!important}
@media(max-width:600px){
 body.fable-v2211 #xp-sides {top:auto;bottom:0;left:0;right:0;width:auto;max-height:96px;overflow:auto;display:flex;gap:8px}
 body.fable-v2211 #xp-sides .xp-sides__q {display:none}
 body.fable-v2211 #xp-sides .xp-lane {min-width:168px}
 body.fable-v2211 #xp-sides .xp-sides__sum {display:none}
 body.fable-v2211 #xp-mybet {left:10px;bottom:196px;max-width:calc(100% - 20px)}
 body.fable-v2211 .xp-note {right:0;bottom:0;max-width:50%}
 body.fable-v2211 #stage #fable-frame #xp-gist {font-size:18px;line-height:26px}
 body.fable-v2211 #stage #fable-frame .has-gist #line {font-size:13px!important;line-height:20px!important;max-height:60px!important}
 body.fable-v2211 #stage #fable-frame .dock .row {gap:1px!important;flex-wrap:nowrap!important}
 body.fable-v2211 #stage #fable-frame .dock .time {font-size:10px!important;min-width:0!important;white-space:nowrap}
 body.fable-v2211 #stage #fable-frame #follow-chip {display:none!important}
 body.fable-v2211 #stage #fable-frame #next-person {font-size:0!important;width:44px!important;padding:0!important}
 body.fable-v2211 #stage #fable-frame #next-person::after {content:'→';font-size:18px}
 body.fable-v2211 .xp-credit {max-width:100px}
}
@media(max-height:520px) and (min-width:601px){body.fable-v2211 #xp-sides,body.fable-v2211 .xp-note,body.fable-v2211 #xp-mybet {display:none}body.fable-v2211 .xp-terms {display:none}body.fable-v2211 #stage #fable-frame #xp-gist {font-size:16px;line-height:20px}}
body.fable-v2211 #stage #fable-frame #play,body.fable-v2211 #stage #fable-frame #next-person {min-width:calc((var(--fb-touch) + var(--fb-space-1)) / var(--stage-scale,1))!important;min-height:calc((var(--fb-touch) + var(--fb-space-1)) / var(--stage-scale,1))!important}
@media(max-width:600px){body.fable-v2211 #stage #fable-frame #play,body.fable-v2211 #stage #fable-frame #next-person{min-width:44px!important;min-height:44px!important}}
body.fable-v2211 #fable-frame.xp .st__arena {bottom:150px}
body.fable-v2211 #stage #fable-frame #xp-sides {left:150px;top:210px;bottom:auto}
@media(max-width:600px){body.fable-v2211 #fable-frame.xp .st__arena{bottom:196px}body.fable-v2211 #stage #fable-frame #xp-sides{left:10px;right:10px;top:auto;bottom:calc(116px + var(--caption-height,196px) + 8px);max-height:96px}body.fable-v2211 #xp-sides .xp-lane--none{display:none}}
@media(max-height:520px) and (min-width:601px){body.fable-v2211 #fable-frame.xp .st__arena{bottom:100px}}
/* Keep the entry screen reachable at every height; only the body scrolls. */
#bets-dialog {padding:var(--fb-space-2);overflow:auto;background:color-mix(in srgb,var(--fb-night-deep) 72%,transparent)}
#bets-dialog .st-panel {max-height:calc(100dvh - var(--fb-space-4));min-height:0}
#bets-dialog .st-panel__head,#bets-dialog .st-panel__foot {flex-shrink:0}
#bets-dialog .st-panel__body {min-height:0;overflow-y:auto;overscroll-behavior:contain}
@media(max-height:520px) and (min-width:601px){#bets-dialog .st-panel__head,#bets-dialog .st-panel__body,#bets-dialog .st-panel__foot{padding:var(--fb-space-2) var(--fb-space-3)}.bets-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* 片头海报还在的时候（body.posterup）整台舞台先不露：从照片墙 ?at= 进来、或者直播进来，舞台已经摆到那一句，不藏就跟海报叠在一起（11-14 老板截图） */
body.posterup #stage #fable-frame{opacity:0;visibility:hidden;pointer-events:none}
body.posterup.fable-v2211 #stage #fable-frame #sub{visibility:hidden!important;pointer-events:none!important}
/* 直播多出 LIVE 标签，右上那组变宽，压在「前情 / 局势」下面只露一截红（11-14 老板截图）：电脑尺寸那排按钮跟着往左让 */
@media (min-width:601px) and (min-height:521px) {
 body.fable-v2211 #stage #fable-frame:has(#live-tag:not([hidden])) #program-tools.sx-actions {right:256px!important}
}
/* 上帝视角「先押后看」（11-14 老板：开关谁都能点、点了总有下文）：押注卡多一颗「不押，直接看」，押完锁定；
   翻不了牌（真人上桌那局）弹说明卡，跟押注卡同一个底、同一套面板和按钮 */
.bets-acts {display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--fb-space-2);margin-left:auto}
.bets-acts [hidden] {display:none}
#bets-dialog .st-panel__foot {align-items:center}
#bets-dialog.is-gate #bets-title {color:var(--fb-gold)}
.bets-choice:disabled {cursor:default;opacity:.5}
.bets-choice[aria-pressed=true]:disabled {opacity:1}
#god-lock {position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--fb-space-2);overflow:auto;background:color-mix(in srgb,var(--fb-night-deep) 72%,transparent)}
#god-lock[hidden] {display:none}
#god-lock .st-panel {width:min(480px,calc(100% - 16px));max-height:calc(100dvh - var(--fb-space-4))}
#god-lock .st-panel__head h2 {color:var(--fb-gold)}
#god-lock .st-panel__body {gap:var(--fb-space-2)}
.god-lock__text {font:500 16px/24px var(--font-body);color:var(--fb-ink);text-wrap:balance}
.god-lock__hint {font:400 13px/20px var(--font-body);color:var(--fb-ink-3)}
#god-lock .st-panel__foot {justify-content:flex-end;align-items:center;gap:var(--fb-space-2)}
@media(max-height:520px) and (min-width:601px){#god-lock .st-panel__head,#god-lock .st-panel__body,#god-lock .st-panel__foot{padding:var(--fb-space-2) var(--fb-space-3)}}
/* 直播时上面那排往左让了（LIVE 标签），「押一手」原来的位置正好压在「怎么玩 / 前情」上：电脑尺寸跟着再往左挪到那排左边 */
@media (min-width:601px) and (min-height:521px) {
 body.fable-v2211.fable-reel #stage #fable-frame:has(#live-tag:not([hidden])) #bets-open {right:426px}
}
/* 投票那一段（11-14 老板看直播：台上的计票牌跟小黑板重复、还在说话票数就全出来了）：台上不挂计票牌，票只在小黑板上一票一票落（experience.js）。
   落下那一下头像从「还没表态」飞进那一行（is-landing，起点用 --dx --dy --k 交过来；起点没露出来就原地落下 is-dropping），那一行的票数跳一下（is-bump）；
   整轮投完领先那一行亮一下（is-glow），之后留一圈金边（is-lead）。金色跟「做 · 投了」那张卡、投票的小章同色。减少动态效果时上面的动画整页都关了，直接落位 */
body.fable-v2211 #xp-sides .xp-lane__chips .fb-avatar.is-sheriff {box-shadow:0 0 0 2px var(--fb-surface-2),0 0 0 3px var(--fb-gold)}
body.fable-v2211 #xp-sides .xp-lane__chips .fb-avatar.is-sheriff::before {content:"警";position:absolute;z-index:1;right:-4px;bottom:-4px;display:grid;place-items:center;width:14px;height:14px;border-radius:3px;background:var(--fb-gold);color:var(--fb-on-gold);font:700 9px/14px var(--font-body)}
body.fable-v2211 #xp-sides .xp-lane__chips .fb-avatar.is-landing {z-index:3;animation:xp-fly 620ms cubic-bezier(.3,.7,.2,1) var(--fly-delay,0ms) 1 backwards}
body.fable-v2211 #xp-sides .xp-lane__chips .fb-avatar.is-dropping {z-index:3;animation:st-drop var(--fb-dur-enter) var(--fb-ease-pop) var(--fly-delay,0ms) 1 backwards}
body.fable-v2211 #xp-sides .xp-lane__n.is-bump {animation:xp-bump 460ms var(--fb-ease-pop) var(--bump-delay,0ms) 1 backwards}
body.fable-v2211 #xp-sides .xp-lane.is-lead {box-shadow:0 0 0 1px var(--fb-gold),0 0 0 0 rgba(242,193,78,0)}
body.fable-v2211 #xp-sides .xp-lane.is-glow {animation:xp-lead 1400ms var(--fb-ease-out) 1}
body.fable-v2211 #xp-sides .xp-sides__note {margin:0;color:var(--fb-ink-3);font:500 11px/16px var(--font-body)}
@media (max-height:520px) and (min-width:601px) {body.fable-v2211 #xp-sides .xp-lane__chips .fb-avatar.is-sheriff::before {display:none}} /* 横屏点开的小黑板头像叠着排，「警」字小牌没地方放，留金圈 */
@keyframes xp-fly {0% {transform:translate(var(--dx,0),var(--dy,0)) scale(var(--k,1))} 82% {transform:translate(0,0) scale(1.3)} 100% {transform:none}}
@keyframes xp-bump {0% {transform:scale(1)} 40% {transform:scale(1.5);color:var(--fb-gold)} 100% {transform:scale(1)}}
@keyframes xp-lead {0% {box-shadow:0 0 0 1px rgba(242,193,78,0),0 0 0 0 rgba(242,193,78,0)} 35% {box-shadow:0 0 0 2px var(--fb-gold),0 0 28px 4px rgba(242,193,78,.55)} 100% {box-shadow:0 0 0 1px var(--fb-gold),0 0 0 0 rgba(242,193,78,0)}}
/* 头像上那颗票数（app.js 画的，按「演到哪一句」算）：fable-stage.js 按小黑板那份盖一层，data-gated 是这一刻该显示的数（这一票的「做」还没播到就是落下以前的数），0 就不露 */
body.fable-v2211 #stage #fable-frame #cast .votes[data-gated] {text-indent:-99em;overflow:hidden;animation:none!important}
body.fable-v2211 #stage #fable-frame #cast .votes[data-gated]::after {content:attr(data-gated);position:absolute;inset:0;text-indent:0;text-align:center}
body.fable-v2211 #stage #fable-frame #cast .votes[data-gated="0"] {display:none!important}

/* ══════ 22.13h 顶栏、底栏不打架（11-14 夜）══════
   顶栏、底栏在好几种尺寸下互相压。量法见 tools/topbar_check/check.js：九种尺寸 × 回放 / 直播 × 登录与否 × 上帝视角开关 × 海报 / 正片
   （另加直播落后「回到直播」、点头像「跟着看」），量出屏、两两重叠、点不着、灰掉、切字，修完全过；320、412、667×375、932×430 等也扫过。
   版面分三种，各管各的：一、电脑画框（宽 > 600 且高 > 520，整块 1440×900 按比例缩放；平板竖屏 768×1024 也是它）；
   二、手机竖屏（宽 ≤ 600，390 / 375 / 350 以下再各收一档）；三、手机横屏（高 ≤ 520，宽 720 以下再收一档）。不分尺寸的写在最前面。 */

/* 说话那位头像外面那圈「波纹」（st-ping）放到 1.25 倍、透明了还停在那儿，盖着左右邻座：手机上点小满，弹出来的是糖糖。
   头像上挂的验人小牌、「做」那一拍的章比座位宽，压到隔壁头像上。这几样都只是给人看的，不接点击，点下去落到底下那位头像 */
body.fable-v2211 #stage #fable-frame #cast .seat .face::after,
body.fable-v2211 #stage #fable-frame #cast .seat .check,
body.fable-v2211 #stage #fable-frame #cast .seat .stampx {pointer-events:none}
/* 进度条底下的段名：段太窄的播放器整段藏掉（app.js 的 tight，量到超出 2 像素才藏），只超出一两像素的原来被裁掉最后一笔（第 29 集横屏「第3夜」、412 宽直播「选警长」）。
   不裁：字居中，最多往两边各多出 1 像素（再多的播放器自己就藏掉了） */
body.fable-v2211 #stage #fable-frame #chap i {overflow:visible}

@media (min-width:601px) and (min-height:521px) {
 /* 一、电脑画框。平板竖屏窗口才 768 宽，style.css、theater.css 里写给手机的 (max-width:899px) 规则漏进了 1440 宽的画框：
    顶栏间距变小、「首杀」变小、AI 章和场名收起、右边那组（LIVE、上帝视角）不再贴右，排到「前情 / 局势」底下，三样叠在一起。照 1440 那一版钉住 */
 body.fable-v2211 #stage #fable-frame>header.top {gap:12px}
 body.fable-v2211 #stage #fable-frame>header.top .brand {flex:none;font-size:28px;line-height:28px}
 body.fable-v2211 #stage #fable-frame>header.top .brand .fb-monster {--m:28px}
 body.fable-v2211 #stage #fable-frame>header.top .aibug {display:flex!important}
 body.fable-v2211 #stage #fable-frame>header.top .ep {flex:0 1 auto;align-items:center;line-height:24px}
 body.fable-v2211 #stage #fable-frame>header.top .ep b {flex:none}
 body.fable-v2211 #stage #fable-frame>header.top #ep-name {display:block!important}
 body.fable-v2211 #stage #fable-frame>header.top .top-r {position:absolute;right:0;top:0;height:100%;display:flex;align-items:center;gap:10px}
 body.fable-v2211 #stage #fable-frame>header.top #god {height:40px;padding:0 16px;font-size:13px}
 body.fable-v2211 #stage #fable-frame #program-tools.sx-actions button {font-size:12px!important;padding:0 10px!important}
 body.fable-v2211 #stage #fable-frame .dock #time {font-size:12px}
 /* 画框缩小时播放键和「下一位」照「手指够 48 像素」放大（143 行）：1024×768 在画框里长到 68 高、平板竖屏 90 高，上下各伸一截，
    上半截压进进度条（平板竖屏点播放键上半截，点到的是进度条）。改成上沿最高到进度条下沿（画框 842）、往下长：
    画框底（900）以内放得下就放，画框比窗口矮（上下有黑边）就伸进下面的黑边，黑边多高用多少 */
 body.fable-v2211 #stage #fable-frame .dock #play,body.fable-v2211 #stage #fable-frame .dock #next-person {
  --tb-touch:min(calc((var(--fb-touch) + var(--fb-space-1)) / var(--stage-scale,1)),58px);
  min-height:var(--tb-touch)!important;align-self:flex-start;margin-top:max(-4px,calc((48px - var(--tb-touch)) / 2))}
 /* 黑边高度用 100dvh 算（跟 fable-stage.js 量画框用的 innerHeight 一样，手机浏览器地址栏收放都对得上）；认不得 dvh 的老浏览器就只长到画框底 */
 @supports (height:100dvh) {
  body.fable-v2211 #stage #fable-frame .dock #play,body.fable-v2211 #stage #fable-frame .dock #next-person {
   --tb-touch:min(calc((var(--fb-touch) + var(--fb-space-1)) / var(--stage-scale,1)),calc(58px + max(0px,(100dvh / var(--stage-scale,1) - 900px) / 2)))}
 }
}

@media (max-width:600px) {
 /* 二、手机竖屏。顶栏一行要放「首杀」、EP 号、LIVE（往回翻了是「回到直播」）、上帝视角、登录（登了是头像）、开机六样，390 宽原样要 413 像素：
    「首杀」被挤成竖排两行、伸进头像栏，EP.28 的「28」被上帝视角压住，直播时「开机」出屏一截。
    让法：LIVE 挪到头像栏下面那一行，紧跟在「投票 ▾」后面（设计稿的手机顶栏本来就不放直播标；它说的也是「现在演到哪」，跟环节放一块）；
    剩下五样收紧（间距 6，EP 号、上帝视角、登录、开机左右留白各收几像素），360 宽也一行放下，一个字不少 */
 body.fable-v2211 #stage #fable-frame>header.top {gap:6px}
 body.fable-v2211 #stage #fable-frame>header.top .brand {flex:none;white-space:nowrap;line-height:24px}
 body.fable-v2211 #stage #fable-frame>header.top .ep {flex:none;margin:0}
 body.fable-v2211 #stage #fable-frame>header.top .ep b {padding:4px 6px}
 body.fable-v2211 #stage #fable-frame>header.top #god {margin:0 0 0 auto;padding:0 10px;gap:5px}
 body.fable-v2211 #stage #fable-frame>header.top #fb-account {margin:0}
 body.fable-v2211 #stage #fable-frame>header.top .ac-login {padding:0 10px}
 body.fable-v2211 #stage #fable-frame>header.top a.fb-btn--sign {flex:none;padding:0 10px}
 body.fable-v2211 #stage #fable-frame>header.top #live-tag {position:absolute;left:74px;top:116px;height:30px;line-height:30px;margin:0;padding:0 10px}
 /* 头像栏：说话那位放大到 36，375、360 宽一个座位才 30、29 宽，大头像压到隔壁头像上。说话那位的座位多分三成宽，邻座各让不到 1 像素 */
 body.fable-v2211 #stage #fable-frame ol#cast li.seat.speak {flex-grow:1.3!important}
 /* 底栏一排八样，375、360 宽时间被挤得压到「2×」上。按钮不许被压扁；时间放不下就自己折成两行（「63:05 /」「97:29」），最窄留 8 个字宽，过百分钟的局也只折两行 */
 body.fable-v2211 #stage #fable-frame .dock .row>button {flex-shrink:0}
 body.fable-v2211 #stage #fable-frame .dock #time.time {white-space:normal!important;min-width:8ch!important;line-height:13px}
 /* 点头像就「跟着他看」（上一拍 / 下一拍只在他身上跳），底栏的时间换成「跟着谁 ×」那颗。手机上这颗原来整颗藏着（137 行）：
    点过一个头像就一直跟着，看不出在跟谁，也没处点「不跟了」。放回时间那格，只留头像和 ×（名字收起，头像就是他），比时间还窄 */
 body.fable-v2211 #stage #fable-frame #follow-chip:not([hidden]) {display:inline-flex!important;margin-left:4px;padding:0 6px 0 3px}
 body.fable-v2211 #stage #fable-frame #follow-chip #fc-name {display:none}
}
@media (max-width:389px) {
 /* 390 以下的手机：顶栏最宽的时候（没登录、上帝视角开着）要 355 像素，375 宽刚好塞满、360 宽「开机」伸出屏幕 4 像素。
    间距 6 → 4，上帝视角、登录、开机左右留白 10 → 8，省出 20 像素，一个字不少 */
 body.fable-v2211 #stage #fable-frame>header.top {gap:4px}
 body.fable-v2211 #stage #fable-frame>header.top #god,body.fable-v2211 #stage #fable-frame>header.top .ac-login,body.fable-v2211 #stage #fable-frame>header.top a.fb-btn--sign {padding:0 8px}
}
@media (max-width:374px) {
 /* 360 宽底栏：时间折成两行还差几像素。上一拍、下一拍、台词、声音四颗从 40 收到 36 宽，高不变 */
 body.fable-v2211 #stage #fable-frame .dock .row>.ib:not(.play):not(.txt) {width:36px}
}
@media (max-width:350px) {
 /* 320 宽的老手机（iPhone SE 一代）：顶栏还多 20 像素，底栏多 30。
    顶栏：「首杀」20 号字，EP 号、上帝视角、登录、开机左右留白再收；上帝视角开着时后面那个小「开」字这一档不写（开着整颗是金的）。
    底栏：上一拍、下一拍、台词、声音 32 宽，倍速左右留白 6，按钮之间不留缝。头像栏：一个座位才 24 宽，头像收到 22、说话那位 30 */
 body.fable-v2211 #stage #fable-frame>header.top .brand {font-size:20px;gap:6px}
 body.fable-v2211 #stage #fable-frame>header.top .ep b {padding:4px}
 body.fable-v2211 #stage #fable-frame>header.top #god {padding:0 6px;gap:4px}
 body.fable-v2211 #stage #fable-frame>header.top #god[aria-pressed=true]::after {content:none}
 body.fable-v2211 #stage #fable-frame>header.top .ac-login,body.fable-v2211 #stage #fable-frame>header.top a.fb-btn--sign {padding:0 6px}
 body.fable-v2211 #stage #fable-frame ol#cast li.seat .face {width:22px!important;height:22px!important}
 body.fable-v2211 #stage #fable-frame ol#cast li.seat.speak .face {width:30px!important;height:30px!important}
 body.fable-v2211 #stage #fable-frame .dock .row {gap:0!important}
 body.fable-v2211 #stage #fable-frame .dock .row>.ib:not(.play):not(.txt) {width:32px}
 body.fable-v2211 #stage #fable-frame .dock #speed {padding:0 6px}
 body.fable-v2211 #stage #fable-frame .dock #time.time {margin-left:2px}
}

@media (max-height:520px) and (min-width:601px) {
 /* 三、手机横屏。顶栏只给了左边 28%（844 宽 226 像素），却要放「首杀」、LIVE、上帝视角、登录、开机：「首杀」被挤成竖排、顶出屏幕上沿，
    登录、开机伸进头像栏，压住前几个头像。让法照设计稿横屏那版：顶栏通栏一行，「首杀」在左，LIVE、上帝视角、登录、开机贴右，头像栏夹在中间让开两头。
    头像栏往下挪 6 像素：头像上的票数、验人小牌原来顶出屏幕上沿被切掉一截 */
 body.fable-v2211 #stage #fable-frame>header.top {right:10px!important;gap:6px}
 body.fable-v2211 #stage #fable-frame>header.top .brand {flex:none;white-space:nowrap}
 body.fable-v2211 #stage #fable-frame>header.top .top-r {margin-left:auto;gap:6px}
 body.fable-v2211 #stage #fable-frame>header.top #god {padding:0 10px;gap:5px}
 body.fable-v2211 #stage #fable-frame>header.top #fb-account {margin:0}
 body.fable-v2211 #stage #fable-frame>header.top .ac-face {padding:3px}
 body.fable-v2211 #stage #fable-frame>header.top .ac-face__name {display:none}
 body.fable-v2211 #stage #fable-frame>header.top .ac-login {padding:0 10px}
 body.fable-v2211 #stage #fable-frame>header.top a.fb-btn--sign {flex:none;padding:0 10px}
 body.fable-v2211 #stage #fable-frame ol#cast {inset:10px 330px auto 100px!important}
 body.fable-v2211 #stage #fable-frame #cast .seat .check {top:-8px!important}
 /* 「怎么玩 / 前情 / 局势」那排：横屏宽过 900 的（932×430 这种大屏手机）原来换成电脑字号，「局势」伸到「押一手」底下。横屏一律用窄的那套 */
 body.fable-v2211 #stage #fable-frame #program-tools.sx-actions button {font-size:11px!important;padding:0 7px!important}
}
@media (max-height:520px) and (min-width:601px) and (max-width:719px) {
 /* 窄一点的横屏（667×375 这种）：头像栏只剩 237 像素，十二个 24 像素的头像挤成一摞。头像收到 20，右边那组再收紧（间距 4，左右留白 8），头像栏让出的右边跟着收 */
 body.fable-v2211 #stage #fable-frame>header.top,body.fable-v2211 #stage #fable-frame>header.top .top-r {gap:4px}
 body.fable-v2211 #stage #fable-frame>header.top #god,body.fable-v2211 #stage #fable-frame>header.top .ac-login,body.fable-v2211 #stage #fable-frame>header.top a.fb-btn--sign {padding:0 8px}
 body.fable-v2211 #stage #fable-frame ol#cast {inset:10px 304px auto 88px!important}
 body.fable-v2211 #stage #fable-frame ol#cast li.seat .face {width:20px!important;height:20px!important}
}