/* 注音字型：源泉注音圓體（SIL OFL 1.1），只含用到的字，由 scripts/subset-font.py 產生 */
@font-face {
  font-family: Zhuyin;
  src: url('../fonts/zhuyin-medium.woff') format('woff');
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: Zhuyin;
  src: url('../fonts/zhuyin-bold.woff') format('woff');
  font-weight: 700;
  font-display: block;
}

:root {
  /* 平板畫面左右兩側的邊框：黑色，讓觀眾專注在中間的平板畫面 */
  --frame: #000;
  --ink: #1b1918;
  /* 繪本的顏色 */
  --wall: #fbf6ec;
  --paper: #fffdf6;
  --yellow: #f2d24a;
  /* 入境問答的紅色印章 */
  --stamp-red: #d23a2e;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--frame);
}

html {
  /* 展示機：不能捲動、縮放、選取文字，長按也不會跳出選單 */
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  /* 給家長看的字用系統字型；給孩子看的字加上 .zhuyin */
  font-family: 'PingFang TC', 'Noto Sans TC', 'Noto Sans CJK TC', sans-serif;
  color: var(--ink);
}

/* 給孩子看的字：每個字旁邊自動帶注音（字寬是一般字的 1.5 倍） */
.zhuyin {
  font-family: Zhuyin, sans-serif;
  font-weight: 500;
  line-height: 1.25;
}

.zhuyin .punct {
  font-family: 'PingFang TC', 'Noto Sans TC', 'Noto Sans CJK TC', sans-serif;
}

/* 斷行記號「｜」隔開的一段字：盡量放在同一行（見 dom.js 的 kidText） */
.zhuyin .phrase {
  display: inline-block;
}

/* 平板畫面：照 1200×1920 排版，main.js 負責設定大小、縮放和置中 */
#stage {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  transform-origin: 0 0;
  background: var(--wall);
}

#screen {
  position: absolute;
  inset: 0;
}

/* 剛換畫面的一瞬間不接受點擊（見 main.js） */
#screen.settling {
  pointer-events: none;
}

/* 紙張紋理：蓋在最上層，用色彩增值讓底下的顏色帶一點紙紋和噪點 */
.paper {
  position: absolute;
  inset: 0;
  background: url('art/paper.png') repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* 美術：每條墨線有 3 個版本，main.js 每 1/8 秒切換 data-boil，只顯示其中一個
   （寫在 #stage 上；其他網頁，例如 file-preview.html，寫在自己放美術的元素上） */
.art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
[data-boil='0'] .ink > :not(.f0),
[data-boil='1'] .ink > :not(.f1),
[data-boil='2'] .ink > :not(.f2) {
  visibility: hidden;
}

/* 會動的部位：transform-origin 用美術檔裡的座標（繪本掃描檔 330 dpi 的像素） */
.art .eye {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------------------------------------------------------------- 待機畫面 */

.idle > *,
.idle .staff {
  position: absolute;
}
.idle > .art-scene {
  inset: 0;
}

/* 拱門裡的輸送軌：吊掛的檔案一格一格往右移（每秒 12 格，像定格動畫），超出拱門的部分藏起來 */
.idle .conveyor {
  inset: 0;
  clip-path: path('M96 1610 L96 740 A504 400 0 0 1 1104 740 L1104 1610 Z');
  pointer-events: none;
}
.idle .belt {
  position: absolute;
  left: -1056px;
  top: 456px;
  width: 2112px;
  height: 150px;
  animation: conveyor 48s steps(576) infinite;
}
@keyframes conveyor {
  to {
    transform: translateX(1056px);
  }
}

.idle .sign-text {
  left: 350px;
  top: 150px;
  width: 500px;
  height: 150px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 58px;
  letter-spacing: 0.04em;
}

/* 三位職員：大小一致（繪本掃描檔的 0.473 倍），腳踩在地板線 y = 1600 上 */
.idle .staff-photographer {
  left: 28px;
  top: 869px;
  width: 359.5px;
  height: 738px;
  transform: scaleX(-1); /* 轉向右邊，面向同事 */
}
.idle .staff-officer {
  left: 386px;
  top: 866px;
  width: 392.6px;
  height: 736px;
}
.idle .staff-clerk {
  left: 799px;
  top: 882px;
  width: 392.6px;
  height: 312.2px;
}
.idle .counter {
  left: 0;
  top: 1150px;
  width: 1200px;
  height: 470px;
}

/* 眨眼：三個人節奏不同，不會同時眨 */
.idle .staff .eye {
  animation: blink 4.3s step-end infinite;
}
.idle .staff-photographer .eye {
  animation-duration: 5.3s;
  animation-delay: -1.3s;
}
.idle .staff-officer .eye {
  animation-duration: 6.1s;
  animation-delay: -2.9s;
}
@keyframes blink {
  0% {
    transform: scaleY(1);
  }
  94% {
    transform: scaleY(0.15);
  }
  96.5% {
    transform: scaleY(1);
  }
}

/* 攝影師的手指往上指，一下一下點 */
.idle .staff-photographer .hand-up {
  transform-box: view-box;
  transform-origin: 175px 330px;
  animation: point-up 1.4s step-end infinite;
}
@keyframes point-up {
  0% {
    rotate: 0deg;
  }
  50% {
    rotate: 5deg;
  }
}

/* 入境櫃台職員把入境文件遞出去 */
.idle .staff-officer .arm {
  transform-box: view-box;
  transform-origin: 640px 420px;
  animation: offer 2.2s step-end infinite;
}
@keyframes offer {
  0% {
    rotate: 0deg;
  }
  50% {
    rotate: -2deg;
  }
}

/* 檔案管理部職員招手 */
.idle .staff-clerk .hand {
  transform-box: view-box;
  transform-origin: 262px 290px;
  animation: welcome 1.8s step-end infinite;
}
@keyframes welcome {
  0% {
    rotate: 0deg;
  }
  25% {
    rotate: -5deg;
  }
  50% {
    rotate: 0deg;
  }
  75% {
    rotate: 4deg;
  }
}

/* 相機閃光：每 7 秒「喀嚓」一次 */
.idle .staff-photographer .flash {
  animation: flash-window 7s step-end infinite;
}
@keyframes flash-window {
  0% {
    fill: #ece8df;
  }
  62% {
    fill: #fff6a8;
  }
  67% {
    fill: #ece8df;
  }
}
.idle .flash-burst {
  left: 254px;
  top: 986px;
  width: 220px;
  height: 200px;
  transform-origin: 60px 150px;
  animation: burst 7s step-end infinite;
  pointer-events: none;
}
.idle .flash-text {
  position: absolute;
  left: 92px;
  top: 206px;
  margin: 0;
  font-size: 44px;
  font-weight: 700;
  white-space: nowrap;
}
@keyframes burst {
  0% {
    opacity: 0;
  }
  62% {
    opacity: 1;
    transform: scale(0.8);
  }
  63.5% {
    transform: scale(1.06);
  }
  65% {
    transform: scale(1);
  }
  72% {
    opacity: 0;
  }
}

/* 對話框：「來，我跟你說……」，每 9 秒從檔案管理部職員那邊冒出來一次（尾巴指向他） */
.idle .bubble {
  left: 402px;
  top: 628px;
  width: 660px;
  height: 272px;
  transform-origin: 598px 262px;
  animation: speak 9s step-end infinite;
  pointer-events: none;
}
.idle .bubble-text {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 636px;
  height: 184px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
}
@keyframes speak {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
    transform: scale(0.7);
  }
  9.5% {
    transform: scale(1.07);
  }
  11% {
    transform: scale(1);
  }
  62% {
    transform: scale(0.9);
  }
  63.5% {
    opacity: 0;
  }
}

/* 招牌旁的小星星輪流閃 */
.idle .sparkle {
  width: 60px;
  height: 60px;
  animation: twinkle 2.4s step-end infinite;
  pointer-events: none;
}
.idle .sparkle-1 {
  left: 280px;
  top: 150px;
}
.idle .sparkle-2 {
  left: 866px;
  top: 216px;
  animation-delay: -0.8s;
}
.idle .sparkle-3 {
  left: 300px;
  top: 262px;
  animation-delay: -1.6s;
}
@keyframes twinkle {
  0% {
    transform: scale(0);
  }
  12% {
    transform: scale(0.6);
  }
  22% {
    transform: scale(1.1);
  }
  34% {
    transform: scale(0.75);
  }
  46% {
    transform: scale(0);
  }
}

/* 開始按鈕：在紅色地板上輕輕跳 */
.idle .start {
  left: 320px;
  top: 1690px;
  width: 560px;
  height: 190px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--ink);
  animation: hop 1.2s step-end infinite;
}
.idle .start .art {
  position: absolute;
  inset: 0;
}
.idle .start-text {
  position: relative;
  font-size: 96px;
  font-weight: 700;
}
.idle .start:active {
  animation: none;
  transform: scale(0.95);
}
@keyframes hop {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-7px);
  }
  50% {
    transform: translateY(-11px);
  }
  75% {
    transform: translateY(-4px);
  }
}

/* ---------------------------------------------------------------- 家長同意畫面 */

.consent > * {
  position: absolute;
}
.consent .staff-clerk {
  left: 20px;
  top: 64px;
  width: 392.6px;
  height: 312.2px;
  transform: scaleX(-1); /* 轉向右邊，面向對話框和表單 */
}
.consent .staff-clerk .eye {
  animation: blink 4.3s step-end infinite;
}
.consent .consent-bubble {
  left: 252px;
  top: 40px;
  width: 900px;
  height: 206px;
}
.consent .bubble-text {
  position: absolute;
  left: 60px;
  top: 12px;
  right: 10px;
  height: 170px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 58px;
  font-weight: 700;
}

/* 表單：給家長看的說明和兩個選項 */
.consent .form {
  left: 60px;
  top: 330px;
  width: 1080px;
  height: 1400px;
  box-sizing: border-box;
  padding: 100px 80px 0;
}
.consent .form > .art {
  position: absolute;
  inset: 0;
}
.consent .form > :not(.art) {
  position: relative;
}
.consent .form-title {
  margin: 0 0 28px;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.consent .form-text {
  margin: 0 0 18px;
  font-size: 38px;
  line-height: 1.55;
}
.consent .form-prompt {
  margin: 28px 0 24px;
  font-size: 38px;
  font-weight: 700;
}
.consent .options {
  display: flex;
  gap: 40px;
}
.consent .option {
  position: relative;
  flex: 1;
  height: 690px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--ink);
}
.consent .option > .art {
  position: absolute;
  inset: 0;
}
.consent .option-portrait {
  position: absolute;
  left: 50%;
  top: 36px;
  width: 290px;
  height: 344px;
  margin-left: -145px;
}
.consent .option-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 398px;
  font-size: 64px;
  font-weight: 700;
}
/* 左右只留 20px：「只留剪影」的說明剛好排成兩行，不會掉到第三行、壓在選項卡的框線上 */
.consent .option-note {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 504px;
  font-size: 29px;
  line-height: 1.45;
}
.consent .option:active,
.consent .option.chosen {
  transform: scale(0.96);
}
.consent .option.chosen .art-option path[fill='#ffffff'] {
  fill: #fff0b0;
}
.consent.decided .option:not(.chosen) {
  opacity: 0.45;
}

/* ---------------------------------------------------------------- 入境問答畫面 */

/* 版面照繪本第 3 頁：入境櫃台職員站在櫃台後面，背後是橘色隔間；答案卡片放在櫃台上 */
.questions > * {
  position: absolute;
}
.questions .booth {
  left: 620px;
  top: 360px;
  width: 580px;
  height: 440px;
}
/* 職員只露出櫃台上面的部分：櫃台上緣以下藏起來 */
.questions .officer-window {
  left: 780px;
  top: 440px;
  width: 420px;
  height: 350px;
  overflow: hidden;
}
.questions .staff-officer {
  position: absolute;
  left: 20px;
  top: 30px;
  width: 392.6px;
  height: 736px;
}
.questions .desk {
  left: 0;
  top: 780px;
  width: 1200px;
  height: 1140px;
}

/* 職員的動作：一格一格的動（transform-origin 是美術檔裡的座標）。問問題時頭往前傾、把文件遞出來；
   孩子答完時點兩下頭 */
.questions .staff .eye {
  animation: blink 4.7s step-end infinite;
}
.questions .staff-officer .head {
  transform-box: view-box;
  transform-origin: 575px 345px;
}
.questions .staff-officer .arm {
  transform-box: view-box;
  transform-origin: 640px 420px;
}
.questions .staff-officer.asking .head {
  animation: ask-head 0.96s step-end;
}
.questions .staff-officer.asking .arm {
  animation: ask-arm 0.96s step-end;
}
.questions .staff-officer.replying .head {
  animation: nod 0.96s step-end;
}
@keyframes ask-head {
  0% {
    rotate: 0deg;
  }
  25% {
    rotate: -3deg;
  }
  50% {
    rotate: -4deg;
  }
  75% {
    rotate: -1.5deg;
  }
}
@keyframes ask-arm {
  0% {
    rotate: 0deg;
  }
  25% {
    rotate: 2.5deg;
  }
  50% {
    rotate: 4deg;
  }
  75% {
    rotate: 1.5deg;
  }
}
@keyframes nod {
  0% {
    rotate: 0deg;
  }
  12.5% {
    rotate: -6deg;
  }
  37.5% {
    rotate: 0deg;
  }
  50% {
    rotate: -6deg;
  }
  75% {
    rotate: 0deg;
  }
}

/* 題目對話框：尾巴指向職員的嘴。換新的字時，從尾巴那邊一格一格的彈出來 */
.questions .question-bubble {
  left: 20px;
  top: 150px;
  width: 960px;
  height: 480px;
  transform-origin: 932px 370px;
}
.questions .question-bubble.pop {
  animation: bubble-pop 0.36s step-end;
}
@keyframes bubble-pop {
  0% {
    transform: scale(0.92);
  }
  33% {
    transform: scale(1.03);
  }
  66% {
    transform: scale(0.99);
  }
  100% {
    transform: none;
  }
}
/* 放字的範圍：左右對齊對話框的中心（x = 430） */
.questions .bubble-text {
  position: absolute;
  left: 40px;
  top: 58px;
  width: 740px;
  height: 364px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.questions .bubble-line {
  margin: 0;
  font-size: 60px;
  font-weight: 700;
  text-align: center;
}
.questions .question-bubble.long .bubble-line {
  font-size: 48px;
}

/* 進度：5 個圓點。目前這題是黃色、大一點；答完的蓋上紅色，打勾 */
.questions .progress {
  left: 330px;
  top: 36px;
  width: 540px;
  height: 96px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.questions .dot {
  position: relative;
  width: 84px;
  height: 84px;
}
.questions .dot > .art {
  position: absolute;
  inset: 0;
}
.questions .dot-number {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: Zhuyin, sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}
.questions .dot .art-check {
  visibility: hidden;
}
.questions .dot.current {
  transform: scale(1.2);
}
.questions .dot.current .art-progress-dot path[fill='#ffffff'] {
  fill: var(--yellow);
}
.questions .dot.done .art-progress-dot path[fill='#ffffff'] {
  fill: var(--stamp-red);
}
.questions .dot.done .art-check {
  visibility: visible;
}
.questions .dot.done .dot-number {
  visibility: hidden;
}
.questions .dot.done {
  animation: dot-stamp 0.32s step-end;
}
@keyframes dot-stamp {
  0% {
    transform: scale(1.5);
  }
  33% {
    transform: scale(0.85);
  }
  66% {
    transform: scale(1.08);
  }
  100% {
    transform: none;
  }
}

/* 答案卡片：2×2 放在櫃台上，一張一張跳出來 */
.questions .answers {
  left: 60px;
  top: 880px;
  width: 1080px;
  height: 980px;
  display: grid;
  grid-template-columns: 520px 520px;
  grid-auto-rows: 470px;
  gap: 40px;
}
.questions .answer {
  position: relative;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--ink);
}
.questions .answer > .art {
  position: absolute;
  inset: 0;
}
/* 選項插圖照繪本比例畫，放上平板縮成 0.473 倍（920×600 → 435×284）。
   放在卡片上淡藍色的窗裡（位置和 scripts/art/specs/ui.py 的 WINDOW 一樣），超出窗的部分切掉 */
.questions .answer-art {
  position: absolute;
  left: 42px;
  top: 22px;
  width: 435.2px;
  height: 283.8px;
  overflow: hidden;
  border-radius: 20px;
}
/* 選項的字：一個加注音的字寬 1.5 倍，48px 時一行放得下 6 個字；再長就從「｜」換成兩行 */
.questions .answer-text {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 306px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 48px;
  font-weight: 700;
}
.questions .answers.arriving .answer {
  animation: card-in 0.36s step-end backwards;
  animation-delay: calc(var(--order) * 70ms);
}
@keyframes card-in {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  33% {
    opacity: 1;
    transform: scale(1.05);
  }
  66% {
    transform: scale(0.98);
  }
  100% {
    transform: none;
  }
}
.questions .answer:active {
  transform: scale(0.96);
}

/* 選好了：卡片變黃色、彈一下，蓋上紅色印章；其他卡片變淡 */
.questions .answers.decided {
  pointer-events: none;
}
.questions .answers.decided .answer:not(.chosen) {
  opacity: 0.45;
}
.questions .answer.chosen .art-answer-card path[fill='#ffffff'] {
  fill: #fff0b0;
}
.questions .answers.decided .answer.chosen {
  animation: picked 0.3s step-end;
}
@keyframes picked {
  0% {
    transform: scale(0.94);
  }
  33% {
    transform: scale(1.04);
  }
  66% {
    transform: none;
  }
}
.questions .stamp {
  position: absolute;
  right: -30px;
  top: -34px;
  width: 150px;
  height: 150px;
  rotate: -14deg;
  animation: stamp-down 0.3s step-end backwards;
  pointer-events: none;
}
@keyframes stamp-down {
  0% {
    opacity: 0;
    scale: 1.7;
  }
  25% {
    opacity: 1;
    scale: 0.86;
  }
  55% {
    scale: 1.06;
  }
  80% {
    scale: 1;
  }
}

/* ---------------------------------------------------------------- 拍照畫面 */

/* 版面照繪本第 6 頁的攝影棚：左邊是人形照框（鏡頭預覽），右邊是攝影師，頭上是柔光罩，光照向人形照框。
   倒數的黃色圓牌放在鏡頭旁邊：Mac 的鏡頭在螢幕上緣正中間（camera-top）；平板直放時前鏡頭在側邊中間
   （camera-left、camera-right，見 photo.js 的 cameraSide） */
.photo > * {
  position: absolute;
}

/* 紅色地板：沿用入境櫃台的櫃台（只有上緣有線），換成繪本第 6 頁的紅色 */
.photo .floor {
  left: 0;
  top: 1590px;
  width: 1200px;
  height: 1140px;
  pointer-events: none;
}
.photo .floor path[fill='#e9e1dc'] {
  fill: #b3261e;
}

/* 柔光罩和光：美術照繪本比例畫，放上平板縮成 0.473 倍（跟攝影師一樣大）。
   光的位置跟著柔光罩算：繪本座標 (x, y) 在畫面上是 (800 + (x - 230) × 0.473, 60 + (y - 55) × 0.473) */
.photo .softbox {
  left: 800px;
  top: 60px;
  width: 331.1px;
  height: 387.9px;
  pointer-events: none;
}
.photo .rays {
  left: 520px;
  top: 232.6px;
  width: 328.3px;
  height: 312.2px;
  pointer-events: none;
}
/* 閃光時，另一份光疊到人形照框上面亮一下 */
.photo .rays-flash {
  visibility: hidden;
}
.photo .rays-flash.go {
  animation: rays-flash 0.6s step-end;
}
@keyframes rays-flash {
  0% {
    visibility: visible;
  }
}

/* 人形照框：比例照繪本第 7 頁的人形照框。淡藍底上放鏡頭畫面（左右翻過來，像照鏡子），
   框線蓋在最上面，鏡頭畫面的邊藏在線下 */
.photo .frame {
  left: 48px;
  top: 330px;
  width: 640px;
  height: 766px;
}
.photo .frame > .art {
  position: absolute;
  inset: 0;
}
.photo .window {
  position: absolute;
  inset: 3px;
  overflow: hidden;
  background: #c2d8ef;
}
.photo .window > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.photo .preview {
  object-fit: cover;
  transform: scaleX(-1);
  visibility: hidden;
}
.photo .frame.live .preview {
  visibility: visible;
  animation: preview-in 0.36s step-end;
}
@keyframes preview-in {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 0.5;
  }
  66% {
    opacity: 0.85;
  }
}
.photo .shot canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* 通用剪影照框的大小畫（ui.py 的 PHOTO_FRAME），框線在框的邊上，所以往外多 3 */
.photo .silhouette {
  position: absolute;
  inset: -3px;
}
.photo .frame.taken .shot {
  animation: picked 0.3s step-end;
}
.photo .frame .stamp {
  position: absolute;
  right: -40px;
  top: -44px;
  width: 190px;
  height: 190px;
  rotate: -14deg;
  animation: stamp-down 0.3s step-end backwards;
  pointer-events: none;
}

/* 攝影師：站在紅色地板上，面向左邊的人形照框（繪本的方向，不用翻）。大小跟其他畫面一樣（繪本的 0.473 倍） */
.photo .staff-photographer {
  left: 820px;
  top: 862px;
  width: 359.5px;
  height: 738px;
  pointer-events: none;
}
.photo .staff-photographer .eye {
  animation: blink 5.3s step-end infinite;
  animation-delay: -1.3s;
}
/* 倒數時舉起來的手跟著數字一下一下點 */
.photo .staff-photographer .hand-up {
  transform-box: view-box;
  transform-origin: 175px 330px;
}
.photo .staff-photographer.counting .hand-up {
  animation: count-hand 1s step-end infinite;
}
@keyframes count-hand {
  0% {
    rotate: 6deg;
  }
  25% {
    rotate: 0deg;
  }
}
/* 拍照的瞬間，攝影師的相機閃光燈亮起來 */
.photo .staff-photographer.shooting .flash {
  fill: #fff6a8;
}

/* 攝影師的對話框：在柔光罩下面、攝影師頭上，尾巴指向攝影師的嘴 */
.photo .photo-bubble {
  left: 690px;
  top: 520px;
  width: 500px;
  height: 364px;
  transform-origin: 270px 352px;
  pointer-events: none;
}
.photo .photo-bubble.pop {
  animation: bubble-pop 0.36s step-end;
}
.photo .bubble-text {
  position: absolute;
  left: 34px;
  top: 22px;
  width: 432px;
  height: 264px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo .bubble-line {
  margin: 0;
  font-size: 50px;
  font-weight: 700;
  text-align: center;
}
.photo .photo-bubble.shout .bubble-line {
  font-size: 120px;
}

/* 鏡頭旁邊的黃色圓牌：先寫「看這裡」，倒數時換成 3、2、1。尾巴指向鏡頭 */
.photo .countdown {
  left: 475px;
  top: 14px;
  width: 250px;
  height: 280px;
  transform-origin: 125px 160px;
  visibility: hidden;
  pointer-events: none;
}
.photo .countdown.shown {
  visibility: visible;
}
.photo .countdown.pop {
  animation: bubble-pop 0.36s step-end;
}
.photo .countdown-text {
  position: absolute;
  left: 17px;
  top: 52px;
  width: 216px;
  height: 216px;
  display: grid;
  place-items: center;
}
.photo .countdown-number {
  font-family: Zhuyin, sans-serif;
  font-size: 150px;
  font-weight: 700;
  line-height: 1;
}
/* 「看這裡」加注音一個字 1.5 倍寬，42px 時三個字放得進圓裡 */
.photo .countdown-words {
  font-size: 42px;
  font-weight: 700;
}
/* 鏡頭在平板的左邊：圓牌移到左邊中間，轉過去讓尾巴指向左邊，字轉回來 */
.photo.camera-left .countdown,
.photo.camera-right .countdown {
  left: 31px;
  top: 800px;
  rotate: -90deg;
}
.photo.camera-left .countdown-text,
.photo.camera-right .countdown-text {
  rotate: 90deg;
}
/* 鏡頭在平板的右邊：整個畫面左右翻過來（攝影師到左邊、人形照框到右邊、圓牌到右邊中間），
   字、鏡頭畫面、照片和印章再翻回來 */
.photo.camera-right {
  transform: scaleX(-1);
}
.photo.camera-right .bubble-text,
.photo.camera-right .choice-text,
.photo.camera-right .flash-text,
.photo.camera-right .shot canvas,
.photo.camera-right .stamp .art {
  transform: scaleX(-1);
}
.photo.camera-right .countdown-text {
  scale: -1 1;
}
.photo.camera-right .preview {
  transform: none;
}

/* 拍完之後的兩個按鈕：放在人形照框下面 */
.photo .choices {
  left: 48px;
  top: 1134px;
  width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  visibility: hidden;
}
.photo .choices.shown {
  visibility: visible;
}
.photo .choices.shown .choice {
  animation: card-in 0.36s step-end backwards;
}
.photo .choices.shown .choice-retake {
  animation-delay: 70ms;
}
.photo .choice {
  position: relative;
  width: 560px;
  height: 190px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--ink);
}
.photo .choice[hidden] {
  display: none;
}
.photo .choice > .art {
  position: absolute;
  inset: 0;
}
.photo .choice-text {
  position: relative;
  display: block;
  font-size: 76px;
  font-weight: 700;
}
/* 「重拍」是白色的按鈕，「就用這張」是黃色的 */
.photo .choice-retake .art path[fill='#f2d24a'] {
  fill: #ffffff;
}
.photo .choice:active {
  transform: scale(0.95);
}

/* 閃光：攝影師的相機冒出黃色的光芒和「喀嚓」（光芒左右翻過來，朝向人形照框），整個畫面閃一下白光 */
.photo .flash-burst {
  left: 734px;
  top: 982px;
  width: 220px;
  height: 200px;
  transform-origin: 160px 150px;
  opacity: 0;
  pointer-events: none;
}
.photo .flash-burst > .art {
  transform: scaleX(-1);
}
.photo .flash-burst.go {
  animation: shot-burst 1s step-end;
}
.photo .flash-text {
  position: absolute;
  left: -30px;
  top: 190px;
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  white-space: nowrap;
}
@keyframes shot-burst {
  0% {
    opacity: 1;
    transform: scale(0.8);
  }
  12% {
    transform: scale(1.06);
  }
  24% {
    transform: scale(1);
  }
  80% {
    opacity: 0;
  }
}
.photo .flash-light {
  inset: 0;
  background: #fffdf6;
  opacity: 0;
  pointer-events: none;
}
.photo .flash-light.go {
  animation: camera-flash 0.45s step-end;
}
@keyframes camera-flash {
  0% {
    opacity: 0.95;
  }
  25% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.4;
  }
  75% {
    opacity: 0.15;
  }
  100% {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------- 檔案管理部（檔案揭曉、簽名確認共用的版面） */

/* 版面照繪本第 7 頁的檔案管理部：個人檔案放在黃色看板上，檔案管理部職員在左上角（跟家長同意畫面一樣），
   對話框在職員右邊。檔案揭曉和簽名確認都用這個版面（畫面加上 .file-room），換畫面時個人檔案不會跳。
   個人檔案的排版在 personal-file.css；這裡只管它放在哪裡 */
.file-room > * {
  position: absolute;
}
.file-room .staff-clerk {
  left: 20px;
  top: 64px;
  width: 392.6px;
  height: 312.2px;
  transform: scaleX(-1); /* 轉向右邊，面向對話框和個人檔案 */
}
.file-room .staff-clerk .eye {
  animation: blink 4.3s step-end infinite;
}
/* 說話的時候招手 */
.file-room .staff-clerk.presenting .hand {
  transform-box: view-box;
  transform-origin: 262px 290px;
  animation: welcome 1.8s step-end 2;
}
.file-room .board {
  left: 40px;
  top: 326px;
  width: 1120px;
  height: 1560px;
}
/* 個人檔案：寬 1020（檔案座標的 1.02 倍），放在看板裡，四周露出 50 的黃邊 */
.file-room .file-slot {
  left: 90px;
  top: 376px;
  width: 1020px;
}
/* 職員的對話框：加上 .shown 才出現；每次換字加一次 .pop，從尾巴那邊彈出來 */
.file-room .clerk-bubble {
  left: 252px;
  top: 40px;
  width: 900px;
  height: 206px;
  transform-origin: 8px 141px;
  visibility: hidden;
  pointer-events: none;
}
.file-room .clerk-bubble.shown {
  visibility: visible;
}
.file-room .clerk-bubble.pop {
  animation: bubble-pop 0.36s step-end;
}
.file-room .bubble-text {
  position: absolute;
  left: 60px;
  top: 12px;
  right: 10px;
  height: 170px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 54px;
  font-weight: 700;
}
.file-room .bubble-line {
  margin: 0;
}

/* ---------------------------------------------------------------- 檔案揭曉畫面 */

/* 個人檔案一步一步出現（順序見 reveal-screen.js） */
/* 1. 檔案紙送上看板 */
.reveal .personal-file {
  visibility: hidden;
}
.reveal .personal-file.shown {
  visibility: visible;
  animation: card-in 0.36s step-end;
}

/* 2. 人形照放上去 */
.reveal .file-portrait .file-picture {
  visibility: hidden;
}
.reveal .file-portrait.shown .file-picture {
  visibility: visible;
  animation: picked 0.3s step-end;
}

/* 3. 原形頭像先是黑色的剪影，蓋著黃色的問號，一抖一抖的（猜猜是誰）；揭曉時白光一閃，換成彩色的 */
.reveal .file-head .file-picture,
.reveal .file-head .mystery-mark {
  visibility: hidden;
}
.reveal .file-head.mystery .file-picture {
  visibility: visible;
  filter: brightness(0);
  animation: mystery-shake 0.5s step-end infinite;
}
.reveal .file-head .mystery-mark {
  position: absolute;
  left: 32%;
  top: 28%;
  width: 36%;
  height: 43.6%;
}
.reveal .file-head.mystery .mystery-mark {
  visibility: visible;
  animation: mystery-mark 0.75s step-end infinite;
}
.reveal .file-head.revealed .file-picture {
  visibility: visible;
  animation: picked 0.3s step-end;
}
.reveal .reveal-flash {
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
}
.reveal .file-head.revealed .reveal-flash {
  animation: camera-flash 0.45s step-end;
}
@keyframes mystery-shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-1.5%, 0.5%) rotate(-1.2deg);
  }
  50% {
    transform: translate(1%, -0.5%) rotate(0.8deg);
  }
  75% {
    transform: translate(1.5%, 0.5%) rotate(-0.6deg);
  }
}
@keyframes mystery-mark {
  0% {
    transform: rotate(-6deg) scale(1);
  }
  33% {
    transform: rotate(4deg) scale(1.08);
  }
  66% {
    transform: rotate(-2deg) scale(0.96);
  }
}

/* 揭曉之後，原形頭像旁邊的小星星輪流閃 */
.reveal .sparkle {
  width: 60px;
  height: 60px;
  visibility: hidden;
  pointer-events: none;
}
.reveal.revealed .sparkle {
  visibility: visible;
  animation: twinkle 2.4s step-end infinite;
}
.reveal .sparkle-1 {
  left: 582px;
  top: 404px;
}
.reveal .sparkle-2 {
  left: 1022px;
  top: 396px;
}
.reveal .sparkle-3 {
  left: 1062px;
  top: 690px;
}
.reveal .sparkle-4 {
  left: 578px;
  top: 910px;
}
.reveal.revealed .sparkle-2 {
  animation-delay: -0.6s;
}
.reveal.revealed .sparkle-3 {
  animation-delay: -1.2s;
}
.reveal.revealed .sparkle-4 {
  animation-delay: -1.8s;
}

/* 4. 檔案欄位一個一個填上去，像打字：每個欄位跳一下出現 */
.reveal .file-field,
.reveal .file-note {
  visibility: hidden;
}
.reveal .file-field.shown {
  visibility: visible;
  animation: type-in 0.24s step-end;
}
@keyframes type-in {
  0% {
    transform: translateY(-12%);
    opacity: 0.4;
  }
  50% {
    transform: translateY(4%);
    opacity: 1;
  }
  100% {
    transform: none;
  }
}

/* 5. 職員備註 */
.reveal .file-note.shown {
  visibility: visible;
  animation: card-in 0.36s step-end;
}

/* ---------------------------------------------------------------- 簽名確認畫面 */

/* 跟檔案揭曉同一個版面（.file-room）。簽名卡從下面升上來，蓋住個人檔案的下半部（星籍以下），
   露出人形照、原形頭像和姓名欄 */
.signature .sign-card {
  left: 40px;
  top: 1080px;
  width: 1120px;
  height: 790px;
  visibility: hidden;
}
.signature .sign-card > .art {
  position: absolute;
  inset: 0;
}
.signature .sign-card.shown {
  visibility: visible;
  animation: card-rise 0.48s step-end;
}
.signature .sign-card.leaving {
  animation: card-drop 0.36s step-end forwards;
  pointer-events: none;
}
@keyframes card-rise {
  0% {
    transform: translateY(810px);
  }
  25% {
    transform: translateY(420px);
  }
  50% {
    transform: translateY(110px);
  }
  75% {
    transform: translateY(-18px);
  }
  100% {
    transform: none;
  }
}
@keyframes card-drop {
  0% {
    visibility: visible;
    transform: translateY(-14px);
  }
  25% {
    transform: translateY(150px);
  }
  50% {
    transform: translateY(440px);
  }
  75%,
  100% {
    visibility: hidden;
    transform: translateY(810px);
  }
}

/* 寫名字的框：位置跟簽名卡美術裡的框一樣（scripts/art/specs/ui.py 的 SIGN_PAD）。
   筆畫的座標照這個框的大小記（1040×490，見 signature-screen.js 的 PAD） */
.signature .sign-pad {
  position: absolute;
  left: 40px;
  top: 34px;
  width: 1040px;
  height: 490px;
  border-radius: 24px;
  cursor: crosshair;
}
.signature .sign-strokes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 提示的字：還沒寫的時候放在框的上半部，開始寫就藏起來。
   顏色跟檔案欄位的標籤一樣：看得出是提示，旁邊的注音也看得清楚 */
.signature .sign-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 140px;
  margin: 0;
  text-align: center;
  color: #7f6e6c;
  font-size: 60px;
  font-weight: 700;
  pointer-events: none;
}
.signature .sign-pad.writing .sign-hint {
  visibility: hidden;
}
/* 還沒簽名就按「確認」：框左右搖一搖 */
.signature .sign-pad.nudge {
  animation: nudge 0.4s step-end;
}
@keyframes nudge {
  0% {
    transform: translateX(-14px);
  }
  25% {
    transform: translateX(12px);
  }
  50% {
    transform: translateX(-8px);
  }
  75% {
    transform: translateX(4px);
  }
  100% {
    transform: none;
  }
}

/* 「重寫」和「確認」：沿用開始按鈕的美術，「重寫」換成白色 */
.signature .sign-button {
  position: absolute;
  top: 556px;
  width: 480px;
  height: 163px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--ink);
}
.signature .sign-button > .art {
  position: absolute;
  inset: 0;
}
.signature .sign-clear {
  left: 60px;
}
.signature .sign-confirm {
  left: 580px;
}
.signature .sign-clear .art path[fill='#f2d24a'] {
  fill: #ffffff;
}
.signature .sign-button-text {
  position: relative;
  font-size: 68px;
  font-weight: 700;
}
.signature .sign-button:active {
  transform: scale(0.95);
}
/* 還沒簽名時「確認」是淡的（按了會提醒孩子先簽名）；簽好了亮起來、彈一下 */
.signature .sign-confirm[aria-disabled='true'] {
  opacity: 0.45;
}
.signature .sign-confirm[aria-disabled='true']:active {
  transform: none;
}
.signature .sign-confirm.pop {
  animation: picked 0.3s step-end;
}

/* 按了「確認」：簽名一筆一筆寫進姓名欄（每一筆從 --at 開始、寫 --ms，由 signature-screen.js 照筆畫的長短算） */
.signature .file-signature-art.writing path {
  stroke-dasharray: 1 2;
  animation: write-in var(--ms) steps(6) var(--at) both;
}
@keyframes write-in {
  from {
    stroke-dashoffset: 1.01;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* 蓋入境章：黃色的印章從上面落下來，碰到檔案時壓扁一下（這時蓋上章），再抬起來離開。
   印章放在蓋下去的位置：印面的下緣（美術座標 y 420）對齊章印的下緣，印面剛好蓋住章印
   （章印在個人檔案座標 (694, 970) 起 256×150，見 personal-file.css；放上平板是 1.02 倍） */
.signature .rubber-stamp {
  left: 768.4px;
  top: 1098.4px;
  width: 320px;
  height: 468px;
  transform-origin: 160px 420px;
  visibility: hidden;
  pointer-events: none;
}
.signature .rubber-stamp.pressing {
  animation: stamp-press 1s step-end forwards;
}
@keyframes stamp-press {
  0% {
    visibility: visible;
    transform: translateY(-460px);
  }
  12% {
    transform: translateY(-480px) rotate(-3deg);
  }
  24% {
    transform: translateY(-300px);
  }
  32% {
    transform: translateY(-110px);
  }
  38% {
    transform: scaleY(0.88);
  }
  46% {
    transform: scaleY(0.95);
  }
  56% {
    transform: none;
  }
  66% {
    transform: translateY(-60px);
  }
  76% {
    transform: translateY(-200px);
  }
  86% {
    transform: translateY(-440px);
  }
  100% {
    visibility: hidden;
    transform: translateY(-440px);
  }
}
/* 蓋章那一下，印章兩邊冒出黃色的光芒（相機閃光的美術，光芒從 (60, 150) 往右上射出；左邊那份左右翻過來） */
.signature .stamp-burst {
  top: 1350px;
  width: 220px;
  height: 200px;
  opacity: 0;
  pointer-events: none;
}
.signature .stamp-burst-right {
  left: 1015px;
  transform-origin: 60px 150px;
}
.signature .stamp-burst-left {
  left: 621px;
  transform-origin: 160px 150px;
}
.signature .stamp-burst-left > .art {
  transform: scaleX(-1);
}
.signature .stamp-burst.go {
  animation: shot-burst 0.7s step-end;
}
/* 蓋章那一下，看板和個人檔案震一下 */
.signature.impact .board,
.signature.impact .file-slot {
  animation: impact 0.3s step-end;
}
@keyframes impact {
  0% {
    transform: translateY(8px);
  }
  33% {
    transform: translateY(-4px);
  }
  66% {
    transform: translateY(2px);
  }
  100% {
    transform: none;
  }
}

/* 蓋好章之後，入境章旁邊的小星星輪流閃 */
.signature .sparkle {
  width: 60px;
  height: 60px;
  visibility: hidden;
  pointer-events: none;
}
.signature.stamped .sparkle {
  visibility: visible;
  animation: twinkle 2.4s step-end infinite;
}
.signature .sparkle-1 {
  left: 748px;
  top: 1310px;
}
.signature .sparkle-2 {
  left: 1080px;
  top: 1292px;
}
.signature .sparkle-3 {
  left: 1092px;
  top: 1520px;
}
.signature .sparkle-4 {
  left: 736px;
  top: 1532px;
}
.signature.stamped .sparkle-2 {
  animation-delay: -0.6s;
}
.signature.stamped .sparkle-3 {
  animation-delay: -1.2s;
}
.signature.stamped .sparkle-4 {
  animation-delay: -1.8s;
}

/* ---------------------------------------------------------------- 取件與 QR code 畫面 */

/* 跟簽名確認同一個版面（.file-room）。蓋好章的個人檔案和機械手放在同一個框（.pickup-rig）裡：
   夾住之後一起被拖出畫面（順序見 pickup-screen.js） */
.pickup .pickup-rig {
  inset: 0;
  pointer-events: none;
}
.pickup .pickup-rig > * {
  position: absolute;
}

/* 機械手：美術照平板座標畫（1430×546），夾爪合起來時尖端在美術座標 (52, 273)，
   放上畫面是 (836, 1150)：夾住個人檔案右邊，手掌、手腕、拉桿都在畫面裡，手臂伸到畫面外面 */
.pickup .robot-hand {
  left: 784px;
  top: 877px;
  width: 1430px;
  height: 546px;
  visibility: hidden;
}
/* 夾爪繞著手掌上的螺絲轉（美術座標，見 scripts/art/specs/robot_hand.py 的 PIVOTS），一開始是張開的 */
.pickup .robot-hand .jaw-upper,
.pickup .robot-hand .jaw-lower {
  transform-box: view-box;
}
.pickup .robot-hand .jaw-upper {
  transform-origin: 275.6px 208px;
  rotate: 24deg;
}
.pickup .robot-hand .jaw-lower {
  transform-origin: 275.6px 338px;
  rotate: -24deg;
}
/* 機械手要來了：拉桿頂端的小球黃、橘一閃一閃，像警示燈 */
.pickup .robot-hand.alert .knob > path {
  animation: knob-blink 0.4s step-end infinite;
}
@keyframes knob-blink {
  0% {
    fill: #ef5018;
  }
  50% {
    fill: #f2d24a;
  }
}
/* 從畫面右邊一格一格伸進來，稍微衝過頭再退回來 */
.pickup .robot-hand.reaching {
  animation: hand-reach 0.9s step-end forwards;
}
@keyframes hand-reach {
  0% {
    visibility: visible;
    transform: translateX(460px);
  }
  11% {
    transform: translateX(356px);
  }
  22% {
    transform: translateX(262px);
  }
  33% {
    transform: translateX(180px);
  }
  44% {
    transform: translateX(112px);
  }
  55% {
    transform: translateX(60px);
  }
  66% {
    transform: translateX(22px);
  }
  77% {
    transform: translateX(-14px);
  }
  88% {
    transform: translateX(-6px);
  }
  100% {
    visibility: visible;
    transform: none;
  }
}
/* 喀鏘！夾爪兩格就合起來 */
.pickup .robot-hand.gripping .jaw-upper {
  animation: jaw-close-upper 0.2s step-end forwards;
}
.pickup .robot-hand.gripping .jaw-lower {
  animation: jaw-close-lower 0.2s step-end forwards;
}
@keyframes jaw-close-upper {
  0% {
    rotate: 24deg;
  }
  40% {
    rotate: 9deg;
  }
  80%,
  100% {
    rotate: 0deg;
  }
}
@keyframes jaw-close-lower {
  0% {
    rotate: -24deg;
  }
  40% {
    rotate: -9deg;
  }
  80%,
  100% {
    rotate: 0deg;
  }
}
/* 夾住的那一下：個人檔案被扯一下，夾爪旁邊冒出黃色的短線（沿用相機閃光，左右翻過來，往左上射出） */
.pickup .file-slot.jolt {
  animation: jolt 0.3s step-end;
}
@keyframes jolt {
  0% {
    transform: translateX(12px);
  }
  33% {
    transform: translateX(-5px);
  }
  66% {
    transform: translateX(2px);
  }
  100% {
    transform: none;
  }
}
.pickup .grip-burst {
  left: 652px;
  top: 968px;
  width: 220px;
  height: 200px;
  transform-origin: 160px 150px;
  opacity: 0;
}
.pickup .grip-burst > .art {
  transform: scaleX(-1);
}
.pickup .grip-burst.go {
  animation: shot-burst 0.7s step-end;
}
/* 把個人檔案拖出畫面：先往回縮一下，再越拉越快，往右邊（電視那一邊）出去。
   個人檔案繞著夾住的地方晃一晃（transform-origin 是夾住的地方在個人檔案框裡的位置） */
.pickup .pickup-rig.pulling {
  animation: pull-out 1.3s step-end forwards;
}
@keyframes pull-out {
  0% {
    transform: none;
  }
  6% {
    transform: translateX(-14px);
  }
  12% {
    transform: translateX(-18px);
  }
  18% {
    transform: translateX(10px);
  }
  24% {
    transform: translateX(40px);
  }
  30% {
    transform: translateX(84px);
  }
  36% {
    transform: translateX(144px);
  }
  42% {
    transform: translateX(220px);
  }
  48% {
    transform: translateX(312px);
  }
  54% {
    transform: translateX(420px);
  }
  60% {
    transform: translateX(544px);
  }
  66% {
    transform: translateX(684px);
  }
  72% {
    transform: translateX(840px);
  }
  78% {
    transform: translateX(1012px);
  }
  84% {
    transform: translateX(1200px);
  }
  90%,
  100% {
    visibility: hidden;
    transform: translateX(1400px);
  }
}
.pickup .pickup-rig.pulling .file-slot {
  transform-origin: 840px 774px;
  animation: drag-tilt 1.3s step-end forwards;
}
@keyframes drag-tilt {
  0% {
    rotate: 0deg;
  }
  18% {
    rotate: -1.6deg;
  }
  36% {
    rotate: 1deg;
  }
  54% {
    rotate: -0.6deg;
  }
  72% {
    rotate: 0.3deg;
  }
}

/* 把入境檔案帶回家的單子：沿用家長同意的表單（上面有夾子），放在黃色看板上，從下面升上來。
   先是說明和兩個按鈕（.offering），按了「顯示 QR code」換成 QR code 和倒數（.scanning） */
.pickup .take-home,
.goodbye .goodbye-card {
  left: 60px;
  top: 400px;
  width: 1080px;
  height: 1400px;
}
.pickup .take-home > *,
.goodbye .goodbye-card > * {
  position: absolute;
}
.pickup .take-home > .art,
.goodbye .goodbye-card > .art {
  inset: 0;
}
.pickup .take-home {
  visibility: hidden;
}
.pickup .take-home.shown {
  visibility: visible;
  animation: slip-rise 0.48s step-end;
}
@keyframes slip-rise {
  0% {
    transform: translateY(1480px);
  }
  25% {
    transform: translateY(760px);
  }
  50% {
    transform: translateY(200px);
  }
  75% {
    transform: translateY(-24px);
  }
  100% {
    transform: none;
  }
}
/* 給家長看的字（系統字型，不加注音），左右留白跟表單一樣 */
.pickup .take-home-title,
.pickup .take-home-offer,
.pickup .take-home-scan,
.pickup .take-home-remaining {
  left: 110px;
  right: 110px;
  margin: 0;
  text-align: center;
}
.pickup .take-home-title {
  top: 150px;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.pickup .take-home-offer {
  top: 280px;
  font-size: 40px;
  line-height: 1.6;
  text-align: left;
}
/* QR code：640×640，方格清清楚楚（白底黑格，不抖動） */
.pickup .take-home-qr {
  left: 220px;
  top: 110px;
  width: 640px;
  height: 640px;
}
.pickup .qr-picture {
  display: block;
  width: 100%;
  height: 100%;
}
.pickup .qr-picture rect {
  fill: #ffffff;
}
.pickup .qr-picture path {
  fill: var(--ink);
}
.pickup .take-home-scan {
  top: 790px;
  font-size: 48px;
  font-weight: 700;
}
.pickup .take-home-remaining {
  top: 870px;
  font-size: 36px;
  color: #7f6e6c;
}
/* 按鈕：沿用開始按鈕，「顯示 QR code」黃色；「完成」先是白色，顯示 QR code 之後變成黃色 */
.pickup .take-home-button {
  left: 260px;
  width: 560px;
  height: 190px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--ink);
}
.pickup .take-home-button > .art {
  position: absolute;
  inset: 0;
}
.pickup .take-home-button-text {
  position: relative;
  font-size: 60px;
  font-weight: 700;
}
.pickup .take-home-button:active {
  transform: scale(0.95);
}
.pickup .take-home.offering .show-qr {
  top: 620px;
}
.pickup .take-home.offering .done {
  top: 870px;
}
.pickup .take-home.offering .done .art path[fill='#f2d24a'] {
  fill: #ffffff;
}
.pickup .take-home.scanning .done {
  top: 1050px;
}
.pickup .take-home.offering .take-home-qr,
.pickup .take-home.offering .take-home-scan,
.pickup .take-home.offering .take-home-remaining,
.pickup .take-home.scanning .take-home-title,
.pickup .take-home.scanning .take-home-offer,
.pickup .take-home.scanning .show-qr {
  display: none;
}
.pickup .take-home.scanning .take-home-qr {
  animation: card-in 0.36s step-end;
}

/* ---------------------------------------------------------------- 道別畫面 */

/* 跟取件畫面同一個版面：單子換成孩子配對到的外星人，一跳一跳的說再見，職員一直揮手 */
.goodbye .staff-clerk.presenting .hand {
  animation-iteration-count: infinite;
}
.goodbye .goodbye-alien {
  left: 190px;
  top: 220px;
  width: 700px;
  height: 960px;
  object-fit: contain;
  animation: hop 1.2s step-end infinite;
}
.goodbye .sparkle {
  width: 60px;
  height: 60px;
  animation: twinkle 2.4s step-end infinite;
  pointer-events: none;
}
.goodbye .sparkle-1 {
  left: 170px;
  top: 560px;
}
.goodbye .sparkle-2 {
  left: 960px;
  top: 520px;
  animation-delay: -0.6s;
}
.goodbye .sparkle-3 {
  left: 990px;
  top: 1180px;
  animation-delay: -1.2s;
}
.goodbye .sparkle-4 {
  left: 150px;
  top: 1260px;
  animation-delay: -1.8s;
}

/* 還在嗎？ */
.still-there {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 0.45);
  transition: opacity 0.2s;
}

.still-there[hidden] {
  display: none;
}

/* 收起時淡出；main.js 等淡出結束才把它藏起來 */
.still-there.leaving {
  opacity: 0;
}

/* 手繪的白紙卡片（still-there-card，880×600）上放問題和「我還在！」；出現時跟其他對話框一樣彈一下 */
.still-there .dialog {
  position: relative;
  width: 880px;
  height: 600px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 60px;
  text-align: center;
}
.still-there:not(.leaving) .dialog {
  animation: bubble-pop 0.36s step-end;
}
.still-there .dialog > .art {
  position: absolute;
  inset: 0;
}

.still-there .question {
  position: relative;
  margin: 0;
  font-size: 110px;
  font-weight: 700;
}

/* 「我還在！」：沿用開始按鈕的美術 */
.still-there .button {
  position: relative;
  width: 560px;
  height: 190px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--ink);
}
.still-there .button > .art {
  position: absolute;
  inset: 0;
}
.still-there .button-text {
  position: relative;
  font-size: 64px;
  font-weight: 700;
}

.still-there .button:active {
  transform: scale(0.95);
}