/* spinJoy · 來源：kiosk-design-system-2026-11-09/css/tokens.css（Vyin Robot Lobby v4.3.7 設計系統整包，2026-11-09 搬入）。
   spinJoy 改動：尚未改動（開頭的活動色 / Side 招牌色屬於上一案，待 spinJoy 品牌定了再換）。
   之後再改請在這裡加一行「YYYY-MM-DD 改了什麼」。 */
/* ============================================================================
   Vyin AI · Robot Lobby UI — Foundations tokens
   ----------------------------------------------------------------------------
   來源：design_handoff_vyin_robot_lobby/README.md（2026-09-30 交付版）。
   絕對數值以 README 為準；README 沒列的，從 HTML 參考稿取比例後對齊尺標，
   並在註解標「derived」。標「proposal」的是待定案提案，定案前不要當規格引用。

   所有變數都以 --kiosk- 開頭。這套 token 與 Vyin 官網（www.vyin.ai）的 token
   是兩個獨立產品，互不引用、互不同步。
   ============================================================================ */

:root {
  /* ------------------------------------------------------------------ Canvas
     四個螢幕的解析度，全部為硬體確認值（Center 1280×800 2026-10-06，之前的 752 是扣掉 Android 系統列的可用區，kiosk 全螢幕沒有系統列；Side 2026-10-05）。
     Side 面板規格 1920×1080，直立安裝，輸出畫面 1080×1920。 */
  --kiosk-center-w: 1280px;
  --kiosk-center-h: 800px;
  --kiosk-side-w: 1080px; /* 32 吋面板 1920×1080 直立 */
  --kiosk-side-h: 1920px;
  --kiosk-face-w: 1024px; /* Kebbi 16:10 */
  --kiosk-face-h: 600px;

  /* ------------------------------------------------------------------- Color
     深色模式 only（kiosk）。錨定 Tailwind neutral。 */
  --kiosk-surface-base: #0a0a0a; /* neutral-950 · 螢幕背景 */
  --kiosk-surface-raised: #171717; /* neutral-900 · 卡片、對話框、海報欄 */
  --kiosk-border: #262626; /* neutral-800 · 2px 內框；進度軌；被打斷後的未說字 */
  --kiosk-text-disabled: #525252; /* neutral-600 · AI 未說出的字；OFF 光點；灰階波形 */
  --kiosk-text-tertiary: #737373; /* neutral-500 · placeholder / 提示 */
  --kiosk-text-secondary: #a3a3a3; /* neutral-400 · 卡片標籤、使用者上一句、meta */
  --kiosk-text-muted-light: #d4d4d4; /* neutral-300 · 媒體上的次要文字；QR 卡標題 */
  --kiosk-text-primary: #fafafa; /* neutral-50  · 主文字、AI 已說出的字 */
  --kiosk-white: #ffffff; /* QR 白底板 */
  /* v4.1（設計師 2026-10-20）Side F 打光態：拍照 P02–P04c 整段亮著當補光。底偏暖、約 92% 亮度，純白在 32 吋面板上過曝又刺眼；快門那一刻才拉到純白。字用深色但面積小（會變成瞳孔與眼鏡的反光、也吃光量） */
/* Side F 待命「機器人能幹嘛」段（v4.2，Claude Design 12a「跑馬燈招牌」套回 DS，2026-10-27）：電影院招牌 + 紙張道具的色。
     只用在 .kv-side-promo，Center 不用。 */
  --kiosk-promo-red: oklch(0.55 0.17 32); /* 招牌底、票根與郵戳的強調色 */
  --kiosk-promo-paper: #f3ead8; /* 招牌面板、票、紙標籤 */
  --kiosk-promo-paper-2: #fbf8f1; /* 拍立得、月曆（比較白的紙） */
  --kiosk-promo-ink: #1d1712; /* 紙上的字 */
  --kiosk-promo-ink-2: #6b5f52; /* 紙上的次要字 */
  --kiosk-promo-film: #141210; /* 底片 */
  --kiosk-promo-pin: #c9a46a; /* 曬衣夾 */
  --kiosk-promo-tape: rgba(255, 236, 190, 0.6); /* 紙膠帶 */
  --kiosk-promo-shadow: 0 40px 80px rgba(0, 0, 0, 0.55); /* 紙張投影（實機 GPU 主要成本，吃力就減半） */
  --kiosk-dur-promo: 35s; /* 一圈：v5.1 三張卡 17s / 9s / 9s（設計師 2026-10-30 晚；2026-10-27 跟照片牆的秒數對調，原稿 12.5s / 四件） */
  --kiosk-side-light: #fff3e4;
  --kiosk-side-light-peak: #ffffff;
  --kiosk-side-light-text: rgba(20, 16, 12, 0.72);

  --kiosk-success: #10b981; /* ✓ 指令確認、成功燈 */
  --kiosk-warning: #f59e0b; /* COMMAND 收音狀態；網路狀態（錯誤不用紅色） */
  --kiosk-danger: #ef4444; /* 保留，公開螢幕不使用 */

  --kiosk-accent-violet: #8b5cf6; /* 保留給 campaign 以外的產品場景，此 Mode 不用 */
  --kiosk-accent-amber: #fb923c;
  --kiosk-accent-cyan: #22d3ee;

  /* Campaign layer · 每部片可換；只碰小字 eyebrow 與素材底色，不碰 CTA / AI 狀態。
     2026-09-30 依《歡迎光臨魔法秘境》正式海報量測：漂浮系列海報平均色 oklch(0.37 0.07 292) 深紫，
     片名發光平均 oklch(0.68 0.06 68) 奶金。eyebrow 沿用發光的色相、亮度拉到可讀。 */
  --kiosk-camp: oklch(0.84 0.12 68);
  --kiosk-camp-bg: oklch(0.37 0.07 292);

  /* Raw · 參考稿用了但不在色階內的值。原樣保留，待決定是否收斂。 */
  --kiosk-raw-touch-border: #333333; /* 指令提示、Toast 的 inset 內框 */
  --kiosk-raw-camera-bg: #2a2a2a; /* 相機預覽佔位底 */
  --kiosk-raw-dot-future: #404040; /* 路線膠囊裡「還沒到」的站點 */

  /* Overlays */
  --kiosk-overlay-media: rgba(23, 23, 23, 0.8); /* 媒體上的狀態 chip 底 */
  --kiosk-overlay-pill: rgba(23, 23, 23, 0.92); /* 指令提示、Toast 底 */
  --kiosk-dim: rgba(10, 10, 10, 0.62); /* 聆聽時壓在底圖上的遮罩（2026-11-05 起 film 不再用：收音不壓遮罩，見 film.css） */
  /* 玻璃面（v4.0 · photo v2 的 Photo Flow Handoff 回寫，設計師 2026-10-19 全部取代）：
     卡片 / 對話框 / CTA / chip 的底都改半透明 + backdrop blur，外框改成細線或 ::before 圓環 */
  --kiosk-glass-blur: blur(32px) saturate(140%);
  --kiosk-glass-info: rgba(20, 20, 20, 0.42); /* 資訊卡、QR 卡、選版型卡 */
  --kiosk-glass-tap: rgba(255, 255, 255, 0.16); /* 可點小卡、chip */
  --kiosk-glass-pill: rgba(20, 20, 20, 0.55); /* CTA、對話框、動作列按鈕、指令膠囊 */
  --kiosk-line-info: rgba(255, 255, 255, 0.14); /* 1px 細框 */
  --kiosk-line-tap: rgba(255, 255, 255, 0.4); /* 可點框 1.5–2px */
  --kiosk-line-pressed: rgba(255, 255, 255, 0.85); /* 按下時的框 */
  --kiosk-line-pill: rgba(255, 255, 255, 0.2); /* 對話框 / 動作列按鈕 / 指令膠囊平常的環（設計師 2026-10-19：Handoff 的 #262626 在亮底變黑框、暗底變灰框，改半透明白線才一致） */
  --kiosk-shadow-card: 0 16px 32px rgba(0, 0, 0, 0.35); /* 可點小卡外陰影 */
  --kiosk-shadow-photo: 0 30px 60px rgba(0, 0, 0, 0.6); /* review 的相片 / 限動框 */
  --kiosk-scrim-top: linear-gradient(180deg, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0));
  --kiosk-scrim-bottom: linear-gradient(0deg, rgba(10, 10, 10, 0.9), rgba(10, 10, 10, 0));
  /* 對話畫面的底（設計師 2026-10-14：規格也改成跟 film 一樣——首頁輪播進對話那一刻凍住的那張，壓暗 + 模糊）*/
  --kiosk-dialog-blur: 40px; /* v4.0：12 → 40，圖放大 80px 避免模糊後邊緣變亮 */
  --kiosk-dialog-saturate: 1.2;
  --kiosk-dialog-dim: 1; /* brightness · v4.0 起不壓暗，改靠四段遮罩 */
  --kiosk-dialog-scrim: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.72) 0%,
    rgba(10, 10, 10, 0.45) 40%,
    rgba(10, 10, 10, 0.45) 70%,
    rgba(10, 10, 10, 0.65) 100%
  );
  --kiosk-scrim-cover: /* v4.0：左側壓暗放文字 + 底部壓暗（Handoff §1 首頁背景） */
    linear-gradient(0deg, rgba(10, 10, 10, 0.75) 0%, rgba(10, 10, 10, 0) 30%),
    linear-gradient(90deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.75) 30%, rgba(10, 10, 10, 0.15) 62%, rgba(10, 10, 10, 0) 100%);
  --kiosk-scrim-cover-strong: linear-gradient(
    90deg,
    rgba(10, 10, 10, 0.92) 30%,
    rgba(10, 10, 10, 0) 75%
  ); /* derived · Attraction Moving，字壓在滿版素材上用 */
  --kiosk-scrim-start: linear-gradient(180deg, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.4) 30%, rgba(10, 10, 10, 0.3) 55%, rgba(10, 10, 10, 0.9) 100%); /* v4.2 · P01 待命上下壓暗（Claude Design 2026-10-23） */
  /* standby（Welcome / Exit）的去字 key art 底 · 設計師 2026-10-05 用調圖工具定案 */
  --kiosk-keyart-pos: 58% 85%; /* object-position，也是縮放的原點 */
  --kiosk-keyart-scale: 1.02;
  --kiosk-keyart-opacity: 0.44; /* 圖壓到 44%，字才讀得到 */
  --kiosk-keyart-vignette: 0.65; /* 置中暗角的強度 */
  --kiosk-vignette-bg: radial-gradient(
    ellipse at 50% 55%,
    rgba(10, 10, 10, 0.9) 0,
    rgba(10, 10, 10, 0.4) 42%,
    transparent 72%
  ); /* derived · 壓在 key art 上、讓置中大標可讀的暗角 */
  --kiosk-scrim-h: 208px;
  --kiosk-scrim-h-tall: 252px;

  /* ---------------------------------------------------------------- Gradient
     Grow 是唯一的漸層。只做外框、光點、細線、波形、Kebbi 眼睛；
     不整面填色、不放在正文後面、不做按鈕填色；一屏最多 2 處。 */
  --kiosk-grow-1: #1f6fe0;
  --kiosk-grow-2: #19e27c;
  --kiosk-grow-3: #f4fbd0;
  --kiosk-grow-4: #ffb05a;
  --kiosk-grow-5: #ff6a2b;
  --kiosk-grow: linear-gradient(
    55deg,
    var(--kiosk-grow-1) 0%,
    var(--kiosk-grow-2) 28%,
    var(--kiosk-grow-3) 52%,
    var(--kiosk-grow-4) 74%,
    var(--kiosk-grow-5) 100%
  );
  --kiosk-grow-border: 4px; /* 不透明底的雙背景外框（.kv-photo、相機外框） */
  --kiosk-grow-ring: 3px; /* v4.0 · 玻璃面上的 ::before 圓環（CTA、對話框、QR 卡、指令膠囊） */
  --kiosk-grow-ring-pressed: 5px;
  --kiosk-grow-border-photo: 4px;
  --kiosk-grow-border-camera: 8px;

  /* -------------------------------------------------------------------- Glow
     三級：CTA 最亮（一屏只有一個）、聆聽框次之（暫時態）、卡片最弱（內容層）。 */
  --kiosk-glow-cta: 0 0 40px rgba(31, 111, 224, 0.4); /* v4.0：.5 → .4 */
  --kiosk-glow-cta-pressed: 0 0 72px rgba(31, 111, 224, 0.75), inset 0 0 28px rgba(31, 111, 224, 0.45);
  --kiosk-glow-listen: 0 0 40px rgba(31, 111, 224, 0.4); /* v4.0：56 → 40 */
  --kiosk-glow-card: 0 0 40px rgba(31, 111, 224, 0.35); /* derived · 參考稿 8 處 */
  --kiosk-halo-full: 0 0 0 6px rgba(25, 226, 124, 0.15); /* derived · 收音 FULL 光點 */
  --kiosk-halo-command: 0 0 0 6px rgba(245, 158, 11, 0.18); /* derived · 收音 COMMAND 光點 */
  --kiosk-orb-shadow: 0 0 0 8px rgba(25, 226, 124, 0.12), 0 0 24px rgba(255, 176, 90, 0.35);
  --kiosk-glow-line: 0 0 40px rgba(25, 226, 124, 0.5); /* derived · Welcome 觸發時 Grow 細線的綠光 */
  --kiosk-text-shadow-media: 0 2px 24px rgba(0, 0, 0, 0.6);
  --kiosk-text-shadow-logo: 0 2px 16px rgba(0, 0, 0, 0.5); /* derived · logo 壓在媒體上 */
  --kiosk-text-shadow-digit: 0 0 80px rgba(0, 0, 0, 0.45); /* derived · 倒數大數字 */

  /* -------------------------------------------------------------- Typography
     Display / 數字：Unbounded（暫代，正式 wordmark 字體 TBD）
     UI / 中文：Noto Sans TC
     標註（非產品 UI）：IBM Plex Mono
     最小字級 16px（閱讀距離 1.5–3 m）。 */
  --kiosk-font-display: 'Unbounded', sans-serif;
  --kiosk-font-ui: 'Noto Sans TC', system-ui, sans-serif;
  --kiosk-font-mono: 'IBM Plex Mono', monospace;

  --kiosk-type-logo: 800 24px/1 var(--kiosk-font-display);
  --kiosk-type-clock: 600 20px/1 var(--kiosk-font-display);
  --kiosk-type-date: 500 20px/1 var(--kiosk-font-ui);
  --kiosk-type-mic: 500 16px/1 var(--kiosk-font-ui);
  --kiosk-type-transcript: 700 48px/1.5 var(--kiosk-font-ui); /* 72px / 行 · 最多 2 行 */
  --kiosk-type-transcript-solo: 700 56px/1.3 var(--kiosk-font-ui); /* v4.3 · 純文字回答（中間沒有卡片）AI 句放大一級、最多 3 行（設計師 2026-10-30） */
  --kiosk-type-transcript-hero: 900 64px/1.3 var(--kiosk-font-ui); /* derived · Photo idle 大標 */
  --kiosk-type-caption: 700 36px/1.5 var(--kiosk-font-ui); /* 全螢幕媒體上的 AI 字幕 */
  --kiosk-type-user-live: 500 36px/1 var(--kiosk-font-ui);
  --kiosk-type-user-pill: 500 30px/1 var(--kiosk-font-ui);
  --kiosk-type-card-label: 500 20px/1 var(--kiosk-font-ui);
  --kiosk-type-card-value: 700 48px/1.3 var(--kiosk-font-ui);
  --kiosk-type-card-value-md: 700 36px/1.3 var(--kiosk-font-ui); /* 建議卡 / 確認卡 */
  --kiosk-type-card-num: 800 84px/1 var(--kiosk-font-display);
  --kiosk-type-action: 700 30px/1 var(--kiosk-font-ui); /* 底部動作列按鈕 */
  --kiosk-type-chip: 500 28px/1 var(--kiosk-font-ui);
  --kiosk-type-cta: 700 24px/1 var(--kiosk-font-ui);
  --kiosk-type-cta-lg: 700 36px/1 var(--kiosk-font-ui);
  --kiosk-type-cta-hero: 700 44px/1 var(--kiosk-font-ui); /* derived · Photo idle 主要 CTA */
  --kiosk-type-cta-hint: 400 20px/1 var(--kiosk-font-ui); /* derived · Photo idle CTA 上方提示 */
  --kiosk-type-welcome: 900 112px/1 var(--kiosk-font-ui); /* v4.2 · P01 待命歡迎大標，一行 */
  --kiosk-type-start-hint: 700 56px/1 var(--kiosk-font-ui); /* v4.3 · P01 底部「點擊任一處」（設計師 2026-10-30：36 → 56，一公尺要看得清） */
  --kiosk-type-cap-hero: 900 80px/1 var(--kiosk-font-ui); /* v4.2 · P01b 拍照大卡標題 */
  --kiosk-type-status: 500 20px/1 var(--kiosk-font-ui); /* 「Vyin 正在思考」 */
  --kiosk-type-countdown: 800 268px/1 var(--kiosk-font-display);
  --kiosk-type-countdown-pill: 500 20px/1 var(--kiosk-font-ui);
  --kiosk-type-countdown-pill-num: 800 20px/1 var(--kiosk-font-display);
  --kiosk-type-cmd: 700 30px/1 var(--kiosk-font-ui);
  --kiosk-type-cmd-hint: 500 24px/1 var(--kiosk-font-ui);
  --kiosk-type-tag: 500 16px/1 var(--kiosk-font-ui);
  --kiosk-type-toast: 500 24px/1 var(--kiosk-font-ui);
  --kiosk-type-qr-title: 500 20px/1 var(--kiosk-font-ui);
  --kiosk-type-qr-title-lg: 500 22px/1 var(--kiosk-font-ui);
  --kiosk-type-qr-title-xl: 700 28px/1 var(--kiosk-font-ui);
  --kiosk-type-eyebrow: 700 24px/1 var(--kiosk-font-ui); /* derived · 「現正熱映」campaign 色、字距 .08em */
  --kiosk-type-hero-eyebrow: 500 30px/1 var(--kiosk-font-ui); /* derived · 「歡迎進場」 */
  --kiosk-type-route: 500 20px/1 var(--kiosk-font-ui); /* derived · 「移動中 · 前往 B 點」 */
  --kiosk-type-hint: 500 20px/1 var(--kiosk-font-ui); /* derived · Focus 層級的指令提示「說「等一下」可以暫停」 */
  --kiosk-type-media-title: 700 24px/1 var(--kiosk-font-ui); /* derived · 預告底部片名列 */
  --kiosk-type-media-hint: 500 20px/1 var(--kiosk-font-ui); /* derived · 預告底部「隨時可以問我」膠囊 */
  --kiosk-type-annot: 500 16px/1 var(--kiosk-font-mono); /* 佔位圖標籤，非產品 UI */
  --kiosk-type-annot-sm: 500 14px/1 var(--kiosk-font-mono);

  /* proposal · README 字級表沒列、參考稿出現的大字，收斂成下面這組。定案前可調。 */
  --kiosk-type-hero-xl: 900 120px/1.1 var(--kiosk-font-ui); /* Exit「謝謝觀賞」 */
  --kiosk-type-hero-lg: 900 100px/1.1 var(--kiosk-font-ui); /* Welcome 片名 */
  --kiosk-type-hero-sub: 500 32px/1.4 var(--kiosk-font-ui);
  --kiosk-type-hero-meta: 500 28px/1 var(--kiosk-font-ui); /* 「7 廳 · 19:10 場次」 */
  --kiosk-type-side-title: 700 88px/1.2 var(--kiosk-font-ui);
  --kiosk-type-side-meta: 400 34px/1.5 var(--kiosk-font-ui);
  --kiosk-type-side-digit: 800 420px/1 var(--kiosk-font-display); /* v4.1 · Side F 打光態的倒數數字，跟 Center 同步 */

  /* ------------------------------------------------------------------ Radius */
  --kiosk-radius-pill: 999px; /* 對話框、CTA、chip、指令膠囊、Toast */
  --kiosk-radius-card: 32px; /* 卡片、safe-area 容器、照片 */
  --kiosk-radius-plate: 16px; /* QR 白底板 */
  --kiosk-radius-plate-lg: 20px; /* 照片頁 QR 白底板 */
  --kiosk-radius-tag: 8px; /* 小標籤 */
  --kiosk-radius-screen: 24px; /* 裝置外框，僅供參考圖 */
  --kiosk-radius-camera: 36px; /* 相機 campaign 外框 */
  --kiosk-radius-tile: 28px; /* derived · 側螢幕照片牆格 */

  /* ----------------------------------------------------------------- Spacing
     尺標 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 */
  --kiosk-space-1: 4px;
  --kiosk-space-2: 8px;
  --kiosk-space-3: 12px;
  --kiosk-space-4: 16px;
  --kiosk-space-5: 16px;
  --kiosk-space-6: 24px;
  --kiosk-space-7: 32px;
  --kiosk-space-8: 44px;
  --kiosk-space-9: 64px;

  --kiosk-margin: 64px; /* 左右安全邊 */
  --kiosk-card-gap: 16px;
  --kiosk-card-pad-y: 32px;
  --kiosk-card-pad-x: 36px;

  /* ------------------------------------------------------------------ Layout
     Center 1280×800 對話畫面格線 */
  --kiosk-topbar-top: 44px; /* y 44–76 */
  --kiosk-topbar-h: 32px;
  --kiosk-topbar-count-top: 36px; /* derived · 有倒數膠囊時 */
  --kiosk-topbar-count-h: 48px;
  --kiosk-ai-top: 120px;
  --kiosk-ai-w: 1152px;
  --kiosk-ai-h: 144px; /* 2 行 */
  --kiosk-ai-w-cover: 732px; /* 封面（Stop Idle）上的 AI 字寬 */
  --kiosk-caption-top: 104px; /* 全螢幕媒體字幕 y */
  --kiosk-caption-top-camera: 44px; /* derived · 拍照畫面不放 logo 與狀態 chip，字幕佔頂列的位置 */
  --kiosk-guide-top: calc((var(--kiosk-center-h) - var(--kiosk-guide-h)) / 2); /* 取景框上緣，畫面正中（v4.0 由高算出） */
  --kiosk-status-top: 288px; /* derived · 思考 / 重新連線列（AI 區下緣 +24） */
  --kiosk-safe-top: 296px; /* AI 2 行 · 1152×316（752 → 800：上緣不動、底部多 48） */
  --kiosk-safe-h: 316px;
  --kiosk-safe-top-1line: 224px; /* AI 1 行 · 1152×388 */
  --kiosk-safe-h-1line: 388px;
  --kiosk-safe-h-ext: 432px; /* 對話框隱藏（頂列倒數）· 延伸到 y 728 */
  --kiosk-safe-h-1line-ext: 504px; /* AI 1 行 + 對話框隱藏 · 照片仍 812×456 靠上，多出的 48 留白（設計師裁定） */
  /* 版型規則（設計師 2026-10-14 定）：內容區 = 800 − 頂列 − AI 區（行數 × 72 + 32）− 底部格（依內容 + 底距 44 + 間距 32）。
     上面四個 safe token 都是這條規則的特例（2 行 + 對話框 316 / 1 行 + 對話框 388 / 2 行無 432 / 1 行無 504）。
     新組合：三行 AI 只用在觸控模式或純文字回答（三行 + 對話框只剩 244，放不下 268 的卡片）。 */
  --kiosk-ai-line: 72px;
  --kiosk-ai-gap: 32px; /* AI 區到內容區 */
  --kiosk-slot-gap: 32px; /* 內容區到底部格 */
  --kiosk-slot-chips: 68px; /* 觸控模式的底部格：chips 橫排 */
  --kiosk-ai-h-3line: 216px; /* 3 行 */
  --kiosk-safe-top-3line: 368px; /* 120 + 3 × 72 + 32 */
  --kiosk-safe-h-touch: 360px; /* AI 2 行 + chips 排：800 − 44 − 68 − 32 − 296 */
  --kiosk-safe-h-touch-1line: 432px; /* v4.2 觸控模式 AI 1 行 + 底部導覽：800 − 44 − 68 − 32 − 224 */
  --kiosk-touch-home-h: 480px; /* v4.2 觸控模式首頁：大卡與右欄往下長（沒有對話框），232 → 712 */
  --kiosk-safe-h-touch-3line: 288px; /* AI 3 行 + chips 排：800 − 44 − 68 − 32 − 368 */
  --kiosk-pill-x: 212px;
  --kiosk-pill-w: 856px;
  --kiosk-pill-w-rest: 760px; /* v4.3 · 有「← 首頁」鍵的畫面：對話框平常縮短置中，左邊讓給首頁鍵（設計師 2026-10-30）；聆聽 / 已送出回到 --kiosk-pill-w 856 標準寬（同日晚上拿掉撐到 1152 的 -wide） */
  --kiosk-pill-bottom: 44px;
  --kiosk-pill-h: 84px;
  --kiosk-pill-h-listen: 96px;
  --kiosk-pill-pad-x: 44px;
  --kiosk-actions-gap: 12px; /* 底部動作列按鈕間距 */
  --kiosk-cta-hint-bottom: 168px; /* derived · Photo idle CTA 提示文字 bottom */
  --kiosk-cmd-w: 480px;
  --kiosk-cmd-h: 76px;
  --kiosk-cmd-x: 400px; /* (1280 − 480) / 2 */
  --kiosk-toast-bottom: 48px; /* derived */
  --kiosk-media-bar-bottom: 88px; /* derived · 預告片名列 */
  --kiosk-media-progress-bottom: 44px; /* derived · 預告進度條 */
  --kiosk-media-btn-bottom-bare: 17px; /* v4.2 預告沒字時「結束預告」的位置：預告是 2.39:1，cover 到 1280×800 上下各約 102px 黑邊，(102 − 按鈕 68) / 2 = 17 → 落在下黑邊正中、不擋畫面（設計師 2026-10-28） */
  --kiosk-media-progress-h: 8px;
  --kiosk-route-top: 40px; /* derived · 路線膠囊 */
  --kiosk-standby-qr-top: 248px; /* derived · Exit standby 右側 292 QR 的 y（hero 垂直置中，800 時下移 24） */

  --kiosk-qr-card: 268px;
  --kiosk-qr-card-lg: 292px; /* Exit 唯一 CTA */
  --kiosk-qr-code: 140px;
  --kiosk-qr-code-lg: 160px; /* derived · 292 卡 */
  --kiosk-qr-code-xl: 212px; /* derived · 照片 Review 頁 */
  --kiosk-qr-plate-pad: 16px;
  --kiosk-qr-plate-pad-lg: 20px;

  --kiosk-camera-inset: 28px;
  /* 取景框 v4.0：跟最終輸出（限動框的照片格）同比例。正式素材（設計師 2026-10-19 晚）：照片 920×690 = 4:3、圓角 80 */
  --kiosk-hole-ratio: 1.3333;
  --kiosk-guide-w: 750px; /* 取景框，水平置中；垂直位置見 --kiosk-guide-top */
  --kiosk-guide-h: calc(var(--kiosk-guide-w) / var(--kiosk-hole-ratio));
  --kiosk-guide-border: 6px; /* v4.0：Grow 環的粗細 */
  --kiosk-hole-radius: calc(var(--kiosk-guide-w) * 0.087); /* 照片格圓角 80 / 920 */
  --kiosk-camera-mask: rgba(10, 10, 10, 0.62); /* 取景框外壓暗（v4.0） */
  --kiosk-photo-w: 600px; /* 16:9 · AI 1 行 */
  --kiosk-photo-h: 340px;
  --kiosk-photo-w-lg: 812px; /* 16:9 · 對話框隱藏 */
  --kiosk-photo-h-lg: 456px;

  --kiosk-mic-dot: 12px;
  --kiosk-orb: 24px;
  --kiosk-caret-w: 4px;
  --kiosk-caret-h: 40px;
  --kiosk-wave-bar-w: 8px;
  --kiosk-wave-bar-min: 8px;
  --kiosk-wave-bar-max: 36px;
  --kiosk-wave-gap: 6px;
  --kiosk-progress-w: 32px;
  --kiosk-progress-h: 8px;
  --kiosk-ring: 32px;
  --kiosk-ring-inner: 24px;
  --kiosk-check: 36px;

  /* ------------------------------------------------------------------ Motion
     起始值，現場再調。 */
  --kiosk-dur-chrome: 200ms; /* 介面層級切換淡入淡出 */
  --kiosk-dur-press: 120ms; /* 按下回饋 */
  --kiosk-dur-fade: 200ms; /* 句子切換 */
  --kiosk-dur-rise: 300ms; /* 對話框升起；被打斷的字褪色 */
  --kiosk-dur-flash: 700ms; /* 快門白閃（v4.1 設計師 2026-10-20：450 → 700，拍的那一下久一點） */
  --kiosk-dur-pulse: 900ms; /* 思考光點 */
  --kiosk-dur-hint: 1500ms; /* 非指令提示 */
  --kiosk-dur-toast: 3000ms;
  --kiosk-dur-caption: 3000ms; /* 媒體字幕停留 */
  --kiosk-dur-caption-long: 6500ms; /* v4.2 預告開場兩行（設計師 2026-10-27）：Kebbi 念完約 5s + 1.5s。實機 = TTS 說完後 1.5s 淡出 */
  --kiosk-dur-voice-hint: 3000ms; /* v4.2 預告中有人開口的提示句停留（A06v） */
  --kiosk-dur-cast: 600ms; /* v4.2 · 點擊開始：背景模糊壓暗、歡迎標退場 */
  --kiosk-ease: cubic-bezier(0.33, 1, 0.68, 1);
}