/* 場景確認頁（AI 設計檔 p8／p9）。樣板與行為在 js/booth.js。
   座標一律用設計單位（720×1280），數值抄 docs/assets-index.md §0.8.3／§0.8.4——
   那一節是量自 AI 檔 content stream 的，不是目測，**改之前先去看那張表**。
   色票見 §0.8.5。刻意**不**寫進 css/screens.css：那支檔案同時有別人在動。 */

.screen--booth {
  background: #17301a;            /* 深綠底，§0.8.5 量自 cairo 渲染（整頁純平色） */
  display: block;                 /* .screen 預設是 flex 直排；這頁每個元素各自絕對定位 */
  color: #fff;
}

/* ---------------- 頁首白帶（0, 0, 720 × 94.773，§0.8.4） ---------------- */
.booth__band {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: 94.773px;
  background: #fff;
  overflow: hidden;               /* logo 素材 95.5 高，多出來的 0.727 裁掉 */
  z-index: 2;
}
.booth__logo { position: absolute; left: 0; top: 0; width: 720px; height: 95.5px; }

/* ---------------- 碼錶＋倒數數字 ---------------- */
.booth__timer { position: absolute; left: 51.75px; top: 135.5px; width: 76px; height: 88px; }
.booth__timer-img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 數字是程式畫的（素材的碼錶不含數字，§0.8.3）。
   §0.8.4 給的是墨水框 x 65.50–113.50、y 170.75–202.00、字級 41.5084、基線 (64.065, 201.40)。
   我們沒有設計稿那套字（§0.6 源泉源體未提供），字面寬高本來就不會一樣，
   所以改成「把數字的視覺中心對進墨水框中心」＝ (89.5, 186.375)，
   用 flex 置中 ＋ 等寬數字，1 位數與 2 位數都不會左右跳。
   top／height 是拿渲染結果和 AI 設計稿疊圖量出來的：墨水框 y 對到 170.50–201.00（Δ0），
   x 65.5→67.5（字面比設計稿窄 2，中心差 1.0）——換字型就會再差一點，動之前先疊圖再量。 */
.booth__count {
  position: absolute;
  left: 0;                        /* 相對 .booth__timer；滿寬置中 → 中心 89.75 ≈ 墨水框中心 89.5 */
  top: 29.4px;                    /* 164.9 − 135.5（.booth__timer 的 top） */
  width: 76px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 41.5084px/1 "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #1f3315;
  letter-spacing: -.5px;
}

/* ---------------- 標題 ---------------- */
.booth__title { position: absolute; left: 154.5px; top: 232.5px; width: 402px; height: 71.5px; }

/* ---------------- 輪播 ----------------
   原生捲動 ＋ scroll-snap：手指慣性、回彈、鍵盤操作都交給瀏覽器，自己做要全部重寫。
   左右內距 (720 − 450.782) / 2 ＝ 134.609 把第一張與最後一張也推得到正中央，
   於是 scrollLeft ＝ i × 466.379，圓點同步只要一個除法（js/booth.js 的 onScroll）。
   ⚠ 垂直方向要留 30 的餘白給卡片投影：overflow-x 一旦不是 visible，
   CSS 會把另一軸的 visible 升成 auto，投影會被裁掉。 */
.booth__track {
  position: absolute;
  left: 0;
  top: 333.998px;                 /* 卡片 y 363.998 − 30 餘白 */
  width: var(--stage-w);
  height: 522.598px;              /* 卡高 462.598 ＋ 上下各 30 */
  display: flex;
  align-items: center;
  gap: 15.597px;                  /* 卡距 466.379 − 卡寬 450.782 */
  padding: 30px 134.609px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; /* 滑到底不要把整個 App 往旁邊帶 */
}
.booth__track::-webkit-scrollbar { display: none; }

.booth__card {
  position: relative;
  flex: 0 0 450.782px;
  width: 450.782px;
  height: 462.598px;
  border-radius: 51.475px;
  background: #2b421f;            /* 側卡底色；置中的那張由 .is-active 換成白色 */
  scroll-snap-align: center;
  /* 設計稿的投影是一層 form XObject，抽素材時刻意拿掉（§0.8.4），這裡用 CSS 補 */
  box-shadow: 0 4px 13px rgba(0, 0, 0, .55);
  transition: background-color .18s ease;
}
.booth__card.is-active { background: #fff; }

.booth__label {
  position: absolute;
  left: 50%;
  top: 33.002px;                  /* 397 − 363.998 */
  width: 136px;
  height: 48px;
  transform: translateX(-50%);
}
/* 側卡上的場景名在設計稿裡是白字（量自 hi-8：#ffffff），素材只有深色那一版（#1f3315）。
   字是單色的，直接把它壓成白色就是設計稿的樣子，不必請設計端再出一組。 */
.booth__card:not(.is-active) .booth__label { filter: brightness(0) invert(1); }

.booth__photo {
  position: absolute;
  left: 50%;
  top: 104.472px;                 /* 468.47 − 363.998 */
  width: 188.62px;
  height: 335.14px;
  border-radius: 26.571px;
  overflow: hidden;
  transform: translateX(-50%);
}
/* contain：booth.scene3 是橫式 3:2（§0.8.6），填不滿 9:16 的框。
   設計稿裡它自己也是上下留空的，所以照原樣留空——**不裁切、不拉伸變形**。 */
.booth__photo > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* ---------------- 五個圓點（y 872.538，§0.8.4） ----------------
   x 是每一點的中心，**間距不等寬**（305.13 → 335.14 之間比其他大 2.6），
   這是設計稿上量到的，照抄。亮點只放大自己（r 6.411 → 8.983 ＝ ×1.4012），
   用 transform 放大才不會把中心也一起挪走。 */
.booth__dots { position: absolute; left: 0; top: 0; width: var(--stage-w); height: 0; }
.booth__dot {
  position: absolute;
  top: 866.127px;                 /* 872.538 − 6.411 */
  width: 12.822px;
  height: 12.822px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #558335;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, background-color .18s ease;
}
.booth__dot.is-active { background: #fff; transform: scale(1.4012); }
.booth__dot:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* ---------------- 兩顆按鈕 ----------------
   .imgbtn（css/screens.css）負責熱區與按下回饋；這兩顆沒有用 transform 置中，
   所以不必像 cut2／cut3 那樣自己把 var(--press) 接在後面。 */
.booth__reselect { position: absolute; left: 39.25px; top: 944.25px; width: 272.5px; height: 122.5px; }
.booth__confirm { position: absolute; left: 338.75px; top: 945.25px; width: 341.5px; height: 120.5px; }