/* ============================================================================
   Vyin AI · Robot Lobby UI — film.html 的外殼（v3.2，2026-10-13）
   ----------------------------------------------------------------------------
   一鏡到底的 Center 示範：所有畫面疊在同一個 1280×800 舞台上，由 js/film.js 的時間軸
   決定誰亮、什麼時候亮。這裡只管：舞台縮放、場景交叉淡入、元素進場 / 退場的 transition、
   暫停時把 CSS 動畫凍住。畫面本身的樣式全部來自 tokens.css + components.css，不另外畫。
   ============================================================================ */

html,
body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}
body {
  font-family: var(--kiosk-font-mono);
  color: #525252;
}

/* ---------------------------------------------------------------- 舞台 */
.film-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.film-stage {
  position: relative;
  width: var(--kiosk-center-w);
  height: var(--kiosk-center-h);
  flex: none;
  background: var(--kiosk-surface-base);
  overflow: hidden;
  transform-origin: center center;
  opacity: 1;
  transition: opacity 600ms var(--kiosk-ease);
}
/* 黑幕（目前劇本開頭結尾都不用，保留給需要時加 body.film-black） */
body.film-black .film-stage {
  opacity: 0;
}

/* 場景疊放，只亮一個；交叉淡入 500ms（比 prototype 的 200ms 慢，錄影看得到） */
.film-stage > .kv-screen {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--kiosk-ease);
}
.film-stage > .kv-screen.film-active {
  opacity: 1;
  z-index: 1;
}

/* seek 時瞬間到位，不播 transition */
body.film-no-anim .film-stage *,
body.film-no-anim .film-stage {
  transition: none !important;
}

/* 暫停：凍住會一直循環的 CSS 動畫（光點、波形、游標、火花、鏡頭飄移）。
   一次性的（相紙吐出、顯影、白閃、Grow 線、預覽頁的進場）讓它播完，跳場景時畫面才會到位。 */
body.film-paused .film-stage :is(.kv-caret, .kv-wave__bar, .kv-orb, .kv-mic__dot, .kv-ember, .film-cam > img) {
  animation-play-state: paused !important;
}

/* ------------------------------------------------------- 元素狀態 transition
   每個狀態都是「在 .kv-screen 上加一個 is-* class」，CSS 負責過場。 */

/* 聆聽遮罩 */
.film-stage .kv-dim {
  opacity: 0;
  transition: opacity 300ms var(--kiosk-ease);
}
.film-stage .kv-screen.is-dim > .kv-dim {
  opacity: 1;
}

/* 對話框：placeholder ↔ 聆聽（即時逐字稿 + 游標 + 波形） */
.film-stage .kv-pill {
  transition:
    height 300ms var(--kiosk-ease),
    box-shadow 300ms var(--kiosk-ease),
    background 300ms var(--kiosk-ease);
}
.film-stage .kv-pill:not(.kv-pill--listening) > .kv-pill__live,
.film-stage .kv-pill:not(.kv-pill--listening) > .kv-wave {
  display: none;
}
.film-stage .kv-pill--listening > .kv-pill__placeholder {
  display: none;
}
/* 聆聽框在遮罩之上 */
.film-stage .kv-screen.is-dim > .kv-pill {
  z-index: 5;
}

/* AI 句：逐字打出。每個字一個 span，說到才顯示；沒說到的留著位置（visibility），行寬不會跳
   （設計師 2026-10-13：不要逐字亮，要跟觀眾的話一樣逐字打出來） */
.film-k {
  visibility: hidden;
  color: var(--kiosk-text-primary);
}
.film-k.is-said {
  visibility: visible;
}
/* 說完後的第二行提示（A02「我可以幫你查場次。」） */
.film-stage .kv-transcript__hint {
  opacity: 0;
  transition: opacity 300ms var(--kiosk-ease);
}
.film-stage .kv-screen.is-hint .kv-transcript__hint {
  opacity: 1;
}
/* 整句淡出（預告字幕停 3s 後 400ms 淡出、思考前收掉上一句） */
.film-stage .kv-transcript {
  transition: opacity 400ms var(--kiosk-ease);
}
.film-stage .kv-screen.is-caption-gone > .kv-transcript,
.film-stage .kv-screen.is-thinking > .kv-transcript {
  opacity: 0;
}

/* 思考：狀態列取代 AI 區（延遲 0.8s 才顯示，由 JS 控制時機） */
.film-stage .kv-screen--dialog > .kv-status {
  opacity: 0;
  transition: opacity 200ms var(--kiosk-ease);
}
.film-stage .kv-screen.is-status > .kv-status {
  opacity: 1;
}

/* 建議問題：逐顆從左滑進來；辨識到的那顆用 components.css 的 .kv-chip--lit */
.film-stage .kv-chip {
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity 400ms var(--kiosk-ease),
    transform 400ms var(--kiosk-ease),
    box-shadow 300ms var(--kiosk-ease);
}
.film-stage .kv-screen.is-chips .kv-chip {
  opacity: 1;
  transform: none;
}
.film-stage .kv-screen.is-chips .kv-chip:nth-child(2) {
  transition-delay: 120ms;
}
.film-stage .kv-screen.is-chips .kv-chip:nth-child(3) {
  transition-delay: 240ms;
}

/* Safe area 的卡片與 QR：回答開始時從下方浮上來，QR 在 TTS 說完才亮（.kv-qr--active） */
.film-stage .kv-safe > * {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 400ms var(--kiosk-ease),
    transform 400ms var(--kiosk-ease);
}
/* QR 卡一進來就是 Grow 外框（.kv-qr--active 在進場前就加上），外框與光暈不做動畫（設計師 2026-10-13） */
.film-stage .kv-screen.is-answer .kv-safe > * {
  opacity: 1;
  transform: none;
}
.film-stage .kv-screen.is-answer .kv-safe > :nth-child(2) {
  transition-delay: 120ms;
}
.film-stage .kv-qr__title {
  transition: color 300ms var(--kiosk-ease);
}

/* Safe area 兩張卡二擇一：預設場次卡（A05），.is-combo 時換特餐卡（A05c）；QR 卡兩邊共用 */
.film-stage .kv-safe > .film-card-combo,
.film-stage .kv-screen.is-combo .kv-safe > .kv-showtimes {
  display: none;
}
.film-stage .kv-screen.is-combo .kv-safe > .film-card-combo {
  display: flex;
}

/* 對話畫面的底：壓暗 + 模糊 + 遮罩的規則已進 components.css（.kv-screen--dialog > .kv-art，2026-10-14）；
   「進對話就凍在當下那張」由 film.js 的 data-freeze 處理。 */

/* 預告：影片層；影片載不到時退回劇照輪播 */
.film-stage .film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.film-stage .film-fallback {
  position: absolute;
  inset: 0;
  display: none;
}
.film-stage .kv-screen.is-video-fallback .film-video {
  display: none;
}
.film-stage .kv-screen.is-video-fallback .film-fallback {
  display: block;
}
.film-stage .film-fallback > img {
  transform: scale(1);
}
.film-stage .kv-screen.is-video-fallback .film-fallback > .kv-slideshow__slide--active {
  animation: film-kenburns 6s linear forwards;
}
@keyframes film-kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

/* 收尾卡：大標淡入、Grow 線長出來（components.css 的 .kv-line--wide 動畫） */
.film-stage .kv-screen--standby > .kv-hero > .kv-hero__title {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 500ms var(--kiosk-ease),
    transform 500ms var(--kiosk-ease);
}
.film-stage .kv-screen.is-hero > .kv-hero > .kv-hero__title {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------- 舞台外的提示 */
.film-overlay {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  font: 500 13px/1.6 var(--kiosk-font-mono);
  letter-spacing: 0.06em;
  color: #525252;
  text-align: center;
  white-space: nowrap;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.film-overlay b {
  color: #a3a3a3;
  font-weight: 500;
}
body.film-running .film-overlay,
body.film-hint-hidden .film-overlay {
  opacity: 0;
}
.film-badge {
  position: fixed;
  top: 16px;
  left: 16px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(23, 23, 23, 0.9);
  font: 500 12px/1 var(--kiosk-font-mono);
  letter-spacing: 0.1em;
  color: #ffb05a;
  display: none;
}
body.film-paused .film-badge {
  display: block;
}

/* 時間軸 HUD（H 鍵）：調節奏用，錄影時關掉 */
.film-hud {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 16px 12px;
  background: rgba(10, 10, 10, 0.92);
  border-top: 1px solid #262626;
  font: 500 12px/1.5 var(--kiosk-font-mono);
  color: #a3a3a3;
  z-index: 20;
}
.film-hud[hidden] {
  display: none;
}
.film-hud__row {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.film-hud__time {
  color: #fafafa;
  min-width: 72px;
}
.film-hud__scenes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.film-hud__scene {
  padding: 3px 8px;
  border-radius: 4px;
  background: #171717;
  color: #737373;
  cursor: pointer;
}
.film-hud__scene.is-current {
  background: #262626;
  color: #fafafa;
}
.film-hud__scene.is-done {
  color: #a3a3a3;
}
.film-hud__bar {
  position: relative;
  height: 4px;
  margin-top: 8px;
  border-radius: 2px;
  background: #262626;
  cursor: pointer;
}
.film-hud__bar > i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 2px;
  background: var(--kiosk-grow);
}

/* 思考時畫面其他地方都不動（卡片、對話框照常），只有 AI 那一行換成狀態列（設計師 2026-10-13） */

/* ======================================================= film-photo.html
   拍照全段用到的狀態；畫面本身仍是 components.css 的 P01–P09 元件 */

/* 鏡頭預覽：demo 用一張劇照慢慢飄當作即時畫面（實機是 getUserMedia） */
.film-stage .film-cam > img {
  animation: film-cam-drift 16s ease-in-out infinite alternate;
}
@keyframes film-cam-drift {
  from {
    transform: scale(1.03) translate(0, 0);
  }
  to {
    transform: scale(1.08) translate(-1.2%, 0.8%);
  }
}
/* 聆聽時壓暗，CTA / 動作列 / 提示跟著收掉（對話框升起時它們在同一格） */
.film-stage .kv-screen > .kv-hint {
  transition: opacity var(--kiosk-dur-chrome) var(--kiosk-ease);
}
.film-stage .kv-screen.is-dim > .kv-btn,
.film-stage .kv-screen.is-dim > .kv-cta-hint,
.film-stage .kv-screen.is-dim > .kv-actions,
.film-stage .kv-screen.is-dim > .kv-hint {
  opacity: 0;
}
/* 站位：人站進框，取景框從白虛線變 Grow 綠實線（規格「站好時框變色（選配）」） */
.film-stage .kv-camera__guide {
  transition:
    border-color 400ms var(--kiosk-ease),
    box-shadow 400ms var(--kiosk-ease);
}
.film-stage .kv-screen.is-framed > .kv-camera__guide {
  border-style: solid;
  border-color: var(--kiosk-grow-2);
  box-shadow: var(--kiosk-glow-line);
}
/* 倒數：大數字只在倒數時出現。「說「等一下」可以暫停」放在站位階段（設計師 2026-10-13：倒數時人在看鏡頭、
   不會看螢幕，放那裡不合理），倒數開始就收掉 */
.film-stage [data-scene='camera'] > .kv-camera__digit,
.film-stage [data-scene='camera'] > .kv-hint {
  opacity: 0;
  transition: opacity 200ms var(--kiosk-ease);
}
.film-stage [data-scene='camera'].is-countdown > .kv-camera__digit,
.film-stage [data-scene='camera'].is-cmdhint > .kv-hint {
  opacity: 1;
}
/* 快門白閃：放進去才出現，出現就播 450ms 淡出（components.css 的 kv-flash 動畫） */
.film-stage .kv-flash {
  display: none;
}
.film-stage .kv-screen.is-flash > .kv-flash {
  display: block;
}
/* 預覽頁（P06）：照片與 QR 的進場交給 components.css 的 .kv-screen--arrive（照片 FLIP 從相紙飛過來），
   不走上面 .kv-safe > * 的浮上來 */
.film-stage [data-scene='review'] .kv-safe > * {
  opacity: 1;
  transform: none;
  transition: none;
}

/* P01b 沒有常駐對話框（設計 B：獨立 CTA + 語音提示），只有聆聽時才升起 */
.film-stage [data-scene='confirm'] > .kv-pill {
  transition:
    opacity 300ms var(--kiosk-ease),
    height 300ms var(--kiosk-ease),
    box-shadow 300ms var(--kiosk-ease);
}
.film-stage [data-scene='confirm'] > .kv-pill:not(.kv-pill--listening) {
  opacity: 0;
}

/* 進站位的過場（設計師 2026-10-13：聆聽 → 站位太突然）：鏡頭畫面從暗亮起來、Grow 外框先出、取景框再浮上來。
   都是 DS 既有元素與 token，只是錯開進場；時長走 --kiosk-dur-rise 這一級 */
.film-stage [data-scene='camera'] .film-cam > img {
  filter: brightness(0.35);
  transition: filter 700ms var(--kiosk-ease);
}
.film-stage [data-scene='camera'].is-frame .film-cam > img {
  filter: none;
}
.film-stage [data-scene='camera'] > .kv-camera__frame {
  opacity: 0;
  transition: opacity 400ms var(--kiosk-ease);
}
.film-stage [data-scene='camera'].is-frame > .kv-camera__frame {
  opacity: 1;
}
.film-stage [data-scene='camera'] > .kv-camera__guide {
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 400ms var(--kiosk-ease),
    transform 400ms var(--kiosk-ease),
    border-color 400ms var(--kiosk-ease),
    box-shadow 400ms var(--kiosk-ease);
}
.film-stage [data-scene='camera'].is-guide > .kv-camera__guide {
  opacity: 1;
  transform: none;
}

/* P06 預覽頁規格沒有對話框（--no-pill），demo 拍完再問一輪時才升起（設計師 2026-10-13） */
.film-stage [data-scene='review'] > .kv-pill {
  display: flex;
  opacity: 0;
  transition:
    opacity 300ms var(--kiosk-ease),
    height 300ms var(--kiosk-ease),
    box-shadow 300ms var(--kiosk-ease);
}
.film-stage [data-scene='review'] > .kv-pill.kv-pill--listening {
  opacity: 1;
}

/* P06 預覽頁的拍立得相紙：樣式已搬進 components.css 的 .kv-polaroid--review（2026-10-14）；這裡只給 FLIP 的 transition */
.film-stage .kv-screen--arrive .kv-polaroid--review {
  transition: transform 600ms cubic-bezier(0.33, 1, 0.68, 1);
}

/* ======================================================= film-silence.html（旅程片 1，2026-10-14）
   E04 逾時態（is-timeout）：畫面其他地方不動（卡片、QR 留著），只有三處換——
   頂列右側的日期時間淡出、倒數膠囊淡入（頂列照 components.css 的 --countdown 版上移到 36 / 高 48）；
   頂列左側的收音 chip 淡出（規格 E04 頂列只有 logo）；底部對話框淡出、動作列淡入（同一格）。 */
.film-stage .kv-screen > .kv-topbar {
  transition:
    top 300ms var(--kiosk-ease),
    height 300ms var(--kiosk-ease);
}
.film-stage .kv-screen .kv-topbar__meta,
.film-stage .kv-screen .kv-countdown,
.film-stage .kv-screen--dialog > .kv-actions,
.film-stage .kv-screen > .kv-pill {
  transition: opacity 300ms var(--kiosk-ease);
}
.film-stage .kv-screen .kv-countdown {
  position: absolute;
  right: 0;
  opacity: 0;
}
/* 只有對話畫面的動作列預設收著（E01 / E04 用 is-actions / is-timeout 叫出來）；cover 的 P01b CTA 不受影響 */
.film-stage .kv-screen--dialog > .kv-actions {
  opacity: 0;
  pointer-events: none;
}
.film-stage .kv-screen.is-timeout > .kv-topbar {
  top: var(--kiosk-topbar-count-top);
  height: var(--kiosk-topbar-count-h);
}
.film-stage .kv-screen.is-timeout .kv-topbar__meta,
.film-stage .kv-screen.is-timeout .kv-mic,
.film-stage .kv-screen.is-timeout > .kv-pill {
  opacity: 0;
}
.film-stage .kv-screen.is-timeout .kv-countdown,
.film-stage .kv-screen.is-timeout > .kv-actions {
  opacity: 1;
}
.film-stage .kv-screen.is-timeout > .kv-pill {
  pointer-events: none;
}

/* ======================================================= film-touch.html（旅程片 2，2026-10-14）
   is-actions：底部那一格換成動作列（E01 覆述確認）；is-nopill：對話框淡出（A08 收音關、只留觸控）。
   film-press：觸控示意，照 README 互動規則「按下：填色升一階 + 縮 97%、120ms」，JS 加上 160ms 後拿掉。 */
.film-stage .kv-screen.is-actions > .kv-pill,
.film-stage .kv-screen.is-nopill > .kv-pill {
  opacity: 0;
  pointer-events: none;
}
.film-stage .kv-screen.is-actions > .kv-actions {
  opacity: 1;
}
.film-stage .film-press {
  transform: scale(0.97) !important;
  filter: brightness(1.35);
  transition:
    transform 120ms var(--kiosk-ease),
    filter 120ms var(--kiosk-ease) !important;
}
/* 被打斷（E02）：還沒說的字不再隱藏，300ms 內褪成 border 色（components.css .kv-transcript__interrupted 的同一個值） */
.film-k.film-k--cut {
  visibility: visible;
  color: var(--kiosk-border);
  transition: color 300ms var(--kiosk-ease);
}

/* ======================================================= 觸控模式版型（旅程片 2 第三版，設計師 2026-10-14 提議的 auto layout，先在 film 裡做給她看）
   規則：內容區 = 800 − 頂列 − AI 區（1–3 行 × 72 + 32 間距）− 底部格（依內容：對話框 84 / chips 排 68 / 無 0，底距 44，間距 32）。
   觸控模式（is-touch）：對話框拿掉、三個 chips 橫排住進底部那格（「底部那格永遠是你怎麼跟我說話」）、AI 最多三行（is-ai3）、
   卡片與 QR 撐滿內容區（2 行 AI → 360、3 行 → 288；QR 碼 = 卡高 − 132，268 卡時正好是今天的 140）。
   定案後搬進 tokens.css / components.css 當正式變體；這裡的數字全部是 token 算出來的。 */
.film-stage .kv-screen.is-touch {
  --film-ai-lines: 2;
  --film-slot-h: 68px;
  --film-safe-top: calc(var(--kiosk-ai-top) + var(--film-ai-lines) * 72px + 32px);
  --film-safe-h: calc(800px - var(--kiosk-pill-bottom) - var(--film-slot-h) - 32px - var(--film-safe-top));
}
.film-stage .kv-screen.is-touch.is-ai3 {
  --film-ai-lines: 3;
}
.film-stage .kv-screen.is-touch > .kv-transcript {
  max-height: calc(var(--film-ai-lines) * 72px);
}
.film-stage .kv-screen.is-touch > .kv-chips {
  top: auto;
  bottom: var(--kiosk-pill-bottom);
  left: var(--kiosk-pill-x);
  width: var(--kiosk-pill-w);
  height: var(--film-slot-h);
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.film-stage .kv-screen.is-touch > .kv-safe {
  top: var(--film-safe-top);
  height: var(--film-safe-h);
  align-items: stretch;
}
.film-stage .kv-screen.is-touch > .kv-safe > .kv-card {
  height: auto;
}
.film-stage .kv-screen.is-touch > .kv-safe > .kv-qr {
  height: auto;
  width: var(--film-safe-h);
  --kiosk-qr-code: calc(var(--film-safe-h) - 132px);
}

/* ======================================================= film-net.html（旅程片 3，2026-10-14）
   思考門檻：聽完 1.5s 內開口不出思考列，超過才出（is-status，既有）；再超過網路門檻 8s → E05。
   is-reconnect：E05 的「重新連線中」小字狀態列，在 AI 文字下方（components.css 的 .kv-status 預設位置）。 */
.film-stage .kv-screen.is-status > .film-status-net {
  opacity: 0;
}
.film-stage .kv-screen.is-reconnect > .film-status-net {
  opacity: 1;
}

/* ======================================================= film-photo-branch.html（旅程片 4，2026-10-14）
   指令框（COMMAND 模式）：辨識到才浮出（is-cmd），✓ 在 kv-cmd--ok 時才出現；位置照 components.css（底部、cmd-x）。
   is-last：第二張拍完是最後一張，QR 卡下面「想重拍，說「再拍一次」」收掉（裁定 5）。 */
.film-stage .kv-cmd {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 300ms var(--kiosk-ease),
    transform 300ms var(--kiosk-ease),
    box-shadow 300ms var(--kiosk-ease);
}
.film-stage .kv-screen.is-cmd > .kv-cmd {
  opacity: 1;
  transform: none;
}
.film-stage .kv-cmd:not(.kv-cmd--ok) > .kv-cmd__check {
  display: none;
}
.film-stage .kv-screen.is-last .kv-qr > [data-role="qrhint"] {
  opacity: 0;
}
.film-stage .kv-qr > .kv-hint {
  transition: opacity 300ms var(--kiosk-ease);
}

/* ======================================================= film-leave.html（旅程片 5，2026-10-14）
   is-notice（A09 預告收單）：頂列右側日期時間淡出、倒數膠囊淡入，其他都不動（規格：不套 --countdown 版型修飾，可疊在任何畫面）；
   頂列高度改 48 由 JS 加 kv-topbar--countdown。
   is-leave（E08 角色切換）：對話框收掉、卡片收掉、QR 放大置中（規格 --one-line --countdown + .kv-qr--xl）。 */
.film-stage .kv-screen.is-notice .kv-topbar__meta {
  opacity: 0;
}
.film-stage .kv-screen.is-notice .kv-countdown {
  opacity: 1;
}
.film-stage .kv-screen.is-leave > .kv-pill {
  opacity: 0;
  pointer-events: none;
}
.film-stage .kv-screen.is-leave > .kv-transcript {
  max-height: 72px;
}
.film-stage .kv-screen.is-leave > .kv-safe {
  top: var(--kiosk-safe-top-1line);
  height: var(--kiosk-safe-h-1line-ext);
  justify-content: center;
  align-items: center;
}
.film-stage .kv-screen.is-leave > .kv-safe > .kv-card {
  display: none;
}

/* ======================================================= film-a1-trailer.html（補拍片 A1，2026-10-14）
   「重新連線中」在預告畫面上：字幕下方（status-top），預設收著；暫停覆蓋層照 components.css 的 .active */
.film-stage .kv-screen > .film-status-net {
  opacity: 0;
  transition: opacity 200ms var(--kiosk-ease);
}
.film-stage .kv-screen--media > .film-status-net {
  position: absolute;
  top: var(--kiosk-status-top);
  left: var(--kiosk-margin);
  z-index: 3;
}
.film-stage .kv-screen--media.is-reconnect > .film-status-net {
  opacity: 1;
}

/* ======================================================= film-a2-photo-system.html（補拍片 A2，2026-10-14）
   P01 待命跟 P01b 一樣沒有常駐對話框，聆聽時才升起 */
.film-stage [data-scene='idle'] > .kv-pill {
  transition:
    opacity 300ms var(--kiosk-ease),
    height 300ms var(--kiosk-ease),
    box-shadow 300ms var(--kiosk-ease);
}
.film-stage [data-scene='idle'] > .kv-pill:not(.kv-pill--listening) {
  opacity: 0;
}
.film-stage [data-scene='idle'] > .kv-transcript--hero {
  transition: opacity 300ms var(--kiosk-ease);
}

/* 嵌在 prototype.html 的 Center（?embed=1）：徽章與提示交給外層 */
body.film-embed .film-badge,
body.film-embed .film-overlay {
  display: none;
}