/* 頁面 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; }

.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)。 */
/* align-items 用 flex-start 不用 center:設計稿裡插畫是**緊貼**節奏條的,
   高螢幕多出來的高度要落在插畫下方(推遠連擊計數),不能平分到插畫上面去 ——
   插畫和節奏條之間裂一條縫,整頁的重心就散了。
   也不能改用 stretch 讓插畫長高補滿:那會把 aspect-ratio 架空,長手臂又跑回來。 */
.p05-artbox {
  flex: 1 1 auto;
  /* min-height 不能給 0(p04 那套寫法):裁切框自己有 230px 的下限,外框若可以縮到 0,
     插畫就會溢出外框、直接壓在下面的連擊計數上(SE 375×553 實測會疊字)。
     擋在 230 之後,矮螢幕會改成整頁往下溢出、由 .app-screen 捲動 —— 疊字換成捲動。 */
  min-height: 230px;
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.p05-art-crop {
  width: 100%;
  aspect-ratio: 412 / 294;
  /* 矮螢幕的安全閥:空間不夠時框變扁、多裁一點手臂,而不是把心臟縮小 */
  max-height: 100%;
  /* 收斂的底線:再裁上去就會切進雙手 */
  min-height: 230px;
  overflow: hidden;
}
.p05-tap-target {
  display: block;
  width: 138.4%;
  margin-left: -19.2%; /* (138.4 - 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 {
  margin-top: 8px;
  font-weight: 900;
  font-size: clamp(18px, 5.34vw, 22px);
  color: var(--ink);
}
.p05-dots {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 10px;
}
.p05-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: #fff;
}
.p05-dot--done { background: var(--green-success); }

.p05-hint {
  margin-top: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-muted);
}

/* 矮螢幕(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: 6px; }
  .p05-hint { margin-top: 6px; }
}

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