/* 谁是卧底 · 网页版。画风照《大肥鱼运营日志》：Q 版立绘、会议室背景、白色卡片、红章、综艺字（金字描深蓝边）。
   舞台是固定像素（横屏 1920×1080 / 竖屏 1080×1920），整体缩放到窗口，录屏时和视频帧一一对应。 */
@font-face { font-family: 'NotoSC'; src: url('assets/fonts/NotoSansSC-sub.woff') format('woff'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('assets/fonts/Outfit.woff') format('woff'); font-weight: 100 900; font-display: swap; }

:root {
  --navy: #1b2a55; --ink: #24304f; --acc: #4D6BFE; --red: #E23A3A; --gold: #FFD54A; --green: #20B26B; --pink: #FB7299;
  --orange: #F08A3E; --claude: #E8743B; --paper: #fffdf8; --mute: #8a91a8; --line: #e6e2d8;
  --inner: #eaf7f5; --inner-b: #4fb8a9; --inner-ink: #1f5b55;
  --shadow: 0 10px 28px rgba(4, 12, 40, .32);
  --font: 'NotoSC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --num: 'Outfit', 'NotoSC', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #070c1c; overflow: hidden; font-family: var(--font); color: var(--ink); }
button, input, select, textarea { font-family: inherit; }
[hidden] { display: none !important; }

#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #0b1430; isolation: isolate; }
#stage.land { width: 1920px; height: 1080px; }
#stage.port { width: 1080px; height: 1920px; }
.bg { position: absolute; inset: 0; background: url('assets/bg/bg_meeting.webp') center/cover no-repeat; filter: saturate(1.05); }
#stage.port .bg { background-position: 38% center; }
.bg-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 16, 44, .55) 0%, rgba(8, 16, 44, .18) 34%, rgba(8, 16, 44, .35) 70%, rgba(8, 16, 44, .82) 100%); }

/* —— 综艺字 —— */
.zy { position: relative; display: inline-block; font-weight: 900; color: var(--gold); letter-spacing: .04em; z-index: 0; }
.zy::before { content: attr(data-t); position: absolute; inset: 0; z-index: -1; -webkit-text-stroke: .2em var(--navy); color: var(--navy);
  text-shadow: 0 .09em 0 var(--navy), 0 .16em .12em rgba(4, 12, 40, .45); }
.zy.red { color: #fff; } .zy.red::before { -webkit-text-stroke-color: var(--red); color: var(--red); text-shadow: 0 .09em 0 #9b1c1c, 0 .16em .12em rgba(4, 12, 40, .45); }
.zy.white { color: #fff; }

/* —— 顶栏 —— */
#top { position: absolute; left: 32px; right: 32px; top: 18px; height: 72px; display: flex; align-items: center; gap: 22px; z-index: 5; }
.brand { display: flex; align-items: center; gap: 16px; }
.brand .zy { font-size: 54px; }
.brand .sub { font-size: 22px; font-weight: 800; color: #fff; background: rgba(27, 42, 85, .78); padding: 6px 14px; border-radius: 999px; }
.phase { font-size: 28px; font-weight: 900; color: var(--navy); background: #fff; padding: 8px 22px; border-radius: 16px; box-shadow: var(--shadow); white-space: nowrap; }
.chips { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.chip { font-size: 22px; font-weight: 800; padding: 8px 16px; border-radius: 14px; background: rgba(255, 255, 255, .94); color: var(--navy); box-shadow: var(--shadow); white-space: nowrap; }
.chip b { font-weight: 900; }
.chip .w-civ { color: var(--acc); } .chip .w-spy { color: var(--red); }
.chip.dark { background: rgba(27, 42, 85, .82); color: #fff; }
.chip.mock { background: #fff3c4; color: #8a5a00; }
.chip .num { font-family: var(--num); }

/* —— 座位 —— */
#seats { position: absolute; left: 24px; right: 24px; top: 104px; height: 236px; display: flex; justify-content: center; gap: 14px; z-index: 4; }
.seat { position: relative; width: 214px; height: 228px; background: var(--paper); border-radius: 22px; box-shadow: var(--shadow); padding: 14px 10px 10px;
  display: flex; flex-direction: column; align-items: center; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), filter .4s, opacity .4s, box-shadow .3s; }
.seats-9 .seat, .seats-10 .seat { width: 178px; }
.seat .num { position: absolute; left: 10px; top: 10px; width: 40px; height: 40px; border-radius: 12px; background: var(--c); color: #fff;
  font: 900 24px/40px var(--num); text-align: center; }
.seat .av { width: 104px; height: 104px; border-radius: 50%; background: #e9eefc; border: 6px solid var(--c); overflow: hidden; flex: none; }
.seat .av img { width: 100%; height: 100%; display: block; }
.seat .nm { margin-top: 6px; font-size: 27px; font-weight: 900; color: var(--c); line-height: 1.15; white-space: nowrap; }
.seat .md { font-size: 15px; font-weight: 700; color: var(--mute); font-family: var(--num); white-space: nowrap; }
.seat .word { margin-top: auto; max-width: 100%; font-size: 21px; font-weight: 900; padding: 3px 12px; border-radius: 10px; background: #eef1f8; color: var(--navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .word.spy { background: #ffe3e3; color: var(--red); }
.seat .word.blank { background: #f1f1f1; color: #777; border: 2px dashed #bbb; }
.seat .word.you { background: #fff2c2; color: #8a5a00; }
.seat .rtag { position: absolute; right: 10px; top: 12px; font-size: 17px; font-weight: 900; color: #fff; background: var(--red); padding: 2px 9px; border-radius: 8px; }
.seat .rtag.blank { background: #888; }
.seat .rtag.you { background: #d99a00; }
.seat .vcount { position: absolute; right: -10px; top: 70px; min-width: 58px; height: 58px; border-radius: 29px; background: var(--red); color: #fff;
  font: 900 36px/58px var(--num); text-align: center; box-shadow: 0 6px 14px rgba(160, 20, 20, .45); border: 4px solid #fff; transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.8, .5, 1); }
.seat .vcount.on { transform: scale(1); }
.seat .vcount.bump { animation: bump .45s cubic-bezier(.2, 1.8, .5, 1); }
@keyframes bump { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
.seat .vto { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%) scale(0); background: var(--navy); color: #fff; font-size: 19px; font-weight: 900;
  padding: 4px 12px; border-radius: 10px; white-space: nowrap; transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
.seat .vto.on { transform: translateX(-50%) scale(1); }
.seat .vto.fail { background: #9a86c8; }
.seat .dots { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); background: #fff; border-radius: 14px; padding: 2px 12px; font: 900 26px/1 var(--num);
  color: var(--c); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); display: none; }
.seat.thinking .dots { display: block; animation: dots 1s infinite steps(4); }
.seat.speaking { transform: translateY(10px) scale(1.07); box-shadow: 0 0 0 6px var(--c), var(--shadow); z-index: 2; }
.seat.cand { cursor: pointer; box-shadow: 0 0 0 4px #ffd54a, var(--shadow); }
.seat.cand:hover { transform: translateY(-4px); }
.seat.picked { box-shadow: 0 0 0 8px var(--red), var(--shadow); transform: translateY(-6px) scale(1.04); }
.seat.pk { box-shadow: 0 0 0 6px var(--orange), var(--shadow); }
.seat.out { filter: grayscale(1) brightness(.92); opacity: .78; }
.seat .ostamp { position: absolute; left: 50%; top: 66px; transform: translateX(-50%) rotate(-14deg); display: none; }
.seat.out .ostamp { display: block; animation: slam .35s cubic-bezier(.2, 1.4, .5, 1) both; }
.seat.out .ostamp .stamp { font-size: 34px; }
.seat .hu { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #ffe7a0, #f3b73a); color: #7a4a00; font-size: 52px; font-weight: 900; }
@keyframes dots { 0% { clip-path: inset(0 75% 0 0); } 100% { clip-path: inset(0 0 0 0); } }

/* —— 红章 —— */
.stamp { display: inline-block; color: var(--red); font-weight: 900; line-height: 1.15; padding: .12em .45em; border: .09em solid var(--red); border-radius: .2em;
  background: rgba(255, 253, 248, .9); box-shadow: inset 0 0 0 .06em #fff, inset 0 0 0 .1em var(--red); letter-spacing: .06em; white-space: nowrap; }
.stamp.gold { color: #b07800; border-color: #d8a300; box-shadow: inset 0 0 0 .06em #fff, inset 0 0 0 .1em #d8a300; }
.stamp.blue { color: var(--acc); border-color: var(--acc); box-shadow: inset 0 0 0 .06em #fff, inset 0 0 0 .1em var(--acc); }
@keyframes slam { 0% { transform: translateX(-50%) rotate(-14deg) scale(2.6); opacity: 0; } 55% { opacity: 1; transform: translateX(-50%) rotate(-14deg) scale(.92); } 100% { transform: translateX(-50%) rotate(-14deg) scale(1); } }
@keyframes slam2 { 0% { transform: rotate(-10deg) scale(2.6); opacity: 0; } 55% { opacity: 1; transform: rotate(-10deg) scale(.92); } 100% { transform: rotate(-10deg) scale(1); } }

/* —— 说话的人 —— */
#spk { position: absolute; left: 24px; top: 350px; width: 500px; height: 640px; z-index: 3; pointer-events: none; }
#spkImg { position: absolute; left: 50%; bottom: 40px; max-width: 480px; max-height: 590px; transform: translateX(-50%); filter: drop-shadow(0 14px 18px rgba(2, 10, 36, .45));
  transition: opacity .25s; transform-origin: 50% 100%; }
#spkImg.talk { animation: bob .42s ease-in-out infinite alternate; }
#spkImg.glitch { animation: glitch .18s steps(2) infinite; }
#spkImg.gray { filter: grayscale(1) drop-shadow(0 14px 18px rgba(2, 10, 36, .45)); }
#spkImg.enter { animation: enter .45s cubic-bezier(.2, 1.4, .5, 1); }
.spk-glow { position: absolute; left: 50%; bottom: 20px; width: 420px; height: 70px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 213, 74, .55), transparent); }
#spkName { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 30px; font-weight: 900; color: #fff; background: var(--c, var(--navy));
  padding: 6px 22px; border-radius: 14px; white-space: nowrap; box-shadow: var(--shadow); }
#spkName:empty { display: none; }
#spkName small { font: 700 18px var(--num); opacity: .85; margin-left: 8px; }
#spkHuman { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); }
.hu-av { width: 300px; height: 300px; border-radius: 50%; background: linear-gradient(160deg, #ffe7a0, #f3b73a); border: 10px solid #fff; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center; font-size: 150px; font-weight: 900; color: #7a4a00; }
@keyframes bob { from { transform: translateX(-50%) translateY(0) scaleY(1); } to { transform: translateX(-50%) translateY(-10px) scaleY(1.015); } }
@keyframes enter { from { transform: translateX(-50%) translateY(40px) scale(.9); opacity: 0; } to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; } }
@keyframes glitch { 0% { transform: translateX(-50%) translate(4px, -2px); filter: hue-rotate(40deg) drop-shadow(-6px 0 0 rgba(0, 255, 255, .5)); }
  100% { transform: translateX(-50%) translate(-4px, 2px); filter: hue-rotate(-30deg) drop-shadow(6px 0 0 rgba(255, 0, 120, .5)); } }

/* —— 内心 / 发言 两张卡 —— */
#cards { position: absolute; left: 540px; top: 420px; width: 950px; display: flex; gap: 24px; align-items: flex-start; z-index: 4; }
.card { position: relative; flex: 1; min-height: 300px; border-radius: 26px; padding: 18px 26px 16px; box-shadow: var(--shadow); transition: opacity .25s, transform .3s; }
.card .lab { display: flex; align-items: baseline; gap: 12px; font-size: 25px; font-weight: 900; }
.card .lab em { font-style: normal; font-size: 17px; font-weight: 700; opacity: .7; }
.card .txt { margin-top: 12px; font-size: 40px; font-weight: 800; line-height: 1.38; min-height: 1.4em; word-break: break-all; }
.card .foot { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; font-size: 18px; font-weight: 800; }
.card .foot span { padding: 3px 10px; border-radius: 8px; background: rgba(27, 42, 85, .08); }
.card .foot .warn { background: #ffe3e3; color: var(--red); }
.card .foot .ok { background: #dff5e9; color: #157a48; }
.card .foot .model { background: rgba(27, 42, 85, .82); color: #fff; font-family: var(--num); }
.card.inner { background: var(--inner); border: 4px dashed var(--inner-b); color: var(--inner-ink); }
.card.inner::after { content: ''; position: absolute; left: -36px; top: 92px; width: 26px; height: 26px; border-radius: 50%; background: var(--inner); border: 4px dashed var(--inner-b); }
.card.inner .txt { font-size: 35px; font-weight: 700; }
.card.inner.locked .txt { color: #8fb3ae; font-size: 28px; }
.card.speech { background: #fff; border: 4px solid var(--c, var(--navy)); }
.card.speech .lab { color: var(--c, var(--navy)); }
.card.speech::after { content: ''; position: absolute; left: -26px; top: 80px; border: 18px solid transparent; border-right: 26px solid var(--c, var(--navy)); border-left: 0; }
.card.speech .txt { color: var(--navy); font-size: 48px; font-weight: 900; }
.card.speech .txt.muted { color: #aaa; text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 4px; }
.card.speech .txt.fail, .vb-row .rs.fail, .log-line.fail .t { color: #8f7bc6; font-weight: 900; letter-spacing: .02em; animation: flick 1.4s infinite; }
.card .vstamp { position: absolute; right: 18px; bottom: 14px; font-size: 40px; animation: slam2 .35s cubic-bezier(.2, 1.4, .5, 1) both; }
.card.dim { opacity: .35; }
.card .caret::after { content: '▍'; color: currentColor; opacity: .6; animation: blink .8s infinite; }
.thinking-txt { color: var(--mute); font-size: 30px; font-weight: 800; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes flick { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 50% { opacity: .35; } 53% { opacity: 1; } }

/* —— 投票板 —— */
#voteBoard { position: absolute; left: 530px; top: 352px; width: 960px; height: 632px; background: rgba(255, 253, 248, .97); border-radius: 26px; box-shadow: var(--shadow);
  padding: 18px 26px; z-index: 4; display: flex; flex-direction: column; }
.vb-title { font-size: 30px; font-weight: 900; color: var(--navy); display: flex; align-items: center; gap: 12px; }
.vb-title .tip { font-size: 18px; color: var(--mute); font-weight: 700; }
.vb-focus { margin-top: 10px; min-height: 200px; background: #fff; border: 4px solid var(--c, var(--line)); border-radius: 22px; padding: 14px 20px; }
.vb-focus:empty { display: none; }
.vf-head { display: flex; align-items: center; gap: 12px; font-size: 30px; font-weight: 900; }
.vf-head img, .vf-head .huav { width: 62px; height: 62px; border-radius: 50%; border: 5px solid var(--c); display: block; }
.vf-head .huav { background: linear-gradient(160deg, #ffe7a0, #f3b73a); color: #7a4a00; text-align: center; line-height: 52px; font-size: 28px; }
.vf-head .n { color: var(--c); }
.vf-head .arrow { color: var(--red); font-size: 38px; }
.vf-head .meta { margin-left: auto; font: 800 17px var(--num); color: var(--mute); }
.vf-reason { margin-top: 8px; font-size: 34px; font-weight: 900; color: var(--navy); line-height: 1.3; }
.vf-reason.fail { color: #8f7bc6; animation: flick 1.4s infinite; }
.vf-inner { margin-top: 8px; font-size: 24px; font-weight: 700; color: var(--inner-ink); background: var(--inner); border: 3px dashed var(--inner-b); border-radius: 14px; padding: 8px 14px; line-height: 1.35; }
.vb-rows { margin-top: 10px; flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; align-content: start; overflow: hidden; }
.vb-row { display: flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 14px; background: #fff; border: 2px solid var(--line); animation: rowin .35s cubic-bezier(.2, 1.4, .5, 1) both; min-width: 0; }
.vb-row img, .vb-row .huav { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--c); display: block; flex: none; }
.vb-row .huav { background: linear-gradient(160deg, #ffe7a0, #f3b73a); color: #7a4a00; font-weight: 900; font-size: 18px; text-align: center; line-height: 30px; }
.vb-row .n { font-size: 21px; font-weight: 900; color: var(--c); white-space: nowrap; }
.vb-row .arrow { font-size: 24px; font-weight: 900; color: var(--red); }
.vb-row .rs { font-size: 18px; font-weight: 700; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.vb-row .rs.fail { color: #8f7bc6; }
.vb-row.abstain .arrow, .vb-row.abstain .n2 { color: #999; }
.vb-row.now { border-color: var(--c); box-shadow: 0 0 0 3px var(--c); }
.vb-sum { font-size: 25px; font-weight: 900; color: var(--red); min-height: 34px; margin-top: 6px; }
.vb-wait { font-size: 28px; font-weight: 800; color: var(--mute); padding: 30px 6px; }
@keyframes rowin { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* —— 发言记录 —— */
#log { position: absolute; right: 24px; top: 352px; width: 382px; height: 632px; background: rgba(255, 253, 248, .94); border-radius: 26px; box-shadow: var(--shadow);
  padding: 16px 18px; z-index: 4; display: flex; flex-direction: column; }
.log-title { font-size: 26px; font-weight: 900; color: var(--navy); }
.log-body { margin-top: 8px; flex: 1; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 5px; }
.log-body::-webkit-scrollbar { display: none; }
.log-h { margin-top: 8px; font-size: 19px; font-weight: 900; color: #fff; background: var(--navy); align-self: flex-start; padding: 2px 12px; border-radius: 8px; }
.log-line { font-size: 21px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.log-line b { color: var(--c); font-weight: 900; }
.log-line.host { color: var(--claude); font-weight: 800; font-size: 19px; }
.log-line.muted .t { color: #aaa; text-decoration: line-through; }
.log-line .flag { font-size: 15px; color: var(--red); font-weight: 900; margin-left: 4px; }

/* —— 主持人条 —— */
#hostBar { position: absolute; left: 24px; right: 24px; bottom: 16px; height: 74px; background: rgba(255, 253, 248, .97); border-radius: 20px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 12px; padding: 0 20px 0 10px; z-index: 6; }
#hostBar .hav { width: 56px; height: 56px; border-radius: 50%; border: 4px solid var(--claude); }
#hostBar .hchip { font-size: 22px; font-weight: 900; color: #fff; background: var(--claude); padding: 4px 12px; border-radius: 10px; white-space: nowrap; }
#hostBar .htag { font-size: 15px; font-weight: 800; color: var(--claude); border: 2px solid var(--claude); padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
#hostBar .htxt { font-size: 29px; font-weight: 900; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hostBar .htxt.long { white-space: normal; line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#hostBar.talk .hav { animation: hbob .3s ease-in-out infinite alternate; }
@keyframes hbob { to { transform: translateY(-4px); } }

/* —— 横幅（平安夜、PK）—— */
#banner { position: absolute; left: 50%; top: 520px; transform: translateX(-50%); z-index: 20; font-size: 96px; pointer-events: none; animation: pop .5s cubic-bezier(.2, 1.6, .5, 1) both; white-space: nowrap; }
@keyframes pop { from { transform: translateX(-50%) scale(.2); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* —— 浮层（出局、结果、成绩单、CP）—— */
#overlay { position: absolute; inset: 0; z-index: 30; background: rgba(6, 12, 34, .55); display: flex; align-items: center; justify-content: center; }
.ov-card { position: relative; background: var(--paper); border-radius: 32px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); padding: 30px 40px; animation: popc .45s cubic-bezier(.2, 1.4, .5, 1) both; }
@keyframes popc { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.out-card { width: 940px; display: flex; gap: 30px; align-items: center; }
.out-card .pic { width: 330px; height: 420px; position: relative; flex: none; }
.out-card .pic img { position: absolute; left: 50%; bottom: 0; max-width: 330px; max-height: 420px; transform: translateX(-50%); filter: grayscale(.4); }
.out-card .pic .hu-av { position: absolute; left: 15px; top: 40px; }
.out-card .info { flex: 1; }
.out-card .who { font-size: 52px; font-weight: 900; color: var(--c); }
.out-card .how { font-size: 26px; font-weight: 800; color: var(--mute); margin-top: 4px; }
.out-card .role { margin-top: 18px; font-size: 40px; font-weight: 900; color: var(--navy); }
.out-card .role .zy { font-size: 72px; margin-left: 8px; }
.out-card .bigstamp { position: absolute; right: 40px; top: 30px; font-size: 76px; animation: slam2 .4s cubic-bezier(.2, 1.4, .5, 1) .25s both; }
.out-card .lw { margin-top: 22px; background: var(--inner); border: 3px dashed var(--inner-b); border-radius: 18px; padding: 12px 18px; font-size: 30px; font-weight: 800; color: var(--inner-ink); }
.out-card .lw small { display: block; font-size: 17px; opacity: .7; margin-bottom: 4px; }

.res-card { width: 1180px; text-align: center; padding: 34px 46px 30px; }
.res-card .zy { font-size: 130px; }
.res-card .sub { font-size: 30px; font-weight: 800; color: var(--mute); margin-top: 6px; }
.res-words { display: flex; gap: 30px; justify-content: center; margin-top: 26px; }
.res-word { width: 420px; border-radius: 22px; border: 4px solid var(--acc); overflow: hidden; background: #fff; }
.res-word.spy { border-color: var(--red); }
.res-word .h { background: var(--acc); color: #fff; font-size: 26px; font-weight: 900; padding: 8px; }
.res-word.spy .h { background: var(--red); }
.res-word .w { font-size: 64px; font-weight: 900; color: var(--navy); padding: 14px 10px 4px; }
.res-word .ppl { font-size: 22px; font-weight: 800; color: var(--mute); padding: 0 12px 14px; }
.res-btns { margin-top: 26px; display: flex; gap: 16px; justify-content: center; }
.btn { font-size: 26px; font-weight: 900; border: 0; border-radius: 16px; padding: 12px 28px; cursor: pointer; background: var(--navy); color: #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); }
.btn.red { background: var(--red); } .btn.gold { background: var(--gold); color: var(--navy); } .btn.ghost { background: #eef1f8; color: var(--navy); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: default; }

.score-card { width: 1800px; max-height: 1050px; overflow-y: auto; padding: 18px 32px 16px; }
.score-card .head { display: flex; align-items: center; gap: 18px; }
.score-card .head .zy { font-size: 56px; }
.score-card .head .meta { font-size: 22px; font-weight: 800; color: var(--mute); }
.score-card table { width: 100%; border-collapse: separate; border-spacing: 0 4px; margin-top: 6px; }
.score-card th { font-size: 20px; font-weight: 900; color: var(--mute); text-align: center; padding: 0 6px; }
.score-card td { background: #fff; font-size: 22px; font-weight: 800; color: var(--navy); text-align: center; padding: 3px 6px; line-height: 1.15; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.score-card td:first-child { border-left: 2px solid var(--line); border-radius: 14px 0 0 14px; }
.score-card td:last-child { border-right: 2px solid var(--line); border-radius: 0 14px 14px 0; }
.score-card .p { display: flex; align-items: center; gap: 10px; text-align: left; }
.score-card .p img, .score-card .p .huav { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--c); }
.score-card td small { font-size: 15px; color: var(--mute); font-weight: 700; }
.score-card .p .huav { background: linear-gradient(160deg, #ffe7a0, #f3b73a); color: #7a4a00; text-align: center; line-height: 38px; font-weight: 900; }
.score-card .p b { color: var(--c); font-size: 25px; } .score-card .p small { display: block; font: 700 15px var(--num); color: var(--mute); }
.score-card .rk { font: 900 30px var(--num); color: var(--mute); }
.score-card tr.top1 .rk { color: #d8a300; }
.score-card .tot { font: 900 34px var(--num); color: var(--red); }
.score-card .bar { display: inline-block; width: 90px; height: 12px; border-radius: 6px; background: #eef1f8; vertical-align: middle; margin-left: 6px; overflow: hidden; }
.score-card .bar i { display: block; height: 100%; background: var(--acc); }
.score-card .role-civ { color: var(--acc); } .score-card .role-spy { color: var(--red); } .score-card .role-blank { color: #777; }
.titles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.title-chip { font-size: 20px; font-weight: 900; background: #fff4cf; color: #8a5a00; border: 2px solid #f0c64a; border-radius: 12px; padding: 4px 12px; }
.title-chip i { font-style: normal; color: var(--navy); margin-left: 6px; font-weight: 800; font-size: 18px; }
.score-note { margin-top: 8px; font-size: 16px; font-weight: 700; color: var(--mute); line-height: 1.4; }

.cp-scene { position: absolute; inset: 0; display: block; }
.cp-scene .bgx { position: absolute; inset: 0; background: url('assets/bg/bg_office.webp') center/cover; filter: brightness(.8) saturate(1.1); }
.cp-scene img.ds, .cp-scene img.cl { position: absolute; bottom: 70px; max-height: 760px; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .45)); animation: enter2 .5s cubic-bezier(.2, 1.4, .5, 1) both; }
.cp-scene img.ds { left: 250px; bottom: 50px; max-height: 600px; }
.cp-scene .clw { position: absolute; right: 290px; bottom: 36px; height: 720px; aspect-ratio: 529 / 900; animation: enter2 .5s cubic-bezier(.2, 1.4, .5, 1) .15s both; }
.cp-scene .clw img { height: 100%; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .45)); }
.cp-bub { position: absolute; max-width: 720px; background: #fff; border-radius: 26px; padding: 18px 26px; font-size: 40px; font-weight: 900; color: var(--navy); box-shadow: var(--shadow);
  border: 5px solid var(--c); animation: popc .4s cubic-bezier(.2, 1.4, .5, 1) both; }
.cp-bub small { display: block; font-size: 20px; color: var(--c); margin-bottom: 4px; }
.cp-bub.l { left: 100px; top: 150px; } .cp-bub.r { right: 70px; top: 70px; }
.cp-bub.fail { color: #8f7bc6; }
.blush { position: absolute; width: 66px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 90, 120, .75), transparent); opacity: 0; transition: opacity .8s; }
.blush.on { opacity: 1; animation: blushp 1.2s ease-in-out infinite alternate; }
.cp-hearts { position: absolute; left: 82%; top: 6%; font-size: 54px; opacity: 0; }
.cp-hearts.on { animation: hearts 2.2s ease-out infinite; }
.cp-sfx { position: absolute; left: 88%; top: 20%; font-size: 34px; font-weight: 900; color: var(--pink); opacity: 0; transition: opacity .5s; white-space: nowrap; text-shadow: 0 2px 0 #fff, 0 0 8px #fff; }
.cp-sfx.on { opacity: 1; }
@keyframes enter2 { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes blushp { to { transform: scale(1.12); } }
@keyframes hearts { 0% { transform: translateY(0) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-160px) scale(1.2); opacity: 0; } }

.review { width: 1700px; max-height: 960px; display: flex; flex-direction: column; }
.review .body { overflow-y: auto; margin-top: 10px; padding-right: 8px; }
.review .rv { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 21px; font-weight: 700; }
.review .rv b { color: var(--c); }
.review .rv .i { color: var(--inner-ink); background: var(--inner); border-radius: 8px; padding: 2px 8px; }

/* —— 真人操作面板 —— */
#humanPanel { position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%); width: 1100px; z-index: 25; background: var(--paper); border-radius: 26px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .5); border: 5px solid var(--gold); padding: 18px 26px; animation: popx .35s cubic-bezier(.2, 1.4, .5, 1) both; }
@keyframes popx { from { transform: translateX(-50%) scale(.7); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
#humanPanel .t { font-size: 30px; font-weight: 900; color: var(--navy); }
#humanPanel .t .w { color: #b07800; }
#humanPanel .row { display: flex; gap: 12px; margin-top: 12px; align-items: center; }
#humanPanel input { flex: 1; font-size: 34px; font-weight: 800; padding: 12px 18px; border: 3px solid #d8d2c2; border-radius: 16px; outline: none; color: var(--navy); background: #fff; min-width: 0; }
#humanPanel input:focus { border-color: var(--acc); }
#humanPanel .cnt { font: 900 26px var(--num); color: var(--mute); min-width: 90px; text-align: right; }
#humanPanel .err { color: var(--red); font-size: 24px; font-weight: 800; min-height: 32px; margin-top: 6px; }
#humanPanel .hint { font-size: 20px; font-weight: 700; color: var(--mute); margin-top: 6px; }

/* —— 大厅 —— */
#lobby { position: absolute; inset: 0; z-index: 40; background: rgba(6, 12, 34, .62); display: flex; align-items: center; justify-content: center; }
.lb { width: 1500px; max-height: 1010px; background: var(--paper); border-radius: 34px; box-shadow: 0 20px 70px rgba(0, 0, 0, .55); padding: 26px 38px 24px; display: flex; flex-direction: column; }
.lb-head { display: flex; align-items: center; gap: 18px; }
.lb-head .zy { font-size: 66px; }
.lb-head .desc { font-size: 22px; font-weight: 800; color: var(--mute); line-height: 1.35; }
.lb-body { margin-top: 14px; overflow-y: auto; padding-right: 6px; flex: 1; }
.lb-sec { margin-top: 14px; }
.lb-sec > .h { font-size: 24px; font-weight: 900; color: var(--navy); margin-bottom: 8px; display: flex; align-items: baseline; gap: 10px; }
.lb-sec > .h small { font-size: 17px; color: var(--mute); font-weight: 700; }
.modes { display: flex; gap: 16px; }
.mode { flex: 1; border: 4px solid var(--line); border-radius: 20px; padding: 14px 18px; cursor: pointer; background: #fff; }
.mode b { font-size: 30px; font-weight: 900; color: var(--navy); display: block; }
.mode span { font-size: 19px; font-weight: 700; color: var(--mute); }
.mode.on { border-color: var(--acc); background: #eef2ff; }
.pick { display: flex; flex-wrap: wrap; gap: 12px; }
.pk-p { width: 150px; border: 4px solid var(--line); border-radius: 18px; padding: 8px 6px; text-align: center; cursor: pointer; background: #fff; position: relative; user-select: none; }
.pk-p img { width: 76px; height: 76px; border-radius: 50%; border: 4px solid var(--c); }
.pk-p .hu-mini { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto; background: linear-gradient(160deg, #ffe7a0, #f3b73a); color: #7a4a00; font-size: 36px; font-weight: 900; line-height: 76px; }
.pk-p b { display: block; font-size: 22px; color: var(--c); font-weight: 900; }
.pk-p small { display: block; font: 700 13px var(--num); color: var(--mute); }
.pk-p .st { display: block; font-size: 14px; font-weight: 800; color: #b07800; min-height: 18px; }
.pk-p .st.bad { color: var(--red); }
.pk-p.on { border-color: var(--acc); background: #eef2ff; }
.pk-p.off { opacity: .45; }
.pk-p.fixed { cursor: default; border-color: var(--gold); background: #fff8e1; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 22px; }
.opt { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; color: var(--ink); }
.opt label { white-space: nowrap; }
.seg { display: inline-flex; background: #eef1f8; border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { border: 0; background: transparent; font-size: 19px; font-weight: 800; color: var(--ink); padding: 5px 12px; border-radius: 9px; cursor: pointer; }
.seg button.on { background: #fff; color: var(--acc); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.opt input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--acc); }
.opt input[type=text], .opt input[type=number], .opt select { font-size: 20px; font-weight: 800; padding: 6px 10px; border: 2px solid #d8d2c2; border-radius: 10px; background: #fff; color: var(--navy); min-width: 0; }
.opt input[type=number] { width: 90px; }
.wordrow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 21px; font-weight: 800; }
.wordrow select { font-size: 20px; font-weight: 800; padding: 6px 10px; border: 2px solid #d8d2c2; border-radius: 10px; max-width: 460px; }
.wordrow input { width: 170px; font-size: 20px; font-weight: 800; padding: 6px 10px; border: 2px solid #d8d2c2; border-radius: 10px; }
.lb-foot { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.lb-foot .est { font-size: 19px; font-weight: 800; color: var(--ink); margin-right: auto; line-height: 1.35; min-width: 0; flex: 1; }
.lb-foot .btn { white-space: nowrap; flex: none; }
.lb-foot .est b { color: var(--red); font-family: var(--num); }
.lb-err { color: var(--red); font-size: 22px; font-weight: 800; min-height: 28px; }
.hist { display: flex; flex-direction: column; gap: 8px; }
.hist-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 8px 14px; font-size: 20px; font-weight: 800; }
.hist-row .w { color: var(--navy); } .hist-row .m { color: var(--mute); font-size: 17px; }
.hist-row .btn { font-size: 20px; padding: 8px 18px; margin-left: auto; white-space: nowrap; }
.hist-row.tagged { border-color: var(--gold); background: #fff8e1; }
.rp-tag { background: var(--red); color: #fff; border-radius: 8px; padding: 2px 10px; font-size: 17px; white-space: nowrap; }
.wb-table { width: 100%; border-collapse: collapse; }
.wb-table td { padding: 3px 4px; }
.wb-table input { width: 100%; font-size: 19px; font-weight: 800; padding: 5px 8px; border: 2px solid #e3ddcf; border-radius: 8px; }
.wb-table .x { border: 0; background: #ffe3e3; color: var(--red); font-weight: 900; border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 18px; }

/* —— 工具栏（不跟舞台缩放，手机上也好点）—— */
#toolbar { position: fixed; right: 10px; top: 10px; z-index: 100; display: flex; gap: 6px; background: rgba(10, 16, 40, .72); padding: 6px; border-radius: 12px; backdrop-filter: blur(6px); }
#toolbar button, #toolbar select { height: 34px; min-width: 34px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 16px; cursor: pointer; padding: 0 8px; }
#toolbar select option { color: #000; }
#toolbar button.on { background: var(--gold); color: var(--navy); }
#toolbar button:hover { background: rgba(255, 255, 255, .28); }
#toolbar { transition: opacity .4s; }
body.idle #toolbar:not(:hover) { opacity: 0; }
body.clean #toolbar { opacity: 0; pointer-events: none; }
body.clean #toolbar.peek { opacity: 1; pointer-events: auto; }
body.clean.idle, body.clean.idle * { cursor: none !important; }
#rec-dot { position: absolute; right: 30px; bottom: 100px; z-index: 50; font: 900 22px var(--num); color: #fff; background: rgba(226, 58, 58, .9); padding: 4px 12px; border-radius: 10px; }
body.clean #rec-dot { display: none; }
.toast { position: fixed; left: 50%; top: 56px; transform: translateX(-50%); z-index: 200; background: rgba(10, 16, 40, .9); color: #fff; padding: 10px 18px; border-radius: 12px; font-size: 15px; font-weight: 700; max-width: 90vw; }

/* ============ 竖屏（1080×1920）============ */
#stage.port #top { left: 26px; right: 26px; top: 26px; height: auto; flex-wrap: wrap; gap: 12px; }
#stage.port .brand .zy { font-size: 64px; }
#stage.port .brand .sub { font-size: 22px; }
#stage.port .phase { font-size: 26px; }
#stage.port .chips { margin-left: 0; width: 100%; flex-wrap: wrap; }
#stage.port .chip { font-size: 22px; }
#stage.port #seats { top: 226px; left: 20px; right: 20px; height: auto; flex-wrap: wrap; gap: 14px; justify-content: center; }
#stage.port .seat { width: 244px; height: 236px; }
#stage.port .seats-9 .seat, #stage.port .seats-10 .seat { width: 194px; }
#stage.port #spk { left: 0; top: 760px; width: 430px; height: 600px; }
#stage.port #spkImg { max-width: 420px; max-height: 540px; }
#stage.port .hu-av { width: 260px; height: 260px; font-size: 130px; }
#stage.port #cards { left: 440px; top: 770px; width: 610px; flex-direction: column; gap: 18px; }
#stage.port .card { width: 100%; min-height: 230px; }
#stage.port .card.inner::after { left: -30px; top: 60px; }
#stage.port .card.speech::after { top: 60px; }
#stage.port #voteBoard { left: 26px; right: 26px; width: auto; top: 760px; height: 610px; }
#stage.port .vb-rows { grid-template-columns: 1fr 1fr; }
#stage.port #log { left: 26px; right: 26px; width: auto; top: 1390px; height: 400px; }
#stage.port #hostBar { height: 92px; bottom: 22px; }
#stage.port #hostBar .htag { display: none; }
#stage.port #hostBar .htxt { white-space: normal; font-size: 27px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#stage.port #banner { top: 980px; font-size: 84px; }
#stage.port .out-card { width: 1000px; flex-direction: column; text-align: center; }
#stage.port .out-card .bigstamp { right: 60px; top: 60px; }
#stage.port .res-card { width: 1020px; }
#stage.port .res-card .zy { font-size: 104px; }
#stage.port .res-words { flex-direction: column; align-items: center; }
#stage.port .score-card { width: 1040px; padding: 22px 20px; max-height: 1820px; overflow-y: auto; }
#stage.port .score-card .hide-p { display: none; }
#stage.port .score-card td { font-size: 21px; }
#stage.port .cp-scene img.ds { left: 20px; bottom: 300px; max-height: 520px; }
#stage.port .cp-scene .clw { right: 20px; bottom: 300px; height: 640px; }
#stage.port .cp-bub { max-width: 900px; font-size: 38px; }
#stage.port .cp-bub.l { left: 50px; top: 240px; } #stage.port .cp-bub.r { right: 50px; top: 560px; }
#stage.port .cp-sfx { left: 40%; top: -6%; }
#stage.port #humanPanel { width: 1020px; bottom: 140px; }
#stage.port .lb { width: 1030px; max-height: 1840px; }
#stage.port .opts { grid-template-columns: 1fr 1fr; }
#stage.port .pk-p { width: 145px; }
#stage.port .review { width: 1040px; max-height: 1800px; }
#stage.port .review .rv { grid-template-columns: 120px 1fr; }
#stage.port .review .rv .i { grid-column: 2; }

/* 手机：工具栏只留常用的几个，别挤出屏幕 */
@media (max-width: 560px) {
  #toolbar { right: 6px; top: 6px; gap: 4px; padding: 4px; }
  #toolbar [data-act=skip], #toolbar [data-act=manual], #toolbar [data-act=srt], #toolbar [data-act=record], #toolbar [data-act=clean], #toolbar [data-act=layout] { display: none; }
  #toolbar button, #toolbar select { height: 30px; min-width: 30px; font-size: 14px; }
}

/* 闪电局大厅 */
.flash-box { background: #fff8e1; border: 3px solid #f0c64a; border-radius: 18px; padding: 12px 18px; color: #7a5a00; line-height: 1.45; }
.flash-box .fb1 { font-size: 26px; font-weight: 900; }
.flash-box .fb2 { font-size: 20px; font-weight: 800; margin-top: 4px; }
.flash-box .fb3 { font-size: 16px; font-weight: 700; color: #a08440; margin-top: 6px; }
/* 竖屏（手机）：舞台缩到三分之一左右，大厅的字放大，最小的说明也要看得清 */
#stage.port .lb { padding: 30px 30px 26px; }
#stage.port .lb-head .zy { font-size: 84px; }
#stage.port .lb-head .desc { font-size: 28px; }
#stage.port .flash-box { padding: 18px 22px; }
#stage.port .flash-box .fb1 { font-size: 40px; }
#stage.port .flash-box .fb2 { font-size: 30px; }
#stage.port .flash-box .fb3 { font-size: 25px; }
#stage.port .mode b { font-size: 40px; }
#stage.port .mode span { font-size: 26px; }
#stage.port .lb-sec > .h { font-size: 32px; }
#stage.port .lb-sec > .h small { font-size: 24px; }
#stage.port .pk-p { width: 220px; }
#stage.port .pk-p img, #stage.port .pk-p .hu-mini { width: 100px; height: 100px; line-height: 100px; }
#stage.port .pk-p b { font-size: 30px; }
#stage.port .pk-p small { font-size: 18px; }
#stage.port .seg button { font-size: 28px; padding: 8px 16px; }
#stage.port .wordrow, #stage.port .opt { font-size: 28px; }
#stage.port .wordrow select { font-size: 28px; }
#stage.port .lb-foot .est { font-size: 24px; }
#stage.port .btn { font-size: 34px; padding: 14px 30px; }
#stage.port .hist-row { font-size: 26px; flex-wrap: wrap; }
#stage.port #humanPanel .t { font-size: 36px; }
#stage.port #humanPanel input { font-size: 40px; }
#stage.port #humanPanel .hint { font-size: 24px; }

/* —— B 站 Toy 版（build_static.py --toy，页面里 UNDERCOVER_TOY = true，body 带 .toy）：不让自己打字 → 发言 4 选 1、投票理由点预设、昵称随机；不放导出 / 下载 —— */
body.toy [data-x=export], body.toy #toolbar [data-act=export], body.toy #toolbar [data-act=srt], body.toy #toolbar [data-act=record] { display: none !important; }
#humanPanel .picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
#humanPanel .pl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; text-align: left; border: 3px solid #e3ddcf; background: #fff; border-radius: 16px; padding: 10px 16px; cursor: pointer; color: var(--navy); }
#humanPanel .pl .pl-t { flex: 1 1 auto; font-size: 27px; font-weight: 900; line-height: 1.3; }
#humanPanel .pl .pl-m { margin-left: auto; font-size: 16px; font-weight: 800; color: var(--mute); white-space: nowrap; }
#humanPanel .pl.on { border-color: var(--red); background: #fff4f2; box-shadow: 0 0 0 4px rgba(226, 58, 58, .18); }
#humanPanel .reasons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
#humanPanel .rs { border: 3px solid #e3ddcf; background: #fff; border-radius: 999px; padding: 6px 18px; font-size: 23px; font-weight: 800; color: var(--navy); cursor: pointer; }
#humanPanel .rs.on { border-color: var(--acc); background: #eef2ff; color: var(--acc); }
#humanPanel .rs-now { flex: 1; min-width: 0; font-size: 22px; font-weight: 800; color: var(--mute); }
.pk-p .st.toy-nm { font-size: 19px; font-weight: 900; }
#stage.port .pk-p .st.toy-nm { font-size: 27px; }
.pk-p .toy-re { margin-top: 4px; border: 0; border-radius: 8px; background: #f3e3b0; color: #7a4a00; font-size: 14px; font-weight: 900; padding: 3px 10px; cursor: pointer; }
#stage.port #humanPanel .picks { grid-template-columns: 1fr; gap: 12px; }
#stage.port #humanPanel .pl .pl-t { font-size: 34px; }
#stage.port #humanPanel .pl .pl-m { font-size: 22px; }
#stage.port #humanPanel .rs { font-size: 31px; padding: 9px 22px; }
#stage.port #humanPanel .rs-now { font-size: 26px; }
#stage.port .pk-p .toy-re { font-size: 22px; padding: 6px 14px; }
body.toy #stage.port #humanPanel { top: 770px; bottom: auto; }   /* 手机竖屏：面板盖在立绘和发言卡上，下面的发言记录留着，挑句、投票时看得到大家说过什么 */