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

   T-077 版面比照原始設計稿重排(2026-07-30):字級/間距全部是從設計稿的手機示意圖量出來、
   再換算成 412 基準畫布的值(量測與換算過程記在 docs/pages/05-cpr-game.md 第 8 節)。
   字級用 `clamp(下限, N vw, 412 基準值)` 的寫法:vw 係數 = 基準值 / 412 × 100,
   這樣 375 螢幕會等比縮、桌機手機框內則被上限鎖住(框寬固定 412,但 vw 是視窗寬)。 */
.p05-page {
  /* 節奏條的三段色。只有本頁用到,依 STYLE_GUIDE「頁面專屬裝飾色」規則不進 tokens.css,
     用頁碼前綴的變數宣告在頁面容器內(色值取自設計稿截圖的實際像素) */
  --p05-pace-off: #ED6A35;  /* 慢區 / 快區 */
  --p05-pace-good: #64B6E1; /* 正確區 100–120,游標同色 */

  /* 一屏骨架(STYLE_GUIDE〈一屏版面〉):高度是確定值,插畫區才收斂得下來 */
  height: 100%;
  display: flex;
  flex-direction: column;
  /* 左右內距下放到各區塊 —— 插畫要用整個畫面寬去算比例,不能先被內距吃掉 */
  padding: 6px 0 16px;
  text-align: center;
  user-select: none;
  /* 整頁都是按壓區,抑制手機 double-tap 縮放(見 LESSONS_LEARNED 觸控互動條目) */
  touch-action: manipulation;
  cursor: pointer;
}
.p05-page--locked { cursor: default; }

/* ---- T-097 兩個群組(主席:「上面的說明是一組,下面是一組,都放到 RWD 畫面的下方」)----

   互動的三件事在認知上本來就是一組:**速度指示條(指示)→ 按壓插畫(操作)→ 10 顆圓點(回饋)**。
   T-077~T-088 期間它們是 .p05-page 的三個平輩子元素,中間的空白由 .p05-artbox 的 `flex: 1`
   吸收 —— 結果空白落在**插畫與圓點之間**(插畫置中,上下各分一半),
   螢幕愈高、指示條離插畫愈遠,三者被拆開成三塊各自漂浮的東西。

   改成:說明群組(.p05-head)固定在上、互動群組(.p05-play)整組貼底,
   **空白全部落在兩組之間** —— 群組內部的相對距離不再隨螢幕高度變動。
   這也讓拇指的活動範圍(指示條 → 插畫 → 圓點)集中在畫面下半,單手操作更順。

   `justify-content: flex-end` 而不是給 .p05-play 一個 `margin-top: auto`:
   .p05-play 仍需要是可伸縮的 flex 項目(矮螢幕要能把插畫壓下來),
   拿 auto margin 推的話它就得是固定高度,矮螢幕會直接把圓點頂出畫面。 */
.p05-head {
  flex: none;
}
.p05-play {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.p05-title {
  font-weight: 900;
  font-size: clamp(30px, 9.2vw, 38px);
  color: var(--ink);
  margin-top: 10px;
}

/* 設計稿是**兩行**、字級約為標題的 0.58 倍,比改版前的 15px 大得多(主席回報的第 3 點)。
   換行點用 <br> 釘死在「一秒鐘兩次,」之後,和設計稿一致;真的塞不下時仍會自然折成三行。 */
.p05-instructions {
  margin-top: 22px;
  padding: 0 5%;
  font-weight: 700;
  font-size: clamp(17px, 5.34vw, 22px);
  line-height: 1.5;
  color: var(--ink);
}

.p05-goal {
  margin-top: 22px;
  font-weight: 900;
  font-size: clamp(21px, 6.55vw, 27px);
  color: var(--red-accent);
}

/* ---- 節奏條(T-077,取代原本的半圓儀表) ----
   設計稿是一條線分三段:慢區 25% / 正確區 50% / 快區 25%,下方一個三角形游標,**不標數字**。
   色塊用絕對定位的百分比切,和 JS 的 paceToPercent() 用同一組 25/75 邊界 ——
   用 flex + gap 排的話色塊邊界會被 gap 推移,游標就對不準色塊了。 */
.p05-pace {
  margin: 24px auto 0;
  width: 88%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 20px; /* 幫絕對定位的游標留位置,不然會壓到下面的插畫 */
}
.p05-pace__label {
  flex: none;
  font-weight: 900;
  font-size: clamp(16px, 4.85vw, 20px);
  color: var(--ink);
  line-height: 1;
}
.p05-pace__track {
  position: relative;
  flex: 1 1 auto;
  height: clamp(17px, 4.85vw, 20px);
}
.p05-pace__seg {
  position: absolute;
  top: 0;
  height: 100%;
}
/* 3px = 段與段之間 6px 縫隙的一半;縫隙對稱地從兩邊縮,段界仍落在 25% / 75% */
.p05-pace__seg--slow { left: 0; right: calc(75% + 3px); background: var(--p05-pace-off); }
.p05-pace__seg--good { left: calc(25% + 3px); right: calc(25% + 3px); background: var(--p05-pace-good); }
.p05-pace__seg--fast { left: calc(75% + 3px); right: 0; background: var(--p05-pace-off); }

/* 三角形游標:前兩下(平均還不成立)與停頓歸零時用 [hidden] 收起來 */
.p05-pace__marker {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 13px solid var(--p05-pace-good);
  transition: left 0.12s ease-out;
}

/* ---- 按壓插畫 ----
   素材(1029×714)整張放進來手臂會長到佔掉半個畫面,設計稿是**裁掉下緣**的:
   心臟在素材裡佔圖寬 47.4%,而設計稿量到心臟佔螢幕寬 65.6%
   → 圖要放到螢幕寬的 65.6 / 47.4 ≈ 138.4%,兩側溢出的都是透明區,再用裁切框收掉下緣。
   裁切框比例 412 : 294 也是量設計稿來的(可見插畫高度 294 / 基準畫布寬 412)。 */
/* T-088:改回 align-items:center。
   T-077 當時用 flex-start 是為了讓插畫緊貼節奏條(那時圖高 294、幾乎填滿圖區);
   插畫縮到 80% 之後圖只剩 235 高,貼上去的話下方會留一大塊空白、圓點孤零零掉在底部。
   置中之後空白上下均分,重心才回到插畫本身。
   仍然不能用 stretch 讓插畫長高補滿:那會把 aspect-ratio 架空,長手臂又跑回來。 */
/* T-088:.p05-artbox 加 position:relative —— 提示文字改成絕對定位壓在插畫上 */
.p05-artbox {
  position: relative;
  /* T-097:`flex: 1 1 auto` → `0 1 auto`。改成群組貼底之後,**剩餘空白不再由插畫區吸收** ——
     它現在落在 .p05-head 與 .p05-play 之間。仍保留 shrink(第二個 1),矮螢幕才壓得下來。 */
  flex: 0 1 auto;
  /* min-height 不能給 0(p04 那套寫法):裁切框自己有 230px 的下限,外框若可以縮到 0,
     插畫就會溢出外框、直接壓在下面的連擊計數上(SE 375×553 實測會疊字)。
     擋在 230 之後,矮螢幕會改成整頁往下溢出、由 .app-screen 捲動 —— 疊字換成捲動。 */
  min-height: 184px; /* T-088:插畫縮到 80% 後,裁切框的下限跟著 230 × 0.8 */
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* T-088:主席回報「被按壓的愛心有點擁擠」→ 整組縮到 80%。
   圖寬 138.4% → 110.7%,裁切框的高度比例與下限同步 ×0.8(294→235、230→184),
   框才不會在圖縮小後留下一圈空白。心臟因此從佔螢幕寬 65.6% 變成 52.5%。 */
.p05-art-crop {
  width: 100%;
  aspect-ratio: 412 / 235;
  /* 矮螢幕的安全閥:空間不夠時框變扁、多裁一點手臂,而不是把心臟縮小 */
  max-height: 100%;
  /* 收斂的底線:再裁上去就會切進雙手 */
  min-height: 184px;
  overflow: hidden;
}
.p05-tap-target {
  display: block;
  width: 110.7%;
  margin-left: -5.35%; /* (110.7 - 100) / 2,把放大的圖拉回水平置中 */
  transition: transform 0.09s;
  transform: scale(1);
  pointer-events: none; /* 點擊事件掛在 .p05-page 上,圖片不要吃掉 */
  user-select: none;
  -webkit-user-drag: none;
}
.p05-tap-target--pressed { transform: scale(0.9); }

/* .p05-streak-text 已於 T-088 移除(主席:刪掉「連續正確 0 / 10」) */
.p05-dots {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 14px;
}
.p05-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: #fff;
}
.p05-dot--done { background: var(--green-success); }

/* T-088:提示改成壓在愛心上。純文字直接疊在插畫上會糊在線條裡,
   墊一塊與 CTA 卡片同語彙的半透明奶油底(--bg-card-translucent)才讀得動。
   pointer-events:none 是必要的 —— 它蓋在點擊區正中央,吃掉點擊的話第一下會沒反應。 */
.p05-hint {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: var(--bg-card-translucent);
  font-weight: 900;
  font-size: clamp(15px, 4.4vw, 18px);
  color: var(--ink);
  pointer-events: none;
  white-space: nowrap;
}
.p05-hint[hidden] { display: none; }

/* 矮螢幕(SE 這類機器 + Safari 工具列)把間距收一收,把省下來的高度還給插畫 */
@media (max-height: 700px) {
  .p05-title { margin-top: 4px; }
  .p05-instructions { margin-top: 14px; }
  .p05-goal { margin-top: 14px; }
  .p05-pace { margin-top: 16px; }
  .p05-artbox { margin-top: 10px; }
  .p05-dots { margin-top: 8px; }
}

/* 過關成功卡已改用共用 pop 視窗(T-052/T-058),原本的 .p05-success 系列規則已移除。
   練習模式(T-039)的節拍點/徽章/摘要卡樣式已隨 T-077 取消一併移除。 */