@charset "UTF-8";
/* ==========================================================================
   永續互動 ── 能源問答（第一章 石虎 × 第二章 領角鴞）
   一頁式捲動版：不用小舞台，整頁滿版往下滑完
   只給 /interaction 使用，不進 main.css，避免影響全站。
   ⚠ 本站 CSP 的 style-src 沒有 'unsafe-inline'：
     所有樣式一律寫在這裡，markup 不可出現 style="" 屬性。
   ========================================================================== */

.ig {
  /* 站台色票（sass/forward/_variables.sass） */
  --ig-main: #0081CC;
  --ig-main-dark: #00385A;
  --ig-main-light: #7ECEF4;
  --ig-teal: #63C0AB;
  --ig-teal-dark: #3E9C88;
  --ig-amber: #F6AB00;
  --ig-error: #E0503C;
  /* 要壓白字的紅底用這一顆：#E0503C 配白字只有 3.92:1，小字不夠（實測），
     #C93B28 是 5.11:1。純圖形（是非題的叉、外框）才用上面那顆亮的。 */
  --ig-error-dk: #C93B28;
  --ig-ink: #001622;
  --ig-gray: #AFB0B5;
  --ig-green: #63C0AB;
  --ig-green-dk: #3E9C88;
  --ig-green-lt: #F1FAF7;
  --ig-grey-bg: #F3F6F8;
  --ig-line: #E2E8ED;
  --ig-grey-text: #6B767F;
  --ig-radius: 24px;
  --ig-radius-sm: 14px;
  --ig-shadow: 0 18px 40px rgba(0, 22, 34, .16);
  --ig-shadow-sm: 0 6px 18px rgba(0, 22, 34, .10);
  /* 固定 header 高度，由 JS 實測後覆寫（.l-nav 桌機 99px、手機較矮） */
  --ig-nav-h: 99px;

  position: relative;
  display: block;
  /* ⚠ 這裡不能設 overflow：祖先只要有 overflow 就會讓 .ig-bg 的 sticky 失效 */
}

/* --------------------------------------------------------------------------
   站台選單：往下捲時收起，往上捲或回到頂端再出現
   ── 只作用在這一頁（body[data-page="interaction"]），不影響全站。
      .l-nav 原本是 `transition: all 0s`（等於沒動畫），所以覆寫掉不會弄丟別的效果。
   -------------------------------------------------------------------------- */
body[data-page="interaction"] .l-nav {
  transition: transform .38s cubic-bezier(.2, .7, .3, 1);
}
body[data-page="interaction"] .l-nav.ig-nav-hidden {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="interaction"] .l-nav { transition: none; }
}

/* --------------------------------------------------------------------------
   固定背景層：天空 ／ 日月 ／ 星空 ／ 地景
   sticky ＋ 負下外距 ── 背景釘在視窗，內容整疊蓋上去往下捲
   -------------------------------------------------------------------------- */
.ig-bg {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  overflow: hidden;
  pointer-events: none;
}

/* 背景風景：一幕一張，用 .ig[data-bg] 決定淡入哪一層
   ── 封面那張（有角色）依客戶指定不壓暗，其餘壓一層同色系的紗，
      白卡與引導鈕才讀得清楚 */
.ig-bg__sky {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.ig-bg__sky.is-on { opacity: 1; }

/* 背景圖、底色、壓暗紗與手機裁切焦點全部由後台「首頁系統 › 永續互動 › 背景圖庫」決定，
   由 interaction-game.js 用 CSSOM 寫上去（背景鍵值是後台產生的字串，不能寫進選擇器）。
   ⚠ 這裡不要再放任何 background-image：寫在這裡的會蓋不掉也換不了。 */

/* --------------------------------------------------------------------------
   幕：每一幕至少一個視窗高，整頁往下滑
   -------------------------------------------------------------------------- */
.ig-acts {
  position: relative;
  z-index: 1;
}
.ig-act {
  position: relative;
  z-index: 1;   /* 高於 .ig-walker(0)，角色永遠走在白卡後面 */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 上緣要讓開 fixed 的 .l-nav。
     ⚠ 下內距 ＝ 上內距 ＋ scroll-margin：捲到這一幕時幕頂會停在選單下方（scroll-margin-top），
       內容若照「整個幕高」置中，看起來就整體偏下一個選單的高度
       （1890×950 實測卡片中心 595、視窗中心 475，差 120px，客戶回報「太靠下」）。
       補一個 scroll-margin 回去，內容才會置中在「選單以下的可視範圍」。
       公式：內容中心（相對幕）＝(H + pt − pb) / 2，要等於 H/2 − scroll-margin，解出 pb = pt + sm。 */
  padding: calc(var(--ig-nav-h) + 48px) clamp(16px, 4vw, 48px) calc(var(--ig-nav-h) * 2 + 56px);
  scroll-margin-top: calc(var(--ig-nav-h) + 8px);
}
.ig-act__inner {
  width: 100%;
  max-width: 900px;
}
/* 一路往下像走地圖：題目與介紹左右交錯，中間讓出來給角色走（客戶指定 2026-09-08）。
   ⚠ 只在放得下的寬度做錯位：手機錯位會把卡片擠到剩半個畫面。 */
@media (min-width: 992px) {
  .ig-act--talk .ig-act__inner,
  .ig-act--quiz .ig-act__inner { max-width: min(760px, 62vw); transition: none; }
  .ig-act--talk.is-side-l .ig-act__inner,
  .ig-act--quiz.is-side-l .ig-act__inner { margin-right: auto; margin-left: clamp(16px, 5vw, 110px); }
  .ig-act--talk.is-side-r .ig-act__inner,
  .ig-act--quiz.is-side-r .ig-act__inner { margin-left: auto; margin-right: clamp(16px, 5vw, 110px); }
}
.ig-act--cover .ig-act__inner,
.ig-act--end .ig-act__inner { text-align: center; }
/* 封面滿版，所以這一幕不套 max-width；
   ⚠ 左右內距必須是 0，否則標題會比站台 .container 多縮排（實測多 16px 對不齊） */
/* 封面內容排成一直欄並撐滿整幕，兩隻角色才貼得到下緣（.ig-cast 用 margin-top:auto） */
.ig-act--cover .ig-act__inner {
  max-width: none;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.ig-act--cover {
  /* 標題往下讓一段（客戶指定 2026-09-08），不要貼著站台選單 */
  padding-top: calc(var(--ig-nav-h) + clamp(40px, 7vh, 96px));
  /* ⚠ 封面是 flex 撐滿的版型，不吃上面那條「補 scroll-margin」的下內距，維持原值 */
  padding-bottom: 104px;
  padding-bottom: 44px;
  padding-inline: 0;
}

/* 進場：捲到才浮現 */
.ig-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1);
}
.ig-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* 往下的引導 */
.ig-cue {
  /* inline-flex 配 margin:auto 不會置中，要用區塊級 flex ＋ fit-content */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  margin: 34px auto 0;
  padding: 10px 22px;
  border: 0;
  /* 插畫背景亮度落差大，加一層半透明底才讀得到（純文字實測只有 2.3:1） */
  background: rgba(4, 24, 20, .62);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  border-radius: 999px;
  transition: opacity .3s ease;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.ig-cue:hover { opacity: .65; }
.ig-cue:focus-visible { outline: 3px solid var(--ig-amber); outline-offset: 3px; }
.ig-cue__arrow {
  display: block;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  animation: igBob 1.9s ease-in-out infinite;
}
@keyframes igBob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(3px, 3px); }
}
.ig-cue.is-hidden { display: none; }

/* --------------------------------------------------------------------------
   角色
   -------------------------------------------------------------------------- */
.ig-char {
  display: block;
  width: 100%;
  height: auto;
  /* ⚠ 陰影是沿著 alpha 輪廓投影的，加了輪廓羽化（見 .agent/build-apng.py）之後
     半透明的邊緣也會跟著投影，四周的暈就變得很明顯（客戶 2026-09-10 回報）。
     模糊半徑與濃度都要收，位移也拉近，讓陰影集中在腳下而不是散在四周。 */
  filter: drop-shadow(0 8px 14px rgba(0, 22, 34, .18));
  animation: igFloat 4.2s ease-in-out infinite;
}
.ig-char-wrap {
  flex: 0 0 auto;
  width: 210px;
}
.ig-char-wrap.is-sm { width: 104px; }
.ig-char-wrap.is-lg { width: 268px; }
/* --------------------------------------------------------------------------
   卡片共用
   -------------------------------------------------------------------------- */
.ig-card {
  background: rgba(255, 255, 255, .95);
  border-radius: var(--ig-radius);
  box-shadow: var(--ig-shadow);
  padding: 30px 32px;
}
.ig-card__title {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ig-main-dark);
  margin: 0 0 12px;
}
.ig-card__text {
  font-size: 16px;
  line-height: 1.9;
  color: #3A4750;
  margin: 0 0 10px;
}
.ig-card__note {
  font-size: 14px;
  line-height: 1.8;
  color: #7C868D;
  margin: 0;
}

/* 對話：角色 ＋ 泡泡 */
.ig-talk {
  display: flex;
  align-items: center;
  gap: 30px;
}
.ig-bubble { position: relative; flex: 1 1 auto; }
/* 旁邊沒有角色時（封面那隻會走過來當主角）：尖角收掉，再依實際空間讓位。
   讓位方式由 JS 決定（放得下就站旁邊、放不下就站卡片下方），見 applySoloLayout。 */
.ig-talk.is-solo .ig-bubble::before { display: none; }
.ig-talk.is-solo.is-solo-side  { padding-left: clamp(0px, 22vw, 320px); }
.ig-talk.is-solo.is-solo-below { margin-bottom: var(--solo-gap, 0px); }
.ig-bubble::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 60px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 14px 12px 0;
  border-color: transparent rgba(255, 255, 255, .95) transparent transparent;
}

/* --------------------------------------------------------------------------
   題目
   -------------------------------------------------------------------------- */
.ig-qhead {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  margin-bottom: 18px;
}
/* 題目卡：乾淨白卡、綠色小標、置中題目（依客戶參考圖，綠＋灰） */
.ig-qframe {
  position: relative;
  flex: 1 1 auto;
}
/* 題目內文：接在題目標題底下的小字（客戶指定改成標題／內文兩欄，不再用 <strong> 標重點） */
.ig-qcard__desc {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ig-grey-text);
}
.ig-qcard {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border-radius: var(--ig-radius);
  box-shadow: 0 18px 44px rgba(0, 22, 34, .14);
  padding: 40px 40px 36px;
  text-align: center;
}
.ig-qcard__meta {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--ig-green-dk);
  margin-bottom: 14px;
}
.ig-qcard__meta span {
  color: var(--ig-grey-text);
  font-weight: 500;
  letter-spacing: .06em;
}
.ig-qcard__meta span::before {
  content: "・";
  color: var(--ig-line);
  margin: 0 6px;
}
.ig-qcard__text {
  font-size: clamp(20px, 2.7vw, 29px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--ig-ink);
  margin: 0 auto;
  max-width: 24em;
}
.ig-qcard__text strong { color: var(--ig-green-dk); }

/* 選項：白底細框、文字置中；答對＝站台綠，答錯＝灰（依客戶參考圖） */
.ig-opts {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  text-align: center;
}
.ig-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 18px 20px;
  border: 2px solid var(--ig-line);
  border-radius: 14px;
  background: #FFFFFF;
  color: var(--ig-ink);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.ig-opt:hover:not(:disabled) {
  border-color: var(--ig-green);
  background: var(--ig-green-lt);
  transform: translateY(-2px);
}
.ig-opt:focus-visible { outline: 3px solid var(--ig-green); outline-offset: 3px; }
.ig-opt:disabled { cursor: default; }
.ig-opt__text { display: inline-block; }
.ig-opt__mark {
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: 700;
  opacity: 0;
  transition: opacity .25s ease;
}
.ig-opt.is-ok {
  background: var(--ig-green);
  border-color: var(--ig-green);
  color: #FFFFFF;
}
/* 選錯的那一顆要有警告感（客戶指定 2026-09-10「答錯的反差再大一點」）：
   原本是灰底，看起來像 disabled 不像答錯。 */
.ig-opt.is-ng {
  background: var(--ig-error-dk);
  border-color: var(--ig-error-dk);
  color: #FFFFFF;
  /* ⚠ 震動改由整張題目卡負責（.ig-qcard.is-wrong），這裡再抖一次會疊加成兩倍位移 */
}
.ig-opt.is-ok .ig-opt__mark,
.ig-opt.is-ng .ig-opt__mark { opacity: 1; }
.ig-opt.is-dim { opacity: .45; }

/* --------------------------------------------------------------------------
   是非題：圈與叉（客戶指定，不用兩格選項卡）
   ⚠ 符號用線條畫，不用文字字元 —— ○ 與 ✕ 在不同字型下大小、粗細、基線差很多，
     畫出來才能兩顆一樣大、一樣粗，也不會被中文 fallback 字型影響。
   -------------------------------------------------------------------------- */
.ig-tf {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(36px, 9vw, 96px);
  margin: 34px 0 4px;
}
.ig-tf__btn {
  --tf-stroke: clamp(7px, 1.1vw, 11px);
  position: relative;
  width: clamp(92px, 15vw, 138px);
  height: clamp(92px, 15vw, 138px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ig-main);
  transition: color .22s ease, transform .22s ease, opacity .22s ease;
}
/* 站台 bootstrap 的 [type="button"] 特異度是 (0,2,0)，游標要湊到三個 class 才蓋得過 */
.ig .ig-act .ig-tf__btn { cursor: pointer; }
.ig .ig-act .ig-tf__btn:disabled { cursor: default; }
.ig-tf__btn:hover:not(:disabled) { color: var(--ig-green-dk); transform: translateY(-4px); }
.ig-tf__btn:focus-visible {
  outline: 3px solid var(--ig-green-dk);
  outline-offset: 6px;
  border-radius: 50%;
}

/* ○ ── 一個正圓的環。直徑 ＝ 按鈕寬 × 0.80 */
.ig-tf__btn.is-o::before {
  content: '';
  position: absolute;
  inset: 10%;
  border: var(--tf-stroke) solid currentColor;
  border-radius: 50%;
}
/* ✕ ── 兩條交叉的橫棒。
   ⚠ 棒子轉 45° 之後真正的跨幅只有棒長的 1/√2，直接跟圓用一樣的內距，
     叉看起來會小一整圈（實測 59% vs 92%）。要讓兩個符號一樣大，
     棒長必須 ＝ 圓直徑 × √2 ＝ 按鈕寬 × 1.131，所以左右各往外 6.5%。 */
.ig-tf__btn.is-x::before,
.ig-tf__btn.is-x::after {
  content: '';
  position: absolute;
  left: -6.5%;
  right: -6.5%;
  top: 50%;
  height: var(--tf-stroke);
  margin-top: calc(var(--tf-stroke) / -2);
  background: currentColor;
  border-radius: 3px;
}
.ig-tf__btn.is-x::before { transform: rotate(45deg); }
.ig-tf__btn.is-x::after  { transform: rotate(-45deg); }

/* 答題後：正解轉站台綠、選錯的轉灰，另一顆淡出 */
.ig-tf__btn.is-ok  { color: var(--ig-green); transform: none; }
.ig-tf__btn.is-ng  { color: var(--ig-error); transform: none; }
.ig-tf__btn.is-dim { opacity: .28; transform: none; }

/* 答題後的狀態列：綠色小膠囊＋灰字（依客戶參考圖） */
.ig-verdict {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.ig-verdict__pill {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--ig-green);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}
.ig-verdict__pill.is-ng { background: var(--ig-error-dk); }
.ig-verdict__note {
  font-size: 14px;
  color: var(--ig-grey-text);
}

/* 選項都很短時並排成一列，長句子維持一行一個。
   欄數＝選項數（後台可自訂題目的選項數量，是非題固定兩個），由 JS 寫進 --ig-cols。 */
@media (min-width: 768px) {
  .ig-opts--row { grid-template-columns: repeat(var(--ig-cols, 3), 1fr); }
}
.ig-opt.is-dim { opacity: .5; }
/* 幅度比原本大一輪（-7/6/-3 → -12/10/-7/4），客戶要「反差再大一點」 */
@keyframes igShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-12px); }
  35% { transform: translateX(10px); }
  55% { transform: translateX(-7px); }
  78% { transform: translateX(4px); }
}

/* --------------------------------------------------------------------------
   答錯的畫面反差（客戶指定 2026-09-10）：
   題目卡留一圈紅框當「這題錯了」的標記，另外閃兩下脈衝環＋整幕紅暈一次。
   ⚠ .ig-qcard 與 .ig-act 的 ::before/::after 事先查過都沒被用（只有 .ig-qcard__meta span::before）。
   -------------------------------------------------------------------------- */
.ig-qcard.is-wrong {
  box-shadow: 0 18px 44px rgba(0, 22, 34, .14), 0 0 0 2px var(--ig-error);
  animation: igShake .55s cubic-bezier(.36, .07, .19, .97);
}
.ig-qcard.is-wrong::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid var(--ig-error);
  animation: igWrongPulse .7s ease-out 2;
  pointer-events: none;
}
@keyframes igWrongPulse {
  0%   { transform: scale(1);     opacity: .85; }
  100% { transform: scale(1.045); opacity: 0; }
}
/* 紅暈：從四邊往內，中間留空才不會蓋住題目文字。
   ⚠ 用 fixed 不用 absolute：一幕高 100vh，答完又會捲到解答卡，
     貼著幕的話漸層中心早就跑到畫面外，實測幾乎看不到紅色（.ig-act 沒有 transform，fixed 成立）。 */
.ig-act--quiz.is-wrong::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              rgba(201, 59, 40, 0) 34%, rgba(201, 59, 40, .58) 100%);
  animation: igWrongFlash .9s ease-out forwards;
}
@keyframes igWrongFlash {
  0%   { opacity: 0; }
  16%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 答題回饋交給解答卡的徽章，這裡只留給螢幕閱讀器 */
.ig-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   解答（答題後才展開，同一幕內接著往下看）
   -------------------------------------------------------------------------- */
.ig-result {
  margin-top: 26px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}
.ig-result.is-in { opacity: 1; transform: none; }


.ig-badge.is-ng { background: var(--ig-error-dk); }
.ig-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ig-teal);
  color: #fff;
  margin-bottom: 14px;
}
/* 重點框：灰底（原本是橙色系，客戶指定改灰） */
.ig-hl {
  border-left: 4px solid var(--ig-line);
  background: var(--ig-grey-bg);
  border-radius: 0 var(--ig-radius-sm) var(--ig-radius-sm) 0;
  padding: 15px 18px;
  font-size: 15.5px;
  line-height: 1.85;
  color: #3A4750;
  margin: 16px 0;
}
.ig-hl strong { color: var(--ig-main-dark); }
.ig-source {
  display: block;
  font-size: 12.5px;
  color: var(--ig-gray);
  margin-top: 14px;
}

/* 圖片區塊（後台「內容區塊 › 圖片」）：解答卡裡的插圖＋圖說 */
.ig-figure {
  margin: 18px 0 4px;
}
.ig-figure__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ig-radius-sm);
}
.ig-figure__cap {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ig-grey-text);
}
/* 延伸知識沒填小標時把那一行收掉，才不會多出一段空白 */
.ig-npc__name:empty { display: none; }

/* 流程圖 */
.ig-flow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 18px 0 4px;
  flex-wrap: wrap;
}
.ig-flow__step {
  flex: 1 1 92px;
  min-width: 92px;
  text-align: center;
  padding: 13px 8px;
  border-radius: var(--ig-radius-sm);
  background: #EFF5FA;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ig-main-dark);
}
/* 原本這裡是 emoji，改成流程序號（綠色小圓標） */
.ig-flow__step em {
  /* 要獨立一行置中（inline-grid 會跟標籤擠在同一行） */
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0 auto 7px;
  border-radius: 50%;
  background: var(--ig-green);
  color: #FFFFFF;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.ig-flow__arrow {
  align-self: center;
  color: var(--ig-main-light);
  font-size: 18px;
  font-weight: 700;
}

/* 發電量示意長條圖 */
.ig-chart {
  margin: 18px 0 4px;
  padding: 16px 18px 12px;
  border-radius: var(--ig-radius-sm);
  background: #EFF5FA;
}
.ig-chart__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ig-main-dark);
  margin-bottom: 12px;
}
.ig-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  height: 104px;
}
.ig-chart__bar {
  flex: 1 1 auto;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--ig-amber) 0%, #FFD98A 100%);
  height: 12%;
  transition: height .9s cubic-bezier(.2, .7, .3, 1), background .5s ease;
}
.ig-chart__bar.is-cloudy { background: linear-gradient(180deg, #9FB6C4 0%, #C9D8E2 100%); }
.ig-chart__times {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: #7C868D;
  margin-top: 7px;
}

/* NPC 補充框 */
/* 角色引述：已拿掉角色圖（客戶指定），只剩名字＋台詞，左邊補一條色帶標示是誰在說話 */
.ig-npc {
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 4px solid var(--ig-teal);
  margin-top: 18px;
  padding: 15px 18px;
  border-radius: var(--ig-radius-sm);
  background: #F4FAF8;
  border: 1px solid #D9EDE7;
}
.ig-npc__name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ig-teal-dark);
  margin-bottom: 5px;
}
.ig-npc__words {
  font-size: 14.5px;
  line-height: 1.8;
  color: #3A4750;
  margin: 0;
}

/* --------------------------------------------------------------------------
   按鈕
   -------------------------------------------------------------------------- */
.ig-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  justify-content: center;
}
.ig-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 34px;
  border: 2px solid var(--ig-main);
  border-radius: 999px;
  background: var(--ig-main);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.ig-btn:hover {
  background: var(--ig-main-dark);
  border-color: var(--ig-main-dark);
  transform: translateY(-2px);
  box-shadow: var(--ig-shadow-sm);
}
.ig-btn:focus-visible { outline: 3px solid var(--ig-amber); outline-offset: 2px; }
.ig-btn.is-ghost { background: transparent; color: var(--ig-main); }
.ig-btn.is-ghost:hover { background: var(--ig-main); color: #fff; }
.ig-btn.is-lg { padding: 17px 44px; font-size: 18px; }
.ig-btn.is-ghost { color: #EAF6FF; border-color: #EAF6FF; }
.ig-btn.is-ghost:hover { background: #EAF6FF; color: var(--ig-main-dark); }

/* --------------------------------------------------------------------------
   封面：標題 ＋ 麵包屑 ＋ 兩隻 IP 左右進場（章節小卡已於 2026-09-08 依客戶指定移除）
   -------------------------------------------------------------------------- */
/* 標題壓在深色風景上的白字；位置與 class 名稱都維持原樣（客戶指定不動） */
.ig-select__head {
  margin-bottom: clamp(6px, 1.2vh, 16px);
  color: #FFFFFF;
  text-align: left;
}
/* 麵包屑（沿用站台 .c-breadcrumb 的 markup，這裡只補白字與置中） */
/* 小遊戲名稱：接在頁名旁邊，做成次要層級（字小、細、帶隔線） */
.ig-cover__game {
  display: inline-block;
  margin-left: .7em;
  padding-left: .75em;
  border-left: 1px solid rgba(255, 255, 255, .45);
  font-size: .52em;
  font-weight: 500;
  letter-spacing: .04em;
  vertical-align: middle;
  /* 跟主標的視覺重心對齊（主標行高 1.4，這行字小要往上帶一點） */
  position: relative;
  top: -.08em;
}

.ig-crumb {
  margin-top: 10px;
  color: #FFFFFF;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
.ig-crumb .c-breadcrumb__list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.ig-crumb .c-breadcrumb__list__item { color: #FFFFFF; }
.ig-crumb .c-breadcrumb__list__item + .c-breadcrumb__list__item::before {
  content: "＞";
  margin-right: 10px;
  opacity: .7;
}
.ig-crumb .item__link { color: #FFFFFF; text-decoration: none; }
.ig-crumb .item__link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   封面的兩隻 IP：一左一右滑進畫面（客戶指定 2026-09-08，取代原本的三張章節小卡）
   -------------------------------------------------------------------------- */
.ig-cast {
  /* 兩隻角色貼在背景圖的定位點上（座標由 JS 換算 cover 裁切後寫進 --x / --y / --h） */
  position: absolute;
  inset: 0;
  pointer-events: none;   /* 點擊要落在整片封面上，不要被角色吃掉 */
}
.ig-cast__one {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: auto;
  height: var(--h, 200px);
  opacity: 0;
  filter: drop-shadow(0 9px 15px rgba(0, 22, 34, .26));
  /* --enter 是進場的起點位移（JS 依實際位置算，剛好退到畫面外就好） */
  transform: translate(-50%, -50%) translateX(var(--enter, 0px));
}
/* ⚠ 進場改用 keyframes，不要用 transition：
   transition 要有「前後兩個渲染過的狀態」才會過渡，而 --enter 是 JS 算完才設的，
   跟 .is-in 常常落在同一批樣式重算裡，瀏覽器就直接跳到終點
   （2026-09-10 實測：--enter 951px、transition 1.35s 都在，元素卻在 0.2 秒內就已經到定位，
   客戶回報「一開始就在中間」）。keyframes 有明確的 from/to，一定會播。 */
@keyframes igFlyIn {
  from { transform: translate(-50%, -50%) translateX(var(--enter, 0px)); opacity: 0; }
  to   { transform: translate(-50%, -50%); opacity: 1; }
}
/* 右邊那隻晚一點進場，兩隻不要一起到位 */
/* 讓石虎先站定，領角鴞晚一點才飛進來，兩隻不要同時到位 */
.ig-cast__one.is-r { animation-delay: .45s; }
.ig-cast.is-in .ig-cast__one {
  /* 客戶 2026-09-10：「慢慢飛進來啦飛太快了」——1.35s → 2.4s，
     曲線也放平（原本前段衝很快），變成一路滑翔進來、最後緩緩停住。 */
  animation: igFlyIn 2.4s cubic-bezier(.25, .55, .3, 1) both;
}
.ig-cast__one .ig-char {
  display: block;
  width: auto;
  height: 100%;
}
/* 停樹枝那隻也用逐格精靈圖，原地拍翅（客戶指定 2026-09-10）。
   ⚠ 這條會蓋掉 .ig-char 的 igFloat 漂浮 —— 拍翅本來就取代了漂浮。 */
.ig-cast__one .ig-char--sprite { animation: igSprite var(--ig-sprite-dur, .8s) steps(1) infinite; }
/* 可點的那隻要把 .ig-cast 的 pointer-events:none 打開回來 */
.ig-cast__one.is-say { pointer-events: auto; cursor: pointer; }
/* 石虎原圖朝左，客戶的定位圖是朝右 */
.ig-cast__one .ig-char.is-flip { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   角色獨白泡泡：點封面的石虎／領角鴞會彈出（客戶指定 2026-09-10）
   位置由 JS 換算成「相對封面那一幕」寫進 --sx / --sy，尾巴位置寫進 --tail
   -------------------------------------------------------------------------- */
.ig-say {
  position: absolute;
  left: var(--sx, 50%);
  top: var(--sy, 50%);
  z-index: 3;
  /* ⚠ 絕對定位又只給 left 的話，可用寬度 ＝ 容器寬 − left，靠右的角色會把泡泡壓成一條
     （1024 的領角鴞實測只剩 89px 寬、文字擠成七行）。width:max-content 讓它先照內容取寬，
     再由 max-width 夾住，就跟 left 無關了。 */
  width: max-content;
  max-width: min(340px, 78vw);
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  color: var(--ig-main-dark);
  box-shadow: 0 16px 38px rgba(0, 22, 34, .30);
  /* ⚠ 定位用 transform、進場位移用 translate 屬性，兩個分開才不會互相蓋掉 */
  transform: translate(-50%, -100%);
  translate: 0 8px;
  opacity: 0;
  transition: opacity .24s ease, translate .24s ease;
  /* 泡泡自己不吃點擊：點畫面（含泡泡）就是收起來 */
  pointer-events: none;
}
.ig-say.is-below { transform: translate(-50%, 0); }
.ig-say.is-in { opacity: 1; translate: 0 0; }
.ig-say__text { margin: 0; font-size: 15px; line-height: 1.75; }
.ig-say::after {
  content: "";
  position: absolute;
  left: var(--tail, 50%);
  bottom: -10px;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top-color: rgba(255, 255, 255, .96);
  border-bottom: 0;
}
.ig-say.is-below::after {
  bottom: auto;
  top: -10px;
  border-top: 0;
  border-bottom: 10px solid rgba(255, 255, 255, .96);
}
@media (max-width: 767.98px) {
  .ig-say { padding: 12px 14px; border-radius: 14px; }
  .ig-say__text { font-size: 14px; line-height: 1.7; }
}

/* 站在地上的那隻會沿著地面來回走（客戶指定「像在走地圖」）：
   先往右下 → 停一下 → 轉頭往左走 → 停一下 → 再走回原點，循環。
   ⚠ 路徑用 `translate` **屬性**不是 transform：外層的 transform 已經被
     置中 translate(-50%,-50%) 與進場位移佔用，兩個一起寫會互相蓋掉。
     translate 屬性會先於 transform 套用，兩者可以並存。
   ⚠ 位移量不能寫死：窄螢幕左右沒有空間，寫死會走出畫面。改由 JS 依實際留白算。 */
.ig-walker__pace.is-walk {
  animation: igWalk 17s ease-in-out 1.2s infinite;
}
/* 轉向用 step-end：走到定點才瞬間翻面，不要在走的途中慢慢翻過去 */
.ig-walker__pace.is-walk .ig-char {
  animation: igWalkFace 13s step-end 1.2s infinite;
}
/* 位移量由 JS 依左右剩餘空間算好寫進 --wx-*／--wy-*（見 placeCast） */
@keyframes igWalk {
  0%,   4%  { translate: 0 0; }
  30%,  37% { translate: var(--wx-r, 0px) var(--wy-r, 0px); }
  68%,  76% { translate: var(--wx-l, 0px) var(--wy-l, 0px); }
  100%      { translate: 0 0; }
}
@keyframes igWalkFace {
  0%   { transform: scaleX(-1); }   /* 往右走：翻面 */
  37%  { transform: scaleX(1); }    /* 轉頭往左走：原圖方向 */
  76%  { transform: scaleX(-1); }   /* 再往右走回原點 */
  100% { transform: scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) {
  .ig-walker__pace.is-walk,
  .ig-walker__pace.is-walk .ig-char { animation: none; }
}

.ig-walker {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: var(--wh, 200px);
  /* 平移用 translate 屬性，transform 留給置中與翻面 */
  transform: translate(-50%, -50%);
  translate: var(--wx, 0px) var(--wy, 0px);
  opacity: 0;
  filter: drop-shadow(0 9px 15px rgba(0, 22, 34, .26));
  /* 時間由 JS 依距離算（--wsec），速度才一致；曲線接近等速，只在頭尾收一點 */
  transition: translate var(--wsec, 1.5s) cubic-bezier(.28, .12, .72, .9),
              height .6s ease,
              opacity .6s ease;
  /* ⚠ 這裡維持 none：.ig-act 是 z-index:1、這一層是 0，hit-test 永遠先打到那一幕，
     改成 auto 也點不到牠（2026-09-10 實測，點下去只會觸發「往下跳」）。
     封面點石虎講話是靠 buildCover 的 go() 自己比對座標，見 hitWalker()。 */
  pointer-events: none;
  /* 走在白卡後面：萬一擦到卡片也不會蓋住文字 */
  z-index: 0;
}
/* 講話時先站定：只停「站到站／來回踱步」那層位移，
   逐格動畫掛在內層的 .ig-char 上，照跑不受影響。 */
.ig-walker.is-talking .ig-walker__pace { animation-play-state: paused; }
/* 答錯那一題時石虎會換成難過的四幀（客戶指定 2026-09-10）：
   低頭縮著就別再走來走去，逐格也放慢一點才像「垮下來」。 */
.ig-walker.is-sad .ig-walker__pace { animation-play-state: paused; }
/* ⚠ 放慢逐格要走自訂屬性，不能寫 animation-duration：
     上面那條 .ig-walker .ig-walker__pace.is-walk .ig-char--sprite 是 (0,4,0) 的
     animation **簡寫**，會把個別屬性整組蓋掉（實測還是 0.8s）。自訂屬性不吃這套。 */
.ig-walker.is-sad .ig-char--sprite { --ig-sprite-dur: 1.3s; }
/* 答對那一題時換成開心的四幀（含一幀跳躍）：原地慶祝，一樣先停下位移 */
.ig-walker.is-happy .ig-walker__pace { animation-play-state: paused; }
.ig-walker.is-happy .ig-char--sprite { --ig-sprite-dur: .9s; }
/* APNG／動畫 WebP：圖自己會動，不能再套逐格換格（會被切成一格一格），
   背景位置也要置中而不是精靈圖那種靠左對齊。 */
.ig-char--anim {
  animation: none !important;
  background-position: center !important;
}

/* ⚠ 逐格動畫原本只在「走路中」（.is-walk／.is-stepping／.is-always）才播，
   角色走到題目旁邊停下來之後就不動了 —— 難過／開心這兩組是**站著原地演**，
   要自己把動畫掛回來，否則客戶看到的是一張靜止圖不是 gif。 */
.ig-walker.is-sad .ig-char--sprite,
.ig-walker.is-happy .ig-char--sprite {
  animation: igSprite var(--ig-sprite-dur, .8s) steps(1) infinite;
}
.ig-walker.is-in { opacity: 1; }
.ig-walker__pace { height: 100%; }
/* 走路用逐格精靈圖（客戶提供的 4 張手繪幀合成一張水平長圖）。
   background-size 由 JS 設成「幀數×100% 100%」，這裡只負責換格。
   ⚠ 換格不能用 `from 0% to 100% + steps(4)`：背景百分比是「捲動量的比例」不是「第幾格」，
     0/25/50/75% 會切在半格上。4 格的正確位置是 0 / 33.33 / 66.67 / 100%，所以直接寫死。 */
.ig-char--sprite {
  /* ⚠ .ig-char 的基準是 width:100%/height:auto，這裡要反過來：高度給定、寬度由
     aspect-ratio 推回去，不然精靈圖會被拉扁。 */
  width: auto;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0% 0;
}
/* ⚠ .ig-char 有一條全域的上下漂浮 igFloat（給解答卡與圓環裡的角色用的）。
   走路的角色是踩在地上的，浮起來很怪，而且會跟逐格動畫／步伐互相蓋掉，這裡關掉。 */
.ig-walker .ig-char { animation: none; }
.ig-walker .ig-walker__step.is-stepping .ig-char--sprite,
.ig-walker .ig-walker__pace.is-walk .ig-char--sprite,
.ig-walker.is-always .ig-char--sprite {
  animation: igSprite var(--ig-sprite-dur, .8s) steps(1) infinite;
}
@keyframes igSprite {
  0%   { background-position-x: 0%; }
  25%  { background-position-x: 33.3333%; }
  50%  { background-position-x: 66.6667%; }
  75%  { background-position-x: 100%; }
  100% { background-position-x: 0%; }
}
/* 有逐格動畫就不要再做 CSS 假步伐，兩個疊在一起會晃得很怪 */
.ig-walker.is-sprite .ig-walker__step { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ig-char--sprite { animation: none !important; background-position-x: 0% !important; }
}
/* 步伐：腳踩在地上不動，身體上下擺＋左右微傾，看起來才是「走」不是「滑」 */
.ig-walker__step {
  height: 100%;
  transform-origin: 50% 100%;
}
.ig-walker__step.is-stepping,
.ig-walker__pace.is-walk .ig-walker__step {
  /* 節奏：一個循環兩步。太快會像抖動（0.36s ＝ 每秒 5 步，客戶回報「動太頻繁」），
     0.8s ＝ 每秒 2.5 步，接近小動物走路的實際步頻。
     ⚠ 步頻放慢就要一起降移動速度，否則每一步跨的距離變大，又會變回「用滑的」。 */
  animation: igStep .8s ease-in-out infinite;
}
@keyframes igStep {
  0%   { transform: translateY(0)     rotate(-1.4deg); }
  25%  { transform: translateY(-4.5%) rotate(0deg); }
  50%  { transform: translateY(0)     rotate(1.4deg); }
  75%  { transform: translateY(-4.5%) rotate(0deg); }
  100% { transform: translateY(0)     rotate(-1.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ig-walker__step { animation: none !important; }
}
.ig-walker .ig-char { display: block; width: auto; height: 100%; }
/* 石虎原圖朝左，往右走要翻面 */
.ig-walker .ig-char.is-flip { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .ig-walker { transition: opacity .3s ease; }
}

/* 按下 START 之後走去「角色介紹」那一幕。
   ⚠ 封面要抬到後面那些幕之上，否則角色走出封面範圍就會被下一幕的白卡蓋住
     （幕是同層的兄弟元素，後面的本來就畫在上面）。 */
.ig-act--cover { z-index: 3; }
.ig-cast__one.is-going {
  transition: translate 2.4s cubic-bezier(.35, .05, .2, 1), opacity .7s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ig-cast__one.is-going { transition: none; }
}
/* 觸控裝置的「點畫面開始」提示：角色改成絕對定位後，這行字要自己推到底部，
   否則會緊貼在麵包屑下方（實測會卡在畫面上方三分之一） */
.ig-act--cover .ig-cover__hint { margin-top: auto; }
@media (prefers-reduced-motion: reduce) {
  .ig-cast__one { transition: opacity .3s ease; transform: translate(-50%, -50%); }
}

/* 往下捲的指示箭頭：放在封面正下方中間（客戶指定 2026-09-08，
   取代原本跟著滑鼠的 START 圓標）。導覽是靠捲動觸發的，這顆只是提示。 */
.ig-scrolldown {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 44px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 10px;
  border: 0;
  background: none;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .08em;
  text-shadow: 0 2px 12px rgba(0, 22, 34, .6);
  z-index: 2;
}
.ig .ig-act .ig-scrolldown { cursor: pointer; }
/* 答完題之後換 cue 按鈕接手，底部永遠只有一顆（客戶指定 2026-09-10）。
   ⚠ 原本只寫了 .ig-cue.is-hidden，箭頭掛了 class 卻沒有對應規則，等於沒收起來。 */
.ig-scrolldown.is-hidden { display: none; }
.ig-scrolldown__arrow {
  display: block;
  width: 16px;
  height: 16px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
  animation: igScrollHint 1.8s ease-in-out infinite;
}
@keyframes igScrollHint {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .75; }
  50%      { transform: rotate(45deg) translate(5px, 5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-scrolldown__arrow { animation: none; }
}

/* 矮視窗（筆電 768/760、iPhone SE）：標題讓一點高度出來，卡片才放得大
   ── 眉標是裝飾性英文，第一個收掉 */
@media (max-width: 767.98px) {
  /* 手機一行放不下，遊戲名改成獨立一行 */
  .ig-cover__game {
    display: block;
    margin: .5em 0 0;
    padding-left: 0;
    border-left: 0;
    font-size: .58em;
    top: 0;
  }
}

@media (max-height: 800px) {
  .ig-act--cover .ig-cover__title { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 6px; }
  .ig-act--cover .ig-crumb { margin-top: 6px; }
  .ig-act--cover .ig-crumb .c-breadcrumb__list { font-size: 13px; }
  .ig-act--cover .ig-cover__hint { margin-top: 12px; }
}

/* --------------------------------------------------------------------------
   封面 ／ 結局
   -------------------------------------------------------------------------- */
/* 封面／結局：眉標 → 雙色大標 → 副標 → 橘色膠囊鈕 → 提示 */
.ig-cover { color: #FFFFFF; }
.ig-cover__en {
  font-size: clamp(11.5px, 1.2vw, 14px);
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin-bottom: 14px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
/* 比照站台頁首「永續互動」的標題：42px／700／白／字距 .05em（.u-h1.u-fw-bold 實測值） */
.ig-cover__title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  margin: 0 0 12px;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .55), 0 1px 4px rgba(0, 0, 0, .45);
}
.ig-cover__title em { font-style: normal; color: inherit; }
.ig-cover__sub {
  font-size: clamp(14.5px, 1.6vw, 16.5px);
  font-weight: 500;
  line-height: 1.9;
  color: #FFFFFF;
  margin: 0 auto;
  max-width: 34em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
}
.ig-cover__hint {
  font-size: 13px;
  color: #FFFFFF;
  margin-top: 20px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
/* ⚠ 這裡原本有三條 .ig.is-night .ig-cover__* 的淺色規則。
   封面現在恆為白天、結局恆為夜晚，所以那些規則只會打到「結局的白卡」，
   而且特異度 (0,3,0) 會贏過 .ig-act--end .ig-cover__*(0,2,0)，
   造成副標變成淺藍字壓白卡（實測 1.9:1）→ 直接移除，結局的顏色一律由 .ig-act--end 那組決定。 */

/* 結局：白卡承接（夜晚插畫亮，白字只有 2.1:1）
   版型＝綠色橫幅 → 圓環進度（角色站中間）→ 分數 → 知識卡 → 按鈕 */
.ig-act--end .ig-cover {
  /* 兩隻嚮導要飄到卡外的左右兩側，以這張白卡為定位基準 */
  position: relative;
  background: rgba(255, 255, 255, .96);
  border-radius: var(--ig-radius);
  box-shadow: 0 18px 44px rgba(0, 22, 34, .16);
  padding: 26px 30px 28px;
  color: var(--ig-main-dark);
}
.ig-act--end .ig-cover__sub { color: #3A4750; text-shadow: none; font-size: 15px; line-height: 1.8; }

.ig-banner {
  display: block;
  padding: 13px 20px;
  border-radius: 14px;
  background: var(--ig-green);
  color: #FFFFFF;
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: .05em;
}

/* 結局：兩隻嚮導站在圓環左右（客戶指定 2026-09-08，圓環中間留白） */
.ig-endcast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 46px);
  margin-top: 18px;
}
.ig-endcast .ig-char-wrap.is-end {
  /* --k 是各角色的畫布倍率（SVG 留白不一樣），跟封面同一組 */
  width: calc(min(13vw, 11vh, 120px) * var(--k, 1));
  flex: 0 0 auto;
}
/* 逐格精靈圖（會動的那版）是「高度給定、寬度由 aspect-ratio 推回去」，
   ⚠ 給寬度會被拉扁，所以整組換成給高度。精靈圖是緊裁的，不必再乘 --k。 */
.ig-endcast .ig-char-wrap.is-end.is-sprite {
  width: auto;
  /* 對齊改版前靜態 SVG 的實心高度（1024 實測 84.5 vs 舊版 84），不要因為換成精靈圖就縮一圈 */
  height: min(14vw, 13vh, 130px);
}
/* 結局頁的嚮導原地播放逐格動畫（客戶指定 2026-09-10「該區動物請 gif 呈現」）：
   石虎走路、領角鴞拍翅，用的是走地圖那組同一份精靈圖與 keyframes。
   ⚠ 這條會蓋掉 .ig-char 的 igFloat 漂浮（同一個 animation 屬性）——本來就該蓋掉，
     踩在地上的角色又走又浮很怪。 */
.ig-endcast .ig-char--sprite { animation: igSprite var(--ig-sprite-dur, .8s) steps(1) infinite; }
.ig-gauge {
  position: relative;
  /* 也吃視窗高度，結局才不會在筆電上被推到摺線下。
     ⚠ 直徑抽成變數：中央那組分數的字級要跟著它走（見 .ig-gauge__core） */
  --gauge-d: min(28vw, 22vh, 260px);
  width: var(--gauge-d);
  aspect-ratio: 1;
  margin: 0;
  flex: 0 0 auto;
}
.ig-gauge__ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ig-gauge__track {
  fill: none;
  stroke: var(--ig-line);
  stroke-width: 12;
}
.ig-gauge__fill {
  fill: none;
  stroke: var(--ig-green);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(.2, .7, .3, 1);
}
.ig-gauge__cast {
  position: absolute;
  /* 圓環內徑 ≈ 80%（r=86、stroke 12，viewBox 200），inset 10% 剛好貼到內緣 */
  inset: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 圓環裡放兩隻嚮導，並排。--k 是各角色的畫布倍率（跟封面同一組），
   只有一隻的時候放大到接近填滿內圈 */
.ig-gauge__cast { gap: 2%; }
.ig-gauge__cast .ig-char-wrap { width: calc(40% * var(--k, 1)); }
.ig-gauge__cast .ig-char-wrap:only-child { width: calc(64% * var(--k, 1)); }

/* 分數放進圓環正中央（客戶指定 2026-09-10）。
   ⚠ inset 要比圓環內緣（10%）再縮一點：文字排出來是方的，四個角才不會壓到圓弧。 */
.ig-gauge__core {
  position: absolute;
  inset: 14%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ig-gauge__core .ig-score__num { font-size: clamp(24px, calc(var(--gauge-d) * .22), 44px); }
.ig-gauge__core .ig-score__unit {
  /* 跟直徑等比，圓環一小、題數一多（分數變兩位數）都還塞得下 */
  font-size: clamp(10px, calc(var(--gauge-d) * .07), 13.5px);
  margin-top: calc(var(--gauge-d) * .035);
  white-space: nowrap;
}

/* 兩隻嚮導站到白卡外的左右兩側、壓在背景上（客戶指定 2026-09-10）。
   ⚠ 只在真的放得下的寬度才飄出去：白卡固定 900px，外側空間 ＝ (100vw − 900) ÷ 2，
   1200 以下只剩 150px 以內，飄出去會被視窗切掉 → 窄螢幕維持排在圓環左右（原本的樣子）。
   ⚠ 特異度要湊到 (0,4,0) 才壓得過上面那條 .ig-endcast .ig-char-wrap.is-end 的 width。 */
@media (min-width: 1280px) {
  .ig-endcast .ig-char-wrap.is-end.ig-endcast__side {
    position: absolute;
    top: 50%;
    /* 用 translate 屬性不用 transform：圖片自己有 igFloat 的 transform 動畫 */
    translate: 0 -50%;
    /* 上限吃「白卡外側實際剩多少」：450 是白卡半寬、30 是最大間距、40 留給視窗邊。
       ⚠ 40 之中有 15 是「捲軸稅」：50vw 是視覺視窗（含捲軸），卡片卻是置中在
         不含捲軸的可用寬裡，Windows 上兩者差一整條捲軸（1440 實測只剩 19px 到視窗邊）。
       ⚠ 要夾「乘倍率之前」的基準值（除以 --end-kmax／--end-rmax，由 JS 給），
       否則倍率大的那隻被夾掉，兩隻的相對大小會跑掉。 */
    width: calc(min(min(13vw, 11vh, 120px), calc((50vw - 520px) / var(--end-kmax, 1.45))) * var(--k, 1));
  }
  /* 精靈圖版：量的是高度，寬 ＝ 高 × 長寬比，所以外側空間要除以最寬的那個比例。
     ⚠ 門檻是 1280 不是 1200：1200–1279 的卡外空間只有 150–190px，
       算出來的高度反而比「站在圓環左右」那版還小，跨過斷點會突然縮一圈。 */
  .ig-endcast .ig-char-wrap.is-end.is-sprite.ig-endcast__side {
    width: auto;
    height: min(min(28vh, 225px), calc((50vw - 520px) / var(--end-rmax, 1.5)));
  }
  .ig-endcast .ig-char-wrap.is-end.ig-endcast__side--l { right: 100%; margin-right: clamp(10px, 1.6vw, 30px); }
  .ig-endcast .ig-char-wrap.is-end.ig-endcast__side--r { left: 100%; margin-left: clamp(10px, 1.6vw, 30px); }
}

.ig-act--end .ig-know__card {
  background: var(--ig-grey-bg);
  border-color: var(--ig-line);
  color: #3A4750;
}
.ig-act--end .ig-know__card b { color: var(--ig-green-dk); }
.ig-act--end .ig-btn { padding: 14px 34px; font-size: 16px; }
/* 結局內容比較高，上緣只讓開固定選單就好 */
.ig-act--end { padding-top: calc(var(--ig-nav-h) + 10px); padding-bottom: 56px; }
.ig-act--end .ig-btn.is-ghost { color: var(--ig-main); border-color: var(--ig-main); }
.ig-act--end .ig-btn.is-ghost:hover { background: var(--ig-main); color: #fff; }

/* 開始鍵：純黃底、黑字，不用漸層 */
.ig-btn--start {
  margin-top: 30px;
  padding: 17px 54px;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 700;
  color: #000000;
  background: var(--ig-amber);
  border-color: var(--ig-amber);
  box-shadow: 0 12px 30px rgba(0, 22, 34, .28);
}
.ig-btn--start:hover {
  color: #000000;
  background: #FFBB1F;
  border-color: #FFBB1F;
  box-shadow: 0 16px 36px rgba(0, 22, 34, .34);
}

.ig-score {
  display: block;
  margin: 12px 0 2px;
}
.ig-score__num {
  font-size: clamp(34px, 4.2vw, 46px);
  font-weight: 700;
  line-height: 1;
  color: var(--ig-main-dark);
}
.ig-score__unit {
  font-size: 13.5px;
  margin-top: 6px;
  color: var(--ig-grey-text);
}

/* 知識卡數量跟著章節題數走（目前每章 2 張），用 auto-fit 才不會靠左空一半 */
.ig-know {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 250px));
  justify-content: center;
  gap: 10px;
  margin: 20px 0 4px;
}
/* 收成橫式小卡（圖示與文字同一行），結局才塞得進一屏 */
/* 圖示（原本是 emoji）已移除，改成純文字卡 */
.ig-know__card {
  text-align: center;
  padding: 12px 12px;
  border-radius: var(--ig-radius-sm);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 13px;
  line-height: 1.55;
  color: #E7F2EA;
}
.ig-know__card span { display: block; }
.ig-know__card b { white-space: nowrap; }
.ig-know__card b { color: var(--ig-main-light); }

/* --------------------------------------------------------------------------
   慶祝彩帶（JS 產生，位置以 CSSOM 設定）
   -------------------------------------------------------------------------- */
.ig-confetti {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.ig-confetti i {
  position: absolute;
  top: -16px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  animation: igFall linear forwards;
}
@keyframes igFall {
  to { transform: translateY(105vh) rotate(680deg); opacity: 0; }
}

/* --------------------------------------------------------------------------
   無 JS 時的替代說明
   -------------------------------------------------------------------------- */
.ig-nojs {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 80px 20px;
}

/* --------------------------------------------------------------------------
   RWD
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ig-char-wrap { width: 168px; }
  .ig-char-wrap.is-lg { width: 200px; }
  .ig-know { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
  .ig-act { padding: calc(var(--ig-nav-h) + 36px) 18px calc(var(--ig-nav-h) * 2 + 44px); }
  /* ⚠ 上面那條 .ig-act (0,1,0) 跟 .ig-act--cover 同分且在後面，會把封面的 padding-top 蓋掉，
     所以封面在手機要在這裡再寫一次（客戶指定標題往下移） */
  .ig-act--cover { padding-top: calc(var(--ig-nav-h) + 56px); padding-bottom: 84px; padding-inline: 0; }
  .ig-card { padding: 24px 20px; border-radius: 18px; }
  .ig-qcard__desc { margin-top: 10px; font-size: 14.5px; }
.ig-qcard { padding: 28px 20px 30px; border-radius: 20px; }
  .ig-talk {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }
  .ig-bubble::before {
    left: 50%;
    top: -13px;
    margin-left: -12px;
    border-width: 0 12px 14px 12px;
    border-color: transparent transparent rgba(255, 255, 255, .95) transparent;
  }
  .ig-qhead { flex-direction: column; align-items: stretch; gap: 12px; }
  .ig-char-wrap { width: 140px; }
  .ig-opts { gap: 10px; margin-top: 22px; }
  .ig-opt { padding: 15px 16px; font-size: 15.5px; }
  .ig-verdict { flex-direction: column; gap: 6px; margin-top: 16px; }
  .ig-btn { width: 100%; justify-content: center; }
  .ig-npc { flex-direction: column; text-align: center; }
  /* 手機圖、壓暗與裁切焦點改由後台圖庫決定，見上方 .ig-bg__sky 的說明 */
  /* 眉標在窄螢幕要縮字距才不會斷成兩行 */
  .ig-cover__en { font-size: 10.5px; letter-spacing: .14em; }
  .ig-flow__arrow { display: none; }
  .ig-flow__step { flex-basis: calc(50% - 4px); }
  /* 結局頁在手機上要塞得進一屏：圓環與左右兩隻各讓一點高度
     （實測 390×844 原本只剩 19px 餘裕，低於「一屏」該留的 40px） */
  .ig-gauge { --gauge-d: min(50vw, 17vh, 170px); margin-top: 0; }
  .ig-endcast { gap: 6px; margin-top: 10px; }
  .ig-endcast .ig-char-wrap.is-end { width: calc(min(17vw, 9vh, 88px) * var(--k, 1)); }
  .ig-endcast .ig-char-wrap.is-end.is-sprite { width: auto; height: min(18vw, 10vh, 92px); }
  /* 圓環縮小了，中央的分數也跟著縮 —— 字級綁在 --gauge-d 上，這裡不必再寫一次 */
  /* 手機的角色大小與位置由 JS 依背景裁切換算並夾進畫面，這裡不再另外指定 */
  .ig-know { gap: 8px; margin: 16px 0 4px; }
  .ig-banner { font-size: 18px; padding: 14px 18px; }
}

/* --------------------------------------------------------------------------
   減少動態偏好
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ig-char,
  .ig-cue__arrow,
  .ig-confetti i { animation: none !important; }
  /* 進場位移直接省略，角色留在定位上 */
  .ig-cast.is-in .ig-cast__one { animation: none; transform: translate(-50%, -50%); opacity: 1; }
  .ig-reveal { opacity: 1; transform: none; transition: none; }
  .ig-result { transition-duration: .01s; }
  .ig-opt:hover:not(:disabled) { transform: none; }
  /* 答錯的脈衝與紅暈：留顏色、拿掉動態 */
  .ig-qcard.is-wrong { animation: none; }
  .ig-qcard.is-wrong::after { animation: none; opacity: 0; }
  .ig-act--quiz.is-wrong::after { animation: none; opacity: .5; }
  .ig-btn:hover { transform: none; }
}