/* 首杀 AI 短剧 · 看戏 v3（11-09 fb-web）
   老板要的：像 Disney+（按钮少、字少、画面说话）、舞台代入、一局一集切镜头、手机优先、新手开上帝视角在画面上看出谁是狼、台词整句不砍。
   一屏装下，不让页面滚：竖屏 = 顶上一排九人 → 中间说话的人 → 底下字幕 → 最底下一条进度；横屏 = 一边一个人面对面（谁投谁、谁怼谁），字幕在中间 */
:root {
  --r-seer: #8a94ff; --r-hunter: #3d9bff; --r-guard: #22d8f0; --r-witch: #35e6a0; --r-villager: #9fb6cc;
  --night: #050608; --ink: #f6f2ea; --dim: rgba(246, 242, 234, .58); --faint: rgba(246, 242, 234, .3); --line: rgba(255, 255, 255, .12);
  --green: #39ff8f; --cyan: #22e3ff; --magenta: #ff2fd1; --wolf: #ff3d8b; --gold: #f2c14e; --pink: #ff8fb3;
  --ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
  --disp: "FBDisplay", var(--ui);
  --top: max(10px, env(safe-area-inset-top)); --bottom: max(8px, env(safe-area-inset-bottom));
  --left: max(14px, env(safe-area-inset-left)); --right: max(14px, env(safe-area-inset-right));
  --av: min(34px, 8.4vw); --dock: 74px; --who: #9fe8d0; --tie: var(--gold);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--ink); font-family: var(--ui); -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
body { position: fixed; inset: 0; overflow: hidden; -webkit-tap-highlight-color: transparent; } /* 锁死：页面一点都不能滚，Safari 地址栏就不会一伸一缩把画面拽着变 */
input, select, textarea { font-size: 16px; } /* Safari：小于 16px 的输入框一聚焦就整页放大 */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
[hidden] { display: none !important; }

/* ---- 舞台：整屏（跟着 body 铺满，不用 dvh） ---- */
/* 别用 overflow: clip：WebKit 里点按钮会被背景图截走（11-09 webkit.py 实测）。舞台被滚歪由 app.js 的 scroll 保险滚回去 */
.stage { position: fixed; inset: 0; overflow: hidden; isolation: isolate; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; /* 手机上连点两下不放大页面 */ }
img { -webkit-touch-callout: none; -webkit-user-drag: none; } /* 长按立绘不弹「存储图像」 */
.bg { position: absolute; inset: 0; z-index: -3; background: #07090b; }
.bg img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; object-position: 50% 42%; transition: opacity 1.6s ease;
  }
#bg-night { opacity: 0; }
@media (orientation: portrait) { #bg-day { object-position: 34% 42%; } } /* 竖屏：背景往左挪，小怪兽招牌偏到右上，不顶在人头上 */
body.night #bg-night { opacity: 1; }
body.night #bg-day { opacity: 0; }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; /* 压暗：上面一点、下面多一点，字幕才读得清 */
  background: radial-gradient(120% 80% at 50% 38%, transparent 30%, rgba(5, 6, 8, .55) 75%, rgba(5, 6, 8, .9)),
    linear-gradient(to bottom, rgba(5, 6, 8, .62), rgba(5, 6, 8, .05) 22%, rgba(5, 6, 8, .1) 52%, rgba(5, 6, 8, .94) 88%); }
body.night .stage::before { background: radial-gradient(120% 80% at 50% 36%, rgba(20, 40, 90, .1) 20%, rgba(3, 6, 18, .7) 72%, rgba(2, 3, 10, .95)),
    linear-gradient(to bottom, rgba(2, 3, 10, .7), rgba(2, 3, 10, .1) 24%, rgba(2, 3, 10, .2) 52%, rgba(2, 3, 10, .96) 88%); }
.beam { position: absolute; z-index: -1; left: 50%; top: -10%; width: 70vmin; height: 95%; transform: translateX(-50%); pointer-events: none; opacity: .5; mix-blend-mode: screen;
  background: conic-gradient(from 180deg at 50% 0%, transparent 168deg, rgba(255, 236, 190, .26) 180deg, transparent 192deg); filter: blur(6px); transition: opacity 1s; }
body.night .beam { background: conic-gradient(from 180deg at 50% 0%, transparent 170deg, rgba(150, 190, 255, .2) 180deg, transparent 190deg); }
.dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dust i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 240, 210, .5); filter: blur(.5px); animation: float 14s linear infinite; opacity: 0; }
.dust i:nth-child(1) { left: 44%; top: 30%; animation-delay: -2s; } .dust i:nth-child(2) { left: 52%; top: 46%; animation-delay: -6s; animation-duration: 18s; }
.dust i:nth-child(3) { left: 48%; top: 60%; animation-delay: -9s; } .dust i:nth-child(4) { left: 57%; top: 22%; animation-delay: -4s; animation-duration: 20s; }
.dust i:nth-child(5) { left: 40%; top: 52%; animation-delay: -12s; } .dust i:nth-child(6) { left: 60%; top: 40%; animation-delay: -1s; animation-duration: 16s; }
.dust i:nth-child(7) { left: 35%; top: 34%; animation-delay: -7s; animation-duration: 22s; } .dust i:nth-child(8) { left: 65%; top: 58%; animation-delay: -15s; }
@keyframes float { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 85% { opacity: .7; } 100% { opacity: 0; transform: translate(14px, -90px); } }
/* 上帝视角开着：整个画面描一圈金边，一眼知道「你看得见秘密」 */
.stage::after { content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; border-radius: 0; box-shadow: inset 0 0 0 0 rgba(242, 193, 78, 0); transition: box-shadow .6s; }
body.god .stage::after { box-shadow: inset 0 0 0 1.5px rgba(242, 193, 78, .55), inset 0 0 60px rgba(242, 193, 78, .14); }

/* ---- 顶上：小小的集名 + 上帝视角（这颗一直在，新手最要紧的开关） ---- */
.top { position: absolute; z-index: 20; top: var(--top); left: var(--left); right: var(--right); height: 32px; display: flex; align-items: center; gap: 10px; }
.brand { font-family: var(--disp); font-size: 19px; letter-spacing: .06em; color: var(--green); text-decoration: none; text-shadow: 0 0 14px rgba(57, 255, 143, .45); }
.ep { margin: 0; flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.ep b { font: 600 10px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .18em; color: var(--dim); }
.ep span { font-family: var(--disp); font-size: 15px; letter-spacing: .08em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
button.god { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border-radius: 999px; font-size: 12.5px; letter-spacing: .06em; color: var(--ink);
  background: rgba(16, 18, 22, .52); border: 1px solid var(--line); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
button.god svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
button.god:active { transform: scale(.94); }
button.god[aria-pressed="true"] { color: #1a1204; background: linear-gradient(180deg, #ffe08a, #f2c14e); border-color: #ffe7a3; box-shadow: 0 0 22px rgba(242, 193, 78, .55); }
button.god.hint { animation: nudge 2.4s ease-in-out 3; }
@keyframes nudge { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(242, 193, 78, 0); } 35% { box-shadow: 0 0 0 7px rgba(242, 193, 78, .22); } }

/* ---- 这一桌：一排九个名牌头像。说话的放大发光、被投 / 被怼的描关系色、出局的灰、票数金色角标；上帝视角开着才挂身份 ---- */
.cast { position: absolute; z-index: 15; top: calc(var(--top) + 42px); left: var(--left); right: var(--right); margin: 0; padding: 0; list-style: none;
  display: flex; justify-content: space-between; align-items: flex-start; }
.seat { position: relative; width: var(--av); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), opacity .4s; }
.seat .face { position: relative; width: var(--av); height: var(--av); border-radius: 50%; overflow: visible; }
.seat img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #111;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .22), 0 4px 10px rgba(0, 0, 0, .45); transition: box-shadow .3s, filter .4s; }
.seat .nm { text-shadow: 0 1px 2px #000, 1px 0 2px #000, -1px 0 2px #000, 0 -1px 2px #000; font-size: 9.5px; line-height: 1; letter-spacing: .02em; color: var(--dim); white-space: nowrap; transition: color .3s; }
.seat.speak { transform: translateY(2px) scale(1.16); z-index: 2; }
.seat.speak img { box-shadow: 0 0 0 2px #fff, 0 0 16px 2px var(--c); }
.seat.speak .nm { color: #fff; font-weight: 600; }
.seat.target img { box-shadow: 0 0 0 2px var(--tie), 0 0 14px var(--tie); animation: ping 1.6s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 2px var(--tie), 0 0 0 0 var(--tie); } 70% { box-shadow: 0 0 0 2px var(--tie), 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 2px var(--tie), 0 0 0 0 transparent; } }
.seat.out { opacity: .42; }
.seat.out img { filter: grayscale(1) brightness(.7); }
.seat.out .face::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: rgba(255, 90, 90, .85); transform: rotate(-40deg); border-radius: 2px; }
.seat .votes { position: absolute; top: -7px; right: -6px; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--gold); color: #1d1404;
  font: 700 10px/16px ui-monospace, Menlo, monospace; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.seat.sheriff .nm { color: var(--gold); font-weight: 600; }
.seat.sheriff .nm::before { content: "警 "; }
.seat .role { position: absolute; bottom: -3px; right: -7px; width: 17px; height: 17px; border-radius: 50%; font-size: 10px; line-height: 17px; text-align: center; font-weight: 700;
  color: #06121c; background: var(--role-color, var(--cyan)); box-shadow: 0 0 0 1.5px var(--night); animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.seat.wolf .role { background: var(--wolf); color: #fff; }
body.god .seat.wolf img { box-shadow: 0 0 0 2px var(--wolf), 0 0 14px rgba(255, 61, 139, .7); }
body.god .seat.wolf.speak img { box-shadow: 0 0 0 2.5px var(--wolf), 0 0 20px 3px rgba(255, 61, 139, .85); }
@keyframes pop { from { transform: scale(.2); opacity: 0; } }

/* ---- 镜头：说话的人（lead）+ 他冲着的人（foil）+ 中间的关系 ---- */
/* 流程条（头像那排下面）：第几天 + 这一天的几步 + 一句给新手的话。投票连线画在头像和流程条之间那条缝里 */
.flow { position: absolute; z-index: 14; left: var(--left); right: var(--right); top: calc(var(--top) + 42px + var(--av) + 34px); pointer-events: none; }
.flow-row { margin: 0; display: flex; align-items: center; gap: 3px; white-space: nowrap; overflow: hidden; }
.flow-row b { margin-right: 5px; font-family: var(--disp); font-size: 13px; letter-spacing: .06em; color: var(--ink); }
.flow-row i { font-style: normal; font-size: 10.5px; line-height: 1; padding: 3px 6px; border-radius: 999px; color: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.flow-row i.done { color: rgba(255, 255, 255, .32); box-shadow: none; padding: 3px 2px; }
.flow-row i.now { color: #1d1404; background: var(--gold); box-shadow: 0 0 12px rgba(242, 193, 78, .45); font-weight: 700; }
.flow-row em { font-style: normal; font-size: 10px; color: rgba(255, 255, 255, .28); }
.flow-hint { margin: 5px 0 0; font-size: 11.5px; line-height: 1.45; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 4px rgba(0, 0, 0, .95); }
.flow-hint b { color: var(--gold); font-weight: 600; }
.howto { pointer-events: auto; margin-left: auto; flex: none; height: 20px; padding: 0 9px; border: 0; border-radius: 999px; font: inherit; font-size: 11px;
  color: var(--ink); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); cursor: pointer; }
.howto-card { position: absolute; z-index: 30; left: var(--left); right: var(--right); top: calc(var(--top) + 42px + var(--av) + 60px); max-width: 520px; margin: 0 auto; padding: 14px 16px 12px;
  border-radius: 16px; background: rgba(12, 14, 18, .92); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 40px rgba(0, 0, 0, .6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.howto-card > b { font-family: var(--disp); font-size: 15px; letter-spacing: .06em; color: var(--gold); }
.howto-card p { margin: 6px 0 8px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .9); }
.howto-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.howto-card li { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.howto-card li b { display: inline-block; min-width: 3.5em; margin-right: 6px; color: #fff; }
.arcs { position: absolute; inset: 0; z-index: 14; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.arcs .arc, .arcs .tip { fill: none; stroke-width: 1.4; stroke-linecap: round; opacity: .75; }
.arcs .arc.new, .arcs .tip.new { stroke-width: 2.6; opacity: 1; filter: drop-shadow(0 0 4px currentColor); }
/* 解说：左边一栏是他的猜测；上帝视角里猜对绿、猜错红 */
.stamp.comm { background: rgba(28, 20, 4, .78); border-color: rgba(242, 169, 0, .7); box-shadow: 0 0 22px rgba(242, 169, 0, .22); transform: none; }
.stamp.comm b#stamp-title { color: #ffcf5a; }
.stamp.comm #stamp-text small { display: block; margin-bottom: 4px; }
.stamp .sus { display: inline-flex; align-items: baseline; gap: 4px; margin: 0 6px 4px 0; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; color: #fff; background: rgba(255, 255, 255, .1); }
.stamp .sus small { font-size: 10.5px; font-weight: 400; opacity: .85; }
.stamp .sus.hit { background: rgba(57, 255, 143, .2); box-shadow: inset 0 0 0 1px rgba(57, 255, 143, .6); }
.stamp .sus.miss { background: rgba(255, 70, 70, .18); box-shadow: inset 0 0 0 1px rgba(255, 90, 90, .6); }
.seat.suspect img { box-shadow: 0 0 0 2px #f2a900, 0 0 14px #f2a900; }
.who-card .wc-vote { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--gold); }
.shot { position: absolute; z-index: 5; left: 0; right: 0; top: calc(var(--top) + 156px); bottom: calc(var(--bottom) + var(--dock) + 64px); pointer-events: none; }
/* 全身立绘（11-09 Tong：「以南风的大小为准」「要显示人物的全身照」）：每张图同一把尺、鞋底一条线（见 app.js placeBody）。
   --tall：190 厘米占框高多少；--floor：鞋底在框高哪儿；--cx：两脚中点在框宽哪儿。竖屏鞋底落在字幕上沿，南风头顶贴着名牌那排下面 */
.shot { --floor: .86; --tall: .84; --cx: .5; }
.lead { position: absolute; margin: 0; left: 0; top: 0; width: 100%; height: 100%; }
.lead img { position: absolute; left: 0; top: 0; max-width: none; object-fit: fill;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .7)) drop-shadow(0 24px 40px rgba(0, 0, 0, .6)) drop-shadow(0 0 26px color-mix(in srgb, var(--who) 35%, transparent)); }
.lead.cut img { animation: cut-in .42s cubic-bezier(.2, .9, .25, 1); }
@keyframes cut-in { from { opacity: 0; transform: translateX(-7%) scale(1.05); filter: blur(8px); } }
.lead.again img { animation: nod .4s ease-out; }
@keyframes nod { 40% { transform: translateY(1.5%); } }
.lead[data-emo="angry"] img, .lead[data-emo="shock"] img, .lead[data-emo="panic"] img { animation: cut-in .42s cubic-bezier(.2, .9, .25, 1), shake .45s .42s cubic-bezier(.3, .1, .3, 1); }
.lead[data-emo="smug"] img { animation: cut-in .42s cubic-bezier(.2, .9, .25, 1), hop .5s .42s cubic-bezier(.2, .9, .3, 1.3); }
.lead[data-emo="cry"] img, .lead[data-emo="out"] img { animation: cut-in .42s cubic-bezier(.2, .9, .25, 1), sink .9s .42s ease-out forwards; }
@keyframes shake { 20%, 60% { transform: translateX(-1.4%); } 40%, 80% { transform: translateX(1.4%); } }
@keyframes hop { 40% { transform: translateY(-3%); } }
@keyframes sink { to { transform: translateY(2%); filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .6)) saturate(.7); } }
/* 气势线：生气、震惊那一下，后面炸开一圈放射线（漫画的效果线） */
.shot::before { content: ""; position: absolute; left: 50%; top: 40%; width: 180vmax; height: 180vmax; transform: translate(-50%, -50%) scale(.6); opacity: 0; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .16) 0deg 1.2deg, transparent 1.2deg 7deg); -webkit-mask: radial-gradient(circle, transparent 16%, #000 32%, transparent 60%); mask: radial-gradient(circle, transparent 16%, #000 32%, transparent 60%); }
.shot.burst::before { animation: burst .7s ease-out; }
@keyframes burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(6deg); } }

.seal { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; transform: rotate(-8deg); font-family: var(--disp); font-size: 15px; line-height: 1; color: #fff;
  background: var(--wolf); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85), 0 0 16px rgba(255, 61, 139, .8); animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes stamp { from { transform: rotate(-30deg) scale(2.2); opacity: 0; } }

/* 竖屏：对方是右上角一个小圆窗（像直播里的连麦小窗），关系写在它下面 */
/* 脚下一片影子：人站在台上，不是飘着（滴答本来就飘，影子照样落在地上） */
.lead::after, .foil::after { content: ""; position: absolute; left: 50%; top: calc(var(--floor) * 100%); width: 44%; height: 16px; transform: translate(-50%, -50%); z-index: -1;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .62), transparent); pointer-events: none; }
.foil::after { display: none; } /* 竖屏的对面那位是小圆窗，不要影子 */
.foil { position: absolute; margin: 0; right: var(--right); top: 4px; width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .14), rgba(0, 0, 0, .4)); box-shadow: 0 0 0 2px var(--tie), 0 0 24px color-mix(in srgb, var(--tie) 60%, transparent), 0 10px 24px rgba(0, 0, 0, .5);
  animation: pip .45s cubic-bezier(.2, 1.4, .4, 1); }
.foil { --face: .46; --eye: .44; --cx: .5; }
.foil img { position: absolute; left: 0; top: 0; max-width: none; object-fit: fill; }
@keyframes pip { from { transform: scale(.4); opacity: 0; } }
.tie { position: absolute; margin: 0; right: calc(var(--right) - 6px); top: 86px; width: 88px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--tie); text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.tie i { width: 22px; height: 2px; border-radius: 2px; background: var(--tie); box-shadow: 0 0 8px var(--tie); }

/* 上帝视角的批注：像盖在画面上的一枚章。狼在说的 = 粉红，好人说的 = 青 */
.stamp { position: absolute; left: var(--left); top: 8px; max-width: min(64%, 300px); padding: 9px 12px 10px; border-radius: 14px; transform: rotate(-2deg);
  background: rgba(30, 6, 20, .72); border: 1px solid rgba(255, 61, 139, .65); box-shadow: 0 0 26px rgba(255, 61, 139, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: stamp .45s cubic-bezier(.2, 1.5, .4, 1); }
.stamp.good { background: rgba(4, 22, 30, .72); border-color: rgba(34, 227, 255, .6); box-shadow: 0 0 26px rgba(34, 227, 255, .25); }
.stamp b { display: block; font-size: 14px; letter-spacing: .04em; color: #ff9cc4; }
.stamp.good b { color: #8ff0ff; }
.stamp span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.lead.fallen img { filter: grayscale(.9) brightness(.72) drop-shadow(0 24px 40px rgba(0, 0, 0, .6)); }
/* 大事的那一下：一个字号很大的章（放逐 / 出局 / 警长 / 狼人阵营胜利） */
.moment { position: absolute; left: 50%; top: 34%; z-index: 3; transform: translate(-50%, -50%) rotate(-7deg); white-space: nowrap; font-family: var(--disp); font-weight: 400;
  font-size: clamp(46px, 15vw, 104px); letter-spacing: .08em; line-height: 1; color: #fff; -webkit-text-stroke: 1.5px rgba(0, 0, 0, .35);
  text-shadow: 0 0 30px var(--mc, #fff), 0 6px 24px rgba(0, 0, 0, .7); animation: big-stamp .55s cubic-bezier(.2, 1.5, .35, 1); }
.moment.out { --mc: rgba(255, 70, 70, .85); color: #ff6b6b; }
.moment.gold { --mc: rgba(242, 193, 78, .85); color: #ffd36b; }
.moment.wolf { --mc: rgba(255, 61, 139, .9); color: #ff5aa0; }
.shot:has(> .moment:not([hidden])) { z-index: 6; } /* 大字所在容器越过场面人物层（5），内部层级才有用。 */
.shot > .moment { z-index: 13; }
.moment.good { --mc: rgba(34, 227, 255, .85); color: #8ff0ff; }
.moment.night { --mc: rgba(140, 170, 255, .85); color: #cfd8ff; }
.moment.small { font-size: clamp(34px, 10vw, 72px); top: 30%; }
@keyframes big-stamp { from { opacity: 0; transform: translate(-50%, -50%) rotate(-20deg) scale(2.4); } }
/* 心里想的：一朵虚线云，挨着说话的人；狼心里想的是粉红，好人是青；后面两颗小圆点连向他（漫画里的「想」） */
.think { position: absolute; z-index: 4; left: var(--left); top: 6px; max-width: min(46%, 300px); padding: 9px 14px 11px; border-radius: 22px; color: #8ff0ff;
  background: rgba(6, 24, 32, .8); border: 1.5px dashed rgba(34, 227, 255, .75); box-shadow: 0 0 24px rgba(34, 227, 255, .22);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: think-in .55s cubic-bezier(.2, 1.4, .4, 1) .3s backwards; }
.think.wolfy { color: #ff9cc4; background: rgba(32, 6, 20, .82); border-color: rgba(255, 61, 139, .8); box-shadow: 0 0 24px rgba(255, 61, 139, .28); }
.think::before, .think::after { content: ""; position: absolute; border-radius: 50%; background: inherit; border: 1.5px dashed currentColor; }
.think::before { width: 13px; height: 13px; right: 30%; bottom: -17px; }
.think::after { width: 7px; height: 7px; right: 26%; bottom: -28px; }
.think small { display: block; font-size: 11px; letter-spacing: .24em; }
.think p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.55; color: #fff; font-style: italic; max-height: 11.6em; overflow-y: auto; overscroll-behavior: contain; } /* 剧场组不截字：长的在云里滚 */
/* 竖屏：框（心里话、批注，以后的解说、事实）都在左边一栏，宽不过 46%；有框时说话的人往右站，脸露在框外。
   大字章（放逐、出局、验人……）压在身子上，不压脸：全身图的脸都在镜头上面四成以内（滴答最矮，脸在 37% 左右） */
@media (orientation: portrait) and (max-width: 899px) {
  .shot.boxed { --cx: .68; }
  .stamp { max-width: min(46%, 300px); }
  .moment { top: 58%; } .moment.small { top: 56%; }
}
@keyframes think-in { from { opacity: 0; transform: translateY(6px) scale(.9); } }
.mouth { margin-left: auto; padding: 1px 8px; border-radius: 999px; font-size: 11px; letter-spacing: .14em; color: var(--dim); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.dark { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 8px; }
.dark b { font-family: var(--disp); font-size: 34px; letter-spacing: .14em; color: #dfe7ff; text-shadow: 0 0 30px rgba(140, 170, 255, .6); }
.dark span { font-size: 12.5px; color: var(--dim); }

/* ---- 字幕：整句都在，念到哪亮到哪（后面的先暗着，不跳行）；长了在框里滚 ---- */
.who { margin: 0 0 7px; display: flex; align-items: center; gap: 8px; min-height: 22px; }
.name { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #0b0b0d;
  background: var(--who); box-shadow: 0 0 16px color-mix(in srgb, var(--who) 45%, transparent); }
.act { font-size: 12px; letter-spacing: .04em; color: rgba(246, 242, 234, .8); text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
.act b { color: var(--tie); font-weight: 600; }
.line::-webkit-scrollbar { display: none; }
.said { color: var(--ink); text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.tag { color: var(--gold); font-weight: 600; margin-right: .2em; }
.rest { color: rgba(246, 242, 234, .44); }
.sub.narrate .name { color: #0b0b0d; background: #f6f2ea; box-shadow: 0 0 14px rgba(246, 242, 234, .35); }
.sub.narrate .name::before { content: ""; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #ff3d5a; box-shadow: 0 0 6px #ff3d5a; animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 50% { opacity: .25; } }
.sub.narrate .line { color: #ece6d6; }
.sub.whisper .line { font-style: italic; }
.sub.whisper .said { color: #d5dcff; }
.sub.whisper .name { background: transparent; color: #d5dcff; box-shadow: inset 0 0 0 1px rgba(213, 220, 255, .6); }

/* ---- 片头卡：换阶段时整屏一张（第 1 夜 / 放逐投票），字声等它过去才出 ---- */
.card { position: absolute; z-index: 25; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 50% at 50% 50%, rgba(10, 12, 16, .9), rgba(3, 4, 6, .97)); }
.card small { font: 600 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .32em; color: var(--dim); }
.card b { font-family: var(--disp); font-weight: 400; font-size: clamp(50px, 15vw, 96px); letter-spacing: .1em; line-height: 1.1; color: #fff; text-shadow: 0 0 40px rgba(255, 255, 255, .25); }
.card span { font-size: 14px; letter-spacing: .4em; color: var(--gold); }
body.night .card b { text-shadow: 0 0 40px rgba(120, 160, 255, .5); }
.card.show { animation: card 1.5s cubic-bezier(.3, 0, .2, 1) forwards; }
@keyframes card { 0% { opacity: 0; clip-path: inset(48% 0 48% 0); } 18% { opacity: 1; clip-path: inset(0 0 0 0); } 78% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
.card.show b { animation: card-b 1.5s ease-out; }
@keyframes card-b { from { letter-spacing: .4em; filter: blur(6px); } 30% { letter-spacing: .1em; filter: none; } }
.flash { position: absolute; inset: 0; z-index: 24; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash .35s ease-out; }
@keyframes flash { 0% { opacity: .22; } 100% { opacity: 0; } }

/* ---- 底下：一条进度（分镜刻度）+ 一排小图标。演起来 3 秒不动就隐身，点一下画面再出来 ---- */
.dock { position: absolute; z-index: 22; left: var(--left); right: var(--right); bottom: var(--bottom); height: var(--dock); display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.dock .row { transition: opacity .45s, transform .45s; }
body.quiet .dock { pointer-events: none; }
body.quiet .dock .row { opacity: 0; transform: translateY(6px); } /* 演起来不动：按钮那排收起；进度条和小怪兽留在原地，不另起一条细线 */
/* 进度条（第 20 版，老板：「首杀风……霓虹绿、粉，像素小怪兽当进度条上的小游标，克制一点」）：一条细线，走过的那段从绿渐到粉（整条一个渐变，越往后越粉）；
   每换一段（夜里、竞选、发言、投票……）线上断开一小格，像章节；像素小怪兽（主 bot 头像那只）站在线上，走到哪儿在哪儿。--p 是进度，app.js renderDock 写 */
.bar { position: relative; height: 18px; --p: 0%; }
.track { position: absolute; left: 0; right: 0; top: 8px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--magenta)); clip-path: inset(0 calc(100% - var(--p)) 0 0); transition: clip-path .25s linear; }
.ticks { position: absolute; left: 0; right: 0; top: 8px; height: 3px; pointer-events: none; }
.ticks i { position: absolute; top: 0; width: 2px; height: 100%; margin-left: -1px; background: var(--night); }
.mon { position: absolute; left: var(--p); top: -10px; width: 18px; height: 18px; margin-left: -9px; pointer-events: none; transition: left .25s linear; filter: drop-shadow(0 0 3px rgba(255, 47, 209, .5)); } /* 9×9 像素，一格 2px */
.row { display: flex; align-items: center; gap: 4px; height: 48px; }
.ib { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; transition: background .2s, transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.ib svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ib:active { transform: scale(.88); background: rgba(255, 255, 255, .1); }
.ib.play { width: 44px; height: 44px; color: var(--green); background: rgba(57, 255, 143, .08); box-shadow: inset 0 0 0 1.5px var(--green), 0 0 14px rgba(57, 255, 143, .28); } /* 唯一一颗播放键：首杀绿的霓虹圈（像招牌的灯管），不用实心大白键 */
.ib.play svg { fill: currentColor; stroke-width: 1.2; }
.ib.play.on svg { fill: none; stroke-width: 3; }
#prev svg path:first-child, #next svg path:first-child { fill: currentColor; }
.ib.txt { width: auto; padding: 0 10px; font: 600 12.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .04em; }
.time { margin-left: 6px; font: 500 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .06em; color: var(--dim); font-variant-numeric: tabular-nums; }
.grow { flex: 1; }
.seek-tip { position: absolute; left: clamp(56px, var(--p), calc(100% - 56px)); bottom: 26px; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; font-size: 12px; white-space: nowrap; pointer-events: none;
  background: rgba(16, 18, 22, .9); border: 1px solid var(--line); }
/* 开场：九个人站一排，跟海报那张群像一样 */
.ensemble { position: absolute; inset: 0; z-index: 0; --floor: .86; --tall: .5; } /* 九个人一排：同一把尺、鞋底一条线，个子照各人身高。z-index 0：每人自带的前后层级（10–20）只在这排里比，整排在底下那片黑（.scrim）下面 */
@media (orientation: landscape) { .ensemble { --floor: .74; --tall: .62; } } /* 第 20 版：脚落进底下那片黑的渐变里，上半身露在字幕上面（原来 .97 只露出头） */
.ensemble img { position: absolute; max-width: none; object-fit: fill;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)) brightness(var(--b, .9)); animation: rise .9s cubic-bezier(.2, .9, .3, 1) backwards; }
/* 声音面板：两条音量 */
.panel { position: absolute; right: 0; bottom: 56px; width: min(280px, 86vw); padding: 14px 16px 12px; border-radius: 18px; display: grid; gap: 12px;
  background: rgba(16, 18, 22, .88); border: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); animation: pip .3s ease-out; }
.panel label { display: grid; grid-template-columns: 5em 1fr; align-items: center; gap: 10px; font-size: 13px; }
.panel input[type=range] { width: 100%; accent-color: var(--green); }
.panel .hint { margin: -4px 0 0; font-size: 11px; color: var(--dim); }
.panel button { justify-self: start; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; }
/* 一集完了 */
.end { position: absolute; z-index: 35; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; background: rgba(5, 6, 8, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.end b { font-family: var(--disp); font-weight: 400; font-size: clamp(36px, 10vw, 64px); letter-spacing: .1em; }
.end .go svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.end .ghost { font-size: 13.5px; color: var(--dim); text-decoration: underline; text-underline-offset: 4px; }
#mute[aria-pressed="true"] #mute-wave { opacity: 0; }

/* ---- 片头海报：一集一张，九个人站一排，名字大、字少，一个开始 ---- */
.poster { position: absolute; z-index: 40; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: calc(var(--top) + 7svh) var(--right) var(--bottom) var(--left);
  background: linear-gradient(to bottom, rgba(5, 6, 8, .86), rgba(5, 6, 8, .5) 34%, rgba(5, 6, 8, .15) 58%, rgba(5, 6, 8, .96)); transition: opacity .6s, visibility .6s; }
.poster.gone { opacity: 0; visibility: hidden; pointer-events: none; }
body.posterup .top, body.posterup .cast, body.posterup .sub, body.posterup .dock, body.posterup .shot { opacity: 0; pointer-events: none; }
.top, .cast, .sub, .shot { transition: opacity .6s; }
.poster-copy { position: relative; z-index: 2; max-width: 520px; }
.kicker { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11.5px; letter-spacing: .2em; color: var(--dim); }
.kicker span:first-child { color: var(--green); }
.poster h1 { margin: 10px 0 6px; font-family: var(--disp); font-weight: 400; font-size: clamp(42px, 14vw, 88px); line-height: 1; letter-spacing: .06em; color: #fff; word-break: keep-all; overflow-wrap: anywhere;
  text-shadow: 0 0 34px rgba(255, 47, 209, .35), 0 6px 30px rgba(0, 0, 0, .6); }
.logline { margin: 0; font-size: 16px; letter-spacing: .1em; color: rgba(255, 255, 255, .85); }
.from { margin: 14px 0 0; max-width: 30em; padding: 10px 14px; border-left: 2px solid var(--gold); font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .86); background: rgba(10, 10, 12, .45); border-radius: 0 10px 10px 0; }
.cta { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.go { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 28px 0 22px; border-radius: 999px; background: #fff; color: #08090b; font-size: 17px; font-weight: 700; letter-spacing: .14em;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 0 0 6px rgba(255, 255, 255, .08); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.go svg { width: 22px; height: 22px; fill: currentColor; }
.go:active { transform: scale(.94); }
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; letter-spacing: .06em; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, .18); border: 1px solid var(--line); transition: background .3s; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.switch input:checked + i { background: var(--gold); }
.switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { outline: 2px solid var(--cyan); outline-offset: 2px; }
.switch small { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .02em; color: var(--dim); }
.lineup { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 52%; pointer-events: none; --floor: .97; --tall: .78; }
.lineup img { position: absolute; max-width: none; object-fit: fill;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)) brightness(var(--b, .9)); animation: rise .9s cubic-bezier(.2, .9, .3, 1) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(8%); } }
.poster::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(5, 6, 8, .95), transparent); }

/* ---- 整局台词：一张玻璃底单，点哪句跳哪句 ---- */
.sheet-back { position: absolute; z-index: 44; inset: 0; background: rgba(0, 0, 0, .5); animation: fade .25s; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: absolute; z-index: 45; left: 50%; bottom: 0; transform: translateX(-50%); width: min(560px, 100%); max-height: min(78%, 720px); padding: 0; border: 0; border-radius: 22px 22px 0 0; color: var(--ink);
  background: rgba(14, 16, 20, .82); backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); box-shadow: 0 -20px 60px rgba(0, 0, 0, .6); overflow: hidden; }
.sheet:not([hidden]) { display: flex; flex-direction: column; animation: sheet .35s cubic-bezier(.2, .9, .3, 1); }
@keyframes sheet { from { transform: translate(-50%, 40%); opacity: 0; } }
.sheet header { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 8px 20px; font-size: 15px; letter-spacing: .1em; }
.sheet ol { position: relative; margin: 0; padding: 0 12px calc(var(--bottom) + 12px); list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.sheet li { display: flex; gap: 10px; padding: 10px 8px; border-radius: 14px; cursor: pointer; }
.sheet li:active { background: rgba(255, 255, 255, .06); }
.sheet li.now { background: rgba(57, 255, 143, .1); box-shadow: inset 0 0 0 1px rgba(57, 255, 143, .35); }
.sheet li img { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.sheet li .nar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); font-size: 13px; color: var(--dim); }
.sheet li div { min-width: 0; }
.sheet li b { font-size: 12px; color: var(--c, var(--dim)); }
.sheet li p { margin: 2px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .88); word-break: break-word; }
.sheet li.wolfline b::after { content: " · 狼"; color: var(--wolf); }
.sheet li p.in { margin-top: 4px; padding-left: 10px; border-left: 2px dashed rgba(34, 227, 255, .6); font-size: 13px; font-style: italic; color: #a9eefc; }
.sheet li.wolfline p.in { border-left-color: rgba(255, 61, 139, .7); color: #ffb3d1; }
.sheet li p.in::before { content: "心里："; font-style: normal; opacity: .7; }
/* 夜里神职那句（守卫、预言家、女巫）本身就是心里话：字幕斜体、青色，标签写「心里想」 */
.sub.monologue .line { font-style: italic; color: #bff6ff; }
.sub.monologue .mouth { color: #8ff0ff; box-shadow: inset 0 0 0 1px rgba(34, 227, 255, .55); }
.who-card { position: absolute; z-index: 26; display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 9px; border-radius: 16px; max-width: min(92vw, 340px);
  background: rgba(16, 18, 22, .9); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); animation: pip .3s cubic-bezier(.2, 1.4, .4, 1); }
.who-card img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.who-card b { display: block; font-size: 14px; }
.who-card span { display: block; font-size: 12px; color: var(--dim); white-space: nowrap; }
.who-card button { margin-left: 4px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; color: #08090b; background: #fff; }
.toast { position: absolute; z-index: 50; left: 50%; top: calc(var(--top) + 46px); transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; font-size: 13px;
  background: rgba(16, 18, 22, .86); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); white-space: nowrap; animation: pip .3s ease-out; }

/* ================= 横屏（手机横过来）：九人一排挪到顶上那一行中间；说话的在左、对方在右，面对面，字幕夹在中间 ================= */
@media (orientation: landscape) and (max-height: 560px) {
  :root { --av: 28px; --dock: 62px; --top: max(6px, env(safe-area-inset-top)); }
  .top { height: 30px; }
  .ep { flex: 0 1 auto; max-width: 24%; }
  button.god { margin-left: auto; }
  .cast { top: calc(var(--top) + 1px); left: 50%; right: auto; width: min(52vw, 400px); transform: translateX(-50%); }
  .seat .nm { font-size: 9px; }
  .shot { top: calc(var(--top) + 46px); bottom: 0; }
  .shot { --floor: .97; --tall: .9; } /* 横屏矮：鞋底贴到底，控件出来时盖住脚，3 秒后收起 */
  .lead { left: calc(var(--left) + 15%); width: 34%; top: 0; height: 100%; transform: translateX(-50%); }
  .lead::after, .foil::after { width: 70%; display: block; }
  .shot.duel .lead { left: calc(var(--left) + 14%); }
  .foil { --floor: .97; --tall: .9; left: auto; right: calc(var(--right) + 1%); top: 0; bottom: 0; width: 30%; height: auto; border-radius: 0; overflow: visible; background: none; box-shadow: none; animation: foil-in .45s cubic-bezier(.2, .9, .25, 1); }
  .foil img { transform: scaleX(-1);
    filter: brightness(.74) saturate(.85) drop-shadow(0 0 1px rgba(0, 0, 0, .7)) drop-shadow(0 0 22px color-mix(in srgb, var(--tie) 55%, transparent)); }
  @keyframes foil-in { from { opacity: 0; transform: translateX(8%); } }
  .tie { left: 50%; right: auto; top: 7px; width: 36%; transform: translateX(-50%); flex-direction: row; justify-content: center; gap: 10px; font-size: 13px; }
  .tie i { flex: 1; max-width: 90px; }
  .tie::after { content: ""; flex: 1; max-width: 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--tie), transparent); box-shadow: 0 0 8px var(--tie); }
  .tie i { background: linear-gradient(90deg, transparent, var(--tie)); }
  .stamp { left: 50%; top: 33px; transform: translateX(-50%) rotate(-1.5deg); width: max-content; max-width: 38%; padding: 6px 11px 7px; }
  .stamp b { font-size: 13px; } .stamp span { font-size: 11px; line-height: 1.45; }
  .think { left: 22%; top: 32px; max-width: 34%; padding: 7px 12px 8px; }
  .think p { font-size: 13px; line-height: 1.5; max-height: 7.5em; }
  .think::before { right: auto; left: 8%; } .think::after { right: auto; left: 4%; }
  .row { height: 40px; }
  .ib { width: 36px; height: 36px; }
  .ib.play { width: 40px; height: 40px; }
  .poster { padding: calc(var(--top) + 5svh) var(--right) var(--bottom) var(--left); }
  .poster h1 { font-size: clamp(48px, 12vh, 84px); }
  .poster-copy { max-width: 46%; }
  .cta { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .go { height: 46px; }
  .lineup { left: 40%; height: 92%; }
  .poster::after { display: none; }
  .card b { font-size: clamp(46px, 18vh, 88px); }
}

/* ================= 电脑（宽、高都够）：跟横屏一套，放大 ================= */
@media (min-width: 900px) and (min-height: 561px) {
  :root { --av: 42px; --dock: 74px; --top: 18px; --left: 28px; --right: 28px; }
  .top { height: 38px; }
  .brand { font-size: 23px; }
  .ep span { font-size: 18px; }
  .ep { flex: 0 1 auto; max-width: 30%; }
  button.god { margin-left: auto; }
  button.god { height: 38px; font-size: 14px; padding: 0 16px 0 13px; }
  .cast { top: calc(var(--top) + 2px); left: 50%; right: auto; width: min(44vw, 560px); transform: translateX(-50%); }
  .seat .nm { font-size: 11px; }
  .shot { top: 92px; bottom: 0; }
  .shot { --floor: .76; --tall: .72; } /* 电脑：鞋底在字幕上面 */
  .lead { left: 3%; width: 38%; top: 0; height: 100%; }
  .lead::after, .foil::after { width: 56%; display: block; }
  .foil { --floor: .76; --tall: .72; left: auto; right: 6%; top: 0; bottom: 0; width: 30%; height: auto; border-radius: 0; overflow: visible; background: none; box-shadow: none; animation: foil-in .45s cubic-bezier(.2, .9, .25, 1); }
  .foil img { transform: scaleX(-1);
    filter: brightness(.74) saturate(.85) drop-shadow(0 0 1px rgba(0, 0, 0, .7)) drop-shadow(0 0 26px color-mix(in srgb, var(--tie) 55%, transparent)); }
  @keyframes foil-in { from { opacity: 0; transform: translateX(8%); } }
  .tie { left: 50%; right: auto; top: 6px; width: 30%; transform: translateX(-50%); flex-direction: row; justify-content: center; gap: 12px; font-size: 15px; }
  .tie i { flex: 1; max-width: 120px; background: linear-gradient(90deg, transparent, var(--tie)); }
  .tie::after { content: ""; flex: 1; max-width: 120px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--tie), transparent); box-shadow: 0 0 8px var(--tie); }
  .stamp { left: 50%; top: 44px; transform: translateX(-50%) rotate(-2deg); width: max-content; max-width: 30%; }
  .stamp b { font-size: 16px; } .stamp span { font-size: 13px; }
  .think { left: 30%; top: 22%; max-width: 30%; } /* 电脑：说话那人头的右上方 */
  .think p { font-size: 16px; }
  .think::before { right: auto; left: 10%; } .think::after { right: auto; left: 6%; }
  .name { height: 24px; font-size: 14px; }
  .act { font-size: 13px; }
  .poster { padding: 16svh 8vw 6svh; justify-content: flex-start; }
  .poster-copy { max-width: 40%; }
  .cta { flex-direction: row; align-items: center; }
  .lineup { left: 36%; height: 88%; }
  .poster::after { display: none; }
}

/* 流程条：横屏、电脑摆在头像那排下面，一行（几步 + 提示并排）；舞台往下让一截 */
@media (orientation: landscape) and (max-height: 560px) {
  .flow { top: calc(var(--top) + 50px); left: 50%; right: auto; width: min(80vw, 700px); transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 10px; }
  .flow-row { flex: none; }
  .flow-hint { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .shot { top: calc(var(--top) + 74px); }
}
@media (min-width: 900px) and (min-height: 561px) {
  .flow { top: calc(var(--top) + 74px); left: 50%; right: auto; width: min(72vw, 900px); transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 14px; }
  .flow-row { flex: none; }
  .flow-row b { font-size: 15px; } .flow-row i { font-size: 12px; padding: 4px 8px; } .flow-row i.done { padding: 4px 2px; }
  .flow-hint { margin: 0; font-size: 13px; }
  .shot { top: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg img, .dust i, .lead img, .foil, .seat, .card.show, .card.show b, .shot.burst::before, .seal, .stamp, .lineup img { animation: none !important; }
  .card.show { opacity: 1; }
}
/* 直播角标（11-09）：在直播点上是红底 LIVE；落后半分钟变「回到直播」（金边、能点）；信号不好只变暗，不写字（老板 11-08：「桌上在想」这种字穿帮） */
.live-tag { flex: none; height: 22px; padding: 0 9px; border: 0; border-radius: 999px; background: #e5243b; color: #fff; font: 700 11px/22px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; cursor: default; }
.live-tag::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #fff; vertical-align: 1px; animation: live-dot 1.6s ease-in-out infinite; }
.live-tag.behind { background: rgba(16, 18, 22, .72); color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: .06em; cursor: pointer; }
.live-tag.behind::before { background: var(--gold); }
.live-tag.weak { opacity: .55; }
@keyframes live-dot { 50% { opacity: .25; } }
.end #next-live { text-decoration: none; }
/* 轻量模式（11-09，小活动的 iframe、?lite，跟正式播放器同一条判断）：Discord 里的浏览器比外面重。
   毛玻璃全关（底色本来就是半透明深色），大立绘只留一层贴边阴影，灰尘不飘，光柱不模糊 */
html.lite *, html.lite *::before, html.lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.lite .dust { display: none; }
html.lite .beam { filter: none; }
html.lite .lead img { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .7)); }
html.lite .lead.fallen img { filter: grayscale(.9) brightness(.72); }
html.lite .lineup img, html.lite .ensemble img { filter: brightness(var(--b, .9)); }
html.lite .arcs .arc.new, html.lite .arcs .tip.new { filter: none; }
@media (orientation: landscape) and (max-height: 560px), (min-width: 900px) and (min-height: 561px) { html.lite .foil img { filter: brightness(.74) saturate(.85); } }
/* 说 / 想 / 做 三层（11-09 剧场组转老板）：整局台词里一句底下三行——嘴上（台词）、心里（心里话，标来源）、手上（代码记的决定，金色）；点头像只看这个人 */
.sheet li p.say::before { content: "嘴上："; font-size: 12px; opacity: .55; }
.sheet li p.in.official::before, .sheet li p.in.off::before { content: "心里（官方思考整理）："; }
.sheet li p.do { margin-top: 4px; padding-left: 10px; border-left: 2px solid rgba(242, 193, 78, .75); font-size: 13px; line-height: 1.55; color: #f6dfa0; }
.sheet li p.do::before { content: "手上："; opacity: .7; }
.sheet li img { cursor: pointer; }
.who-card .wc-think, .who-card .wc-do { margin-top: 3px; font-size: 12px; line-height: 1.45; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.who-card .wc-think { color: #a9eefc; font-style: italic; }
.who-card .wc-do { color: #f6dfa0; }
/* 「AI 生成」（组长 11-09 12:3x）：心里话标签底下一行小字；整局台词顶上一行写清心里话的来源 */
.think small.ai { margin-top: 1px; font-size: 10px; letter-spacing: .12em; opacity: .72; }
.sheet li.legend { display: block; padding: 2px 8px 6px; font-size: 12px; line-height: 1.5; color: var(--dim); cursor: default; }
.think small.long { letter-spacing: .04em; }
/* 心里话两种来源（剧场组第二批 thought_source）：官方思考整理 / 角色自述，各标各的 */
.sheet li p.in.self::before { content: "心里（角色自述）："; }
#think-label { letter-spacing: .04em; }
/* 没心里话时的找补（11-09 组长转老板）：灰、斜体，标签写「这一步没留下心里话」，一眼跟官方思考、自述分开 */
.think.none, .think.none.wolfy { color: #9aa3ad; background: rgba(16, 18, 22, .78); border-color: rgba(154, 163, 173, .5); box-shadow: none; }
.think.none p { color: #c3c9cf; }
.sheet li p.in.none, .sheet li.wolfline p.in.none { color: #9aa3ad; border-left-color: rgba(154, 163, 173, .45); }
.sheet li p.in.none::before { content: "心里（没留下）："; }
/* 心里话气泡（老板 11-09 17:31 iPhone 竖屏：「内心戏要么太多，要么字放小点，气泡指到人物头像，模拟一个想的效果」）：
   云朵形，靠在说话那位的头旁边，三个由大到小的小圆圈连到头上（位置在 app.js placeThink 里按全身图标的脸框算，脸那一侧没地方就放另一侧）；
   默认放短稿、最多四行，点一下看长稿；字比字幕小一档（竖屏字幕 17、气泡 13.5）；来源并成一行小字 */
.think { right: auto; bottom: auto; max-width: min(58vw, 240px); padding: 8px 14px 9px; pointer-events: auto; cursor: pointer;
  border: 1.5px solid rgba(34, 227, 255, .7); border-radius: 30px 36px 32px 38px / 26px 30px 28px 32px; }
.think::before, .think::after { display: none; }
.think small, .think small#think-label { font-size: 10.5px; letter-spacing: .08em; opacity: .85; }
.think p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; max-height: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.think.open p { display: block; -webkit-line-clamp: unset; max-height: min(40vh, 16em); overflow-y: auto; overscroll-behavior: contain; }
.think-more { display: block; margin: 3px 0 0 auto; padding: 0; border: 0; background: none; font: inherit; font-size: 11px; color: inherit; opacity: .8; cursor: pointer; }
.think-dot { position: absolute; z-index: 4; border-radius: 50%; background: rgba(6, 24, 32, .85); border: 1.5px solid rgba(34, 227, 255, .7); pointer-events: none;
  animation: think-in .55s cubic-bezier(.2, 1.4, .4, 1) .3s backwards; }
.think-dot.wolfy { background: rgba(32, 6, 20, .85); border-color: rgba(255, 61, 139, .8); }
.think-dot.none { background: rgba(16, 18, 22, .78); border-color: rgba(154, 163, 173, .5); }
@media (orientation: landscape) and (max-height: 560px) { .think { max-width: 30%; padding: 6px 12px 7px; } .think p { font-size: 13px; } .think.open p { max-height: 50vh; } }
@media (min-width: 900px) and (min-height: 561px) { .think { max-width: 28%; } .think p { font-size: 15px; } }

/* ================= 第 17 版（老板 11-09 18:2x 看效果图：「可以，应用一下」）=================
   竖屏：说话那位放大到右半边（老板红框），头在框顶附近、脚到底；心里话云在左半边；字幕压在腿上、有底色、不碰脸；
   横屏：人按中景放大在左，心里话贴头右边，名牌字幕一块、控件一块，互不重叠，不要中间大播放键；
   关系带：有票、有箭头的时候（--band）头像下面让出一条带子画箭头，流程条和舞台往下让 */
body.band { --band: 54px; }
.flow { top: calc(var(--top) + 42px + var(--av) + 34px + var(--band, 0px)); }
.howto-card { top: calc(var(--top) + 42px + var(--av) + 60px + var(--band, 0px)); }
.seat .stampx { position: absolute; z-index: 3; left: 50%; top: 100%; margin-top: 2px; transform: translateX(var(--sx, -50%)) rotate(-8deg); padding: 1px 6px; border-radius: 5px;
  font-size: 10px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; color: #fff; background: rgba(214, 32, 66, .95); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85), 0 4px 10px rgba(0, 0, 0, .5);
  animation: stamp-in .32s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes stamp-in { from { opacity: 0; transform: translateX(var(--sx, -50%)) rotate(-8deg) scale(1.8); } }
.seat .check { position: absolute; z-index: 3; left: 50%; top: -14px; transform: translateX(-50%); padding: 0 5px; height: 14px; border-radius: 7px; font-size: 9px; font-weight: 800; line-height: 14px; white-space: nowrap; color: #08202a; background: var(--cyan); }
.seat .check.wolf { color: #fff; background: var(--wolf); }
.seat.out .face::before { content: "✕"; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-size: 20px; font-weight: 900; color: rgba(255, 90, 90, .95); text-shadow: 0 1px 4px #000; }
.seat.out .face::after { display: none; }
.seat .badge { position: absolute; z-index: 3; left: -6px; top: -6px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 900; color: #3b2500;
  background: radial-gradient(circle at 35% 35%, #fff2b8, #e3a51f); box-shadow: 0 0 8px rgba(242, 193, 78, .8); }
.seat.sheriff .nm::before { content: none; }
.arcs .arc.sus { stroke-dasharray: 4 4; opacity: .95; }
.arcs .arc.act, .arcs .tip.act { stroke-width: 3.2; opacity: 1; filter: drop-shadow(0 0 5px currentColor); }
body.thinking .seat:not(.speak) { opacity: .3; }
body.thinking .bg::after { content: ""; position: absolute; inset: 0; background: rgba(3, 4, 6, .5); transition: opacity .3s; }
.line.mind .rest { color: rgba(246, 242, 234, .55); letter-spacing: .3em; } /* 想那一拍：字幕只留「在想……」 */
.lead img.ghost { animation: none !important; transition: opacity .15s ease; pointer-events: none; } /* 同一个人换表情：旧图淡掉 */
@media (orientation: portrait) and (max-width: 899px) {
  .shot { top: calc(var(--top) + 156px + var(--band, 0px)); bottom: 0; --floor: .93; --tall: .95; --cx: .75; }
  .shot.boxed { --cx: .75; }
  #bg-day { object-position: 100% 42%; } /* 背景取右边（吧台、吊灯）：像素小怪兽招牌落到画面外，不顶在人头上 */
}
@media (orientation: landscape) and (max-height: 560px) {
  .flow { top: calc(var(--top) + 40px + var(--band, 0px)); right: var(--right); display: flex; align-items: center; gap: 12px; }
  .flow-row { flex: none; }
  .flow-row .howto { margin-left: 8px; }
  .flow-hint { margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .shot { top: calc(var(--top) + 64px + var(--band, 0px)); bottom: 0; --floor: 1.55; --tall: 1.56; --cx: .5; }
  .lead, .shot.duel .lead { left: 0; width: 38%; transform: none; }
  .lead::after { display: none; }
  .foil { --floor: auto; left: auto; right: var(--right); top: 4px; bottom: auto; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; animation: none;
    background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 2px var(--tie), 0 0 16px color-mix(in srgb, var(--tie) 50%, transparent); }
  .foil img { transform: none; filter: none; }
  .foil::after { display: none; }
  .tie { left: auto; right: calc(var(--right) - 8px); top: 72px; width: 80px; transform: none; flex-direction: column; gap: 3px; font-size: 11.5px; }
  .tie::after { display: none; }
  .tie i { flex: none; width: 22px; max-width: none; }
  #bg-day { object-position: 50% 100%; } /* 图往上挪：像素小怪兽躲进顶上压暗的那条 */
}
/* 「怎么玩」六张小卡（第 17 版，效果图④） */
.howto-card { padding: 14px 12px 12px; max-height: calc(100% - 120px); overflow-y: auto; }
.howto-card > b { display: flex; align-items: baseline; gap: 8px; font-size: 18px; }
.howto-card > b small { font-family: inherit; font-size: 11.5px; letter-spacing: .02em; color: var(--dim); }
.howto-card .round { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 8px 0 10px; font-size: 11px; color: var(--dim); }
.howto-card .round .k { padding: 0; background: none; color: var(--dim); }
.howto-card .round span { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: #fff; }
.howto-card .round em { font-style: normal; opacity: .6; }
.howto-card ul.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.howto-card ul.cards li { position: relative; padding: 9px 9px 9px 52px; min-height: 66px; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 11.5px; line-height: 1.45; color: rgba(246, 242, 234, .82); }
.howto-card ul.cards li i { position: absolute; left: 9px; top: 11px; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-size: 20px; background: rgba(255, 255, 255, .08); }
.howto-card ul.cards li b { display: flex; align-items: baseline; gap: 5px; min-width: 0; margin: 0; font-size: 13.5px; color: #fff; }
.howto-card ul.cards li b small { font-size: 10px; color: var(--dim); }
.howto-card ul.cards li p { margin: 2px 0 0; font-size: 11.5px; line-height: 1.45; color: rgba(246, 242, 234, .82); }
.howto-card ul.cards li.w { background: rgba(255, 61, 139, .1); box-shadow: inset 0 0 0 1px rgba(255, 61, 139, .35); }
.howto-card ul.cards li.w i { background: rgba(255, 61, 139, .22); }
.howto-card .wins { display: flex; gap: 8px; margin-top: 10px; }
.howto-card .wins div { flex: 1; padding: 7px 9px; border-radius: 12px; font-size: 11px; line-height: 1.4; background: rgba(255, 255, 255, .05); color: rgba(246, 242, 234, .85); }
.howto-card .wins b { display: block; font-size: 12px; margin-bottom: 1px; }
.howto-card .wins b.g { color: #7fe3ff; } .howto-card .wins b.w { color: #ff8fb3; }
@media (orientation: landscape) and (max-height: 560px) {
  .howto-card { top: calc(var(--top) + 64px); max-width: 720px; max-height: calc(100% - 72px); }
  .howto-card ul.cards { grid-template-columns: 1fr 1fr 1fr; }
}
/* 人站哪边看他脸朝哪（Tong 11-09：「一号的脸朝左边……他应该在画面右边」）：app.js 给 .shot 加 sideL / sideR */
@media (orientation: portrait) and (max-width: 899px) {
  .shot.sideL, .shot.sideL.boxed { --cx: .25; }
  .shot.sideR, .shot.sideR.boxed { --cx: .75; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .shot.sideR .lead { left: 62%; }
  .shot.sideR .foil { right: auto; left: var(--left); }
  .shot.sideR .tie { right: auto; left: calc(var(--left) - 8px); }
  /* 字幕固定在中间一条（Tong：「横屏的时候，下面那个字幕……固定不变的中间」），人左右换边时字幕不跟着跳；控件、进度条第 20 版起铺满整宽 */
}
@media (min-width: 900px) and (min-height: 561px) {
  .shot.sideR .lead { left: auto; right: 3%; }
  .shot.sideR .foil { right: auto; left: 6%; }
  .shot.sideR .foil img { transform: none; }
}
/* 对峙（Tong 11-09：「左右两边……对峙……竖屏右边会有那个人的头像，横屏可以做两个人」）：
   竖屏：对面那位还是小圆窗，放在说话那位的另一边（不压他的头）；横屏：对面那位整个人（中景、同一把尺）站另一边，转过来面对面；电脑也照这个分边 */
@media (orientation: portrait) and (max-width: 899px) {
  .shot.sideR .foil { right: auto; left: var(--left); }
  .shot.sideR .tie { right: auto; left: calc(var(--left) - 6px); }
  .foil.flip img { transform: none; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .foil, .shot.sideR .foil { --floor: 1.55; --tall: 1.56; --cx: .5; top: 0; bottom: 0; width: 38%; height: auto; border-radius: 0; overflow: visible; background: none; box-shadow: none; animation: foil-in .45s cubic-bezier(.2, .9, .25, 1); }
  .foil { left: 62%; right: auto; }
  .shot.sideR .foil { left: 0; }
  .foil img { transform: none; filter: brightness(.72) saturate(.85) drop-shadow(0 0 1px rgba(0, 0, 0, .7)) drop-shadow(0 0 20px color-mix(in srgb, var(--tie) 50%, transparent)); }
  .foil.flip img { transform: scaleX(-1); }
  .tie, .shot.sideR .tie { left: 50%; right: auto; top: 4px; width: 30%; transform: translateX(-50%); flex-direction: row; justify-content: center; gap: 10px; font-size: 13px; }
}
@media (min-width: 900px) and (min-height: 561px) {
  .foil img { transform: none; }
  .foil.flip img { transform: scaleX(-1); }
}
/* 横屏：投票时关系带让出 54 像素，舞台变矮；人照样大（同一个比例，往下挪一点），不跟着缩（11-09 截图：缩了以后头在屏幕中间、人显小） */
@media (orientation: landscape) and (max-height: 560px) {
  body.band .shot, body.band .foil, body.band .shot.sideR .foil { --floor: 1.86; --tall: 1.88; }
}
/* 第 17.1 版：全局角标「AI 实时生成 · 无剧本」（老板：「每句话上面都打 AI 生成……很抢戏……放到左边做一个全局的说明」
   「突出这个实时的感觉……劣势转为优势」）：贴在「首杀」旁边，像电视台角标；直播时前面一颗红点在闪，回放不闪、没有红点 */
.aibug { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 8px; border-radius: 999px; font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
  color: rgba(255, 255, 255, .82); background: rgba(10, 12, 16, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); white-space: nowrap; }
.aibug.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff3b47; box-shadow: 0 0 6px rgba(255, 59, 71, .9); animation: aibug-blink 1.4s ease-in-out infinite; }
@keyframes aibug-blink { 50% { opacity: .2; } }
.top .ep { min-width: 0; }
.think small#think-label:empty { display: none; }
.think.self, .think.self.wolfy { border-style: dashed; } /* 自述：虚线云 */
.think-dot.self { border-style: dashed; }
.howto-card .legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 9px 2px 0; font-size: 11px; color: var(--dim); }
.howto-card .legend i { display: inline-block; width: 20px; height: 12px; border-radius: 8px; border: 1.5px solid rgba(34, 227, 255, .75); margin-left: 4px; }
.howto-card .legend i.dash { border-style: dashed; }
.howto-card .legend { display: grid; gap: 7px; font-size: 12px; line-height: 1.5; }
.howto-card .legend > div { display: block; }
.howto-card .legend i { vertical-align: middle; margin: 0 6px 0 0; }
.howto-card .legend i.none { border-color: #9aa3ad; background: rgba(154, 163, 173, .15); }
.howto-card .legend i.wolfy { border-color: #ff3d8b; }
.howto-card > b small, .howto-card .round, .howto-card ul.cards li, .howto-card ul.cards li p, .howto-card ul.cards li b small, .howto-card .wins div { font-size: 12px; }
@media (orientation: landscape) and (max-height: 560px) {
  .ep { max-width: 12%; }
  .ep span#ep-name { display: none; } /* 横屏顶上那一行窄：只留 EP 号，给角标让地方 */
}
.line.mind { display: none; } /* 想那一拍：字幕那块只剩名字一行，不留一个空框 */
/* 第 19 版（老板 19:2x：「每次都要去点一下展开，很不方便……直接就默认展开」）：整段心里话直接放，不截四行、没有「展开」；
   太长就在云里跟着配音自己往下滚，云不撑满屏（竖屏最高约屏幕三分之一）；念到的字亮、没念到的淡 */
.think p, .think.open p { display: block; -webkit-line-clamp: unset; max-height: min(32vh, 12.5em); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.think p::-webkit-scrollbar { display: none; }
#think-rest { opacity: .5; }
.think-more { display: none !important; }
@media (orientation: landscape) and (max-height: 560px) { .think p, .think.open p { max-height: min(42vh, 9em); } }
@media (min-width: 900px) and (min-height: 561px) { .think p, .think.open p { max-height: 11em; } }
@media (orientation: landscape) and (max-height: 560px) { .think p, .think.open p { max-height: min(34vh, 7em); } } /* 横屏矮：云再矮一点，碰不到下面的名字和字幕 */
/* ================= 第 20 版（老板 11-09 19:4x 看 17.1 的南风截图）=================
   ① 只要一个播放键：舞台中间那颗圆的去掉（暂停时也不出），留底下那颗；
   ② 底部像高级播放器：最底下纯黑，往上一段渐变慢慢透出画面；从下往上是 播放控件 → 进度条 → 字幕。
      这片黑盖在人上面：小腿和脚自然淡进黑里，没有一条硬边；进度条在纯黑上，压不到鞋。字幕不再自带底色；
   ③ 进度条首杀风（见上面 .bar）。横屏、电脑同一套：黑从底边整宽升上来，字幕在中间一条，控件铺满整宽 */
.scrim { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; pointer-events: none; /* 在 .shot 里：盖住说话的人和对面那位；心里话的云（z 4）、大字章（z 3）在它上面 */
  --s: calc(var(--bottom) + var(--dock)); --f: min(300px, 36vh); height: calc(var(--s) + var(--f)); /* --s 纯黑那段（控件 + 进度条），--f 往上渐变那段 */
  background: linear-gradient(to top, var(--night) 0, var(--night) var(--s), rgba(5, 6, 8, .95) calc(var(--s) + var(--f) * .06), rgba(5, 6, 8, .86) calc(var(--s) + var(--f) * .16),
    rgba(5, 6, 8, .72) calc(var(--s) + var(--f) * .28), rgba(5, 6, 8, .55) calc(var(--s) + var(--f) * .4), rgba(5, 6, 8, .38) calc(var(--s) + var(--f) * .52),
    rgba(5, 6, 8, .23) calc(var(--s) + var(--f) * .64), rgba(5, 6, 8, .12) calc(var(--s) + var(--f) * .76), rgba(5, 6, 8, .05) calc(var(--s) + var(--f) * .88), rgba(5, 6, 8, 0) 100%); }
@media (orientation: landscape) and (max-height: 560px) { .scrim { --f: min(190px, 46vh); } }
@media (min-width: 900px) and (min-height: 561px) { .scrim { --f: min(340px, 36vh); } }
/* 长台词在框里滚（app.js lineEdges）：滚过去的顶上一行、还没露全的底下一行淡出 */
/* ================= 第 20 版下半：进度条（老板 20:1x「分段式……有点不精准……分区自己带标注……只想看一个艺人，就去点下一个」）=================
   一句一格；段和段断开一小格，底下写段名（现在这段亮，太窄的不写）；按住进度条：上面一张小卡写松手会落到的那句（哪一段 · 谁 · 头几个字）；
   点一下跳到段首，拖着一句一句吸附。跟着一位艺人看：线上方亮出他开口（他的颜色）、想事（青色小圈）的地方，时间那格换成他的头像（点了就不跟了） */
:root { --dock: 82px; } /* 进度条加高 8：底下一排段名 */
@media (orientation: landscape) and (max-height: 560px) { :root { --dock: 70px; } }
@media (min-width: 900px) and (min-height: 561px) { :root { --dock: 82px; } }
.bar { height: 26px; touch-action: none; cursor: pointer; outline: none; }
.bar::before { content: ""; position: absolute; left: -10px; right: -10px; top: -18px; bottom: -2px; } /* 46px手指热区，不挤动段名和下方按钮。 */
.bar.scrub .fill, .bar.scrub .mon { transition: none; }
.chap { position: absolute; left: 0; right: 0; top: 14px; height: 12px; pointer-events: none; transition: opacity .45s; }
.chap i { position: absolute; top: 0; font-style: normal; font-size: 10px; line-height: 12px; letter-spacing: .04em; text-align: center; white-space: nowrap; overflow: hidden; color: rgba(246, 242, 234, .38); }
.chap i.now { color: rgba(246, 242, 234, .95); font-weight: 600; }
.chap i.tight { visibility: hidden; }
body.quiet .chap { opacity: 0; }
.marks { position: absolute; left: 0; right: 0; top: 0; height: 8px; pointer-events: none; }
.marks i { position: absolute; bottom: 1px; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: var(--fc); }
.marks i.mind { width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: rgba(6, 24, 32, .9); box-shadow: inset 0 0 0 1.5px #8ff0ff; } /* 想事的那句：青色小圈，像心里话的云 */
.seek-tip { left: clamp(110px, var(--p), calc(100% - 110px)); bottom: 40px; width: max-content; max-width: 220px; padding: 6px 11px 7px; border-radius: 12px; white-space: normal; font-size: 12.5px; line-height: 1.4; color: #fff; }
.seek-tip small { display: block; margin-bottom: 1px; font-size: 10.5px; color: var(--dim); }
.seek-tip b { margin-right: .35em; color: var(--wc, #fff); }
.follow-chip { flex: none; margin-left: 6px; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 7px 0 3px; border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: #fff;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px var(--fc); white-space: nowrap; }
.follow-chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.follow-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; opacity: .65; }
.follow-chip.mind { color: #bff6ff; box-shadow: inset 0 0 0 1.5px #8ff0ff; }
.follow-chip.mind img { box-shadow: 0 0 0 1.5px #8ff0ff; }
.dock.follow #prev, .dock.follow #next { color: var(--fc); } /* 上一句 / 下一句染成他的颜色：只在他身上跳 */
.seat.follow .nm { color: var(--c); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.who-card .wc-acts { display: flex; flex-direction: column; gap: 6px; margin-left: 4px; }
.who-card .wc-acts button { margin-left: 0; }
.who-card button.mind { color: #8ff0ff; background: rgba(34, 227, 255, .12); box-shadow: inset 0 0 0 1px rgba(34, 227, 255, .55); }
.top { pointer-events: none; } .top > * { pointer-events: auto; } /* 横屏、电脑：头像那排在顶上这一行中间，这一行的空底条别挡住点头像（第 20 版查出来的，点头像要跟着看） */
/* 第 20.1 版（组长 20:4x：横屏 844×390 正在说话那位头像放大以后，名字压到下面阶段签那一行，别的名字也贴着；线上 17、19 版就有）：
   量过：放大那位的名字底边 53 像素、那一行顶边 46，压 7 像素。横屏把阶段那行和舞台往下挪 12 像素，名字底下空出 4 像素 */
@media (orientation: landscape) and (max-height: 560px) {
  .flow { top: calc(var(--top) + 52px + var(--band, 0px)); }
  .shot { top: calc(var(--top) + 76px + var(--band, 0px)); }
  .howto-card { top: calc(var(--top) + 76px); max-height: calc(100% - 84px); }
}

/* 第 22 版（老板 11-10 20:3x、20:5x：电脑版「救了 冷月」的标签、白秤的云压在阶段那一行和说明上）。
   原因：第 17 版那条不分屏幕的 .flow（上面 516 行）把电脑版的阶段行从 92 像素压回手机的算法（136 像素，有投票带子时 190），掉进了舞台里（舞台顶 128）。
   电脑版照横屏的办法：阶段行回到头像那排下面，舞台跟着投票带子往下让。
   说明那句折成两行以上时（上帝视角的「真相：…」、票多的计票结果），舞台再往下让多出来的那一截（app.js 的 fitHint 量好写进 --hint-x）。
   电脑版那一行原来最宽 900，长的说明装不下才折行，放宽到 1200。 */
@media (min-width: 900px) and (min-height: 561px) {
  .flow { top: calc(var(--top) + 78px + var(--band, 0px)); width: min(calc(100% - 56px), 1200px); }
  .shot { top: calc(132px + var(--band, 0px) + var(--hint-x, 0px)); }
  .howto-card { top: calc(var(--top) + 110px + var(--band, 0px) + var(--hint-x, 0px)); max-height: calc(100% - var(--top) - 118px - var(--band, 0px) - var(--hint-x, 0px)); }
}
@media (orientation: portrait) and (max-width: 899px) {
  .shot { top: calc(var(--top) + 156px + var(--band, 0px) + var(--hint-x, 0px)); }
  .howto-card { top: calc(var(--top) + 42px + var(--av) + 60px + var(--band, 0px) + var(--hint-x, 0px)); }
}

/* 第 22 版 · 顶栏分左右两组：左边（首杀、AI 角标、第几期）只占到第一个头像左边为止；右边（LIVE、上帝视角）靠右，index.html 里包成 .top-r。
   原因（量过）：电脑 1295 宽以下，名字「狼人杀 · 高端局」伸进头像那排（1175 宽压 24 像素）；直播时 LIVE 排在左边那组里，电脑、横屏都压头像。
   电脑：名字放得下就整个显示，放不下就整个不显示（折到第二行，被 24 像素高的框裁掉），不留半截。 */
.top-r { display: contents; }
@media (orientation: landscape) and (max-height: 560px) {
  .top-r { margin-left: auto; display: flex; align-items: center; gap: 6px; }
  .top-r button.god { margin-left: 0; }
  .live-tag.behind { padding: 0 7px; letter-spacing: 0; } /* 812 宽时「回到直播」原来压住最右边头像 2 像素，收窄 11 像素 */
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 843px) { .ep { display: none; } } /* 844 宽时 EP 号右边 218、第一个头像左边 222，再窄就压上 */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 865px) { .aibug.live + .ep { display: none; } } /* 直播时 AI 角标多一个红点，宽 11 像素 */
@media (min-width: 900px) and (min-height: 561px) {
  .top { padding-right: calc(50% + min(22vw, 280px) - var(--right) + 14px); }
  .brand { flex: none; } /* 左边那组变窄以后，「首杀」两个字不许被挤成两行 */
  .top-r { position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; gap: 10px; }
  .top-r button.god { margin-left: 0; }
  .ep { max-width: none; flex-wrap: wrap; align-content: flex-start; height: 24px; line-height: 24px; }
  .ep b { line-height: 24px; } /* EP 号那一行也撑到 24 像素高：名字折下去就整行在框外，不露半截 */
}
@media (min-width: 900px) and (max-width: 959px) and (min-height: 561px) { .aibug.live + .ep { display: none; } }

/* 第 22 版 · 手机上「👁 狼 / 好人」那个记号（上帝视角里预言家验过的人；电脑上是挂在头像顶上的一小条，不动）：
   竖屏它顶进顶栏，压住「首杀」「上帝视角」；横屏头像排贴着屏幕顶，上半截被屏幕边切掉；光往下挪又盖住同一个头像右上角的票数。
   手机上收成头像左下角的小圆标：一只眼睛，底色就是验出来的结果（青 = 好人，粉 = 狼）。右上票数、左上警徽、右下身份、左下验人，四个角各放各的。
   字还留在里面（读屏、自检用），只是不画出来。「做」那一拍盖下来的章压在它上面（章只停一下）。 */
@media (orientation: portrait) and (max-width: 899px), (orientation: landscape) and (max-height: 560px) {
  .seat .check { z-index: 2; left: -5px; top: auto; bottom: -3px; transform: none; width: 15px; height: 15px; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; box-shadow: 0 0 0 1.5px var(--night); }
  .seat .check::before { content: "👁"; display: block; font-size: 10px; line-height: 15px; text-align: center; }
}
@media (orientation: portrait) and (max-width: 899px) {
  .seat .check { left: 1px; } /* 竖屏两个头像之间只有 8 像素，左边那位的身份标占掉 7；说话放大时也不碰它 */
  .seat.speak { transform-origin: 50% 0; } /* 说话那位从上沿往下放大（原来从中间放大，头顶的角标会往上顶进顶栏） */
  /* 两头的座位：脚下的章太长（「传警徽 弹窗」）会伸出屏幕边 4 像素，往里收到离边 8 像素 */
  .seat:first-child .stampx { --sx: max(-50%, calc(8px - var(--left) - var(--av) / 2)); }
  .seat:last-child .stampx { --sx: min(-50%, calc(var(--right) + var(--av) / 2 - 8px - 100%)); }
}
@media (orientation: landscape) and (max-height: 560px) {
  .seat .badge, .seat .votes { top: -4px; } /* 头像排贴着屏幕顶：说话那位放大以后，警徽和票数原来顶出屏幕上沿 1–2 像素 */
  .seat:first-child .badge { left: 0; } .seat:first-child .check { left: 1px; } /* 844 宽时第一个头像左边 4 像素就是「EP.21」那几个字：这一位左边的两个角标（警徽、👁）收进头像里，不压它 */
  .seat .stampx { margin-top: -1px; } /* 说话那位脚下的章（「守自己」）原来左下角伸进说明那一行 1.6 像素，往上收 3 像素 */
}

/* ---------- 第 22.2 版：手机竖屏看直播的顶栏（11-11） ----------
   一行要放五样：「首杀」、AI 章、局号、LIVE（往回翻了是「回到直播」）、上帝视角。量过 390 宽（顶栏 362）：五样原样要 394，
   往回翻了要 416：局号被挤得只剩「EP.1」，还压在 LIVE 上。
   让法：局号、LIVE、上帝视角一个字不少；AI 章只留「AI 实时生成」，「· 无剧本」收起来；间距 10 → 6；
   再窄的手机还放不下，就只缩 AI 章、出省略号，别的不动。
   只管手机竖屏的直播：.aibug.live 是直播才有的类（散场就摘），所以回放、横屏、电脑、平板竖屏一条都碰不到。
   例外两条，手机竖屏的回放也管：场名收起来；宽 350 以内的小手机放不下，见紧跟着的那一块。
   顶栏上没有「在直播」的类，只能从 AI 章往后找兄弟；间距没法单给直播改，就让后面四样各往左收 4 像素。 */
@media (orientation: portrait) and (max-width: 480px) {
  .aibug.live { flex: 0 999 auto; min-width: 0; margin-left: -4px; padding: 0 6px; letter-spacing: .04em; } /* 999：放不下时只有它缩，「首杀」不跟着瘪 */
  .aibug.live::before { flex: none; }
  .aibug.live .aibug-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .aibug.live .aibug-x { display: none; }
  .aibug.live + .ep { flex: 1 0 auto; margin-left: -4px; } /* 不缩：局号整个显示；多出来的地方归它，把 LIVE 和上帝视角推到右边 */
  .ep span#ep-name { display: none; } /* 场名：手机竖屏放不下（390 宽只露「狼人…」，360 宽只露半个字），直播、回放都收；线上 21.2 也是收的，横屏手机本来就收 */
  .aibug.live ~ .top-r > * { margin-left: -4px; }
  .aibug.live ~ .top-r .live-tag { padding: 0 7px; letter-spacing: .08em; }
  .aibug.live ~ .top-r .live-tag.behind { letter-spacing: 0; }
  .aibug.live ~ .top-r .live-tag.behind::before { display: none; } /* 「回到直播」前面那颗金点收掉，省 12 像素：360 宽的手机上 AI 章就不用缩了 */
  .aibug.live ~ .top-r button.god { padding: 0 9px 0 8px; gap: 4px; }
}
/* 回放在很窄的手机上也放不下：整块 AI 章、局号、上帝视角一排要 342.2 宽（量过：340 宽局号被裁，320 宽局号被上帝视角压住 12 像素；
   线上 21.2 是把 AI 章压成 8 号字躲过去的）。让法跟上面直播同一个：「· 无剧本」收起来；再不够只缩 AI 章、出省略号；局号不缩。
   350 = 342.2 再留 8 像素余量（只在电脑上的无头浏览器里量过，真手机没量）。直播那几条写得更具体，这一块压不过它们。 */
@media (orientation: portrait) and (max-width: 350px) {
  .aibug { flex: 0 999 auto; min-width: 0; }
  .aibug .aibug-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .aibug .aibug-x { display: none; }
  .aibug + .ep { flex: 1 0 auto; }
}

/* 22.3：散场仍记得谁出局过，脸恢复彩色；左下不与右侧身份牌相叠。 */
.seat .out-mark { position: absolute; z-index: 4; left: 1px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: #171b24; color: #ff5a5a; font: 700 10px/14px var(--ui); text-align: center; box-shadow: 0 0 0 1px var(--night); }
.moment.good { --mc: var(--role-color, rgba(34, 227, 255, .85)); color: var(--role-color, #8ff0ff); }
#howto-roles li:not(.w) b { color: var(--role-color, #fff); }

/* 22.4：排班只加覆盖层，头像、名字与座位间距沿用原样。 */
.seat.up-next .face::before { content: ""; position: absolute; inset: -4px; border: 1.5px dashed rgba(255,255,255,.6); border-radius: 50%; pointer-events: none; animation: turn-breathe 4s ease-in-out infinite; }
@keyframes turn-breathe { 50% { opacity: .45; } }
.seat .turn-pill { position: absolute; z-index: 5; left: 50%; top: -14px; transform: translateX(-50%); height: 13px; padding: 0 4px; border: 1px solid rgba(255,255,255,.45); border-radius: 7px; background: rgba(255,255,255,.16); color: #fff; white-space: nowrap; font: 500 9px/11px var(--ui); pointer-events: none; }
.seat .turn-pill.chime { background: var(--gold); border-color: var(--gold); color: #211903; }
.seat .turn-pill.turn-low { top: calc(100% + 15px); }
.seat .turn-pill.chime-check:not(.turn-low) { top: 1px; }
@media (prefers-reduced-motion: reduce) { .seat.up-next .face::before { animation: none; } }
/* 整轨仅用于后台收听；前台保持逐句音量控制。 */
body.listening .stage { --dock: 112px; }


body.listening #god:disabled { opacity: .75; cursor: default; }
body.listening .toast { max-width: calc(100% - 32px); width: max-content; white-space: normal; text-align: center; border-radius: 12px; }
@media (orientation: landscape) and (max-height: 560px) {
  body.listening .stage { --dock: 98px; }
}
@media (max-width: 480px) {
  body.listen-available .dock .row { gap: 1px; }
  body.listen-available .dock .ib { width: 33px; min-width: 33px; padding-left: 4px; padding-right: 4px; }
  body.listen-available .dock .time { font-size: 10px; letter-spacing: 0; margin-left: 2px; }
  body.listen-available .follow-chip { max-width: 114px; margin-left: 2px; }
}

/* 第 22.6 版：正式对话框，沿用已批准试样的布局与最小字号。 */
.sub {
  position: absolute; z-index: 10; left: 50%; right: auto; bottom: auto;
  top: 23vh; transform: translateX(-50%); width: 420px;
  padding: 15px 20px 17px; box-sizing: border-box;
  background: rgba(10, 12, 16, .82);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .3); text-align: left;
}
.sub::before { content: ""; position: absolute; left: -1px; top: 15px; bottom: 15px; width: 3px; border-radius: 3px; background: var(--who); }
.sub[data-side="R"]::before { left: auto; right: -1px; }
.sub .who { justify-content: flex-start; flex-direction: row; margin: 0 0 10px; min-height: 22px; }
.sub[data-side="R"] .who { flex-direction: row-reverse; }
.sub.narrate .who { flex-direction: row; justify-content: center; }
.sub.narrate::before { display: none; }
/* 名字和狼章是一组，「@谁」隔开一点：说话人在右边时不会把狼章看成对面那位的 */
.sub .act { margin-inline: 8px; }
.sub .line { width: auto; max-width: none; max-height: none; min-height: 0; margin: 0; padding: 0;
  font-size: 22px; line-height: 1.6; text-align: left; text-wrap: wrap; word-break: normal; overflow-wrap: anywhere; line-break: strict;
  overflow-y: hidden; mask-image: none; -webkit-mask-image: none;
}
.sub .said { color: var(--ink); }
.sub .rest { color: rgba(246, 242, 234, .62); }
.sub .tag:empty { display: none; }
.sub.whisper { border-color: color-mix(in srgb, var(--wolf, #ff3d8b) 60%, transparent); }
.sub.monologue { border-color: rgba(34, 227, 255, .55); }
.sub.whisper .line, .sub.monologue .line { font-style: italic; }
.sub.whisper .said { color: #d5dcff; }
.sub.monologue .said { color: #bff6ff; }
.sub:has(.line.mind) { display: none; }
.sub[data-fallback="true"] .line { overflow-y: auto; }
.sub .line.scrolled, .sub .line.more, .sub .line.scrolled.more { mask-image: none; -webkit-mask-image: none; }
.tie[data-dialog-duplicate="true"] { visibility: hidden; }
@media (orientation: portrait) and (max-width: 899px) {
  .sub { width: calc(100vw - 28px); padding: 12px 16px 14px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .stage { --dlg-safe-left: env(safe-area-inset-left, 0px); --dlg-safe-right: env(safe-area-inset-right, 0px); }
  .lead, .foil { translate: var(--dlg-shift, 0px) 0; transition: translate .3s ease; }
  .stage[data-dialog-measuring] .lead, .stage[data-dialog-measuring] .foil { transition: none; }
  .sub { padding: 6px 13px 8px; border-radius: 12px; }
  .sub .who { gap: 6px; margin-bottom: 4px; }
  .sub[data-fallback="true"] { padding-top: 1px; padding-bottom: 1px; }
  .sub[data-fallback="true"] .who { margin-bottom: 1px; }
}

/* 横屏首次收听提示：位于药丸/进度条之上，框的下界也为这块区域留空。 */
@media (orientation: landscape) and (max-height: 560px) {
  body.listening .toast { top: auto; bottom: calc(var(--bottom) + 110px); font-size: 11px; padding: 5px 12px; }
}

/* 22.8：只给十人以上的桌子排新网格，九人沿用原尺寸和坐标。 */
:root { --r-idiot: #ffb47a; }
.large-table { --av: 28px; --large-cast-h: calc(var(--cast-rows) * (var(--av) + 15px) + (var(--cast-rows) - 1) * 34px + 46px + var(--cast-extra, 0px)); }
.large-table .cast { top: calc(var(--top) + 52px); left: var(--left); right: var(--right); width: auto; transform: none;
  display: grid; grid-template-columns: repeat(var(--cast-cols), minmax(0, 1fr)); justify-items: center; row-gap: 34px; padding: 14px 0 32px; }
.large-table .seat .nm { font-size: 10px; line-height: 11px; letter-spacing: 0; }
.large-table .seat.speak { transform: translateY(2px) scale(1.06); }
.large-table .seat .role { width: 14px; height: 14px; line-height: 14px; font-size: 9px; right: -4px; }
.large-table .seat .votes { top: -4px; right: -3px; min-width: 16px; font-size: 9px; padding: 0 3px; }
.large-table .seat .badge { width: 14px; height: 14px; font-size: 9px; left: -4px; top: -4px; }
.large-table .seat .turn-pill, .large-table .seat .turn-pill.turn-low { top: calc(100% + 15px); }
.large-table .seat .stampx { top: calc(100% + 29px); margin-top: 0; }
.large-table:has(.no-vote) { --cast-extra: 11px; }
.seat .nm:has(.no-vote) { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.large-table .seat:has(.no-vote) .turn-pill, .large-table .seat:has(.no-vote) .turn-pill.turn-low { top: calc(100% + 27px); }
.large-table .seat:has(.no-vote) .stampx { top: calc(100% + 41px); }
.seat .no-vote { font-size: 8px; line-height: 10px; font-weight: 700; color: var(--r-idiot); padding: 0 3px; border-radius: 3px; background: #080b10; text-shadow: 0 1px 1px #000; }
.large-table .flow { top: calc(var(--top) + 52px + var(--large-cast-h) + 8px + var(--band, 0px));
  left: var(--left); right: var(--right); width: auto; transform: none; }
.large-table .shot { top: calc(var(--top) + 52px + var(--large-cast-h) + 66px + var(--band, 0px) + var(--hint-x, 0px)); }
.large-table .howto-card { top: calc(var(--top) + 52px + var(--large-cast-h) + 48px + var(--band, 0px)); max-height: min(60%, calc(100% - var(--top) - 52px - var(--large-cast-h) - 48px - var(--band, 0px) - 8px)); }
.moment.idiot-flip { white-space: normal; width: max-content; max-width: min(310px, 88vw); text-align: center;
  font-size: clamp(24px, 6vw, 44px); line-height: 1.2; color: #ffd08c; opacity: 1; z-index: 12;
  -webkit-text-stroke: 2px #050608; paint-order: stroke fill; text-shadow: 0 2px 2px #000, 0 0 5px #000; }
@media (orientation: landscape) and (max-height: 560px) {
  .large-table { --large-cast-h: calc(75px + var(--cast-extra, 0px)); --band: 0px; }
  body.band .large-table { --band: 32px; }
  .large-table .cast { top: calc(var(--top) + 38px); padding: 8px 0 24px; }
  .large-table .flow { top: calc(var(--top) + 38px + var(--large-cast-h) + 6px + var(--band)); }
  .large-table .shot { top: calc(var(--top) + 38px + var(--large-cast-h) + 40px + var(--band) + var(--hint-x, 0px)); }
  .large-table .howto-card { top: calc(var(--top) + 38px + var(--large-cast-h) + 40px + var(--band)); max-height: calc(100% - var(--top) - 38px - var(--large-cast-h) - 40px - var(--band) - 8px); }
  body.listening .large-table .toast { top: var(--top); bottom: auto; max-width: 46vw; font-size: 10px; padding: 4px 8px; }

}
@media (min-width: 900px) and (min-height: 561px) {
  .large-table { --av: 38px; }
  .large-table .shot { top: calc(var(--top) + 52px + var(--large-cast-h) + 48px + var(--band, 0px) + var(--hint-x, 0px)); }
}

/* 22.7 场面层。所有新规则由场面类开关；不改普通镜头的几何。 */
.scene-people { position:fixed; inset:0; z-index:5; pointer-events:none; }
.scene-row { position:absolute; inset:0; }
.scene-actor { position:absolute; max-width:none; object-fit:fill; transform:scale(var(--scene-scale,1)); transform-origin:50% 98.4127%; filter:brightness(.55) saturate(.7); }
#ensemble.scene-host .scene-actor { filter:brightness(.55) saturate(.7);animation:none; }
#ensemble.scene-host { z-index:5; }
#ensemble.scene-host .scene-actor.active { --scene-scale:1.15; filter:brightness(1) drop-shadow(0 0 24px rgba(255,255,255,.35)); z-index:5; }
body.scene-ensemble #lead,body.scene-ensemble #foil,
body.den #lead,body.den #foil,
body.scene-ensemble #tie,body.den #tie,
body.scene-ensemble .think-dot,body.den .think-dot { display:none!important; }
.scene-den-light { position:absolute; z-index:1; pointer-events:none; background:radial-gradient(circle at 50% 58%,rgba(255,61,139,.22),rgba(120,10,50,.14) 45%,transparent 72%); }
.scene-den-light::after { content:"";position:absolute;inset:12% 5% 6%;border:1px solid rgba(255,61,139,.5);border-radius:50%;box-shadow:0 0 28px #ff3d8b15; }
.scene-den-label { position:relative;flex:0 0 100%;z-index:12;padding:7px 11px;border-left:2px solid #ff3d8b;border-radius:0 7px 7px 0;background:rgba(28,8,22,.87);color:#ffb3d1;pointer-events:none; }
.scene-den-label b { display:block;font-size:13px;font-weight:500; }
.scene-den-label small { display:block;margin-top:3px;font-size:10px;color:#c8b8c2; }
body.den .bg,body.den .beam,body.den .dust,body.den header.top,body.den .flow-row,body.den .flow-hint,body.den .dock,body.den .scene-log-toggle { filter:grayscale(.85) brightness(.45); }
body.den #cast .seat:not(.scene-wolf) { filter:grayscale(.85) brightness(.25); }
body.den #cast .seat.scene-wolf { filter:none; }
/* 本层不定义任何#sub/#line规则；原生22.6是唯一的排框、缩字和退滚动实现。 */
body.scene-surface #think {
  visibility:visible!important;
  left:var(--scene-think-x)!important;top:var(--scene-think-y)!important;transform:translateX(-50%)!important;
  width:var(--scene-think-w)!important;box-sizing:border-box;
}
body.den #think,body.scene-ensemble #think { z-index:6; }
body.scene-surface #think-text { max-height:var(--scene-think-h)!important;overflow:auto!important; }
.scene-card { display:block;font:inherit;letter-spacing:inherit;color:inherit; }
.moment.scene-owned { left:var(--scene-card-x)!important;top:var(--scene-card-y)!important;font-size:var(--scene-card-font)!important;z-index:13; }
.moment.scene-owned.night { color:#cfd8ff;text-shadow:0 0 30px #8caaffaa,0 6px 24px #000b; }
.moment.scene-owned.out { color:#ff6b6b;text-shadow:0 0 30px #ff4646aa,0 6px 24px #000b; }
body.scene-history-wide #flow { flex-wrap:wrap; }
#flow:has(.scene-den-label:not([hidden])) { flex-wrap:wrap; }
.scene-log-toggle { position:relative;z-index:18;pointer-events:auto;width:100%;height:24px;max-height:28px;display:flex;align-items:center;gap:8px;padding:0 10px;text-align:left;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(10,12,16,.88);color:var(--dim);font-size:11px; }
.scene-log-toggle strong { color:var(--ink);font-weight:500;flex:none; }
.scene-log-toggle strong::before { content:'📜 前情'; }
.scene-log-toggle .summary::before,.scene-log-toggle .chevron::before { content:attr(data-label); }
.scene-log-toggle .summary { overflow:hidden;text-overflow:ellipsis;min-width:0; }
.scene-log-toggle .chevron { margin-left:auto; }
.scene-log-panel { position:relative;width:100%;z-index:26;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:rgba(10,12,16,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);overflow:auto;overscroll-behavior:contain; }
.scene-log-panel header { display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:13px;color:#ffd36b; }
.scene-log-panel button { min-width:28px;min-height:28px;font-size:18px;color:var(--dim); }
.scene-log-panel section { padding:10px 0;border-bottom:1px solid var(--line); }
.scene-log-panel section:last-child { border-bottom:0;padding-bottom:0; }
.scene-log-panel h3 { margin:0 0 5px;font-size:12px;font-weight:500;color:#ffd36b; }
.scene-log-panel p { margin:3px 0;font-size:12px;line-height:1.65; }
.scene-log-panel p.secret { color:#9cbed1;font-size:11px; }
.scene-log-panel [data-action="kill"],.scene-log-panel [data-action="poison"] { color:#ff8ab9; }
.scene-log-panel [data-action="save"],.scene-log-panel [data-action="guard"],.scene-log-panel [data-action="check"] { color:#8ff0ff; }
body.scene-log-open .scene-people { opacity:.55; }
@media (orientation:landscape) and (max-height:560px) {
  .scene-log-toggle { font-size:10px;height:22px; }
  .scene-log-panel { padding:9px 11px; }
  .scene-log-panel header { padding-bottom:6px;font-size:11px; }
  .scene-log-panel section { padding:6px 0; }
  .scene-log-panel p { font-size:10px;line-height:1.5; }
  .scene-log-panel p.secret { font-size:9px; }
  .scene-den-label { padding:5px 9px; }
  .scene-den-label b { font-size:11px; }
  .scene-den-label small { font-size:9px; }
}

/* 面板借用原生已识别的批注区域，原内容保留在DOM中，收起即恢复。 */
#stamp.scene-log-host { position:fixed!important;left:var(--scene-panel-x)!important;top:var(--scene-panel-y)!important;width:var(--scene-panel-w)!important;max-width:none!important;padding:0!important;transform:none!important;background:none!important;box-shadow:none!important;border:0!important; }
#stamp.scene-log-host > :not(#scene-log-panel) { display:none!important; }
#stamp.scene-log-host,#scene-log-panel { pointer-events:auto; }
.scene-log-panel span { display:inline;font:inherit; }
.scene-log-panel p.secret [data-action] + [data-action]::before { content:' ·\00a0'; }
.scene-log-panel header b { font-size:inherit; }
@media (orientation:landscape) and (max-height:560px) {
  body.scene-history-inline .scene-log-toggle { height:20px;top:50%;transform:translateY(-50%);padding:0 6px;border-radius:999px;border:1px solid var(--line); }
  .scene-log-toggle .summary,.scene-log-toggle .chevron { display:none; }
}

.scene-log-row { flex:0 0 100%;width:100%;height:24px;margin-top:3px; }
body.scene-history-inline #flow-hint { position:relative; }
body.scene-history-inline .scene-log-toggle { position:absolute;right:0;top:0;height:100%;transform:none;font-size:10px;padding:0 7px;margin:0;background:#0a0c10; }

/* 22.8.1：只保留原行高度，在绝对定位的前情条左边显示省略号。 */
@media (min-width:900px) and (min-height:561px) {
  body.scene-history-inline #flow-hint.flow-plain { padding-right:var(--flow-history-space,0px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
}
@media (orientation:portrait) and (max-width:899px) {
  body.scene-history-wide .scene-log-toggle { max-width:calc(100% - 44px); }
}

@media (min-width:900px) and (min-height:561px) {
  body.scene-history-inline .scene-log-toggle { max-width:clamp(64px,48%,280px); }
}

/* 22.8.4 / B 金色节目牌：三个入口保留真实按钮与键盘操作。 */
body.program-v2284 #flow{display:block!important;top:var(--program-top,150px)!important;left:50%!important;right:auto!important;width:min(780px,calc(100% - 40px));transform:translateX(-50%)!important;translate:none!important;padding:0!important;z-index:32;background:linear-gradient(110deg,#17171cee,#0b1019ed);border:1px solid #b8995566;border-radius:10px;box-shadow:0 6px 28px #0007;text-align:center}
body.program-v2284 #flow>.flow-row,body.program-v2284 #flow>.scene-log-row{display:none!important}
.program-main{display:grid;grid-template-columns:125px 1fr 140px;align-items:center;padding:10px 14px;gap:12px}
.program-main small{display:block;font-size:9px;letter-spacing:.12em;color:#ad9d7b}
.program-main #flow-day{display:block;font-size:19px;color:#edd59c;margin-top:5px;white-space:nowrap}
.program-current{min-width:0}.program-current h2{font-size:23px;color:#f5dfab;letter-spacing:.1em;margin:3px 0;font-weight:700}.program-next b{display:block;font-size:14px;margin-top:6px;color:#c7c3bb}
body.program-v2284 #flow-hint{position:static!important;display:block!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-size:10px!important;line-height:16px!important;color:#9fa8b7!important}
.program-tools{display:flex;justify-content:center;border-top:1px solid #b899552b;gap:10px;padding:3px 8px}
body.program-v2284 #program-tools button{display:inline-flex;align-items:center;justify-content:center;position:relative!important;inset:auto!important;transform:none!important;translate:none!important;margin:0!important;min-width:76px!important;width:auto!important;max-width:none!important;height:28px!important;max-height:none!important;border:0!important;border-radius:5px!important;padding:0 12px!important;background:transparent!important;color:#d9c69d!important;font-size:11px!important;line-height:28px!important;white-space:nowrap}
body.program-v2284 #program-tools button:hover,body.program-v2284 #program-tools button:focus-visible{background:#e8cb7d1f!important;outline:1px solid #e8cb7d!important}
#program-tools .scene-log-toggle strong:before{content:'↶ 前情'}#program-tools .scene-log-toggle strong{font-size:0}#program-tools .scene-log-toggle strong:before{font-size:11px}#program-tools .summary,#program-tools .chevron{display:none!important}
.program-extras{display:flex;justify-content:center;gap:10px;padding:0 10px 6px;font-size:10px;color:#d6c198}.program-extras>div{padding:5px 10px;border:1px solid #b8995533;border-radius:5px;background:#d4b56b09}
.program-classification{font-size:10px;color:#d8bf85;border:1px solid #d8bf8560;border-radius:4px;padding:3px 6px;margin-right:9px;display:inline-block}.program-address{font-size:11px;color:#b4c5d8;margin-left:9px}
.program-extras>div{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;min-width:0;max-width:100%}.program-person{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.program-person img{width:20px;height:20px;flex:none;border-radius:50%;object-fit:cover;border:1px solid #b8995570}.program-address{align-items:center;gap:4px;border:1px solid #72c1ae70;border-radius:4px;padding:3px 6px;background:#162d29;color:#9de2d5}.program-address:not([hidden]){display:inline-flex}.program-address .program-person img{width:18px;height:18px}
body.program-v2284 #sub.program-chime{border-left:3px solid var(--c,#d8bf85);background:#0d1722e8;border-radius:12px;padding:10px 14px;box-shadow:0 5px 24px #0006;max-width:min(620px,calc(100% - 28px))}
body.program-v2284 #sub.program-chime .who{flex-wrap:wrap;row-gap:4px}body.program-v2284 #sub.program-chime .who>*{flex-shrink:0;white-space:nowrap}
.program-chime .program-classification{background:#a8cbe61c;color:#cce8ff}.program-narrator .program-classification{color:#aaaab8;border-color:#aaaab844}
.program-night-order{display:flex;gap:14px;justify-content:center;border-top:1px solid #b8995526;padding:5px 8px;font-size:10px;color:#777f90}.program-night-order span+span:before{content:'›';padding-right:14px}.program-night-order .active{color:#f2d791;text-shadow:0 0 12px #f2d79180}
body.program-v2284 #cast .seat{animation:none!important;opacity:1}.program-v2284 #cast .seat.speak .face{filter:drop-shadow(0 0 8px var(--c));box-shadow:0 0 0 2px var(--c),0 0 20px color-mix(in srgb,var(--c) 65%,transparent);border-radius:50%}.program-v2284 #cast .seat.out{opacity:.45;filter:grayscale(1)}
/* B 的技能符印/对话地址承接旧关系标签；旧标签不再占节目牌的按钮行。 */
body.program-v2284 #tie{display:none!important}
body.program-v2284 #program-tools button{min-height:32px!important}
@media(max-height:560px){body.program-v2284 #cast .turn-pill:not(.turn-low){top:0}}
body.program-v2284 .lead.fallen img{filter:grayscale(1) brightness(.72)!important}body.program-v2284 .lead.fallen img.ghost{display:none!important}
@media(min-width:900px) and (min-height:561px){body.program-v2284 #lead,body.program-v2284 #foil{--tall:.94;--floor:.97}}
body.program-v2284 .scene-den-label,body.program-v2284 .scene-den-light{display:none!important}.program-lamp-beam{position:absolute;left:15%;right:15%;top:var(--program-bottom,300px);bottom:14%;z-index:2;pointer-events:none;clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);background:linear-gradient(#ffe3aa22,#ffe3aa03)}
.program-den-table{position:absolute;z-index:18;border-radius:50%;border:2px solid #a3b7c04a;background:radial-gradient(ellipse at 50% 15%,#324250,#13222b 60%,#081219);box-shadow:0 12px 0 #080f17,0 22px 32px #0009,inset 0 0 25px #e6c78e18;pointer-events:none}
.program-den-table:after{content:'';position:absolute;inset:10%;border:1px solid #c8dbe225;border-radius:inherit}.program-target-card{position:absolute;left:45%;top:20%;min-width:30px;padding:7px 4px;transform:rotate(7deg);border:1px solid #ff6676;background:#21121a;color:#ff9ba6;font-size:10px;z-index:1}
.program-lamp{position:absolute;left:calc(50% - 36px);width:72px;height:24px;z-index:20;background:linear-gradient(#343e4a,#636974);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);pointer-events:none}.program-den-names{position:absolute;left:10%;right:10%;display:flex;justify-content:space-around;gap:5px;z-index:21;font-size:10px;color:#a6b2c4;pointer-events:none}.program-den-names span{padding:4px 8px;background:#090f1ce6;border:1px solid #71849b44;border-radius:5px}.program-den-names .active{color:#ffe0a7;border-color:#e9c893;box-shadow:0 0 16px #e9c89333}
body.program-v2284.den .scene-actor{filter:brightness(.62);transform:scaleX(var(--actor-face,1)) rotateY(9deg);transition:filter .2s,transform .2s;transform-origin:50% 70%}body.program-v2284.den .scene-actor.active{filter:brightness(1.1) drop-shadow(0 0 12px var(--actor-color));transform:scaleX(1) translateY(-8px) scale(1.03)}body.program-v2284.den .scene-actor.program-respond:not(.active){animation:program-nod .65s ease-out}
@keyframes program-nod{0%{translate:0 -4px}45%{translate:0 4px}100%{translate:0 0}}
.program-skill{position:absolute;z-index:22;transform:translate(-50%,-50%);width:130px;height:130px;color:var(--fx);pointer-events:none}.program-skill svg{position:absolute;inset:12%;width:76%;height:76%;fill:#09111a55;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 10px var(--fx));animation:program-sigil .95s ease-out both}.program-skill-ring{position:absolute;inset:0;border:1px solid currentColor;border-radius:50%;box-shadow:0 0 18px color-mix(in srgb,var(--fx) 35%,transparent),inset 0 0 18px color-mix(in srgb,var(--fx) 25%,transparent);animation:program-ring 1s ease-out both}.program-skill-label{position:absolute;left:50%;top:100%;transform:translateX(-50%);font-size:12px;white-space:nowrap;padding:5px 9px;border:1px solid currentColor;background:#0b0e19e8;border-radius:5px;font-weight:500}.program-skill[data-kind=poison] .program-skill-ring{border-style:dashed}.program-skill[data-kind=kill] svg,.program-skill[data-kind=king] svg{stroke-width:3}
@keyframes program-sigil{0%{opacity:0;transform:translateY(-35px) scale(.6)}50%{opacity:1;transform:scale(1.1)}100%{opacity:.75;transform:scale(.85)}}@keyframes program-ring{0%{opacity:0;transform:scale(.5)}45%{opacity:1;transform:scale(1.12)}100%{opacity:.5;transform:scale(1)}}
@media(orientation:portrait) and (max-width:899px){body.program-v2284 #flow{width:calc(100% - 24px)}.program-main{grid-template-columns:66px 1fr 76px;padding:7px 8px;gap:5px}.program-main small{font-size:7px;letter-spacing:.03em}.program-main #flow-day{font-size:13px}.program-current h2{font-size:18px}.program-next b{font-size:10px}.program-current #flow-hint{font-size:9px!important;line-height:14px!important}.program-extras{flex-wrap:wrap;gap:4px;font-size:8px}.program-extras>div{padding:3px 6px}.program-tools{gap:4px}.program-classification{font-size:9px;margin-right:5px}.program-address{font-size:9px;margin-left:5px}.program-skill{width:85px;height:85px}body.program-v2284 #foil{top:calc(var(--program-bottom,290px) - var(--program-shot-top,0px) + 12px)!important}.program-skill-label{font-size:10px}.program-den-names{font-size:8px}.program-den-names span{padding:3px 5px}}
@media(orientation:landscape) and (max-height:560px){body.program-v2284 #flow{width:calc(100% - 70px)}.program-main{grid-template-columns:95px 1fr 110px;padding:3px 8px;gap:8px}.program-main small{display:none}.program-main #flow-day{font-size:12px;margin:0}.program-current h2{font-size:15px;margin:0}.program-current #flow-hint{font-size:8px!important;line-height:12px!important}.program-next b{font-size:11px;margin:0}.program-tools{padding:0;gap:12px}body.program-v2284 #program-tools button{height:23px!important;line-height:23px!important;font-size:10px!important}.program-extras{font-size:8px;gap:8px;padding-bottom:2px}.program-extras>div{padding:2px 8px}.program-night-order{padding:2px;font-size:8px}.program-skill{width:65px;height:65px}.program-skill-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){.program-v2284 *, .program-v2284 *:before,.program-v2284 *:after{animation:none!important;transition:none!important}}

/* 密室的灯/人物/桌在字幕上方；长句完整保留在可滚动字幕里。 */
body.program-v2284.den #sub{top:auto!important;bottom:108px!important;left:50%!important;right:auto!important;width:min(760px,calc(100% - 40px))!important;transform:translateX(-50%)!important;translate:none!important;max-height:170px!important;overflow:auto!important;z-index:25!important}
body.program-v2284.den #sub .line{font-size:20px!important;line-height:1.6!important;max-height:none!important;overflow:visible!important}
@media(orientation:portrait) and (max-width:899px){body.program-v2284.den #sub{width:calc(100% - 28px)!important;bottom:112px!important;max-height:148px!important}body.program-v2284.den #sub .line{font-size:14px!important;line-height:1.65!important}}
@media(orientation:landscape) and (max-height:560px){body.program-v2284.den #sub{bottom:75px!important;max-height:76px!important;width:calc(100% - 90px)!important}body.program-v2284.den #sub .line{font-size:12px!important;line-height:1.5!important}}

@media(orientation:landscape) and (max-height:560px){body.program-v2284 .program-current #flow-hint{display:none!important}body.program-v2284 .program-main{padding:2px 8px}body.program-v2284.den #sub{top:calc(var(--program-bottom,180px) + 10px)!important;bottom:auto!important;left:auto!important;right:22px!important;width:38%!important;transform:none!important;max-height:calc(100vh - var(--program-bottom,180px) - 92px)!important}}

.program-v2284 #who-act.program-addressed{display:none!important}

@media(min-width:900px) and (min-height:561px){body.program-v2284 .shot.sideR #lead{--cx:.67}body.program-v2284 .shot.sideL #lead{--cx:.33}body.program-v2284 .shot.sideR #foil{--cx:.33}body.program-v2284 .shot.sideL #foil{--cx:.67}}

/* 沿原来的#line滚动和随声滚字，不另建一个会裁掉后半句的滚动容器。 */
body.program-v2284.den #sub{--den-line-limit:120;max-height:none!important;overflow:visible!important}
body.program-v2284.den #sub .line{max-height:var(--den-line-max,120px)!important;overflow:auto!important;overscroll-behavior:contain}
@media(orientation:portrait) and (max-width:899px){body.program-v2284.den #sub{--den-line-limit:90}body.program-v2284.den #sub .line{max-height:var(--den-line-max,90px)!important}}
@media(orientation:landscape) and (max-height:560px){body.program-v2284.den #sub{--den-line-limit:54}body.program-v2284.den #sub .line{max-height:var(--den-line-max,54px)!important}}

body.program-v2284 .foil.fallen img{filter:grayscale(1) brightness(.72)!important}

@media(orientation:portrait) and (max-width:899px){.program-skill:not(.self) svg{left:85%;top:25%;width:50%;height:50%}.program-skill[data-kind=shoot] svg,.program-skill[data-kind=king] svg{left:12%;top:12%;width:76%;height:76%}}

.program-skill[data-placed=false]{visibility:hidden}.program-v2284 #program-skill{z-index:9}

/* 22.8.7: native programme strip and filtered, read-only situation board. */
.board-backdrop{position:fixed;inset:0;z-index:220}.board-panel{position:fixed;z-index:221;margin:auto;display:flex;flex-direction:column;overflow:hidden}.board-panel[hidden],.board-backdrop[hidden]{display:none!important}
/* Native CSS study of Radix Themes spacing, segmented surfaces, badges and tables. */
body.saas-interface #flow{height:44px!important;display:block!important;padding:0!important;border:1px solid #35413e!important;border-radius:8px!important;background:#101715f5!important;box-shadow:0 6px 18px #0003!important;color:#dfeae5;font-family:var(--ui,sans-serif)!important}
body.saas-interface #flow>.program-main,body.saas-interface #flow>.program-extras,body.saas-interface #flow>.program-night-order{display:none!important}
.sx-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:42px;padding:4px 6px;box-sizing:border-box}
.sx-steps{display:flex;align-items:center;gap:3px;list-style:none;padding:0;margin:0;min-width:0;font:12px/1.2 var(--ui,sans-serif);letter-spacing:0}
.sx-steps li{display:flex;align-items:center;gap:5px;padding:7px 12px;border-radius:5px;white-space:nowrap;color:#77857e}
.sx-steps .past{color:#9ba5a0}.sx-steps .current{background:#28483b;color:#c9f8df;box-shadow:inset 0 0 0 1px #54836c55}.sx-check{font-size:10px;opacity:.65}
.sx-day{font-size:11px;color:#8ea198;margin-left:12px;white-space:nowrap}.sx-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
body.saas-interface #program-tools.sx-actions button{font:12px/1 var(--ui,sans-serif);letter-spacing:0;height:30px;min-width:56px;padding:0 12px;border:1px solid #3c4842;border-radius:5px;background:#1d2622;color:#d8e1dc;cursor:pointer;white-space:nowrap}
body.saas-interface #program-tools.sx-actions button:last-child{color:#b9f0d1;background:#244233;border-color:#436c54}#program-tools.sx-actions button:focus-visible{outline:2px solid #78d8a4;outline-offset:1px}
body.saas-interface #board-backdrop{background:#030907b8;backdrop-filter:blur(7px)}
body.saas-interface #board-panel.sx-panel{inset:32px 7vw;max-width:1120px;border:1px solid #3b4841;border-radius:14px;background:#101613;box-shadow:0 30px 100px #000a;font:14px/1.5 var(--ui,sans-serif);color:#e1e9e4}
.sx-panel *{box-sizing:border-box;letter-spacing:0}.sx-header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid #2d3731;flex-shrink:0}.sx-title{display:flex;gap:10px;align-items:center}.sx-title h2{font-size:18px;margin:0;font-weight:600}.sx-square{font-size:20px;color:#8ed7ad}.sx-close{width:36px;height:36px;border:1px solid #3b4840;border-radius:7px;background:#1a231d;color:#c1cfc6;font:24px/1 sans-serif!important;cursor:pointer}
.sx-panel button:focus-visible,.sx-body:focus-visible{outline:2px solid #80d5a7;outline-offset:-2px}.sx-body{padding:22px;min-height:0;overflow:auto;overscroll-behavior:contain;flex:1;scrollbar-width:thin;scrollbar-color:#53685b #111a14}
.sx-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px}.sx-metric{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#19221c;border:1px solid #303f34;border-radius:8px}.sx-metric>span{font-size:12px;color:#a1b0a6}.sx-metric>b{font-size:24px;font-weight:500;font-variant-numeric:tabular-nums}.sx-metric.alive>b{color:#91dfb5}.sx-metric.out>b{color:#aeb8b1}
.sx-workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start}.sx-section-heading{height:36px;display:flex;justify-content:space-between;align-items:start;gap:8px}.sx-section-heading h3{font-size:14px;margin:0;font-weight:600}.sx-section-heading>span{font-size:11px;color:#92a498;white-space:nowrap}
.sx-table{width:100%;border:1px solid #303e34;border-spacing:0;border-radius:8px;overflow:hidden;background:#141e17;font-size:13px;table-layout:auto}.sx-table th,.sx-table td{text-align:left;padding:9px 12px;border-bottom:1px solid #2a352d;white-space:nowrap;font-weight:400}.sx-table thead th{font-size:11px;color:#a1b2a6;background:#1b271f;padding:10px 12px}.sx-table tbody tr:last-child>*{border-bottom:0}.sx-table tbody tr:nth-child(even){background:#19221b}.sx-table .is-out{color:#99a69c;background:#111914!important}.sx-person{display:flex;align-items:center;gap:9px}.sx-person b{font-weight:500}.sx-number{font-size:10px;color:#859a8c;font-variant-numeric:tabular-nums}.sx-avatar{width:28px;height:28px;object-fit:cover;border-radius:7px;background:#28392c;flex-shrink:0}.is-out .sx-avatar{filter:grayscale(1);opacity:.65}.sx-badge{display:inline-flex;align-items:center;padding:2px 7px;line-height:18px;font-size:11px;border:1px solid #405046;border-radius:5px;white-space:nowrap;color:#b9c9be;background:#243329}.sx-badge.alive{color:#9fdfb6;border-color:#305840;background:#193323}.sx-badge.out{color:#aab5ae;border-color:#414b44;background:#242d27}.sx-badge.wolf{color:#f3acc9;border-color:#704057;background:#3b2230}.sx-badge.role{color:#becbe3;border-color:#455269;background:#252e3e}.sx-badge.sheriff{font-size:9px;padding:0 4px;color:#e7ce92;background:#3b3321;border-color:#70613d}.sx-badge.view{color:#9bdcb9;background:#1d3528;border-color:#3b5a46}.sx-badge.hidden-role{background:transparent;color:#86958a;border-color:#3c4840}
.sx-tally{border:1px solid #344639;background:#19271e;border-radius:8px;padding:16px;margin-bottom:14px}.sx-tally>small{font-size:11px;color:#9cb8a6}.sx-result{margin-top:14px}.sx-result>div:first-child{display:flex;align-items:center;gap:9px}.sx-result b{font-size:13px;font-weight:500}.sx-result strong{margin-left:auto;font-size:18px;color:#b2edcc;font-weight:500}.sx-track{height:5px;border-radius:5px;background:#2a3b2f;margin-top:8px;overflow:hidden}.sx-track i{display:block;height:100%;background:#79c79b;border-radius:inherit}.sx-tally>p,.sx-notice{color:#96a99c;font-size:12px;line-height:1.7;margin:9px 0 0}.sx-empty-icon{font-size:28px;color:#688c75;margin-bottom:7px}.sx-tally>b{display:block;font-size:13px;font-weight:500}.sx-vote-table td{padding:8px 12px}.sx-weight{font-variant-numeric:tabular-nums;color:#b2debf}.sx-footer{display:flex;justify-content:space-between;padding:12px 22px;border-top:1px solid #2d3c31;font-size:11px;color:#8ea497;flex-shrink:0}
@media(max-width:899px){
 body.saas-interface #flow{height:44px!important;height:32px!important}.sx-bar{height:30px;padding:2px 3px;gap:4px}.sx-steps{gap:1px;font-size:10px}.sx-steps li{padding:5px 5px;gap:3px}.sx-check{font-size:8px}.sx-day{font-size:10px;margin-left:6px}.sx-actions{gap:3px}body.saas-interface #program-tools.sx-actions button{height:26px;min-width:34px;font-size:10px;padding:0 5px}#program-tools.sx-actions button:first-child{min-width:44px!important}
 body.saas-interface #board-panel.sx-panel{inset:12px 10px;border-radius:10px}.sx-header{padding:10px 12px}.sx-title{gap:8px}.sx-title h2{font-size:16px}.sx-close{width:34px;height:34px}.sx-body{padding:12px}.sx-summary{gap:7px;margin-bottom:16px}.sx-metric{padding:10px;display:block}.sx-metric>span{font-size:10px;display:block}.sx-metric>b{font-size:21px;line-height:1.4}.sx-workspace{gap:16px}.sx-section-heading{height:30px}.sx-section-heading h3{font-size:13px}.sx-section-heading>span{font-size:10px}.sx-table{font-size:12px}.sx-table th,.sx-table td{padding:7px 8px}.sx-table thead th{padding:8px;font-size:10px}.sx-person{gap:6px}.sx-avatar{width:26px;height:26px}.sx-badge{font-size:10px;padding:1px 6px;line-height:17px}.sx-footer{padding:10px 12px;font-size:10px}.sx-tally{padding:12px}.sx-result strong{font-size:16px}
}
@media(orientation:portrait) and (max-width:899px){.sx-steps li[data-near=false]{display:none}.sx-check{display:none}.sx-day{display:none}.sx-steps .current{font-size:11px;padding:5px 8px}.sx-steps .future:before{content:'›';font-size:10px}.sx-workspace{grid-template-columns:1fr}.sx-title .view{font-size:10px}.sx-roster .sx-table{table-layout:fixed}.sx-roster .sx-table th:first-child{width:48%}.sx-roster .sx-table th:nth-child(2){width:24%}.sx-roster .sx-table th:nth-child(3){width:28%}.sx-footer span:last-child{display:none}.sx-ending{display:flex!important}}
@media(orientation:landscape) and (max-height:560px){body.saas-interface #board-panel.sx-panel{inset:8px 12px}.sx-header{padding:7px 14px}.sx-body{padding:12px 14px}.sx-summary{gap:10px;margin-bottom:12px}.sx-metric{display:flex;padding:7px 12px}.sx-metric>b{font-size:20px}.sx-metric>span{font-size:11px}.sx-workspace{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}.sx-footer{padding:7px 14px}.sx-table th,.sx-table td{padding:6px 9px}}
.sx-quick{display:none}
@media(orientation:portrait) and (max-width:899px){.sx-day{display:block;font-size:9px;margin-left:5px}.sx-quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;margin-bottom:14px;border:1px solid #3c5845;border-radius:7px;background:#1e3024;font-size:11px;color:#a2b7aa}.sx-quick b{color:#bae5cc;font-weight:500}.sx-summary{margin-bottom:12px}}
@media(min-width:900px) and (min-height:561px){.sx-roster .sx-table th,.sx-roster .sx-table td{padding-top:7px;padding-bottom:7px}}

body.saas-interface #program-tools.sx-actions{position:static!important;display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:nowrap!important;gap:3px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;margin:0!important}
body.saas-interface #program-tools.sx-actions button{position:static!important;transform:none!important;margin:0!important;min-height:0!important;font-family:var(--ui,sans-serif)!important;box-shadow:none!important;flex:none!important;width:auto!important}
body.saas-interface #flow>.scene-den-label{display:none!important}
.sx-steps .sx-day{padding:0;margin-left:8px;color:#8ea198}.sx-steps .sx-day:before{content:none}
.sx-round-picker{min-width:0;max-width:65%;font:11px var(--ui,sans-serif)!important;background:#1d2c23;color:#c8dbd0;border:1px solid #405847;border-radius:5px;padding:4px 6px}
.sx-round-label{font-size:11px;color:#92a498;margin:0 0 8px}.sx-round-picker:focus-visible{outline:2px solid #80d5a7}.sx-round-picker:disabled{opacity:.6}
.sx-person .sheriff{margin-left:auto}.sx-person b{min-width:0}.sx-roster,.sx-votes{min-width:0}
.dock #prev svg,.dock #next svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.program-v2284.saas-interface #program-tools.sx-actions button{pointer-events:auto!important;border:1px solid #3c4842!important;border-radius:5px!important;background:#1d2622!important;color:#d8e1dc!important;font:12px/1 var(--ui,sans-serif)!important;height:30px!important;min-width:56px!important;padding:0 12px!important}
body.program-v2284.saas-interface #program-tools.sx-actions #board-entry{color:#b9f0d1!important;background:#244233!important;border-color:#436c54!important}
body.program-v2284.saas-interface #program-tools .scene-log-toggle strong:before{content:'前情';font-size:12px}
.sx-steps .sx-ending:before{content:none!important}
@media(max-width:899px),(orientation:landscape) and (max-height:560px){body.saas-interface #flow{height:32px!important}.sx-bar{height:30px;padding:2px 3px;gap:4px}.sx-steps{gap:1px;font-size:10px}.sx-steps li{padding:5px;gap:3px}.sx-check{font-size:8px}.sx-day{font-size:10px}body.saas-interface #program-tools.sx-actions button{height:26px;min-width:34px;font-size:10px;padding:0 5px}}
@media(orientation:portrait) and (max-width:899px){.sx-person{gap:4px}.sx-roster .sx-table th:first-child{width:49%}.sx-roster .sx-table th:nth-child(2){width:24%}.sx-roster .sx-table th:nth-child(3){width:27%}.sx-person .sheriff{padding:0 2px;margin-left:0}.sx-steps .sx-day{font-size:9px;padding:0;margin-left:4px}}
@media(max-width:899px),(orientation:landscape) and (max-height:560px){body.program-v2284.saas-interface #program-tools.sx-actions button{height:26px!important;min-width:34px!important;font-size:10px!important;padding:0 5px!important}body.program-v2284.saas-interface #program-tools .scene-log-toggle strong:before{font-size:10px}html.discord-activity body.saas-interface #board-panel.sx-panel{top:max(74px,calc(var(--discord-safe-area-inset-top,64px) + 10px))}}

/* 22.8.8: one responsive layout. Breakpoints set budgets; geometry is shared. */
.stage{--layout-columns:0;--layout-gap:24;--layout-font:20;--layout-text-budget:190;--layout-body-min:0}
@media(max-width:899px){.stage{--layout-gap:14;--layout-font:18;--layout-text-budget:160;--av:24px!important;--large-cast-h:46px}.top{height:28px!important}}
@media(orientation:landscape) and (max-height:600px){.stage{--layout-columns:2;--layout-gap:14;--layout-font:16;--layout-text-budget:160;--layout-body-min:300;--layout-scene-center:75%;--av:20px!important}.top{height:28px!important}}
/* ponytail: use the wrapper's inset when supplied; observed Activity header fallback is 64px. */
html.discord-activity{--top:max(74px,calc(var(--discord-safe-area-inset-top,64px) + 10px),env(safe-area-inset-top))}
body #stage #cast{left:var(--left)!important;right:var(--right)!important;width:auto!important;display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0!important;transform:none!important}
body #stage #cast .seat{min-width:0}body #stage #cast .face{margin:auto}
body #stage #flow{display:block!important;width:min(1100px,calc(100% - 28px))!important}
body #stage #flow .sx-bar{width:100%}.sx-steps{overflow:hidden;flex-shrink:1}.sx-actions{flex-shrink:0}
body #stage #flow>.flow-row,body #stage #flow>#flow-hint{display:none!important}
body #stage #program-tools.sx-actions button{touch-action:manipulation}
body #stage #program-tools .scene-log-toggle{filter:none}
body.posterup #stage #flow{visibility:hidden;pointer-events:none}
body #stage #sub{position:fixed!important;left:var(--layout-caption-x)!important;right:auto!important;top:auto!important;bottom:var(--layout-caption-bottom)!important;width:var(--layout-caption-w)!important;max-width:none!important;max-height:none!important;transform:none!important;translate:none!important;padding:10px 14px!important;overflow:visible!important}
body #stage #who{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-bottom:6px}
body #stage #line{font-size:calc(var(--layout-font)*1px)!important;line-height:1.55!important;max-height:var(--layout-line-h,160px)!important;overflow:auto!important}
body #stage #line,body #stage #think-text{padding-block:3px!important;scroll-behavior:auto!important;overscroll-behavior:contain;mask-image:linear-gradient(to bottom,transparent var(--text-crop,0px),#000 var(--text-crop,0px))!important}
body #stage #think{position:fixed!important;left:var(--layout-thought-x)!important;top:calc(var(--program-bottom) + 12px)!important;width:var(--layout-thought-w)!important;max-width:none!important;transform:none!important;translate:none!important}
body #stage #think-text{font-size:clamp(14px,1.2vw,18px)!important;line-height:1.6!important;max-height:var(--layout-thought-h)!important;overflow:auto!important}
body #stage #think-d1,body #stage #think-d2,body #stage #think-d3{display:none!important}
body.review-single #stage #ensemble,body.review-single #stage #moment.scene-owned{display:none!important}body.review-single #stage #lead{display:block!important}
body.stage-opening #stage #ensemble{position:fixed!important;inset:0!important}
body.stage-opening #stage #ensemble>img,body.review-group #stage #scene-people img{width:var(--group-w)!important;height:var(--group-h)!important;left:var(--group-x)!important;top:var(--group-y)!important;clip-path:var(--group-clip)!important;z-index:var(--group-z)!important;transform:none!important}
body.review-group #stage #moment{position:fixed!important;left:var(--layout-scene-center,50%)!important;top:calc(var(--program-bottom) + 28px)!important;transform:translate(-50%,-50%)!important;font-size:clamp(24px,5vw,48px)!important}
/* Cards occupy the stage below the programme, never the header behind a title. */
body #stage #card{inset:0;z-index:35}
body #stage #card b{font-size:clamp(32px,9vh,88px)}
body #stage #card small,body #stage #card span{max-width:calc(100vw - 40px);overflow-wrap:anywhere;letter-spacing:.12em}
/* Shared den, the same decoded group and measured caption on every screen. */
body.den #stage #scene-people{visibility:hidden}
#stage-den{position:fixed;inset:0;z-index:17;pointer-events:none}#stage-den[hidden]{display:none!important}
#stage-den img{position:absolute;max-width:none;filter:brightness(.72) saturate(.8)}#stage-den img.active{filter:brightness(1.15) drop-shadow(0 0 15px #ffe0aa80)}
body.den #stage .program-den-table{left:var(--layout-table-x)!important;top:var(--layout-table-y)!important;width:var(--layout-table-w)!important;height:32px!important}
body.den #stage .program-lamp{left:var(--layout-lamp-x)!important;top:var(--layout-lamp-y)!important;width:44px;height:15px}
body.den #stage .program-lamp-beam{left:var(--layout-beam-x)!important;top:var(--layout-lamp-y)!important;width:130px!important;height:var(--layout-beam-h)!important;right:auto!important;background:linear-gradient(#ffe3a52b,transparent);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
body.den #stage .program-den-names{left:var(--layout-table-x)!important;top:calc(var(--layout-table-y) + 34px)!important;width:var(--layout-table-w)!important;right:auto!important;gap:0;font-size:10px}body.den #stage .program-den-names span{padding:2px 4px}
body.den #stage #think,body.den #stage #sub{top:var(--layout-den-caption-y)!important;bottom:auto!important;z-index:25!important}
/* Panels are independent of portraits and playback. Header stays clickable. */
body #stage #howto-card,body #stage #scene-log-panel{position:fixed!important;top:calc(var(--program-bottom) + 8px)!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(720px,calc(100% - 28px))!important;max-width:none!important;max-height:calc(100dvh - var(--program-bottom) - var(--dock) - var(--bottom) - 24px)!important;overflow:auto!important;z-index:210!important;background:#0d1412fa!important;box-shadow:0 12px 60px #000b}
body #stage #stamp.scene-log-host{position:static!important;transform:none!important;z-index:210!important}
body #stage #howto-card .panel-close{float:right;position:sticky;top:0;min-width:32px;min-height:32px;background:#24352b;border:1px solid #5e7868;border-radius:6px;color:white;font:22px/1 sans-serif;cursor:pointer}
body #stage #howto-card> b{display:block;padding-right:38px}body #stage #howto-card small{white-space:normal}
body #stage #howto-card .cards{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
body #stage #howto-card .cards li{min-width:0}body #stage #howto-card .cards p{font-size:12px}
body #stage #sheet{top:max(12px,var(--top))!important;bottom:12px!important;max-height:none!important;z-index:231}body #stage #sheet-back{z-index:230}
html.discord-activity body #board-panel.sx-panel{top:max(74px,calc(var(--discord-safe-area-inset-top,64px) + 10px))!important}
body #stage #who-card{z-index:210!important}
@media(max-width:899px){
 body #stage #cast{top:calc(var(--top) + 32px)!important;padding:2px 0 8px!important}body #stage #cast .nm{font-size:8px;line-height:11px;margin-top:2px;letter-spacing:0}
 body #stage #cast .turn-pill{top:calc(100% + 1px)!important;font-size:7px;line-height:9px;padding:0 2px}body #stage #cast .stampx{top:calc(100% + 11px)!important;font-size:7px}
 body #stage #flow{height:36px!important}.sx-bar{height:34px}.sx-steps .sx-day{display:none}
 body #stage #shot{top:calc(var(--program-bottom) + 6px)!important}body #stage #lead{--cx:.68}
 body #stage #sub{padding:10px 12px!important}
}
@media(orientation:landscape) and (max-height:600px){
 body #stage #cast{top:calc(var(--top) + 28px)!important;padding-bottom:6px!important}body #stage #cast .nm{font-size:9px;line-height:12px}
 body #stage #flow{height:36px!important}.sx-bar{height:34px}
 body #stage #shot{position:fixed;inset:0!important}
 body #stage #lead{position:fixed;top:var(--layout-caption-top)!important;bottom:var(--layout-caption-bottom)!important;height:auto!important;width:46%!important;--cx:.5!important}
 body #stage #shot.sideR #lead{left:52%!important;right:auto!important}body #stage #shot.sideL #lead{left:2%!important;right:auto!important}
 body #stage #sub,body.den #stage #sub,body.den #stage #think{top:var(--layout-caption-top)!important;bottom:auto!important}
 body #stage #foil{display:none}
 body #stage #howto-card{padding:10px 14px}body #stage #howto-card .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}