/* 卡片流（22.12）：想 / 说 / 做 / 旁白 一种卡，从底下发出来，旧的往上滚。配 fable-reel.js。
   这里的规矩都挂在 body.fable-reel 底下：卡片流没开（?reel=0、直播退回老样子）时一条都不生效，播放器还是字幕面板 + 心里话云。
   版面：电脑（1440×900 画框）和手机横屏卡片流在右边一栏，手机竖屏在底下。 */

/* ── 老的两处收起：底下的字幕面板、右上 / 狼队格子里的心里话云（内容都进了卡片） ── */
body.fable-reel.fable-v2211 #stage #fable-frame #sub {visibility:hidden!important;pointer-events:none!important}
body.fable-reel .st-bubble,body.fable-reel .fable-mobile-thought {display:none!important}
/* 老板 11-14 截图里横穿整屏、压在狼队格子上的那只虚线框：老播放器的心里话框 #think。舞台 22.11 把它的外壳 #shot 藏了，
   可夜里狼队 / 开着整局台词时 style.css 的 body.scene-surface #think 又把它翻回 visible。卡片流开着的时候它一律不露 */
body.fable-reel #stage #think {visibility:hidden!important;pointer-events:none!important}

/* ── 电脑：卡片流在右边一栏，人站在小黑板和卡片流中间，小本本挪到左边 ── */
#fable-reel {display:none}
body.fable-reel #fable-reel {position:absolute;z-index:14;right:28px;top:156px;bottom:108px;width:412px;display:flex;flex-direction:column;gap:6px;
 --fs:15px;--lh:24px;--gist-fs:18px;--gist-lh:26px;--raw-fs:14px;--raw-lh:22px;--rows-now:6;--rows-raw-now:4;--rows-mate:5;--rows-raw-mate:2;--rows-far:2}
body.fable-reel.posterup #fable-reel {visibility:hidden}
body.fable-reel.fable-v2211 #fable-frame.xp .st__arena {left:402px;right:440px;bottom:112px}
body.fable-reel.fable-v2211 #fable-frame .xp-note {left:-252px;right:auto;bottom:0;width:252px}
body.fable-reel.fable-v2211 #xp-mybet {left:414px;bottom:118px}
body.fable-reel #bets-open {top:16px;right:330px;z-index:21}
body.fable-reel .st-react {top:40px;width:132px}
body.fable-reel .st-react img {height:112px}
/* 狼队格子：舞台窄了，「今晚刀谁」收成顶上一条，下面两列 */
body.fable-reel .st-den {inset:36px 0 6px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(2,minmax(0,1fr));gap:10px}
body.fable-reel .st-den[data-wolves="1"],body.fable-reel .st-den[data-wolves="2"] {grid-template-rows:auto minmax(0,1fr)}
body.fable-reel .st-den[data-wolves="3"] .st-cell:nth-child(2) {grid-row:auto}
body.fable-reel .st-den .st-target {grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-items:start;gap:10px;padding:8px 14px;text-align:left}
body.fable-reel .st-den .st-target>* {margin:0}
body.fable-reel .st-target__portrait {width:44px;height:44px;flex:none}
body.fable-reel .st-target__name {font-size:24px;line-height:28px}
body.fable-reel .st-target__chips {margin-left:auto}
body.fable-reel .st-target__note {display:none}
body.fable-reel .st-cell img,body.fable-reel .st-cell.is-speak img {left:50%;bottom:auto;top:-4%;height:220%} /* 格子矮了：人放大到露上半身 */
body.fable-reel .st-cell__head .fb-nameplate {font:700 14px/20px var(--font-body);letter-spacing:0}
body.fable-reel .st-target__portrait {object-fit:cover;object-position:50% 10%}
body.fable-reel.is-betting #fable-reel {visibility:hidden}
/* 台上的计票牌：舞台窄了，三块并排摆不下。收成小牌、往两边摊开、让到「第几天 · 投票」那块小牌下面（手机竖屏、横屏整块收起，票数在卡片流顶上那一行） */
body.fable-reel .st-tally {top:34px;left:calc(50% + (var(--x,50%) - 50%) * 1.5);width:170px;padding:6px 8px 8px;gap:4px}
body.fable-reel .st-tally__n {font-size:14px;line-height:20px}
body.fable-reel .st-tally__chips {gap:4px}
body.fable-reel .st-tally__chips .fb-avatar {--s:18px}
body.fable-reel .st-tally::after {display:none}
/* 散场的结果牌：舞台窄了，原位会压住主角的头。电脑挪到左边一栏（散场时小黑板不在，那一栏空着）；手机收成右上角一块小牌 */
body.fable-reel .st-result {left:-252px;top:34px;width:244px;padding:14px 16px 16px}
/* 提示小字（#toast，在画框外面、按整个窗口摆）：挪到舞台中间偏上，不盖头像栏，也不盖卡片流顶上刚冒出来的「回到刚才」（横屏原来正好盖住它）。
   电脑上画框按窗口缩放（缩放比 s = min(1, 宽/1440, 高/900)）：舞台中心在画框里 (701, 196)，换成窗口坐标是「中线 − 19s」「中线 − 254s」 */
body.fable-reel #toast {left:calc(50% - min(19px, 2.12vh, 1.32vw));top:calc(50% - min(254px, 28.23vh, 17.64vw));max-width:560px;width:max-content;white-space:normal;text-align:center;border-radius:12px}
/* 往上翻的时候：这一幕的小牌带「回看」 */
body.fable-reel.reel-browse .st-kick::after {content:"回看";margin-left:8px;padding:0 6px;border-radius:3px;background:var(--fb-gold);color:var(--fb-on-gold);font:700 11px/18px var(--font-body)}
body.fable-reel.reel-browse #bar .reel-headmark {display:block}
#bar .reel-headmark {display:none;position:absolute;z-index:2;top:11px;width:2px;height:12px;margin-left:-1px;border-radius:1px;background:var(--fb-tube);box-shadow:0 0 0 2px var(--fb-night-deep);pointer-events:none}

/* ══ 卡片流本身 ══ */
.reel button {font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.reel p {margin:0}
.reel [hidden] {display:none!important}
.reel__head {flex:none;display:flex;align-items:center;gap:8px;height:28px;min-width:0}
/* 想 / 说 / 做：正在演哪种哪颗亮绿；「想」「做」点一下是开关（关掉这种卡就不发了）；「说」只当灯 */
.reel-filter {margin-left:auto;flex:none;display:inline-flex;gap:4px}
.reel .reel-filter>* {position:relative;display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 9px;border-radius:5px;border:1px solid var(--fb-line-strong);background:rgba(10,13,15,.84);color:var(--fb-ink);font:700 12px/1 var(--font-body);transition:background var(--fb-dur-state),color var(--fb-dur-state),border-color var(--fb-dur-state)}
.reel .reel-filter button::before {content:"";position:absolute;inset:-9px -2px}
.reel .reel-filter button[aria-pressed="false"] {color:var(--fb-ink-off);border-style:dashed;border-color:var(--fb-line);text-decoration:line-through}
.reel .reel-filter .is-now {background:var(--fb-neon-green);border-color:var(--fb-neon-green);color:var(--fb-on-green)}
.reel .reel-filter button.is-locked {color:var(--fb-ink-off);border-style:dashed;border-color:var(--fb-line);text-decoration:none;padding-right:20px}
.reel .reel-filter button.is-locked::after {content:"";position:absolute;right:7px;top:50%;width:8px;height:7px;margin-top:-2px;border-radius:1.5px;background:currentColor;box-shadow:0 -4px 0 -2.2px currentColor}
/* 小黑板收成一行（手机竖屏、横屏）：点开看全 */
.reel-ticker {display:none;min-width:0;align-items:center;gap:6px;height:26px;padding:0 8px 0 6px;border-radius:var(--fb-radius-pill);border:1px solid var(--fb-line);background:rgba(10,13,15,.84);color:var(--fb-ink-2);font:500 12px/16px var(--font-body);white-space:nowrap}
.reel .reel-ticker {border:1px solid var(--fb-line);background:rgba(10,13,15,.84);padding:0 8px 0 6px}
.reel-ticker img {flex:none;width:18px;height:18px;border-radius:50%;object-fit:cover}
.reel-ticker b {font:400 13px/16px var(--font-latin);color:var(--fb-ink)}
.reel-ticker span {overflow:hidden;text-overflow:ellipsis;color:var(--fb-ink-3)}
.reel-ticker i {font-style:normal;color:var(--fb-ink-3)}
.reel .reel-ticker:disabled {cursor:default}
/* 回到刚才 / 回到直播：往上翻的时候才出现 */
.reel .reel-back {flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px 0 10px;border-radius:var(--fb-radius-pill);background:var(--fb-neon-green);color:var(--fb-on-green);font:700 12px/16px var(--font-body);white-space:nowrap;box-shadow:var(--fb-glow-soft);animation:reel-pop var(--fb-dur-enter) var(--fb-ease-pop) 1 both}
.reel-back small {font:400 11px/1 var(--font-latin);opacity:.8}
.reel__view {position:relative;flex:1;min-height:0}
.reel__scroll {position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;outline:none;padding:0 2px 2px;scroll-padding-bottom:2px;overflow-anchor:none;
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 100%)}
.reel__scroll::-webkit-scrollbar {display:none}
.reel__scroll.is-touch {scroll-snap-type:y mandatory}
.reel__pad {height:100%}
.reel-pull {position:absolute;z-index:3;left:50%;bottom:6px;transform:translateX(-50%);padding:4px 12px;border-radius:var(--fb-radius-pill);background:var(--fb-surface-3);color:var(--fb-ink);font:700 12px/16px var(--font-body);white-space:nowrap;pointer-events:none}
.reel-pull.is-ready {background:var(--fb-neon-green);color:var(--fb-on-green)}

/* 一张卡：左边一条是这位艺人的颜色；左上角小标是哪一种；正在这张小标亮绿、描绿边 */
.reel-card {--a:var(--fb-line-strong);--a-ink:var(--fb-night);position:relative;display:grid;gap:4px;margin:6px 0 0;padding:7px 10px 8px 13px;border:1px solid var(--fb-line);border-radius:var(--fb-radius-lg);background:rgba(10,13,15,.93);box-shadow:var(--fb-shadow-card);transform-origin:50% 100%;scroll-snap-align:end;backface-visibility:hidden;-webkit-backface-visibility:hidden;cursor:pointer;color:var(--fb-ink);text-align:left}
.reel-card::before {content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--a)}
.reel-card.is-turn {margin-top:12px}
.reel-card__head {display:flex;align-items:center;gap:6px;min-height:24px;min-width:0}
.reel-type {flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:5px;border:1px solid var(--fb-line-strong);color:var(--fb-ink-3);font:700 12px/1 var(--font-body);transition:background var(--fb-dur-state),color var(--fb-dur-state),border-color var(--fb-dur-state)}
.reel-face {flex:none;width:22px;height:22px;border-radius:50%;object-fit:cover;background:var(--a);box-shadow:0 0 0 1.5px var(--a)}
.reel-name {flex:none;display:inline-flex;align-items:center;height:22px;padding:0 7px;border-radius:3px;background:var(--a);color:var(--a-ink);font:700 13px/20px var(--font-body);white-space:nowrap}
.reel-role {flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--fb-surface-3);color:var(--fb-ink-2);font:700 10px/1 var(--font-body);font-style:normal}
.reel-role.is-wolf {background:var(--fb-role-wolf);color:var(--fb-on-wolf)}
.reel-role.is-god {background:var(--fb-role-god);color:var(--fb-on-cyan)}
.reel-to {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fb-ink-3);font:500 12px/16px var(--font-body)}
.reel-to b {color:var(--fb-neon-cyan);font-weight:500}
.reel-body {position:relative}
.reel-text {--clip:calc(var(--lh) * var(--rows-far));max-height:var(--clip);overflow:hidden;transition:max-height var(--fb-dur-enter) var(--fb-ease-out);font:500 var(--fs)/var(--lh) var(--font-body);color:var(--fb-ink-2);white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-width:none}
.reel-text::-webkit-scrollbar {display:none}
.reel-text .rest {color:var(--fb-ink-3)}
.reel-text .tag {color:var(--fb-gold);font-weight:700}
.reel-text abbr {text-decoration:none;border-bottom:1px dotted var(--fb-neon-cyan);cursor:help}
.reel-card.is-mate .reel-text {--clip:calc(var(--lh) * var(--rows-mate));color:var(--fb-ink)}
.reel-card.is-big .reel-text {--clip:calc(var(--lh) * var(--rows-now));color:var(--fb-ink)}
.reel-text.is-clip {-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - var(--lh)),transparent 100%);mask-image:linear-gradient(180deg,#000 calc(100% - var(--lh)),transparent 100%)}
.reel-card.is-open .reel-text {max-height:var(--open-h,46vh);overflow-y:auto;overscroll-behavior:contain;-webkit-mask-image:none;mask-image:none}
.reel-more {display:none;position:absolute;right:0;bottom:0;height:var(--raw-lh);padding:0 1px 0 26px;background:linear-gradient(90deg,transparent 0,rgba(10,13,15,.97) 40%);color:var(--fb-neon-green);font:700 11.5px/var(--raw-lh) var(--font-body);font-style:normal;white-space:nowrap}
.reel-card.is-big.has-more:not(.is-open) .reel-more,.reel-card.is-mate.has-more:not(.is-open) .reel-more {display:block}
.reel-foot {display:none;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;color:var(--fb-ink-3);font:500 11px/16px var(--font-body)}
.reel-card.is-open .reel-foot {display:flex}
.reel-foot .term {display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px 0 0;border-radius:4px;background:var(--fb-surface-2);color:var(--fb-ink-2);white-space:nowrap}
.reel-foot .term b {display:inline-flex;align-items:center;height:22px;padding:0 6px;border-radius:4px 0 0 4px;background:var(--fb-cyan-tint);color:var(--fb-neon-cyan)}
.reel-foot .credit {margin-left:auto;font-family:var(--font-mono);white-space:nowrap}
/* 说：场记的一句人话在上，原话在下 */
.reel-gist {font:700 var(--gist-fs)/var(--gist-lh) var(--font-body);color:var(--fb-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reel-card.is-big .reel-gist,.reel-card.is-mate .reel-gist {color:var(--fb-ink)}
.reel-card--say.has-gist .reel-text {--fs:var(--raw-fs);--lh:var(--raw-lh);--clip:0px}
.reel-card--say.has-gist.is-mate .reel-text {--clip:calc(var(--lh) * var(--rows-raw-mate))}
.reel-card--say.has-gist.is-big .reel-text {--clip:calc(var(--lh) * var(--rows-raw-now));color:var(--fb-ink-2)}
.reel-card--say.has-gist.is-big .reel-text .said {color:var(--fb-ink)}
/* 想：虚线边、斜体，跟原来心里话那朵云一个意思；没留下心里话的找补句是灰的 */
.reel-card--think {border:1.5px dashed var(--fb-line-strong);background:rgba(10,13,15,.88)}
.reel-card--think .reel-text {font-style:italic}
.reel-card--think.is-filler .reel-text {color:var(--fb-ink-3)}
/* 做：一行，像盖了一个章 */
.reel-card--act {--tone:var(--fb-gold);display:flex;align-items:center;gap:6px;padding:6px 10px 6px 13px;border-color:color-mix(in srgb,var(--tone) 55%,var(--fb-line));background:color-mix(in srgb,var(--tone) 9%,rgba(10,13,15,.95))}
.reel-card--act::before {background:var(--tone)}
.reel-sigil {flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:3px;background:var(--tone);color:var(--fb-night-deep);font:700 11px/1 var(--font-body);font-style:normal}
.reel-verb {flex:none;font:700 14px/20px var(--font-body);color:var(--tone);white-space:nowrap}
.reel-card--act .reel-name {height:20px;padding:0 6px}
.reel-extra {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fb-ink-2);font:500 12px/16px var(--font-body)}
.reel-card--act.is-in {animation:reel-stamp var(--fb-dur-enter) var(--fb-ease-pop) 1 backwards}
/* 旁白：像群聊里居中的那行系统提示 */
.reel-card--narr {display:block;width:fit-content;max-width:94%;margin:9px auto 0;padding:4px 14px;border-radius:14px;border-color:transparent;background:rgba(10,13,15,.74);box-shadow:none;text-align:center}
.reel-card--narr::before {display:none}
.reel-card--narr .reel-text {--fs:12.5px;--lh:19px}
.reel-card--narr.is-key .reel-text {--fs:14px;--lh:22px;font-weight:700;color:var(--fb-ink)}
.reel-card--narr.is-secret {border-color:rgba(255,61,139,.45);border-style:dashed}
.reel-card.is-now {border-color:var(--fb-green-key);box-shadow:0 0 0 1px var(--fb-green-key),var(--fb-shadow-pop)}
.reel-card.is-now .reel-type {background:var(--fb-neon-green);border-color:var(--fb-neon-green);color:var(--fb-on-green)}
.reel-card.is-in {animation:reel-in var(--fb-dur-enter) var(--fb-ease-pop) 1 backwards}
/* 「@ 问她」：后台那单上线以前不出（fable-reel.js 的 ASK_ON） */
.reel-askbtn {margin-left:auto;flex:none}
@media (min-width:601px) and (min-height:521px) { .reel-card.is-big .reel-foot {display:flex} }

/* ══ 手机竖屏：舞台在上，卡片流在底下，至少摆得下「想 + 说」两张；人往上站、露到腰，腿在卡片后面 ══ */
@media (max-width:600px) {
 body.fable-reel #fable-reel {left:8px;right:8px;width:auto;top:auto;bottom:92px;height:330px;transition:height var(--fb-dur-enter) var(--fb-ease-out);
  --fs:14.5px;--lh:22px;--gist-fs:16px;--gist-lh:23px;--raw-fs:13.5px;--raw-lh:21px;--rows-now:5;--rows-raw-now:2;--rows-mate:4;--rows-raw-mate:2;--rows-far:2}
 body.fable-reel #fable-reel.is-reading {height:calc(100% - 92px - 196px)} /* 看全：长到「押一手」那一行下面为止 */
 body.fable-reel.fable-v2211 #fable-frame.xp .st__arena {left:10px;right:10px;bottom:254px;clip-path:inset(-400px -24px 0 -24px)} /* 人按头摆、腿在卡片后面：舞台底下那条边裁掉，脚不会从卡片流底下的时间轴上露出来 */
 body.fable-reel.fable-v2211 .fable-people>.st-actor.is-lead {--h:600px!important}
 body.fable-reel.fable-v2211 #fable-frame .xp-note {left:auto;right:auto;bottom:auto;width:auto;max-width:44%;margin-top:30px}
 body.fable-reel.reel-reading.fable-v2211 #fable-frame .xp-note {visibility:hidden} /* 点开看全的时候卡片流长到上面来，小本本先让开 */
 /* 小本本：竖屏收成左上一颗小牌「糖糖的小本本 ▾」，点一下看这一页、再点收起（设计稿第十节），不再整块压在人身上 */
 body.fable-reel.fable-v2211 #fable-frame .xp-note {position:relative;z-index:6;cursor:pointer;padding:3px 10px 3px 20px;-webkit-tap-highlight-color:transparent} /* 竖屏 xp.css 把它放回了文档流（static），舞台的人那一层盖在它上面、点不着：relative + z-index 抬上来 */
 body.fable-reel.fable-v2211 #fable-frame .xp-note::before {top:5px;bottom:5px}
 body.fable-reel.fable-v2211 #fable-frame .xp-note .xp-note__who {margin:0;line-height:20px}
 body.fable-reel.fable-v2211 #fable-frame .xp-note .xp-note__who::after {content:"▾";color:var(--fb-ink-3);font-weight:400}
 body.fable-reel.fable-v2211 #fable-frame .xp-note:not(.is-open) .xp-note__text {display:none}
 body.fable-reel.fable-v2211 #fable-frame .xp-note.is-open {max-width:calc(100% - 20px);padding:6px 12px 8px 20px;z-index:16;box-shadow:var(--fb-shadow-pop)}
 body.fable-reel.fable-v2211 #fable-frame .xp-note.is-open .xp-note__who::after {content:"▴"}
 body.fable-reel.fable-v2211 #fable-frame .xp-note.is-open .xp-note__text {display:block;-webkit-line-clamp:unset;max-height:150px;overflow-y:auto;overscroll-behavior:contain} /* 点开就是整页，长的在框里滚（到卡片流顶上那一行为止） */
 body.fable-reel.fable-v2211 #stage #fable-frame #xp-sides {display:none}
 body.fable-reel.fable-v2211 #stage #fable-frame #xp-sides.is-open {display:grid;left:10px;right:10px;top:auto;bottom:430px;width:auto;max-height:none;z-index:16;box-shadow:var(--fb-shadow-pop)}
 body.fable-reel.fable-v2211 #xp-sides.is-open .xp-sides__q,body.fable-reel.fable-v2211 #xp-sides.is-open .xp-lane--none {display:grid}
 body.fable-reel.fable-v2211 #xp-mybet {left:10px;bottom:430px}
 body.fable-reel #bets-open {top:160px;right:10px;z-index:18}
 body.fable-reel .st-tally {display:none}
 body.fable-reel .st-result {left:auto;right:0;top:38px;width:auto;max-width:46%;padding:6px 10px 7px;gap:1px;box-shadow:none}
 body.fable-reel .st-result__win {font-size:15px;line-height:20px}
 body.fable-reel .st-result>b:not(.st-result__win) {font:700 12px/16px var(--font-body);color:var(--fb-gold)}
 body.fable-reel .st-result__why {display:none}
 body.fable-reel .st-den {inset:30px 0 180px;gap:6px}
 body.fable-reel .st-den .st-target {padding:5px 8px;gap:8px}
 body.fable-reel .st-target__portrait {width:28px;height:28px}
 body.fable-reel .st-target__name {font-size:17px;line-height:22px}
 .reel-ticker {display:inline-flex}
 body.fable-reel #toast {left:50%;top:196px;max-width:calc(100% - 20px)}
}
@media (max-width:600px) and (max-height:700px) {
 body.fable-reel #fable-reel {height:292px;--rows-now:4;--rows-mate:3}
 body.fable-reel.fable-v2211 #fable-frame.xp .st__arena {bottom:200px}
 body.fable-reel.fable-v2211 .fable-people>.st-actor.is-lead {--h:520px!important}
 body.fable-reel.fable-v2211 #stage #fable-frame #xp-sides.is-open {bottom:392px}
 body.fable-reel.fable-v2211 #xp-mybet,body.fable-reel.fable-v2211 #fable-frame .xp-note {display:none}
 /* 屏幕矮：舞台只露一小条。狼队格子排成一行小牌（名字 + 表态，不放人像） */
 body.fable-reel .st-den {display:flex;flex-wrap:wrap;align-content:flex-start;inset:30px 0 auto;gap:5px}
 body.fable-reel .st-den .st-target {flex:0 0 100%}
 body.fable-reel .st-den .st-cell {flex:1 1 0;min-width:0;height:50px}
 body.fable-reel .st-cell img {display:none}
 body.fable-reel .st-cell__head {flex-direction:column;align-items:flex-start;gap:3px;padding:4px 5px}
 body.fable-reel .st-cell__head .fb-nameplate {height:20px;padding:0 6px;font-size:13px}
 body.fable-reel .st-cell__state {margin-left:0;height:16px;padding:0 4px;font-size:10px;max-width:100%;overflow:hidden}
}
/* 正在这张是「做」：上面的「想」「说」各让一行，三张都看得全 */
@media (max-width:600px),(max-height:520px) {
 .reel__scroll.is-act-now .reel-card--think.is-mate .reel-text {--clip:calc(var(--lh) * (var(--rows-mate) - 1))}
 .reel__scroll.is-act-now .reel-card--say.has-gist.is-mate .reel-text {--clip:calc(var(--lh) * (var(--rows-raw-mate) - 1))}
}

/* ══ 手机横屏：舞台在左，卡片流在右 ══ */
@media (max-height:520px) and (min-width:601px) {
 body.fable-reel #fable-reel {right:10px;top:44px;bottom:88px;width:min(50vw,430px);gap:4px;
  --fs:13.5px;--lh:20px;--gist-fs:14.5px;--gist-lh:20px;--raw-fs:12.5px;--raw-lh:19px;--rows-now:4;--rows-raw-now:2;--rows-mate:3;--rows-raw-mate:1;--rows-far:1}
 .reel__head {height:26px}
 body.fable-reel.fable-v2211 #fable-frame.xp .st__arena {left:10px;right:calc(min(50vw,430px) + 16px);bottom:92px}
 body.fable-reel.fable-v2211 #stage #fable-frame #program-tools.sx-actions {left:84px!important;right:auto!important}
 body.fable-reel #bets-open {left:232px;right:auto;top:48px}
 body.fable-reel .st-react,body.fable-reel .st-tally {display:none}
 body.fable-reel .st-result {left:auto;right:0;top:0;width:auto;max-width:112px;padding:5px 8px 6px;gap:1px;box-shadow:none}
 body.fable-reel .st-result__win {font-size:14px;line-height:18px}
 body.fable-reel .st-result>b:not(.st-result__win) {font:700 12px/16px var(--font-body);color:var(--fb-gold)}
 body.fable-reel .st-result__why {display:none}
 /* 小黑板点开：盖在卡片流那一栏上，收成紧凑的几行，最高到底栏上沿 */
 body.fable-reel.fable-v2211 #stage #fable-frame #xp-sides.is-open {display:flex;flex-direction:column;gap:4px;padding:8px 10px;left:auto;right:10px;top:74px;bottom:auto;width:min(50vw,430px);max-height:calc(100% - 74px - 92px);overflow:auto;z-index:16;box-shadow:var(--fb-shadow-pop)}
 body.fable-reel #xp-sides.is-open .xp-sides__q b {font-size:15px;line-height:20px}
 body.fable-reel #xp-sides.is-open .xp-lane {display:flex;align-items:center;gap:6px;padding:4px 6px}
 body.fable-reel #xp-sides.is-open .xp-lane__n {order:3;margin-left:auto;font-size:14px;line-height:18px}
 body.fable-reel #xp-sides.is-open .xp-lane__chips {order:2;flex-wrap:nowrap;gap:0;min-height:0}
 body.fable-reel #xp-sides.is-open .xp-lane__chips .fb-avatar {--s:18px}
 body.fable-reel #xp-sides.is-open .xp-lane__chips .fb-avatar+.fb-avatar {margin-left:-5px}
 body.fable-reel #xp-sides.is-open .xp-lane__chips .fb-avatar.is-flip::after {display:none}
 body.fable-reel .st-den {inset:30px 0 0;gap:5px}
 body.fable-reel .st-den .st-target {padding:3px 8px}
 body.fable-reel .st-target__portrait {width:22px;height:22px}
 body.fable-reel .st-target__name {font-size:15px;line-height:20px}
 .reel-card {padding:5px 9px 7px 12px;gap:2px;margin-top:5px}
 .reel-card.is-turn {margin-top:9px}
 .reel-card--act {padding:4px 9px 4px 12px}
 .reel-ticker {display:inline-flex}
 /* 头像栏贴着卡片流顶上那一行：「做」落在谁身上，头像底下那颗「投 零号」小章会压到小黑板那一行的字。横屏不出它（卡片流里那张「做」就是它） */
 body.fable-reel.fable-v2211 #stage #fable-frame #cast .stampx {display:none!important}
 body.fable-reel #toast {left:calc((100% - min(50vw, 430px) - 16px) / 2);top:88px;max-width:calc(100% - min(50vw, 430px) - 36px);padding:6px 12px;font-size:12px;line-height:18px}
}

/* 减少动态效果：没有滚筒、没有飞入，就是一列平铺的卡（动画和过渡 fable-stage.css 已经整页关了，这里管变形） */
.reel.is-rm .reel-card {transform:none!important;opacity:1!important}
.reel.is-rm .reel__scroll {-webkit-mask-image:none;mask-image:none}

@keyframes reel-in {0% {opacity:0;transform:translateY(22px) scale(.96)} 100% {opacity:1;transform:none}}
@keyframes reel-stamp {0% {opacity:0;transform:scale(1.22) rotate(-2.5deg)} 60% {opacity:1;transform:scale(.97) rotate(.5deg)} 100% {opacity:1;transform:none}}
@keyframes reel-pop {0% {transform:scale(.92);opacity:0} 100% {transform:scale(1);opacity:1}}
@keyframes reel-shake {0%,100% {translate:0 0} 25% {translate:-3px 0} 75% {translate:3px 0}}