/* 頁面 07 AED 遊戲專屬樣式。
   注意:#screen-aed-game 本身絕不可設 display(見 docs/LESSONS_LEARNED.md 2026-07-23「T-011」條目)—
   layout 一律放在頁面自己的 wrapper class 上。

   T-065(D-009):場景依參考圖重做,T-041 的透視 3D 樣式全數移除。
   T-078(主席九點修正):改照**原始設計稿** —— 場景取消外框改成滿版直接畫在頁面底色上、
   人像整張傾斜 --p07-tilt、兩片貼片在 AED 正下方左右並排、拿掉語音開關鈕、
   充電完成電擊鍵閃燈、按下去先跑放電動畫(白光 + 擴散環 + 電流感)才跳 pop 視窗。 */
.p07-page {
  /* 場景要滿版(設計稿裡 AED 與人像本身就自帶左右留白),所以左右內距歸零,
     改由文字元素各自帶 --p07-gutter,不然場景會被頁面內距夾窄一圈。 */
  --p07-gutter: clamp(8px, calc((100vw - 360px) / 2), 20px);
  padding: 4px 0 30px;
  text-align: center;
  user-select: none;
}

.p07-title {
  font-weight: 900;
  font-size: clamp(28px, 8vw, 34px);
  color: var(--ink);
  margin-top: 12px;
  padding-inline: var(--p07-gutter);
}

.p07-subtitle {
  margin-top: 8px;
  font-weight: 700;
  font-size: clamp(14px, 4vw, 15px);
  color: var(--ink-soft);
  padding-inline: var(--p07-gutter);
}

/* ---- 三步驟籤 ---- */
.p07-steps {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
  padding-inline: var(--p07-gutter);
}

.p07-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--dark-chip);
  opacity: 0.5;
  transition: opacity 0.2s;
}

.p07-step--done {
  opacity: 1;
}

.p07-step__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6a6a6a;
}

.p07-step--done .p07-step__dot {
  background: var(--green-success);
}

.p07-step__label {
  font-weight: 700;
  font-size: 13px;
  color: #d7dde0;
}

/* ---- 場景(T-078:無外框、滿版)----
   世界座標系固定 680×740(見 js/lib/aed-scene.js),場景 DOM 鎖同一個比例,
   裡面全部用百分比定位 —— 場景縮放時人像、貼片、目標、導線一起等比跑。

   寬度以 `width` 給定值 + `aspect-ratio` 求高:**不能反過來用高度去乘出寬度**,
   因為同一個自訂屬性若含 `%`,在 width 與 height 兩種情境下解析的基準不同(前者比父層寬、
   後者比父層高),一寫進 calc 就錯。高度放不下時整組等比縮小,下限 300px 是為了
   讓貼片保持約 36px 的可觸面積(矮螢幕寧可讓頁面捲一點)。
   310px 是場景以外的版面高度(導覽列 + 標題區 + 步驟籤 + 提示列 + 下內距)。
   高度單位「先 vh 後 dvh」漸進增強,和 .app-frame 同一套作法(T-047)。 */
.p07-scene {
  --p07-fit: calc((100vh - 316px) / 1.0882);
  --p07-fit: calc((100dvh - 316px) / 1.0882);
  position: relative;
  width: min(100%, max(300px, var(--p07-fit)));
  aspect-ratio: 680 / 740;
  height: auto;
  margin: 16px auto 0;
  overflow: hidden;
  touch-action: none; /* 拖曳時頁面不得捲動,硬要求 */
}

.p07-scene img {
  -webkit-user-drag: none;
  user-select: none;
}

/* ---- 傷患(目標虛線框已畫在素材上)----
   T-078:設計稿把整張人像順時針轉了 11 度(--p07-tilt 由 JS 從 AEDScene.TILT_DEG 帶進來,
   和目標座標的換算共用同一個值;轉軸都是元素中心)。 */
.p07-patient {
  position: absolute;
  left: 31.75%;   /* 215.9 / 680 */
  top: 6.63%;     /* 49.06 / 740 */
  width: 59.5588%; /* 405 / 680 */
  height: 87.9%;   /* 650.52 / 740 */
  transform: rotate(var(--p07-tilt));
  z-index: 1;
  pointer-events: none;
}

/* 同一張人像只留手臂那一條垂直帶(素材 x ≥ 400 / 518),疊在貼片之上。
   左側貼片貼上去後右半會被手臂擋住,和設計稿一樣;因為是同一張圖疊自己,畫面不會有接縫。
   clip-path 在元素自己的座標系裁切、transform 之後才套上去,所以裁切帶會跟著一起傾斜,不必另外補償。 */
.p07-arm {
  position: absolute;
  left: 31.75%;
  top: 6.63%;
  width: 59.5588%;
  height: 87.9%;
  clip-path: inset(0 0 0 77.2201%);
  transform: rotate(var(--p07-tilt));
  z-index: 4;
  pointer-events: none;
}

/* ---- 導線(依貼片座標即時重畫)---- */
.p07-leads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.p07-lead {
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 5;
  stroke-linecap: round;
}

/* ---- 目標提示框 ----
   素材上已經畫了虛線框,平常不加任何東西;只有拖曳「對應的那一片」時才亮起來當準心,
   避免使用者把 A 片瞄到 B 的框(兩片不能互換位置)。框本身也要跟著人像傾斜才對得上。 */
.p07-target {
  position: absolute;
  box-sizing: border-box;
  border: 3px dashed var(--green-success);
  border-radius: 16px;
  transform: rotate(var(--p07-tilt));
  opacity: 0;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.2s;
}

.p07-scene--dragging-a .p07-target--a:not(.p07-target--filled),
.p07-scene--dragging-b .p07-target--b:not(.p07-target--filled) {
  opacity: 1;
  animation: p07-aim 0.9s ease-in-out infinite;
}

@keyframes p07-aim {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---- 目標解剖標籤(拖曳對應貼片時才顯示)---- */
.p07-target-label {
  position: absolute;
  transform: translateX(-50%);
  font-weight: 900;
  font-size: 12px;
  color: var(--red-divider);
  white-space: nowrap;
  opacity: 0;
  z-index: 6;
  pointer-events: none;
  transition: opacity 0.2s;
}

.p07-scene--dragging-a .p07-target-label--a,
.p07-scene--dragging-b .p07-target-label--b {
  opacity: 1;
}

/* ---- 可拖曳貼片(素材原圖 105×105,尺寸與素材上的虛線框一致)---- */
.p07-pad {
  position: absolute;
  z-index: 3;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
}

/* 開機後、還沒貼上的貼片輕輕浮動,提示「這個可以拖」 */
.p07-pad--ready {
  animation: bob 1.4s ease-in-out infinite;
}

.p07-pad--dragging {
  cursor: grabbing;
  z-index: 9; /* 拖曳中永遠在最上層,經過 AED 機身也不會被蓋住 */
  animation: none;
  filter: drop-shadow(var(--shadow-pad));
}

/* 飛回托盤 / 吸附到位的那 0.16s 也留在上層,落定後才滑到手臂後面,不會突然消失一半 */
.p07-pad--settling {
  transition: left 0.16s, top 0.16s;
  z-index: 9;
}

/* 貼上身體後跟著人像一起傾斜,才會服貼在傾斜的虛線框上(拖曳中維持直立比較好瞄) */
.p07-pad--placed {
  cursor: default;
  animation: none;
  transform: rotate(var(--p07-tilt));
}

/* ---- AED 機身(左上角,螢幕與兩顆鍵疊在素材圖上)---- */
.p07-aed {
  position: absolute;
  z-index: 7;
}

.p07-aed__img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* 素材的螢幕是空白灰底,蓋一層 AED 螢幕色當顯示區(狀態文字顏色沿用 T-060 的三段) */
.p07-aed__screen {
  position: absolute;
  left: 10.82%;   /* 25 / 231 */
  top: 12.07%;    /* 28 / 232 */
  width: 78.79%;  /* 182 / 231 */
  height: 38.36%; /* 89 / 232 */
  background: var(--aed-screen-bg);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: clamp(10px, 3.2vw, 13px);
  line-height: 1.2;
  color: var(--aed-screen-off);
  pointer-events: none;
}

/* 兩顆鍵是透明熱區,直接疊在素材畫好的按鈕上 */
.p07-aed__btn {
  position: absolute;
  top: 60.78%;   /* 141 / 232 */
  width: 23.38%; /* 54 / 231 */
  height: 23.71%;/* 55 / 232 */
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.p07-aed__btn--power { left: 18.18%; } /* 42 / 231 */
.p07-aed__btn--shock { left: 58.44%; } /* 135 / 231 */

/* 該按的那一顆脈動(只用 transform,才不會離開素材上畫的按鈕位置) */
.p07-aed__btn--calling {
  animation: p07-pulse 0.9s ease-in-out infinite;
}

@keyframes p07-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ---- 充電完成:電擊鍵閃燈(T-078 第 7 點)----
   週期 0.78s 刻意和 js/pages/07-aed-game.js 的 CHARGE_BEEP_MS 對齊 ——
   燈亮的同時響一聲「Bi~」,聲光一起把使用者的注意力拉到這顆鍵上。
   兩層:::before 是機身外的光暈(看得遠),::after 是按鍵表面的高光(看得準)。 */
.p07-aed__btn--charged {
  animation: p07-pulse 0.78s ease-in-out infinite;
}

.p07-aed__btn--charged::before,
.p07-aed__btn--charged::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: p07-charge-blink 0.78s steps(1, end) infinite;
}

.p07-aed__btn--charged::before {
  inset: -60%;
  background: radial-gradient(circle, rgba(255, 236, 150, .95) 0%, rgba(255, 176, 60, .5) 40%, rgba(255, 176, 60, 0) 70%);
}

.p07-aed__btn--charged::after {
  inset: 0;
  background: #fff;
  opacity: 0;
  animation-name: p07-charge-face;
}

@keyframes p07-charge-blink {
  0%, 34% { opacity: 1; }
  35%, 100% { opacity: 0; }
}

@keyframes p07-charge-face {
  0%, 34% { opacity: .6; }
  35%, 100% { opacity: 0; }
}

/* 還不能按的電擊鍵蓋一層墨色,讓「現在按不得」看得出來 */
.p07-aed__btn--off {
  background: var(--ink);
  opacity: 0.45;
  cursor: not-allowed;
}

.p07-aed__btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* ---- 放電特效(T-078 第 8 點)----
   三層一起演「去顫放電」:①擴散環從兩片貼片的中點往外推(電流穿過胸腔的方向)、
   ②人像瞬間過曝兩次(電流通過的感覺,刻意不動幾何 —— 一旦縮放,貼片與身體會對不齊)、
   ③整個場景輕微一震。 */
.p07-burst {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 8px solid var(--red-bright);
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  z-index: 8;
  pointer-events: none;
}

.p07-burst--on {
  animation: p07-burst-out .5s ease-out 2;
}

@keyframes p07-burst-out {
  0%   { opacity: .95; transform: translate(-50%, -50%) scale(.2); border-width: 8px; }
  70%  { opacity: .4; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); border-width: 2px; }
}

.p07-scene--discharging .p07-patient,
.p07-scene--discharging .p07-arm {
  animation: p07-surge .5s ease-out;
}

@keyframes p07-surge {
  0%   { filter: brightness(1); }
  8%   { filter: brightness(2.6) contrast(.65); }
  26%  { filter: brightness(1.1); }
  48%  { filter: brightness(2) contrast(.75); }
  100% { filter: brightness(1); }
}

.p07-scene--discharging {
  animation: p07-shake .32s ease-out;
}

@keyframes p07-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-2px, 1px); }
  35% { transform: translate(2px, -2px); }
  55% { transform: translate(-1px, -1px); }
  75% { transform: translate(1px, 1px); }
}

/* ---- 提示文字 ---- */
.p07-hint {
  margin-top: 16px;
  padding-inline: var(--p07-gutter);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- 成功卡 ---- */
/* 已改用共用 pop 視窗(T-052/T-060),原本的 .p07-success 系列規則全數移除 */

/* ---- 電擊白光(T-060;T-078 改成整個手機框都閃)----
   由 JS 動態掛到不捲動的 .app-frame 上(同 pop 視窗的作法),不在 .p07-scene 裡面 ——
   場景取消外框後,只閃場景那一塊會看起來像破圖而不像放電。 */
.p07-zap {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 25; /* 壓在 pop 視窗(20)之上;白光先閃完,視窗才跳出來 */
}
.p07-zap--on { animation: p07-zap-flash .55s ease-out; }
@keyframes p07-zap-flash {
  0%   { opacity: .95; }
  22%  { opacity: .25; }
  38%  { opacity: .8; }
  100% { opacity: 0; }
}

/* 減少動態偏好:提示動畫改為靜態,閃光與放電特效完全不閃(對光敏感族群不友善)。
   充電完成的電擊鍵改成「恆亮」而不是不閃 —— 光暈是唯一告訴使用者「現在該按這顆」的線索,
   不能連同動畫一起拿掉,只是不要一直閃。嗶聲不受此偏好影響(那是聽覺,不是動態)。 */
@media (prefers-reduced-motion: reduce) {
  .p07-pad,
  .p07-target,
  .p07-target-label {
    transition: none !important;
    animation: none !important;
  }
  .p07-aed__btn--calling { animation: none; }
  .p07-aed__btn--charged { animation: none; }
  .p07-aed__btn--charged::before { animation: none; opacity: 1; }
  .p07-aed__btn--charged::after { animation: none; opacity: .35; }
  .p07-zap--on { animation: none; opacity: 0; }
  .p07-burst--on { animation: none; opacity: 0; }
  .p07-scene--discharging,
  .p07-scene--discharging .p07-patient,
  .p07-scene--discharging .p07-arm { animation: none; }
}