/* 台灣國民常識委員會 — 風格 D：老綜藝棚景 × 街機 UI。基準 1920×1080，整個舞台等比縮放。
   2026-10-03 起每日節目畫面照示意圖 docs/mockups/mode1_studio.png：背景、題卡燈泡框、選項按鈕、HUD 面板、
   現場連線外框都用 assets/ui/ 的點陣圖（由 tools/build_ui_assets.py 從示意圖拆件），中文字一律疊 HTML 文字。
   像素規則（製作人審查 v4 第 8 節）：
   - 480×270 邏輯網格，1 虛擬像素（vp）= 4px；位置、框線、陰影都取 4px 的倍數
   - 外框用「階梯式切角」（box-shadow 疊出 2 階的 8-bit 角），不用平滑圓角
   - 動畫一律 steps()：待機 6fps、對錯 10～12fps、按鈕回饋 80～150ms
   - 中文題幹、選項、解說維持 Noto Sans TC 高解析；Press Start 2P 只用在分數、TIME、Q 編號、英文標籤 */
:root {
  --bg: #141a3d; --bg2: #1d2450; --curtain: #a8182c; --curtain-dark: #7a1020;
  --gold: #ffd23f; --card: #fff6d6; --ink: #141414; --white: #f4f4ff; --dim: #a9b0dc;
  --red: #c8272d; --blue: #1c5fc4; --green: #17824a; --yellow: #ffc93c; --ok: #3fe08a; --bad: #ff5a5a;
  --vp: 4px;
}
/* 外框顏色註冊成 <color>，才能用 steps() 做外框閃爍 */
@property --fc { syntax: '<color>'; inherits: false; initial-value: #141414; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #05060f; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
body { font-family: "Noto Sans TC", system-ui, sans-serif; color: var(--white); }
[hidden] { display: none !important; }
.px { font-family: "Press Start 2P", monospace; }
.small { font-size: 18px; } .dim { color: var(--dim); } .gold { color: var(--gold); }

/* ---------- 8-bit 像素外框（共用元件） ----------
   --b：框線粗細（8px = 2vp，小元件 4px）；--sh：硬陰影位移；--fc：框線色；--sc：陰影色；--bevel：內側亮暗邊
   外框畫在元素外側：上下左右各平移 --b，加上四個斜角平移 --b/2，疊出兩階的切角 */
:where(.btn, .opt, .qcard, #explain, .bubble, .segment-card, .shout, .genius-box, .ep-row, #board-list li, .about,
  #share-panel, #intro-card .intro-ep, .logo-inner, .tag-1p, .nameplate, .note, .report-grid span, .stamp, .toast,
  .bulbs, .marquee-sm, #live-window, .live-tag) {
  --b: 8px; --sh: 8px; --fc: var(--ink); --sc: var(--ink); --bevel: 0 0 0 transparent;
  --pxframe: var(--bevel),
    0 calc(-1 * var(--b)) 0 var(--fc), 0 var(--b) 0 var(--fc), calc(-1 * var(--b)) 0 0 var(--fc), var(--b) 0 0 var(--fc),
    calc(-.5 * var(--b)) calc(-.5 * var(--b)) 0 var(--fc), calc(.5 * var(--b)) calc(-.5 * var(--b)) 0 var(--fc),
    calc(-.5 * var(--b)) calc(.5 * var(--b)) 0 var(--fc), calc(.5 * var(--b)) calc(.5 * var(--b)) 0 var(--fc),
    var(--sh) calc(var(--sh) + var(--b)) 0 var(--sc), calc(var(--sh) + var(--b)) var(--sh) 0 var(--sc),
    calc(var(--sh) + .5 * var(--b)) calc(var(--sh) + .5 * var(--b)) 0 var(--sc);
  box-shadow: var(--pxframe);
  border: 0;
}

#viewport { position: fixed; inset: 0; }
#stage { position: absolute; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden;
  background: #2a0508 url("../assets/ui/bg_studio.png") 0 0 / 1920px 1080px no-repeat; image-rendering: pixelated;
  /* WebP（tools/build_webp.py 產生，1.4MB → 150KB）；不支援 image-set type() 的瀏覽器沿用上一行的 PNG */
  background-image: image-set(url("../assets/ui/bg_studio.webp") type("image/webp"), url("../assets/ui/bg_studio.png") type("image/png")); }
/* 只給螢幕閱讀器（畫面上改用圖片或其他位置顯示的文字） */
.sr-only, #q-meta, .hud-logo span, #live-window .live-tag, #timer > .px.small {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#fx canvas { width: 1920px !important; height: 1080px !important; image-rendering: pixelated; }

/* 布幕（條紋寬度取 8px 的倍數）：改用攝影棚背景圖後不顯示，元素保留 */
.curtain, .valance { display: none; }
.curtain { position: absolute; top: 0; width: 120px; height: 1080px; z-index: 2;
  background: repeating-linear-gradient(90deg, var(--curtain-dark) 0 32px, var(--curtain) 32px 56px, var(--curtain-dark) 56px 80px); }
.curtain.left { left: 0; } .curtain.right { right: 0; }
.valance { position: absolute; left: 0; top: 0; width: 1920px; height: 40px; background: var(--curtain); border-bottom: 8px solid var(--gold); z-index: 3;
  box-shadow: 0 4px 0 #5a0a14 inset; }

/* CRT 掃描線：透明度 3.5%、4px 一條，只蓋背景與布幕（z-index 3，題目畫面 z-index 4 在它上面） */
#crt { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .035) 0 4px, transparent 4px 8px); }
#stage.crt #crt { display: block; }

/* 金色燈泡跑馬燈框（題卡、片頭 Logo）：16px 圓角像素燈泡、32px 一顆，相鄰燈泡輪流亮（steps，約 3.3fps）。
   燈泡帶寬 24px（內距 32px，其中 8px 被內層字卡外框蓋住）；寬高 = 32k + 24，燈泡才會四邊對稱 */
.bulbs { padding: 32px; background-color: #8a5e1a; background-image: var(--art-bulbs-big); background-size: 64px 64px;
  background-position: -2px -2px; animation: chase .6s steps(1) infinite; --sh: 8px;
  --bevel: inset 0 0 0 4px #ffd23f; }
@keyframes chase { 50% { background-position: 30px -2px; } }
/* 小燈泡框（HUD 左上 Logo）：12px 十字燈泡、24px 一顆；寬高 = 24k + 16 */
.marquee-sm { padding: 16px; background-color: #8a5e1a; background-image: var(--art-bulbs-mini); background-size: 48px 48px;
  animation: chase-sm .6s steps(1) infinite; --b: 4px; --sh: 4px; --bevel: inset 0 0 0 4px #ffd23f; }
@keyframes chase-sm { 50% { background-position: 24px 0; } }

/* HUD（照示意圖）：左上燈泡招牌 logo.png、「每日節目」牌 plate_daily.png、右邊題號／分數／計時面板（#hud 背景）
   段落名稱與升級進度用小字膠囊放在招牌下方，數字一律由程式疊 HTML 文字 */
#hud { position: absolute; left: 0; top: 0; width: 1920px; height: 188px; z-index: 5; pointer-events: none;
  background:
    url("../assets/ui/panel_q.png") 1030px 72px / 198px 94px no-repeat,
    url("../assets/ui/panel_score.png") 1228px 72px / 298px 94px no-repeat,
    url("../assets/ui/panel_timer.png") 1532px 72px / 363px 94px no-repeat;
  background-image: image-set(url("../assets/ui/panel_q.webp") type("image/webp"), url("../assets/ui/panel_q.png") type("image/png")),
    image-set(url("../assets/ui/panel_score.webp") type("image/webp"), url("../assets/ui/panel_score.png") type("image/png")),
    image-set(url("../assets/ui/panel_timer.webp") type("image/webp"), url("../assets/ui/panel_timer.png") type("image/png")); }
#hud > * { position: absolute; }
.hud-logo { left: 18px; top: 20px; width: 462px; height: 162px; background: url("../assets/ui/logo.png") 0 0 / 100% 100% no-repeat;
  background-image: image-set(url("../assets/ui/logo.webp") type("image/webp"), url("../assets/ui/logo.png") type("image/png"));
  animation: twinkle 1.2s steps(1) infinite; }
/* 牌子圖 432px 寬，右側 8px 是透明邊；元素只取 428px。招牌縮短成「國民常識委員會」後（462px）牌子跟著左移 */
.hud-plate { left: 480px; top: 60px; width: 428px; height: 122px; background: url("../assets/ui/plate_daily.png") 0 0 / 432px 122px no-repeat;
  background-image: image-set(url("../assets/ui/plate_daily.webp") type("image/webp"), url("../assets/ui/plate_daily.png") type("image/png")); }
/* 燈泡微微閃爍（取代原本 CSS 燈泡跑馬燈；steps 逐格） */
@keyframes twinkle { 50% { filter: brightness(1.12) saturate(1.1); } }
.hud-left, .hud-progress { left: 36px; background: rgba(14, 8, 20, .88); color: var(--gold); font-weight: 900; font-size: 22px; line-height: 32px;
  padding: 2px 14px; box-shadow: 0 0 0 4px #b8862a, 4px 4px 0 4px var(--ink); }
.hud-left { top: 194px; max-width: 420px; display: flex; align-items: center; gap: 8px; }
#seg-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-1p { display: none; }
.hud-progress { top: 242px; display: flex; align-items: center; gap: 8px; }
.hud-progress .stage-name { color: var(--dim); } .hud-progress .stage-name.done { color: var(--gold); }
.hud-progress .stage-name.now { background: var(--gold); color: var(--ink); padding: 0 8px; }
.hud-progress .bar { width: 20px; height: 4px; background: #4a5288; } .hud-progress .bar.done { background: var(--gold); }
.hud-q { left: 1030px; top: 72px; width: 198px; height: 94px; display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 28px; text-shadow: 4px 4px 0 #5a3a00; }
.hud-q b { font-weight: normal; } .hud-q small { font-size: 18px; align-self: flex-end; margin-bottom: 30px; }
.hud-score { left: 1228px; top: 72px; width: 298px; height: 94px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.hud-score .px.small { font-size: 16px; color: #ff3b3b; text-shadow: 2px 2px 0 #5a0a14; }
#score { font-size: 34px; display: inline-block; color: #fff; text-shadow: 4px 4px 0 #3a3a52; }
#score.bump { animation: bump .45s steps(1) both; }
@keyframes bump { 0% { transform: translateY(-4px); color: var(--gold); } 33% { transform: translateY(4px); color: var(--gold); } 66% { transform: translateY(-4px); } 100% { transform: none; } }

/* 計時條：15 格；最後 5 秒逐格跳動、紅白 9fps 翻轉；逾時全部熄滅 */
/* 計時面板（示意圖右上 panel_timer.png）：秒數在左、15 格疊在框內槽位 x 1626～1866 */
#timer { position: absolute; left: 1532px; top: 72px; width: 363px; height: 94px; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 0 28px 0 18px; pointer-events: none; }
#timer-cells { flex: 1; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; }
#timer-cells span { height: 36px; background: #1d2238; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35); }
#timer-cells span.on { background: var(--ok); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .35), inset 0 -4px 0 rgba(0, 0, 0, .25); }
#timer.warn #timer-cells span.on { background: var(--gold); } #timer.danger #timer-cells span.on { background: var(--bad); }
#timer.final #timer-cells span.on { animation: tflash .222s steps(1) infinite; }
#timer.final #timer-cells span.edge { animation: tflash .222s steps(1) infinite, tjump .222s steps(1) infinite; }
@keyframes tflash { 0% { background: var(--bad); } 50% { background: #fff; } }
@keyframes tjump { 0% { transform: translateY(-8px); } 50% { transform: translateY(0); } }
#timer.final #timer-num { color: var(--bad); }
#timer-num { order: -1; font-size: 32px; width: 64px; text-align: left; display: inline-block; color: var(--gold); text-shadow: 4px 4px 0 #5a3a00; }
#timer-num.tickpop { animation: tickpop .25s steps(1) both; }
@keyframes tickpop { 0% { transform: scale(1.5); } 33% { transform: scale(1.25); } 66% { transform: scale(1.1); } 100% { transform: none; } }
#timer.timeup #timer-cells span { background: #1a1f45 !important; box-shadow: inset 0 0 0 4px #2b3266; animation: none; transform: none; }
#timer.timeup #timer-num { color: var(--bad); animation: blink .2s steps(1) 3; }
@keyframes blink { 50% { visibility: hidden; } }

/* ---------- 攝影棚：舞台與觀眾席已畫在背景圖裡 ----------
   #stage-front 不再顯示；#audience 改成背景圖「觀眾頭部」那一條的複本（左右兩群，中間舞台遮掉），
   平常和背景完全重疊看不出來，答對時整條跳 2 下（.cheer），保留原本「觀眾跟著跳」的回饋 */
#stage-front { display: none; }
/* 觀眾分成 8 群（左右各 4 群，中間舞台不放），每群是背景圖對應位置的複本，各自動作（js/game.js 建立）：
   平常各群錯開時間輕輕晃；答對由左到右波浪跳起（.cheer）；答錯往下沉（.aww）；最後 5 秒緊張抖動（.tense）；
   觀眾時刻與高分成績單持續歡呼（.party）。全部逐格（steps），符合像素風 */
#audience { position: absolute; left: 0; top: 900px; width: 1920px; height: 78px; z-index: 3; pointer-events: none; }
#audience .crowd { position: absolute; top: 0; height: 78px; background-image: url("../assets/ui/bg_studio.png"); background-size: 1920px 1080px;
  background-image: image-set(url("../assets/ui/bg_studio.webp") type("image/webp"), url("../assets/ui/bg_studio.png") type("image/png")); /* 與 #stage 同一張，才對得齊 */
  background-repeat: no-repeat; animation: sway var(--dur, 3s) steps(1) infinite; animation-delay: var(--delay, 0s); }
@keyframes sway { 0%, 70% { transform: none; } 80% { transform: translateY(-4px); } 90% { transform: translateY(-2px); } }
#audience.cheer .crowd { animation: crowd .5s steps(1) 2; animation-delay: calc(var(--i) * 70ms); }
@keyframes crowd { 0% { transform: translateY(-12px); } 50% { transform: none; } }
#audience.party .crowd { animation: crowd .5s steps(1) infinite; animation-delay: calc(var(--i) * 70ms); }
#audience.aww .crowd { animation: aww .9s steps(3) both; }
@keyframes aww { 0% { transform: none; } 30%, 70% { transform: translateY(8px); } 100% { transform: none; } }
#audience.tense .crowd { animation: tense .25s steps(1) infinite; animation-delay: calc(var(--i) * 30ms); }
@keyframes tense { 0% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }

/* ---------- 碰碰的「現場連線」視窗（第 2 段「今日主題」），位置與大小照示意圖 ----------
   外框 live_frame.png（446×532，含左上紅色「現場連線」標籤）疊在最上層；場景圖放在框內槽位（x+20、y+28、406×489）；
   碰碰的角色放大到示意圖比例，下半身被視窗切掉；對話框移到視窗下方 */
#live-window { position: absolute; left: 1448px; top: 180px; width: 446px; height: 532px; z-index: 5; background: none; box-shadow: none;
  --sprite-scale: 1.45; }
#live-window .live-scene { position: absolute; left: 20px; top: 28px; width: 406px; height: 489px; overflow: hidden; image-rendering: pixelated;
  background: #0b0e2c center / cover no-repeat; }
#live-window .live-frame { position: absolute; inset: 0; pointer-events: none; image-rendering: pixelated;
  background: url("../assets/ui/live_frame.png") 0 0 / 446px 532px no-repeat;
  background-image: image-set(url("../assets/ui/live_frame.webp") type("image/webp"), url("../assets/ui/live_frame.png") type("image/png")); }
#live-window .live-lights { position: absolute; inset: 0; display: none; }
#live-window .live-slot { position: absolute; left: 0; right: 0; bottom: -120px; display: flex; justify-content: center; }
#live-window .live-banner { position: absolute; left: 4px; top: 172px; width: 64px; padding: 12px 0; background: #f2c84b; color: #2a1408;
  font-size: 40px; font-weight: 900; line-height: 1.1; text-align: center; writing-mode: vertical-rl; letter-spacing: 8px;
  box-shadow: 0 0 0 4px #6b3a10, 4px 4px 0 4px rgba(0, 0, 0, .5), inset 0 4px 0 #fff3b0; }
/* 場景：夜市（場景圖 assets/ui/live_scene.png；新增場景時加一條 data-scene 規則，並在題庫集數設定 liveScene） */
#live-window[data-scene="nightmarket"] .live-scene { background-image: url("../assets/ui/live_scene.png");
  background-image: image-set(url("../assets/ui/live_scene.webp") type("image/webp"), url("../assets/ui/live_scene.png") type("image/png")); }
/* 連線中：碰碰本人的位置改成視窗下方的對話框 */
#stage.live-mode #host-pengpeng { top: 728px; bottom: auto; right: 30px; left: auto; width: 420px; }
#stage.live-mode #host-pengpeng .nameplate { display: none; }
#stage.live-mode #host-pengpeng .bubble { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 420px; }
#stage.live-mode #host-pengpeng .bubble::after { bottom: auto; top: -32px; right: 184px; left: auto; transform: scale(-1, -1); }

/* 主持人：待機 6fps（8 格 = 1.33 秒一循環，上下 4px），說話 6fps */
.host { position: absolute; left: 140px; bottom: 290px; width: 320px; z-index: 6; display: flex; flex-direction: column; align-items: center; }
.host.right { left: auto; right: 140px; }
.host img, #live-window img { height: 300px; image-rendering: pixelated; display: block; transform-origin: 50% 100%; animation: breathe 1.333s steps(1) infinite; }
.host.talk img, #host-pengpeng.talk ~ #live-window img { animation: bob .333s steps(1) infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes breathe { 50% { transform: translateY(4px); } }

/* 節目進行中（上方 HUD 顯示時）：主持人站在舞台上，大小照示意圖（黑皮約 520px 高）；名牌收起，對話框改到腳下 */
#stage:has(> #hud:not([hidden])) #host-heipi { left: 140px; --sprite-scale: 1.73; }
#stage:not(.live-mode):has(> #hud:not([hidden])) #host-pengpeng { right: 95px; --sprite-scale: 1.5; }
#stage:has(> #hud:not([hidden])) .host .nameplate { display: none; }
#stage:has(> #hud:not([hidden])) #host-heipi .bubble,
#stage:not(.live-mode):has(> #hud:not([hidden])) #host-pengpeng .bubble { bottom: auto; top: calc(100% + 28px); }
#stage:has(> #hud:not([hidden])) #host-heipi .bubble::after { bottom: auto; top: -32px; transform: scaleY(-1); }
#stage:not(.live-mode):has(> #hud:not([hidden])) #host-pengpeng .bubble::after { bottom: auto; top: -32px; transform: scale(-1, -1); }

/* 整隻角色的移動（.actor）與身體動作（img）分開。全部用 steps(1) 逐格播放（每個關鍵影格停留一格）。
   答對、答錯 12fps；思考、緊張 6～10fps */
.actor { transform-origin: 50% 100%; animation-timing-function: steps(1, end) !important; }
.host.right .actor, #live-window .actor { --dir: -1; } .actor { --dir: 1; }
.motion-enter { animation: enter .7s both; }
/* 現場連線的交接：碰碰跳一下後往畫面外跑（逐格，6 格）；小視窗從右邊滑進／滑出 */
.motion-exit { animation: exit .6s steps(6) both; }
@keyframes exit { 0% { transform: none; } 20% { transform: translateY(-24px); } 100% { transform: translateX(calc(var(--dir) * -520px)); } }
#live-window.slide-in { animation: winin .5s steps(5) both; }
#live-window.slide-out { animation: winin .5s steps(5) reverse both; }
@keyframes winin { from { transform: translateX(560px); } to { transform: none; } }
@keyframes enter { 0% { transform: translateX(calc(var(--dir) * -420px)); } 14% { transform: translateX(calc(var(--dir) * -320px)); }
  28% { transform: translateX(calc(var(--dir) * -200px)); } 42% { transform: translateX(calc(var(--dir) * -88px)); }
  57% { transform: translateX(0); } 71% { transform: translateX(calc(var(--dir) * 24px)); } 85% { transform: translateX(calc(var(--dir) * 8px)); } 100% { transform: none; } }
.motion-think { animation: think 1.333s infinite; }
@keyframes think { 0%, 100% { transform: translateX(calc(var(--dir) * 24px)); } 50% { transform: translateX(calc(var(--dir) * 32px)) translateY(-4px); } }
.motion-nervous { animation: nervous .2s infinite; }
@keyframes nervous { 0%, 100% { transform: translateX(calc(var(--dir) * 28px)); } 50% { transform: translateX(calc(var(--dir) * 36px)); } }
.motion-jump { animation: jump .5s 2; }
@keyframes jump { 0% { transform: scaleY(.92); } 16.66% { transform: translateY(-48px); } 33.33% { transform: translateY(-84px); }
  50% { transform: translateY(-96px); } 66.66% { transform: translateY(-72px); } 83.33% { transform: translateY(-32px); } 100% { transform: none; } }
.motion-spin { animation: spin .8s 1; }
@keyframes spin { 0% { transform: none; } 12.5% { transform: translateY(-32px); } 25% { transform: translateY(-56px) scaleX(-1); }
  37.5% { transform: translateY(-64px) scaleX(-1); } 50% { transform: translateY(-64px); } 62.5% { transform: translateY(-48px) scaleX(-1); }
  75% { transform: translateY(-24px); } 87.5% { transform: scaleY(.92); } 100% { transform: none; } }
.motion-slump { animation: slump .33s both; }
@keyframes slump { 0% { transform: none; } 25% { transform: translateY(4px); } 50% { transform: translateY(8px) scaleY(.95); } 75%, 100% { transform: translateY(12px) scaleY(.9); } }
.motion-tilt { animation: tilt .33s both; }
@keyframes tilt { 0% { transform: none; } 33% { transform: rotate(calc(var(--dir) * -4deg)); } 66% { transform: rotate(calc(var(--dir) * -8deg)); } 100% { transform: rotate(calc(var(--dir) * -12deg)); } }
.motion-pace { animation: pace 2.4s infinite; }
@keyframes pace { 0%, 100% { transform: none; } 6% { transform: translateX(32px); } 12% { transform: translateX(64px); } 18% { transform: translateX(96px); }
  24% { transform: translateX(120px); } 26% { transform: translateX(120px) scaleX(-1); } 32% { transform: translateX(88px) scaleX(-1); }
  38% { transform: translateX(56px) scaleX(-1); } 44% { transform: translateX(24px) scaleX(-1); } 50% { transform: scaleX(-1); } 52% { transform: none; } }
.motion-cheer { animation: jump .5s infinite; }
.motion-stretch { animation: stretch 1.333s 1; }
@keyframes stretch { 0%, 100% { transform: none; } 25% { transform: translateY(-8px); } 50% { transform: translateY(-12px) scaleY(1.08); } 75% { transform: translateY(4px) scaleY(.94); } }
.nameplate { background: var(--ink); color: var(--gold); font-weight: 900; font-size: 24px; padding: 4px 16px; margin-top: -4px; --b: 4px; --sh: 0px; --fc: var(--gold); }

/* 對話框：像素外框＋階梯形尾巴 */
.bubble { position: absolute; bottom: 360px; left: -8px; width: 340px; background: #fff; color: var(--ink);
  padding: 16px 20px; font-size: 26px; font-weight: 700; line-height: 1.45; cursor: pointer; --sh: 8px; --sc: rgba(0, 0, 0, .35); z-index: 2; }
.bubble::after { content: ""; position: absolute; bottom: -32px; left: 112px; width: 24px; height: 24px; background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 33.33%, 66.66% 33.33%, 66.66% 66.66%, 33.33% 66.66%, 33.33% 100%, 0 100%); }
.host.right .bubble { left: auto; right: -8px; }
.host.right .bubble::after { left: auto; right: 112px; transform: scaleX(-1); }

/* ---------- 共用按鈕：8-bit 切角、內側亮暗邊、硬陰影；按下位移 2 虛擬像素（8px），沒有平滑過場 ---------- */
.btn { font-family: "Noto Sans TC", sans-serif; font-size: 30px; font-weight: 900; color: var(--white); background: var(--bg2);
  padding: 12px 32px; cursor: pointer; transition: none;
  --bevel: inset 0 4px 0 rgba(255, 255, 255, .22), inset 0 -4px 0 rgba(0, 0, 0, .3); }
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:active:not(:disabled) { transform: translate(8px, 8px); --sh: 0px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.red { background: var(--red); } .btn.big { font-size: 44px; padding: 20px 68px; }
.btn.small { font-size: 22px; padding: 8px 16px; --b: 4px; --sh: 4px; }
.btn.small:active:not(:disabled) { transform: translate(4px, 4px); --sh: 0px; }
/* 鍵盤焦點：外框變金色（像街機選單游標），不用瀏覽器的圓角外框 */
.btn:focus-visible, .opt:focus-visible { outline: none; --fc: var(--gold); }

/* 畫面 */
.screen { position: absolute; inset: 0; z-index: 4; }

/* 片頭 */
#screen-title { display: flex; flex-direction: column; align-items: center; padding-top: 52px; gap: 18px; }
.logo { width: 984px; } .logo-inner { background: var(--red); padding: 20px 0 28px; text-align: center; --fc: var(--gold); --sh: 0px; }
.logo-sub { color: var(--gold); font-size: 20px; margin-bottom: 12px; }
.logo h1 { margin: 0; font-size: 108px; line-height: 1.15; font-weight: 900; color: var(--gold); letter-spacing: 8px;
  -webkit-text-stroke: 3px #5a0a14; text-shadow: 4px 4px 0 #5a0a14, 8px 8px 0 #5a0a14; }
.episode-line { font-size: 34px; font-weight: 900; margin: 4px 0 0; }
/* 片頭層級（DECISIONS 第 43 條） */
.title-today { display: flex; align-items: center; gap: 18px; font-size: 34px; font-weight: 900; margin-top: 4px; }
.title-today .ep-meta { font-size: 24px; font-weight: 700; color: #d8dcf4; background: rgba(14, 8, 20, .75); padding: 2px 12px; }
.title-today .ep-done { font-size: 24px; color: #fff; background: #17824a; padding: 2px 12px; }
.resume-note { margin: -8px 0 0; font-size: 22px; color: var(--gold); background: rgba(14, 8, 20, .8); padding: 2px 14px; }
.title-actions { display: flex; gap: 32px; align-items: center; }
#screen-title[data-title-state="watched"] #btn-start { order: 2; }
.event-card { font-family: "Noto Sans TC", sans-serif; display: flex; align-items: center; gap: 18px; cursor: pointer; font-size: 30px; font-weight: 900; color: #fff;
  background: #0b1636; padding: 10px 26px; box-shadow: 0 0 0 4px var(--gold), 6px 6px 0 4px rgba(0, 0, 0, .45); border: 0; }
.event-card:hover { filter: brightness(1.2); } .event-card:focus-visible { outline: none; box-shadow: 0 0 0 6px #fff, 6px 6px 0 4px rgba(0, 0, 0, .45); }
.event-card .event-tag { font-size: 18px; color: var(--ink); background: var(--gold); padding: 2px 8px; }
.event-card .event-arrow { font-size: 20px; color: var(--gold); }
.streak-chip { font-family: "Noto Sans TC", sans-serif; font-size: 24px; font-weight: 700; color: #fff; background: rgba(14, 8, 20, .82); border: 0; cursor: pointer; padding: 6px 18px; }
.streak-chip b { color: var(--gold); } .streak-chip small { font-size: 18px; color: var(--gold); margin-left: 10px; text-decoration: underline; }
.streak-chip:hover { filter: brightness(1.2); }
.title-nav { display: flex; gap: 22px; align-items: center; }
.btn.nav { font-size: 26px; padding: 10px 26px; background: rgba(20, 24, 56, .92); }
.btn.nav.support { color: var(--gold); }
.record-line { font-size: 26px; color: var(--gold); margin: 0; min-height: 36px; }
.hint { font-size: 22px; color: var(--dim); margin: 0; }
/* 測試版與免責：移到左下角系統列，不搶中央任務 */
.beta { position: absolute; left: 24px; top: 930px; font-size: 18px; color: #d8dcf4; background: rgba(14, 8, 20, .75); padding: 3px 12px; margin: 0; }
.beta .linkish { font-size: 18px; }
/* 付款頁條款同意與關於頁的條款連結（條款頁新開分頁） */
.support-fine a { color: var(--gold); text-underline-offset: 3px; }

/* 節目表 */
#screen-schedule { display: flex; flex-direction: column; align-items: center; padding-top: 64px; gap: 24px; }
.screen-title { font-size: 56px; color: var(--gold); margin: 0; text-shadow: 4px 4px 0 var(--ink); }
/* 集數多時在清單內捲動，不蓋到下方跑馬燈（跑馬燈底條是背景圖、沒有底色） */
#schedule-list { display: flex; flex-direction: column; gap: 28px; width: 1020px; max-height: 700px; overflow-y: auto; padding: 8px 20px 16px 8px;
  scrollbar-color: var(--gold) rgba(14, 8, 20, .6); }
.ep-row { display: grid; grid-template-columns: 1fr 140px auto; gap: 24px; align-items: center; background: var(--bg2); padding: 16px 24px; font-size: 30px; font-weight: 700; --sh: 0px; } /* 狀態欄固定寬度、貼齊重播按鈕，各列對齊 */
.ep-row .ep-done { color: var(--gold); font-size: 24px; text-align: right; }

/* ---------- 題卡（照示意圖）：燈泡題卡框 frame_question.png（966×598）包住「題目文字＋四個選項」 ----------
   框放在 (477,188)；框內米白區 x 535～1384、y 252～728；題目在上半，選項按鈕 2×2 在下半（與示意圖同位置） */
.qcard-frame { position: absolute; left: 477px; top: 188px; width: 966px; height: 598px; padding: 0; background: none; box-shadow: none; animation: none; }
.qcard-frame::before { content: ""; position: absolute; inset: 0; image-rendering: pixelated;
  background: url("../assets/ui/frame_question.png") 0 0 / 100% 100% no-repeat; animation: twinkle 1.2s steps(1) infinite;
  background-image: image-set(url("../assets/ui/frame_question.webp") type("image/webp"), url("../assets/ui/frame_question.png") type("image/png")); }
.qcard { position: absolute; left: 58px; top: 64px; width: 849px; height: 204px; padding: 0 40px; background: none; box-shadow: none;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.qtext { color: var(--ink); font-size: 52px; font-weight: 900; line-height: 1.3; margin: 0; text-wrap: balance; }
/* 題目字級依字數（js/game.js 設定 data-len）：≤9 字 80px、≤16 字 60px、≤32 字 48px、更長 42px */
.qtext[data-len="s"] { font-size: 80px; } .qtext[data-len="m"] { font-size: 60px; } .qtext[data-len="l"] { font-size: 48px; }
.qtext[data-len="xl"] { font-size: 42px; line-height: 1.25; }
#options { position: absolute; left: 560px; top: 460px; width: 800px; display: grid; grid-template-columns: 390px 390px; gap: 20px; }
/* 只有兩個選項（○× 題、觀眾時刻二選一）：一排兩顆，放在選項區垂直置中 */
#options:not(:has(> :nth-child(3))) { top: 529px; }
/* 選項按鈕：btn_a～d.png 當底圖（保留 A～D 字母方塊），選項文字以深色字疊在右側文字區 */
.opt { position: relative; display: flex; align-items: center; width: 390px; height: 118px; padding: 0 20px 0 116px; color: var(--ink);
  font-family: "Noto Sans TC", sans-serif; font-size: 38px; font-weight: 900; text-align: left; cursor: pointer; line-height: 1.2; transition: none;
  background: url("../assets/ui/btn_a.png") 0 0 / 100% 100% no-repeat; image-rendering: pixelated;
  background-image: image-set(url("../assets/ui/btn_a.webp") type("image/webp"), url("../assets/ui/btn_a.png") type("image/png"));
  box-shadow: none; --b: 8px; --sh: 0px; --bevel: 0 0 0 transparent; }
.opt.c0 { background-image: url("../assets/ui/btn_a.png"); background-image: image-set(url("../assets/ui/btn_a.webp") type("image/webp"), url("../assets/ui/btn_a.png") type("image/png")); }
.opt.c1 { background-image: url("../assets/ui/btn_b.png"); background-image: image-set(url("../assets/ui/btn_b.webp") type("image/webp"), url("../assets/ui/btn_b.png") type("image/png")); }
.opt.c2 { background-image: url("../assets/ui/btn_c.png"); background-image: image-set(url("../assets/ui/btn_c.webp") type("image/webp"), url("../assets/ui/btn_c.png") type("image/png")); }
.opt.c3 { background-image: url("../assets/ui/btn_d.png"); background-image: image-set(url("../assets/ui/btn_d.webp") type("image/webp"), url("../assets/ui/btn_d.png") type("image/png")); }
/* 字母已畫在按鈕圖上，HTML 的 A～D 留給螢幕閱讀器 */
.opt .key { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* ○× 題：用色塊蓋住圖上的字母，改放 ○／× */
#options.tf .opt .key { left: 24px; top: 21px; width: 76px; height: 74px; clip-path: none; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 56px; font-weight: 900; line-height: 1; text-shadow: 4px 4px 0 rgba(0, 0, 0, .35);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .3), inset 0 -4px 0 rgba(0, 0, 0, .3), 0 0 0 2px #3a0a0a; }
#options.tf .opt.c2 .key { background: #17824a; } #options.tf .opt.c0 .key { background: #c8272d; }
#options.tf .opt { font-size: 40px; }
.opt:hover:not(:disabled) { filter: brightness(1.06); }
.opt:active:not(:disabled) { transform: translate(4px, 4px); }
.opt:focus-visible { box-shadow: var(--pxframe); --fc: var(--gold); }
.opt:disabled { cursor: default; }
/* 求救刪除的選項：半透明、灰階、不能點 */
.opt.gone { opacity: .3; filter: grayscale(1); pointer-events: none; cursor: default; }
/* 鎖定答案：壓下 1 虛擬像素、外框金色 */
.opt.locked { transform: translate(4px, 4px); box-shadow: var(--pxframe); --fc: var(--gold); }
.opt.dim { opacity: .5; filter: grayscale(.7); }
/* 正解：綠框（綠白 10fps 閃 4 下）；選錯：紅框＋「碰！」小章 */
.opt.right { box-shadow: var(--pxframe); --fc: var(--ok); animation: okblink .2s steps(1) 4; }
@keyframes okblink { 0% { --fc: var(--ok); } 50% { --fc: #ffffff; } }
.opt.wrong { box-shadow: var(--pxframe); --fc: var(--bad); }
.opt.wrong::after { content: "碰！"; position: absolute; right: 8px; top: -22px; background: var(--bad); color: #fff; font-size: 26px; font-weight: 900;
  line-height: 36px; padding: 0 10px; transform: rotate(-6deg); box-shadow: 0 0 0 4px var(--ink), 4px 4px 0 4px rgba(0, 0, 0, .4); }
#btn-help { position: absolute; right: 478px; top: 800px; z-index: 7; }

/* 對錯時的題目區：答錯短震（2 虛擬像素，12fps 4 格）、逾時定格（灰階） */
#screen-question.shake { animation: shake .36s steps(1) both; }
@keyframes shake { 0% { transform: translate(8px, 0); } 25% { transform: translate(-8px, 4px); } 50% { transform: translate(4px, -4px); } 75% { transform: translate(-4px, 0); } 100% { transform: none; } }
#screen-question.freeze { filter: grayscale(1) brightness(.8); }
#screen-question.freeze .bulbs { animation-play-state: paused; }

/* 解說：逐行列印式出現（200ms、4 格） */
#explain { position: absolute; left: 540px; top: 448px; width: 880px; min-height: 320px; z-index: 1; background: var(--bg2);
  padding: 24px 32px; display: flex; flex-direction: column; gap: 12px; animation: printin .2s steps(4) both; }
@keyframes printin { from { clip-path: inset(-20px -20px 100% -20px); } to { clip-path: inset(-20px); } }
.verdict { font-size: 64px; font-weight: 900; line-height: 1; text-shadow: 4px 4px 0 var(--ink); }
.verdict.ok { color: var(--ok); } .verdict.bad { color: var(--bad); }
.verdict .pts { font-family: "Press Start 2P", monospace; font-size: 28px; color: var(--gold); margin-left: 20px; }
.answer-line { font-size: 32px; font-weight: 900; color: var(--gold); }
.explain-text { font-size: 28px; line-height: 1.55; color: var(--white); flex: 1; }
#btn-next { align-self: flex-end; }

/* ---------- DOM 特效（js/fx.js） ---------- */
#fx-layer { position: absolute; inset: 0; z-index: 15; pointer-events: none; }
#fx-top { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; image-rendering: pixelated; }
.fx-pop { position: absolute; transform: translate(-50%, -50%); font-size: 56px; color: var(--gold); white-space: nowrap;
  text-shadow: 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink), 8px 8px 0 var(--ink);
  animation: popup .72s steps(1) both; }
.fx-pop.minus { color: var(--bad); font-size: 44px; }
@keyframes popup {
  0% { transform: translate(-50%, -50%) scale(.5); } 9% { transform: translate(-50%, -50%) scale(1.25); }
  18% { transform: translate(-50%, calc(-50% - 16px)); } 30% { transform: translate(-50%, calc(-50% - 32px)); }
  45% { transform: translate(-50%, calc(-50% - 48px)); } 60% { transform: translate(-50%, calc(-50% - 56px)); }
  80% { transform: translate(-50%, calc(-50% - 64px)); } 90%, 100% { transform: translate(-50%, calc(-50% - 64px)); visibility: hidden; } }
.fx-pop.timeup { color: var(--bad); font-size: 72px; animation: timeuppop .9s steps(1) both; }
@keyframes timeuppop { 0% { transform: translate(-50%, -50%) scale(1.4); } 11% { transform: translate(-50%, -50%); }
  33% { visibility: hidden; } 44% { visibility: visible; transform: translate(-50%, -50%); } 66% { visibility: hidden; } 77%, 100% { visibility: visible; transform: translate(-50%, -50%); } }
/* 分段跳分（答對 +100／速度 +N／COMBO +N／本題得分）：整組往上浮，每行間隔 110ms 逐格彈出（steps，不補間） */
.fx-pop.fx-score { display: flex; flex-direction: column; align-items: stretch; gap: 2px; font-size: 32px; min-width: 340px; padding: 12px 24px 14px;
  background: rgba(14, 8, 20, .94); box-shadow: 0 0 0 4px #b8862a, 0 0 0 8px var(--ink), 8px 8px 0 8px var(--ink);
  transform: translate(-50%, 0); animation: scorerise 1.4s steps(1) both; }
@keyframes scorerise { 0% { transform: translate(-50%, 0); } 25% { transform: translate(-50%, -4px); }
  50% { transform: translate(-50%, -8px); } 75%, 100% { transform: translate(-50%, -12px); } }
.fx-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; line-height: 1.25;
  animation: rowin .33s steps(1) both; animation-delay: calc(var(--i, 0) * 110ms); }
.fx-row .lbl { font-family: "Noto Sans TC", sans-serif; font-weight: 900; font-size: 30px; color: var(--white); }
.fx-row.speed .px { color: var(--ok); }
.fx-row.combo .lbl { font-family: "Press Start 2P", monospace; font-size: 22px; color: #ff9b3d; }
.fx-row.combo .px { color: #ff9b3d; }
.fx-row.mult .px { color: var(--white); }
.fx-row.total { justify-content: flex-end; margin-top: 6px; padding-top: 8px; border-top: 4px dashed rgba(255, 210, 63, .5); }
.fx-row.total .px { font-size: 52px; color: var(--gold); }
@keyframes rowin { 0% { visibility: hidden; } 1% { visibility: visible; transform: scale(1.5); } 33% { transform: scale(1.2); } 66%, 100% { visibility: visible; transform: none; } }

/* COMBO 看板：題卡下方舞台前緣（x 780～1140、y 796），連對 3 題起出現；金白 6fps 閃、加一時逐格彈跳 */
#combo { position: absolute; left: 780px; top: 796px; width: 360px; height: 64px; z-index: 5; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 16px; background: rgba(14, 8, 20, .9);
  box-shadow: 0 0 0 4px #b8862a, 0 0 0 8px var(--ink), 8px 8px 0 8px var(--ink); }
#combo .combo-label { font-size: 26px; color: #ff9b3d; text-shadow: 4px 4px 0 #5a2a00; animation: comboflash .333s steps(1) infinite; }
#combo .combo-n { font-size: 40px; color: #fff; text-shadow: 4px 4px 0 #3a3a52; }
@keyframes comboflash { 50% { color: var(--gold); } }
#combo.hit { animation: combohit .48s steps(1) both; }
@keyframes combohit { 0% { transform: scale(1.3); } 25% { transform: scale(1.15) translateY(-8px); } 50% { transform: translateY(4px); } 75%, 100% { transform: none; } }

.fx-bang { position: absolute; transform: translate(-50%, -50%); animation: bangin .8s steps(1) both; }
.fx-bang canvas { display: block; image-rendering: pixelated; }
@keyframes bangin { 0% { transform: translate(-50%, -50%) scale(1.6); } 10% { transform: translate(-50%, -50%) scale(1.25); }
  20% { transform: translate(-50%, -50%) rotate(-4deg); } 30% { transform: translate(-50%, -50%); } 88% { visibility: visible; } 89%, 100% { visibility: hidden; transform: translate(-50%, -50%); } }

/* 段落轉場：像素方塊斜向長出／縮回（棋盤兩色），每格 3 階、總長約 450ms */
#wipe { position: absolute; inset: 0; z-index: 19; display: grid; grid-template-columns: repeat(16, 120px); grid-template-rows: repeat(9, 120px); pointer-events: none; }
#wipe i { background: #0d1130; transform: scale(0); }
#wipe i.b { background: var(--bg2); }
#wipe.in i { transform: scale(1); animation: wipein .24s steps(3) both; animation-delay: calc(var(--d) * 9ms); }
#wipe.out i { transform: scale(0); animation: wipein .24s steps(3) reverse both; animation-delay: calc((23 - var(--d)) * 9ms); }
@keyframes wipein { from { transform: scale(0); } to { transform: scale(1); } }

/* 疊加 */
.overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 30, .72); }
#overlay-segment { background: transparent; }
.segment-card { background: var(--red); padding: 32px 88px; text-align: center; --fc: var(--gold); --sh: 12px; animation: slam .32s steps(1) both; }
.segment-card .px { color: var(--gold); font-size: 26px; }
.segment-name { font-size: 84px; font-weight: 900; color: #fff; -webkit-text-stroke: 2px #5a0a14; margin-top: 12px; text-shadow: 4px 4px 0 #5a0a14; }
@keyframes slam { 0% { transform: scale(1.6); opacity: 0; } 25% { transform: scale(1.3); opacity: 1; } 50% { transform: scale(1.1); } 75% { transform: scale(.96); } 100% { transform: none; } }
.overlay.see-through { background: rgba(8, 10, 30, .25); align-items: flex-start; padding-top: 32px; }
.shout { text-align: center; background: var(--gold); color: var(--ink); padding: 16px 60px; }
.shout-title { font-size: 48px; font-weight: 900; }
.shout-num { font-size: 80px; margin-top: 8px; }
.genius-box { background: var(--bg2); padding: 40px 60px; text-align: center; --fc: var(--gold); --sh: 12px; }
.genius-title { font-size: 80px; font-weight: 900; color: var(--gold); margin-bottom: 32px; text-shadow: 4px 4px 0 var(--ink); }
.genius-choices { display: flex; gap: 48px; }
.genius-btn { display: flex; flex-direction: column; gap: 8px; width: 520px; padding: 28px; }
.genius-btn b { font-size: 56px; } .genius-btn span { font-size: 26px; font-weight: 700; }
.genius-btn.safe { background: var(--blue); } .genius-btn.hard { background: var(--red); }

/* ---------- 通知表：點陣印表機成績單 ----------
   連續報表紙：左右齒孔、虛線撕邊、淡綠條紋；上下鋸齒紙邊；每一行由上往下逐行印出，最後蓋等級章 */
#screen-result { display: flex; justify-content: center; align-items: flex-start; padding-top: 64px; }
.report { width: 1040px; position: relative; display: flex; flex-direction: column; gap: 24px; }
.paper { position: relative; color: var(--ink); padding: 20px 80px 24px; box-shadow: 12px 12px 0 rgba(0, 0, 0, .45);
  background:
    linear-gradient(#0d1130 0 12px, transparent 12px) left 20px top 10px / 12px 32px repeat-y,
    linear-gradient(#0d1130 0 12px, transparent 12px) right 20px top 10px / 12px 32px repeat-y,
    linear-gradient(#c9bf9f 0 8px, transparent 8px) left 52px top 0 / 4px 16px repeat-y,
    linear-gradient(#c9bf9f 0 8px, transparent 8px) right 52px top 0 / 4px 16px repeat-y,
    repeating-linear-gradient(var(--card) 0 48px, #edf2d2 48px 96px); }
/* 上下鋸齒邊（8px 一齒） */
.paper::before, .paper::after { content: ""; position: absolute; left: 0; right: 0; height: 8px;
  background: linear-gradient(90deg, var(--card) 0 8px, transparent 8px) 0 0 / 16px 8px repeat-x; }
.paper::before { top: -8px; } .paper::after { bottom: -8px; }
.print-line { position: relative; }
.paper.printing .print-line { animation: printline .28s steps(4) both; animation-delay: calc(var(--i, 0) * 140ms); }
@keyframes printline { from { clip-path: inset(-40px -40px 100% -40px); } to { clip-path: inset(-40px); } }
.report-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; font-size: 24px; font-weight: 900;
  padding-bottom: 12px; border-bottom: 4px dashed var(--ink); }
.report-head .px { color: var(--red); font-size: 22px; white-space: nowrap; }
.report-hero { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; min-height: 120px; }
.report-title { font-size: 76px; font-weight: 900; color: var(--red); line-height: 1.1; text-shadow: 4px 4px 0 rgba(20, 20, 20, .15); }
/* 等級印章：紅色像素外框、Press Start 2P 等級字 */
.stamp { width: 128px; height: 128px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--red); background: rgba(200, 39, 45, .06); --fc: var(--red); --sh: 0px; --b: 8px;
  --bevel: inset 0 0 0 4px var(--card), inset 0 0 0 8px var(--red); margin-right: 8px; }
.stamp .px { font-size: 56px; line-height: 1; }
.stamp small { font-size: 18px; font-weight: 900; }
.paper.printing .stamp { animation: stamp .32s steps(1) both; animation-delay: .82s; }
@keyframes stamp { 0% { opacity: 0; transform: scale(2); } 25% { opacity: 1; transform: scale(1.6); } 50% { transform: scale(1.2); } 75% { transform: scale(.92); } 100% { opacity: 1; transform: none; } }
.report-grid { display: flex; gap: 12px; margin-top: 16px; padding: 8px 4px 12px; }
.report-grid span { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; position: relative;
  color: #fff; font-size: 36px; font-weight: 900; line-height: 1; --b: 4px; --sh: 4px;
  --bevel: inset 0 4px 0 rgba(255, 255, 255, .25), inset 0 -4px 0 rgba(0, 0, 0, .25); }
.report-grid span.g-gap { margin-left: 20px; }
.report-grid .g-ok { background: var(--green); } .report-grid .g-bad { background: var(--red); }
.report-grid .g-genius { --fc: var(--gold); --b: 8px; }
.report-grid .g-genius::after { content: "★"; position: absolute; top: -20px; right: -16px; font-size: 24px; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.report-scoreline { display: flex; align-items: baseline; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.score-label { font-size: 18px; color: #6b6450; }
.report-score { font-size: 48px; color: var(--ink); }
.report-correct { font-size: 32px; font-weight: 900; }
.report-replay { display: inline-block; background: var(--ink); color: var(--gold); font-size: 22px; padding: 4px 12px; }
.report-bonus { display: flex; align-items: baseline; gap: 16px; margin-top: 8px; }
.report-bonus .bonus-val { font-size: 24px; color: var(--ink); margin-right: 24px; }
.report-wrongline { margin-top: 12px; padding-top: 12px; border-top: 4px dashed rgba(20, 20, 20, .35); font-size: 26px; font-weight: 700; line-height: 1.45; display: flex; gap: 16px; align-items: baseline; }
.side-label { font-size: 20px; color: var(--red); font-weight: 900; white-space: nowrap; }
/* 紙張下方：明日預告、收看紀錄 */
.report-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.note { background: var(--bg2); color: var(--white); padding: 12px 20px; font-size: 24px; font-weight: 700; line-height: 1.45; --sh: 0px;
  display: flex; flex-direction: column; gap: 4px; }
.note .side-label { color: var(--gold); font-size: 18px; }
.report-buttons { display: flex; gap: 40px; justify-content: center; }
/* 會員候補：最下方一行文字連結，列印動畫結束後才出現 */
.waitlist-line { text-align: center; font-size: 20px; color: var(--dim); animation: appear 0s 1.4s both; }
@keyframes appear { from { visibility: hidden; } to { visibility: visible; } }
.waitlist-line .linkish { color: var(--dim); }
#waitlist-form { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; font-weight: 700; }
#share-panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20; width: 900px;
  background: var(--ink); padding: 32px 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  --fc: var(--gold); --sh: 0px; box-shadow: var(--pxframe), 0 0 0 9999px rgba(0, 0, 0, .55); }
#share-panel[hidden] { display: none; }
#share-panel .share-title { grid-column: 1 / -1; color: var(--gold); font-size: 38px; font-weight: 900; text-align: center; margin-bottom: 4px; }
#share-panel small { display: block; font-size: 20px; font-weight: 500; opacity: .85; margin-top: 4px; }
#share-panel #share-close { grid-column: 1 / -1; justify-self: center; }
#share-panel { grid-template-columns: 1fr 1fr 1fr; width: 1080px; gap: 18px; }
#share-panel .share-preview { grid-column: 1 / -1; display: flex; gap: 20px; align-items: center; background: #1e1a2e; padding: 14px; }
#share-panel .share-preview img { width: 400px; height: 210px; image-rendering: pixelated; background: #2a2540; flex: none; }
#share-panel .share-preview pre { margin: 0; white-space: pre-wrap; font-family: "Noto Sans TC", sans-serif; font-size: 20px; line-height: 1.5; color: #fff; }
#share-panel .share-status { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 20px; color: var(--gold); min-height: 26px; }
#share-panel #share-native { grid-column: 1 / -1; }
#share-panel .btn:disabled { opacity: .5; }
.toast { position: absolute; left: 50%; top: 440px; transform: translateX(-50%); z-index: 25; background: var(--ink); color: var(--gold); font-size: 26px;
  padding: 8px 24px; white-space: nowrap; --fc: var(--gold); --b: 4px; --sh: 4px; }

/* 跑馬燈 */
/* 跑馬燈：底條、金線與右下天際線都畫在背景圖裡（y 978～1066），這裡只疊 LIVE 牌、紅色箭頭與文字 */
#marquee { position: absolute; left: 0; top: 982px; width: 1920px; height: 78px; background: none; z-index: 8;
  display: flex; align-items: center; gap: 24px; padding-left: 32px; overflow: hidden; }
#marquee .live { background: #e0202a; color: #fff; font-size: 30px; padding: 12px 14px; animation: blink 1s steps(1) infinite;
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--ink); margin-left: 8px; }
#marquee .chevrons::before { content: "▶▶▶"; color: #e0202a; font-size: 26px; letter-spacing: -4px; }
/* 跑馬燈：文字由右往左捲動（負責人 2026-10-05） */
.marquee-track { flex: 1; max-width: 940px; overflow: hidden; white-space: nowrap; }
#marquee-text { display: inline-block; padding-left: 100%; font-size: 28px; font-weight: 700; color: var(--gold); white-space: nowrap; animation: marquee 20s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }
#corner-btns { position: absolute; right: 24px; bottom: 26px; z-index: 9; display: flex; gap: 12px; }
/* Turnstile 需要互動時出現的勾選框：畫面下方置中，蓋在所有內容之上 */
#turnstile-box { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%) scale(1.6); transform-origin: 50% 100%; z-index: 30; }
#turnstile-box:empty { display: none; }
/* 片頭「創始贊助委員」按鈕右上角的「招募中」標籤（逐格閃爍） */
#btn-support { position: relative; }
.recruit-tag { position: absolute; right: -16px; top: -16px; background: #e0202a; color: #fff; font-size: 16px; font-weight: 900; padding: 1px 8px;
  transform: rotate(6deg); box-shadow: 0 0 0 2px #fff; z-index: 2; white-space: nowrap; } /* 固定顯示、不閃爍（DECISIONS 第 43 條） */
/* 支持節目：兩個方案按鈕 */
.plan-row { display: flex; gap: 16px; }
.btn.plan { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; padding-top: 20px; }
.btn.plan b { font-size: 32px; } .btn.plan small { font-size: 17px; font-weight: 700; opacity: .9; }
.plan-tag { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #3a0a0a; font-size: 17px; padding: 1px 10px; white-space: nowrap; }
/* 贊助委員權益：主卡加寬、打賞卡改直排，整頁塞進一個畫面 */
#screen-support { padding-top: 28px !important; gap: 14px !important; }
.support-card.main { width: 860px; }
.support-card:not(.main) { width: 420px; }
.support-card:not(.main) .tip-row { flex-direction: column; }
.support-card h3 { margin-bottom: 6px !important; }
.perk-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 20px; line-height: 1.45; color: #d8dcf4; }
.perk-list li { padding-left: 30px; position: relative; }
.perk-list li::before { content: '★'; position: absolute; left: 0; color: var(--gold); }
.perk-list b { color: #fff; }
.perk-list i { font-style: normal; font-size: 15px; color: #1a1426; background: #9be29b; padding: 1px 8px; margin-left: 8px; white-space: nowrap; }
.support-fine { margin: 0 0 12px; font-size: 16px; line-height: 1.5; color: #a9a4c4; }
/* 手機橫放（高度 ≤ 500px）：片頭主按鈕與工具列放大，縮放後仍有足夠觸控面積；片頭跑馬燈不捲動 */
@media (max-height: 500px) {
  #screen-title #btn-start.big, #screen-title #btn-myrec { font-size: 52px; padding: 26px 76px; }
  .btn.nav { font-size: 32px; padding: 16px 30px; }
  .event-card { font-size: 36px; padding: 16px 30px; }
  #screen-title .streak-chip { font-size: 28px; }
}
/* 連續報到（片頭） */
.streak-box { display: flex; align-items: center; gap: 18px; background: rgba(14, 8, 20, .85); padding: 8px 22px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .45); }
.streak-num { font-size: 30px; font-weight: 900; color: var(--gold); }
.streak-week { display: flex; gap: 6px; }
.streak-week i { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 16px; font-weight: 900;
  background: #3a3550; color: #8c86a8; box-shadow: 0 0 0 2px #14101f; }
.streak-week i.watched { background: #17824a; color: #fff; } .streak-week i.grace { background: #b8862a; color: #fff; }
.streak-week i.today { background: #fff6d6; color: #c8272d; animation: blink 1s steps(1) infinite; }
.streak-hint { font-size: 22px; color: #fff; font-weight: 700; }
/* 我的紀錄 */
#screen-records { display: flex; flex-direction: column; align-items: center; padding-top: 40px; gap: 16px; }
.records-top { display: flex; gap: 22px; align-items: stretch; }
.rec-stat { background: rgba(14, 8, 20, .9); padding: 14px 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 5px var(--gold); }
.rec-stat b { font-size: 60px; color: var(--gold); line-height: 1.1; } .rec-stat small { font-size: 20px; color: #fff; }
.rec-cal { display: grid; grid-template-columns: repeat(7, 34px); gap: 4px; background: rgba(14, 8, 20, .9); padding: 10px; box-shadow: 0 0 0 5px var(--gold); }
.rec-cal span { height: 30px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #8c86a8; background: #2a2540; }
.rec-cal span.watched { background: #17824a; color: #fff; } .rec-cal span.head { background: none; color: var(--gold); font-weight: 900; } .rec-cal span.blank { background: none; }
.rec-cal span.today { box-shadow: 0 0 0 2px #fff; }
.rec-note { margin: 0; font-size: 20px; color: #d8dcf4; background: rgba(14, 8, 20, .8); padding: 4px 16px; }
.rec-list { width: 1300px; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px; scrollbar-color: var(--gold) rgba(14, 8, 20, .6); }
.rec-row { display: grid; grid-template-columns: 160px 1fr 300px 90px 270px; align-items: center; gap: 14px; background: #fff6d6; color: var(--ink); padding: 10px 18px; font-size: 22px; font-weight: 700; }
.rec-row .rec-grade { font-family: "Press Start 2P", monospace; color: #c8272d; font-size: 22px; }
.rec-row .rec-grid { font-size: 18px; letter-spacing: 1px; white-space: nowrap; }
.rec-row .rec-tag { font-size: 16px; color: #6b6559; }
.rec-account { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; max-width: 1300px; font-size: 22px; color: #fff;
  background: rgba(14, 8, 20, .85); padding: 10px 22px; }
.rec-account form { display: flex; gap: 10px; }
.rec-account input { font-size: 22px; padding: 6px 12px; width: 360px; }
.rec-account .linkish { font-size: 18px; }
.rec-empty { text-align: center; font-size: 24px; color: #fff; background: rgba(14, 8, 20, .85); padding: 24px; }
/* 離開確認 */
.exit-box { background: #141020; padding: 30px 44px; text-align: center; box-shadow: 0 0 0 6px var(--gold), 8px 8px 0 6px rgba(0, 0, 0, .5); max-width: 900px; }
.exit-title { font-size: 48px; font-weight: 900; color: var(--gold); margin-bottom: 12px; }
.exit-box p { font-size: 24px; color: #fff; line-height: 1.6; margin: 0 0 22px; }
.exit-buttons { display: flex; gap: 24px; justify-content: center; }
/* 付款完成感謝頁 */
#screen-thanks { display: flex; align-items: flex-start; justify-content: center; padding-top: 70px; }
.thanks-card { width: 1000px; background: rgba(14, 8, 20, .92); padding: 36px 48px 40px; text-align: center; box-shadow: 0 0 0 8px var(--gold), 10px 10px 0 8px rgba(0, 0, 0, .45); }
.thanks-title { font-size: 76px; font-weight: 900; color: var(--gold); text-shadow: 5px 5px 0 var(--ink); margin-bottom: 18px; }
.thanks-main { margin: 0 0 12px; font-size: 34px; font-weight: 900; color: #fff; line-height: 1.5; }
.thanks-status { margin: 0 0 18px; font-size: 26px; color: #9be29b; min-height: 36px; }
.thanks-note { margin: 0 0 26px; font-size: 22px; color: #d8dcf4; line-height: 1.6; }
/* 支持節目 */
#screen-support { display: flex; flex-direction: column; align-items: center; padding-top: 48px; gap: 22px; }
.support-test { margin: 0; background: #ffe58a; color: #3a2a00; font-size: 22px; padding: 6px 18px; font-weight: 700; }
.support-cards { display: flex; gap: 32px; }
.support-card { width: 600px; background: rgba(14, 8, 20, .9); padding: 22px 30px 26px; box-shadow: 0 0 0 6px var(--gold), 8px 8px 0 6px rgba(0, 0, 0, .45); }
.support-card h3 { margin: 0 0 10px; font-size: 34px; color: var(--gold); }
.support-lead { margin: 0 0 10px; font-size: 24px; line-height: 1.5; color: #fff; font-weight: 700; }
.support-card ul { margin: 0 0 12px; padding-left: 26px; font-size: 21px; line-height: 1.6; color: #d8dcf4; }
.support-status { margin: 0 0 12px; font-size: 22px; color: #9be29b; min-height: 28px; }
.tip-row { display: flex; gap: 16px; margin-top: 16px; }
.btn.tip { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 28px; }
.btn.tip small { font-size: 18px; font-weight: 700; opacity: .85; }
.support-line { display: flex; gap: 18px; justify-content: center; align-items: center; font-size: 22px; background: rgba(14, 8, 20, .82); padding: 6px 18px; }
.support-line .dim { opacity: .7; font-size: 18px; }
#email-line { display: flex; flex-direction: column; gap: 8px; align-items: center; font-size: 22px; color: #d8dcf4; background: rgba(14, 8, 20, .82); padding: 8px 20px; }
#email-form { display: flex; gap: 12px; }
#email-input { font-size: 22px; padding: 6px 12px; width: 360px; }
/* 右下角小圖示按鈕：縮小、半透明，讓 LIVE 列的天際線露出來；滑過或聚焦時才完整顯示 */
.btn.icon-btn { width: 52px; height: 52px; padding: 0; font-size: 26px; line-height: 1; --b: 3px; --sh: 3px; opacity: .7;
  display: inline-flex; align-items: center; justify-content: center; }
.btn.icon-btn:hover, .btn.icon-btn:focus-visible { opacity: 1; }
.btn.icon-btn:active:not(:disabled) { transform: translate(3px, 3px); --sh: 0px; }
#btn-crt[aria-pressed="false"] { opacity: .4; text-decoration: line-through; }

/* 新背景是紅布幕：片頭、節目表、排行榜、通知表上的說明小字加深色底，保持可讀 */
.episode-line, .record-line:not(:empty), .hint, .board-note, .waitlist-line, #intro-card .intro-date, #intro-card .intro-sub {
  background: rgba(14, 8, 20, .82); padding: 4px 20px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .45); }
.hint, .board-note, .waitlist-line, #intro-card .intro-sub, .waitlist-line .linkish { color: #d8dcf4; }
#intro-card .intro-date, #intro-card .intro-sub { display: inline-block; }
.screen-title { -webkit-text-stroke: 2px #5a0a14; text-shadow: 4px 4px 0 var(--ink), 8px 8px 0 rgba(0, 0, 0, .4); }

/* 手機直立 */
/* 手機直立：由 js/game.js 依實際寬高加上 body.is-portrait（不用 orientation 媒體查詢，App 內建瀏覽器轉向時會不準） */
#rotate { display: none; }
body.is-portrait #rotate { display: flex; position: fixed; inset: 0; z-index: 100; background: var(--bg); color: var(--gold); font-size: 28px; font-weight: 900;
  align-items: center; justify-content: center; text-align: center; line-height: 1.6; }
#rotate small { display: block; margin: 14px 24px 18px; font-size: 16px; font-weight: 500; color: #d8dcf4; line-height: 1.5; }
#rotate .btn { font-size: 18px; }

/* 通知表模式：主持人縮小靠邊，避免蓋到通知表 */
#stage.result-mode .host { width: 260px; left: 124px; }
#stage.result-mode .host.right { left: auto; right: 124px; }
#stage.result-mode .host { transform: scale(.77); transform-origin: 50% 100%; }
#stage.about-mode .host { visibility: hidden; }
#stage.result-mode .bubble { width: 290px; bottom: 280px; font-size: 24px; }

/* 開場字卡 */
#intro-card { position: absolute; left: 560px; top: 300px; width: 800px; z-index: 4; text-align: center; animation: slam .32s steps(1) both; }
#intro-card .intro-date { font-size: 44px; font-weight: 900; color: var(--white); text-shadow: 4px 4px 0 var(--ink); }
#intro-card .intro-ep { margin-top: 24px; background: var(--red); padding: 20px 32px; font-size: 56px; font-weight: 900; color: var(--gold); -webkit-text-stroke: 2px #5a0a14;
  --fc: var(--gold); }
#intro-card .intro-sub { margin-top: 20px; font-size: 26px; color: var(--dim); }

/* 回報錯誤 */
.explain-actions { display: flex; justify-content: space-between; align-items: center; }
.btn.ghost { background: transparent; color: var(--dim); --fc: var(--dim); --sh: 0px; --bevel: 0 0 0 transparent; }
#report-box { display: flex; align-items: center; gap: 16px; font-size: 24px; }
#report-box select { font-size: 24px; padding: 4px 8px; font-family: inherit; border: 4px solid var(--ink); border-radius: 0; }

/* 片頭連結 */
.linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* 排行榜 */
#screen-board { display: flex; flex-direction: column; align-items: center; padding-top: 108px; gap: 24px; }
.tabs { display: flex; gap: 20px; }
.tab[aria-selected="true"] { background: var(--gold); color: var(--ink); }
#board-list { width: 900px; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
#board-list li { display: flex; justify-content: space-between; background: var(--bg2); padding: 12px 24px;
  font-family: "Press Start 2P", monospace; font-size: 24px; --b: 4px; --sh: 0px; }
#board-list li:first-child { color: var(--gold); }
.board-note { color: var(--dim); font-size: 22px; margin: 0; }

/* 關於 */
#screen-about { display: flex; flex-direction: column; align-items: center; padding-top: 48px; gap: 24px; }
/* 關於頁內容變多（條款連結、回報問題）：框內捲動，「回到片頭」固定在跑馬燈上方看得到（DECISIONS 第 73 條） */
#screen-about .about { max-height: 780px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #c8272d #efe3bd; user-select: text; -webkit-user-select: text; }
.about { width: 1300px; background: var(--card); color: var(--ink); padding: 24px 40px; font-size: 24px; line-height: 1.6; --sh: 0px; }
.about h2 { margin: 0 0 8px; font-size: 40px; color: var(--red); } .about h3 { margin: 16px 0 4px; font-size: 28px; }
.about p { margin: 0; }
.about a { color: #c8272d; font-weight: 700; }

/* 通知表額外區塊（排行榜暱稱、會員候補表單） */
#result-extras { display: flex; flex-direction: column; gap: 12px; font-size: 22px; font-weight: 700; }
#result-extras:empty, #result-extras:not(:has(form:not([hidden]))) { display: none; }
#result-extras form { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
#result-extras input, #waitlist-form input { font-size: 24px; padding: 4px 12px; border: 4px solid var(--ink); border-radius: 0; font-family: inherit; }
#initials { width: 120px; text-transform: uppercase; font-family: "Press Start 2P", monospace; }
#waitlist-email { width: 340px; }

/* 減少動態：關閉燈泡閃爍（含招牌與題卡框微閃）、角色呼吸與移動、字卡與特效動畫、彩帶（js/fx.js）、像素 wipe */
@media (prefers-reduced-motion: reduce) {
  .bulbs, .host img, .host.talk img, .actor, .segment-card, .opt.right, #intro-card, #explain, #score.bump, #timer-num.tickpop,
  #timer.final #timer-cells span, #timer.timeup #timer-num, #screen-question.shake, .paper.printing .print-line, .paper.printing .stamp,
  .waitlist-line, #marquee .live, #marquee-text, #wipe i, .fx-pop, .fx-bang, .marquee-sm, #live-window .live-lights, #audience .crowd,
  #live-window img, .hud-logo, .qcard-frame::before, .fx-row, #combo, #combo .combo-label { animation: none !important; }
  #wipe.out { display: none; }
}

/* 分段跳分框出現時（約 1.5 秒），解說文字只用左側，不被跳分框蓋住 */
#explain.with-pop .explain-text, #explain.with-pop .answer-line { max-width: 440px; }

/* ---------- 選舉特別專區（PLAN 4.4.2；示意圖 docs/mockups/mode4_election.png）----------
   開票中心新聞台：中性藍灰色調。背景 bg_election.png（1536×864，放大到 1920×1080）。
   題目放在背景中央的大螢幕（約 x 775～1569、y 144～731）；主持人站在左側主播台後面（#elec-desk 是從背景裁出的桌面前景）。
   選項不用紅藍綠色塊按鈕圖，改成灰底＋深藍字母，避免政黨聯想色。 */
.hud-elec, #elec-desk { display: none; }
#stage.election-mode { background-image: url("../assets/ui/bg_election.png"); background-color: #0b1636;
  background-image: image-set(url("../assets/ui/bg_election.webp") type("image/webp"), url("../assets/ui/bg_election.png") type("image/png")); }
#stage.election-mode #audience, #stage.election-mode #stage-front { display: none; }
#stage.election-mode #elec-desk { display: block; position: absolute; left: 0; top: 740px; width: 880px; height: 180px; z-index: 7; pointer-events: none;
  background: url("../assets/ui/bg_election.png") 0 -740px / 1920px 1080px no-repeat; image-rendering: pixelated;
  background-image: image-set(url("../assets/ui/bg_election.webp") type("image/webp"), url("../assets/ui/bg_election.png") type("image/png"));
  clip-path: polygon(0 5px, 525px 5px, 600px 12px, 700px 26px, 800px 44px, 869px 62px, 872px 122px, 862px 179px, 0 179px); }
/* 主持人：.host 不建立堆疊層，角色排在桌面之下、對話框排在桌面之上 */
#stage.election-mode .host:not([hidden]) { z-index: auto; }
#stage.election-mode .host .actor { position: relative; z-index: 6; }
#stage.election-mode .host .bubble { z-index: 9; }
#stage.election-mode #host-heipi { left: 110px; bottom: 230px; --sprite-scale: 1.5; }
#stage.election-mode:not(.result-mode) #host-pengpeng { left: 470px; right: auto; bottom: 230px; --sprite-scale: 1.3; }
#stage.election-mode:not(.result-mode) #host-pengpeng .bubble { left: -8px; right: auto; }
#stage.election-mode:not(.result-mode) #host-pengpeng .bubble::after { left: 112px; right: auto; transform: scaleY(-1); }
/* 上方招牌：「選舉特別專區」＋專區名稱（取代每日節目的燈泡招牌、段落與進度標籤） */
#stage.election-mode .hud-logo, #stage.election-mode .hud-plate, #stage.election-mode .hud-left, #stage.election-mode .hud-progress { display: none; }
#stage.election-mode .hud-elec { display: flex; flex-direction: column; gap: 10px; left: 36px; top: 34px; }
.hud-elec-title { background: #12245a; color: #fff; font-size: 64px; font-weight: 900; line-height: 1; padding: 18px 28px 22px; letter-spacing: 4px;
  box-shadow: 0 0 0 6px #c9d3ea, 0 10px 0 6px #f2c94c, 8px 16px 0 6px rgba(0, 0, 0, .45); }
.hud-elec-zone { align-self: flex-start; margin-top: 18px; background: #f2f4fa; color: #12245a; font-size: 30px; font-weight: 900; padding: 4px 18px;
  box-shadow: 0 0 0 4px #12245a, 4px 4px 0 4px rgba(0, 0, 0, .4); }
/* 題卡：米白題目框＋金色底線（示意圖），放在大螢幕內 */
#stage.election-mode .qcard-frame { left: 795px; top: 186px; width: 754px; height: 530px; }
#stage.election-mode .qcard-frame::before { display: none; }
#stage.election-mode .qcard { left: 0; top: 0; width: 754px; height: 200px; background: #f7f1df; box-shadow: 0 0 0 6px #0d1a3a, inset 0 -10px 0 #f2c94c; padding: 0 36px 10px; }
#stage.election-mode #options { left: 795px; top: 420px; width: 754px; grid-template-columns: 367px 367px; gap: 20px; }
#stage.election-mode #options:not(:has(> :nth-child(3))) { top: 470px; }
#stage.election-mode .opt { width: 367px; height: 112px; padding: 0 12px 0 96px; background: #e9edf5; font-size: 30px;
  box-shadow: 0 0 0 6px #0d1a3a, 6px 6px 0 6px rgba(0, 0, 0, .35); }
#stage.election-mode .opt .key, #stage.election-mode #options.tf .opt .key { left: 0; top: 0; width: 80px; height: 112px; clip-path: none; display: flex;
  align-items: center; justify-content: center; background: #1b2f63; color: #fff; font-size: 52px; font-weight: 900; box-shadow: none; text-shadow: none; }
#stage.election-mode .opt.locked, #stage.election-mode .opt:focus-visible { box-shadow: 0 0 0 6px #f2c94c, 6px 6px 0 6px rgba(0, 0, 0, .35); }
#stage.election-mode .opt.right { box-shadow: 0 0 0 8px var(--ok), 6px 6px 0 8px rgba(0, 0, 0, .35); }
#stage.election-mode .opt.wrong { box-shadow: 0 0 0 8px var(--bad), 6px 6px 0 8px rgba(0, 0, 0, .35); }
#stage.election-mode #explain { left: 795px; top: 410px; width: 754px; min-height: 300px; background: rgba(9, 18, 44, .94); box-shadow: 0 0 0 6px #c9d3ea; }
/* 選舉專區：COMBO 看板放在解說框下方、主持人桌右邊的空位（原位置會蓋住「回報錯誤」、被碰碰擋住）；
   解說框限制最大高度，長解說在框內捲動，不會往下長到 COMBO */
#stage.election-mode #explain { max-height: 450px; overflow-y: auto; padding-left: 64px; } /* 左側留白：避開碰碰歡呼的星星特效 */
#stage.election-mode #combo { left: 1000px; top: 878px; }
/* 跑馬燈：選舉版沒有畫在背景裡的底條，補一條深藍底＋金線 */
#stage.election-mode #marquee { background: #0b1636; border-top: 6px solid #f2c94c; top: 976px; height: 104px; }
/* 專區選單 */
#screen-election { display: flex; flex-direction: column; align-items: center; padding-top: 48px; gap: 26px; }
#stage #screen-election .screen-title { color: #fff; -webkit-text-stroke: 0; text-shadow: 4px 4px 0 #0d1a3a; background: #12245a; padding: 6px 32px 10px;
  box-shadow: 0 0 0 6px #c9d3ea, 0 10px 0 6px #f2c94c; }
/* 專區選單沒有主持人，不顯示主播台前景（避免蓋住說明文字與按鈕） */
#stage.election-mode[data-screen="election"] #elec-desk { display: none; }
.elec-group { background: rgba(9, 18, 44, .9); padding: 20px 32px 28px; width: 1100px; box-shadow: 0 0 0 6px #c9d3ea, 8px 8px 0 6px rgba(0, 0, 0, .45); }
.elec-group h3 { margin: 0 0 16px; font-size: 30px; color: #f2c94c; }
.elec-row { display: flex; gap: 28px; justify-content: center; }
.elec-row + .elec-row { margin-top: 20px; }
.elec-zone { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #e9edf5; color: #12245a; --fc: #0d1a3a; }
.elec-zone b { font-size: 40px; } .elec-zone small { font-size: 22px; font-weight: 700; color: #3a4a74; }
.elec-zone.wide { width: 728px; }
/* 兩位參選人按鈕：完全相同的尺寸與樣式（PLAN 4.4.2） */
.elec-zone.cand { width: 350px; height: 150px; flex-direction: row; justify-content: center; gap: 18px; }
/* 兩位參選人小人物：同一個顯示高度（素材本身已同比例輸出） */
.elec-zone.cand .cand-img { height: 128px; image-rendering: pixelated; }
.elec-zone.cand picture { display: contents; } /* <picture>（WebP＋PNG 退路）不多一層盒子，圖仍是按鈕的直接排版項目 */
.elec-zone.cand .cand-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#elec-candidate { position: absolute; right: 70px; bottom: 120px; height: 330px; z-index: 6; image-rendering: pixelated; pointer-events: none; }
.elec-row.cities .elec-zone { width: 180px; font-size: 32px; }
.elec-zone:disabled { opacity: .45; cursor: not-allowed; }
.elec-note { width: 1100px; margin: 0; font-size: 22px; line-height: 1.5; color: #d8dcf4; background: rgba(9, 18, 44, .82); padding: 10px 20px; }
/* ---------- 開放 Beta 營運工具（DECISIONS 第 73 條） ---------- */
/* 片頭工具列的完整版入口：和其他工具列按鈕同一級，右上角固定的「搶先試玩」小標籤（不閃爍） */
.btn.nav.full-entry { position: relative; text-decoration: none; display: inline-block; color: #bfe8ff; }
.trial-tag { position: absolute; right: -14px; top: -16px; background: #2f7de1; color: #fff; font-size: 16px; font-weight: 900; padding: 1px 8px;
  transform: rotate(6deg); box-shadow: 0 0 0 2px #fff; white-space: nowrap; }
/* 成績單下方的回饋連結：一行小字 */
.feedback-line { margin: -10px 0 0; text-align: center; font-size: 20px; }
.feedback-line .linkish { color: #d8dcf4; background: rgba(14, 8, 20, .7); padding: 2px 12px; text-decoration: underline; }
/* 回饋表單（js/ops.js 產生）：蓋在舞台最上層，外框比照離開確認框 */
.ops-overlay { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 30, .78); }
.ops-box { width: 1000px; background: #141020; color: #fff; padding: 30px 44px 28px; box-shadow: 0 0 0 6px var(--gold), 10px 10px 0 6px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 14px; font-family: "Noto Sans TC", sans-serif; }
.ops-box h2 { margin: 0; font-size: 40px; color: var(--gold); }
.ops-kinds { border: 0; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.ops-kinds legend { font-size: 22px; color: #d8dcf4; margin-bottom: 8px; padding: 0; }
.ops-kind { cursor: pointer; }
.ops-kind input { position: absolute; opacity: 0; pointer-events: none; }
.ops-kind span { display: inline-block; font-size: 26px; font-weight: 900; padding: 8px 20px; background: #2a2440; box-shadow: inset 0 0 0 3px #4a4268; }
.ops-kind input:checked + span { background: var(--gold); color: var(--ink); box-shadow: inset 0 0 0 3px #fff; }
.ops-kind input:focus-visible + span { outline: 4px solid #fff; outline-offset: 2px; }
.ops-field { display: flex; flex-direction: column; gap: 6px; font-size: 22px; color: #d8dcf4; position: relative; }
.ops-field textarea, .ops-field input { font: 700 26px/1.45 "Noto Sans TC", sans-serif; color: var(--ink); background: #fffdf4; border: 0; padding: 10px 14px;
  box-shadow: inset 0 0 0 3px #4a4268; resize: none; }
.ops-field textarea:focus, .ops-field input:focus { outline: none; box-shadow: inset 0 0 0 4px var(--gold); }
.ops-count { position: absolute; right: 10px; bottom: 8px; font-size: 18px; color: #6b6b75; }
.ops-auto { margin: 0; font-size: 18px; color: #a9a4c4; line-height: 1.5; }
.ops-status { margin: 0; min-height: 30px; font-size: 22px; font-weight: 700; color: #d8dcf4; }
.ops-status[data-state="ok"] { color: #7fe0a6; } .ops-status[data-state="error"] { color: #ff8a8a; }
.ops-buttons { display: flex; gap: 24px; justify-content: center; }
.ops-buttons .btn:focus-visible { --fc: var(--gold); }
.ops-field textarea, .ops-field input { user-select: text; -webkit-user-select: text; }
.ops-box.sent .ops-kinds, .ops-box.sent .ops-field, .ops-box.sent .ops-auto { opacity: .5; }
/* 手機橫放：表單字放大，縮放後仍好點好讀 */
@media (max-height: 500px) {
  .ops-box { width: 1400px; gap: 18px; }
  .ops-box h2 { font-size: 52px; } .ops-kind span { font-size: 36px; padding: 12px 26px; }
  .ops-field, .ops-kinds legend { font-size: 30px; } .ops-field textarea, .ops-field input { font-size: 36px; }
  .ops-auto { font-size: 24px; } .ops-status { font-size: 30px; } .ops-buttons .btn { font-size: 40px; padding: 16px 56px; }
  .feedback-line, .feedback-line .linkish { font-size: 28px; }
}