/* 拍貼結尾頁（AI 設計檔 p7，畫面代號 result）。行為與樣板在 js/result.js。
   座標一律用設計單位（720×1280），全部抄自 docs/assets-index.md §0.8.3／§0.8.4——
   那些數值是從 AI 檔的 content stream 讀出來的，不是目測，改之前先看那一節。
   ⚠ p7 的畫板是 721×1281.778，但 §0.8 的表已經換算成和其他頁同一套座標系，這裡直接用。 */

.screen--result {
  /* §0.8.5 深綠底：全頁取樣確認是純平色，不是漸層 */
  background: #17301a;
}

/* ---------------- 頁首白帶（§0.8.4：0, 0, 720 × 94.773） ----------------
   logo 素材本身就是一條滿版白帶（1441×191 = 720.5×95.5 設計單位）。
   位置由實測對齊：素材墨水 bbox (458,25)-(983,162) @2x，設計稿上是 (457,24)-(982,161)，
   差 1px @2x → 左上各退 0.5 設計單位。白帶比素材矮 0.7，多出來的是白的，裁掉沒差。 */
.result__band {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: 94.773px;
  background: #fff;
  overflow: hidden;
  z-index: 2;
}
.result__logo {
  position: absolute;
  left: -0.5px;
  top: -0.5px;
  width: 720.5px;
  height: 95.5px;
}

/* ---------------- 成品照 ----------------
   §0.8.3：355.12 × 637.77 @ (182.94, 132.68)。上線時由玩家照片取代（js/result.js 的 setBoothResult）。
   **一定要是 <img>**：iOS 長按跳「儲存影像」只認 <img>，用 CSS background 的話
   「長按上圖儲存照片」那行字就是假的。tests/e2e/result.spec.mjs 有一條在守這件事。 */
.result__photo {
  position: absolute;
  left: 182.94px;
  top: 132.68px;
  width: 355.12px;
  height: 637.77px;
  border-radius: 27.457px;
  object-fit: cover;
  /* 長按要打得到照片本身；舞台其餘地方維持 touch-action: manipulation */
  -webkit-touch-callout: default;
}

/* 白色描邊（§0.8.4：圓角 27.457、2 寬，描邊跨在照片邊緣上＝內外各 1）。
   邊框畫在照片外緣 −1 的位置、border-box 2px，剛好覆蓋 −1～+1 這一圈。
   §0.8.4 提到的柔和投影是**場景確認頁輪播卡**的，這一頁沒有：實測 p7 渲染圖框外
   （左側 y=900 的 x330–360、下方 x=721 的 y1545–1593）一路都是純 #17301a，
   所以這裡刻意不加 box-shadow——加了反而對不上稿。
   ⚠ pointer-events: none——它疊在照片上面，吃掉點擊的話長按不會出現存圖選單。 */
.result__frame {
  position: absolute;
  left: 181.94px;
  top: 131.68px;
  width: 357.12px;
  height: 639.77px;
  border: 2px solid #fff;
  border-radius: 28.457px;
  pointer-events: none;
  z-index: 1;
}

/* 「長按上圖儲存照片」（§0.8.3：210.5 × 22 @ (255.75, 798)）。
   白字 70% 不透明已經烘在素材的 alpha 裡，不要再另外設 opacity。 */
.result__hint {
  position: absolute;
  left: 255.75px;
  top: 798px;
  width: 210.5px;
  height: 22px;
}

/* ---------------- 兩顆金色實心鈕（§0.8.3：311.5 × 105.5 @ y 850.75） ---------------- */
.result__share,
.result__menu {
  position: absolute;
  top: 850.75px;
  width: 311.5px;
  height: 105.5px;
}
.result__share { left: 36.5px; }
.result__menu { left: 373px; }

/* ---------------- 商務 CTA ----------------
   引言 549.5 × 26 @ (72, 991)；四顆描邊鈕 304 × 67，左欄 x 42.25、右欄 x 374.75，
   上排 y 1063.5、下排 y 1163.5。順序＝data/cta.js 的順序（和 cut5 同一份）。 */
.result__cta-lead {
  position: absolute;
  left: 72px;
  top: 991px;
  width: 549.5px;
  height: 26px;
}

.result__cta-item {
  position: absolute;
  display: block;
  width: 304px;
  height: 67px;
  /* 按下的回饋一律走 --press，不要在 :active 裡直接寫 transform（理由見 css/screens.css 的長註解） */
  transform: var(--press, none);
  -webkit-tap-highlight-color: transparent;
}
.result__cta-item:active { --press: scale(.985) translateY(1px); }
.result__cta-item > * { display: block; width: 100%; height: 100%; }
.result__cta-item:nth-child(1) { left: 42.25px; top: 1063.5px; }
.result__cta-item:nth-child(2) { left: 374.75px; top: 1063.5px; }
.result__cta-item:nth-child(3) { left: 42.25px; top: 1163.5px; }
.result__cta-item:nth-child(4) { left: 374.75px; top: 1163.5px; }

.result__cta-item:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 999px; }