<!--
  教材名稱：物質的狀態 — 加熱曲線、水與二氧化碳相圖
  課綱對應：高一必修化學 第一章 物質的組成與性質
  使用公式：水與二氧化碳相圖（三相點、臨界點、蒸氣壓曲線、固液界線）
  數值來源：NIST Webbook (webbook.nist.gov)
  用詞依據：樂詞網 高中化學（terms.naer.edu.tw）
  最後修改：2026-09-03（V4.3）
  V4.3 更新：依 NIST Webbook 校正二氧化碳相圖曲線 ——
            ① 飽和蒸氣壓插值指數 0.72 → 0.7884（低溫端原偏高逾 13%，現 <6%）。
            ② 昇華曲線低溫端起點由寫死的 0.01 atm 改為 NIST 值 0.1352 atm
               （-100°C，原偏低約 13 倍），兩段指數改為 0.8677 / 0.7971。
            三相點、臨界點與乾冰昇華點（-78.5°C = 1 atm）為固定端點，數值不變。
            ③ 修正教學投影模式下 Tab2／Tab3 座標軸被遮擋：縱軸標題原以固定
               間距（x=496／c.x-54）定位，教學模式字級放大後與刻度標籤重疊；
               改為量測刻度實際寬度後動態避讓。
            ④ 圖表下緣由 y=680 上移至 660（高度 450→430），原設定使橫軸標題
               底部達 729px、超出畫布高度 720px 而被裁切。
            ⑤ 移除容器上方重複繪製的「密閉容器（巨觀）」，與面板標題文字重疊。
  V4.2 更新：修正水的飽和蒸氣壓曲線 —— 原 Bézier 控制點權重 0.18／0.55 使曲線
            嚴重偏低（100°C 僅 0.041 atm，與實際 1 atm 差約 24 倍），導致
            「100°C、1 atm」在相圖上判為液態而非液氣共存，與課本沸點不符。
            現改為 0.79／0.8141，由 NIST 飽和蒸氣壓資料最小平方擬合並加上
            「100°C = 1.000 atm」硬約束求得，全區間相對誤差 <10%。
  前版修改：2026-09-02
  V4.1 更新：統一 Tab2 放大鏡內水分子大小——原冰晶格 O 半徑為 5.4×倍率（固液共存時僅 3.78），
            自由水分子則為 6～9，固液共存時兩者相差 2.12 倍，易誤解成粒子會脹縮。
            現新增 WATER_MOL_R = 6.5 常數，固、液、氣（含各共存態與超臨界）一律採同一半徑，
            僅隨教學投影模式整體放大 1.38 倍；冰晶環半徑維持 34，分子最外緣 55.3px 仍在放大鏡內徑 56px 之內。
  V4.0 更新：① 修正 Tab2／Tab3「目前狀態：」與狀態文字重疊——狀態值原以寫死的 x=612 繪製，改為量測標籤實際寬度後接續繪製，長狀態名（如「固液共存」）不再壓字；② 補上 Tab2／Tab3 缺少的「固液共存」與「固氣共存」狀態——原 getPhase()／getCO2Phase() 在固液相界線與昇華曲線上會直接落回「固態」或「氣態」，永遠判不到共存；現比照既有「液氣共存」的容差寫法加入判定，並補齊對應的巨觀容器與微觀放大鏡動畫（水的冰塊浮在液面上、CO₂ 乾冰沉在液面下，固氣共存則為固體＋氣體無液相）。
  V3.4 更新：① 署名統一改為「教材設計與製作：中山女高 劉泓其老師」（入場畫面、標題列、頁尾三處）；② 標題列與頁尾署名改為可點選按鈕，開啟「聯絡與致謝」小視窗（不透明背板，× 鈕／點背板／ESC 三種關閉路徑）；③ 名詞校訂（樂詞網）：「線形分子」→「線型分子」（依化學名詞-化學術語，linear molecule 唯一條目）。
  V3.1 更新：① 修復教學模式分頁不可見——改以正規 flex 單列佈局（教學模式將 #tab-bar 併入 #topbar 一列），移除原 margin-top/-left 負邊距 hack，分頁清楚可見可點；② 教學模式創建者改顯示於頁首最右上方；③ 左上標題顯示目前模式［教學投影模式］/［個人模式］，點標題可返回進場畫面重新選模式，支援多次來回切換。
  V3.2 更新：進場畫面模式按鈕加入 hover 亮光提示——滑鼠指向某一模式時，該按鈕以雙層 box-shadow 光暈亮起並微幅上浮；個人模式（白底）hover 補一層主色底光使亮起更明顯。純 CSS 調整，其餘一律不變。
-->
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>物質的狀態 — 加熱曲線、水與二氧化碳相圖</title>
<style>
:root {
  --bg:              #FAFAF8;
  --surface:         #FFFFFF;
  --surface2:        #F5F4F0;
  --border:          #E8E6E0;
  --text-primary:    #1A1A2E;
  --text-secondary:  #4A4A6A;
  --text-muted:      #8A8AA0;
  --accent:          #C8324A;
  --bond-length:     #2D5FA6;
  --bond-energy:     #27795A;
  --tab-active-bg:   #F0F4FF;
  --font: 'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC',
          'Hiragino Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font);
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
button, input { font-family: var(--font); }
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(circle at 35% 25%, rgba(45,95,166,0.10), transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(39,121,90,0.10), transparent 32%),
    var(--bg);
  transition: opacity 0.6s ease;
}
#loading-screen.fade-out { opacity: 0; }
#loading-canvas {
  width: 120px;
  height: 80px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(26,26,46,0.08);
}
.loading-title {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.loading-title span { color: var(--accent); }
.loading-sub {
  font-size: 17px;
  color: var(--text-secondary);
  font-weight: 600;
}
.loading-credit {
  font-size: 14px;
  color: var(--text-muted);
}

/* 入場畫面著作權：只放單行 ©，完整條款在「聯絡與致謝」overlay 內 */
.loading-copyright {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 13px;          /* 全域最小字級下限 */
  font-weight: 600;
  opacity: .78;             /* 視覺層級低於署名 */
  letter-spacing: .01em;
  text-align: center;
}

.loading-modes {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.mode-btn {
  position: relative;
  min-width: 210px;
  border-radius: 26px;
  padding: 13px 24px;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  border: 2px solid var(--bond-length);
  box-shadow: 0 10px 24px rgba(26,26,46,0.10);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
/* hover 亮光提示：上浮 + 內圈柔光環 + 外圈擴散光暈 */
.mode-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(45,95,166,0.18),
              0 14px 34px rgba(45,95,166,0.30);
}
.mode-teach {
  color: #FFFFFF;
  background: var(--bond-length);
}
.mode-personal {
  color: var(--bond-length);
  background: #FFFFFF;
}
/* 個人模式為白底，hover 時補一層主色底光使亮起更明顯 */
.mode-personal:hover {
  background: var(--tab-active-bg);
}
.loading-bar-wrap {
  width: 260px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
  margin-top: 8px;
}
.loading-bar {
  width: 52%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bond-length), var(--bond-energy));
  animation: loading-slide 1.6s ease-in-out infinite;
}
@keyframes loading-slide {
  0%   { transform: translateX(-110%); }
  50%  { transform: translateX(65%); }
  100% { transform: translateX(220%); }
}
#topbar {
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(12px);
}
#topbar h1 {
  flex: 1;
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
#topbar h1 span { color: var(--accent); }
.topbar-tag {
  font-size: 14px;
  color: var(--text-secondary);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  font-weight: 700;
}
#tab-bar {
  flex-shrink: 0;
  height: 46px;
  display: flex;
  align-items: stretch;
  padding: 0 18px;
  gap: 4px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 17px;
  font-weight: 700;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.tab-btn.active {
  color: var(--bond-length);
  border-bottom-color: var(--bond-length);
  background: var(--tab-active-bg);
}
.tab-btn:hover:not(.active) {
  background: var(--surface2);
  color: var(--text-primary);
}
.tab-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#canvas-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
}
#c {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(26,26,46,0.10);
}
#controls-bar {
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.ctrl-btn {
  min-height: 34px;
  border-radius: 20px;
  padding: 7px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.ctrl-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-play, .btn-reset { border-color: var(--bond-energy); color: var(--bond-energy); }
.btn-play:hover:not(:disabled), .btn-reset:hover:not(:disabled) {
  background: var(--bond-energy);
  color: #fff;
}
.btn-record:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-record.recording {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-fullscreen:hover:not(:disabled) {
  border-color: var(--bond-length);
  color: var(--bond-length);
}
.btn-fullscreen.is-fullscreen {
  background: var(--bond-length);
  border-color: var(--bond-length);
  color: #fff;
}
.ctrl-sep {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}
#status {
  flex: 1;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-hidden { display: none !important; }
#footer {
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: var(--surface2);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.teach-mode #topbar {
  height: 46px;
  gap: 12px;
  padding: 0 18px;
  flex-wrap: nowrap;
  overflow: hidden;
}
body.teach-mode #topbar h1 {
  font-size: 22px;
  flex: 0 1 auto;
  white-space: nowrap;
}
body.teach-mode .topbar-tag { display: none; }
body.teach-mode #tab-bar {
  height: auto;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
  background: transparent;
  border-bottom: 0;
  order: 2;
}
body.teach-mode .tab-btn {
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  padding: 8px 11px;
  font-size: 16px;
  font-weight: 800;
}
/* 主畫面署名（教學模式顯示於標題列）：可點選開啟聯絡與致謝視窗 */
.creator-tag {
  display: none;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.creator-tag:hover,
.creator-tag:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(200, 50, 74, .06);
}
/* 頁尾署名（個人模式顯示於頁尾）：同樣可點選 */
.footer-creator {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .18s ease;
}
.footer-creator:hover,
.footer-creator:focus-visible { color: var(--accent); }

/* ── 聯絡與致謝 overlay（小視窗、不透明背板；低於進場畫面 9999） ── */
#contactOverlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(26, 26, 46, .72);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
#contactOverlay.is-open { opacity: 1; pointer-events: auto; }
.contact-sheet {
  width: min(560px, 94vw);
  max-height: 88vh;
  overflow: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .64);
  /* 不透明背板：不使用半透明底色 */
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.contact-sheet-head {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  border-bottom: 1px solid var(--bond-length);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 900;
}
.contact-sheet-head::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 6px 0 0 rgba(255, 255, 255, .92);
}
.contact-sheet-head #contactTitle { flex: 1; }
.btn-contact-close {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text-secondary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.btn-contact-close:hover,
.btn-contact-close:focus-visible {
  color: #FFFFFF;
  border-color: var(--accent);
  background: var(--accent);
}
.contact-body {
  padding: 20px 24px 24px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.85;
}
.contact-body p { margin: 0 0 14px; }
.contact-name {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
}
.contact-mail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
}
.contact-mail-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
}
.contact-mail-link {
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
  word-break: break-all;
}
.contact-thanks {
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 14px;
}

/* 著作權聲明：置於「聯絡與致謝」內容最下方 */
.contact-copyright {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;          /* 全域最小字級下限 */
  line-height: 1.7;
}

.contact-copyright .copyright-line {
  display: block;
  margin-bottom: 4px;
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: .01em;
}

.contact-copyright .copyright-terms { display: block; }

body.teach-mode .creator-tag {
  display: inline-block;
  flex: 0 0 auto;
  order: 3;
  margin-left: 0;
}
.mode-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  margin-left: 10px;
  cursor: pointer;
  padding: 1px 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,235,59,.55) 0%, #FFEB3B 55%, rgba(255,235,59,.85) 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  white-space: nowrap;
}
.mode-label:empty { background: none; padding: 0; box-shadow: none; }
body.teach-mode .mode-label { font-size: 15px; }
#titleMain { cursor: pointer; }
body.teach-mode #controls-bar {
  height: 48px;
  padding: 0 14px;
}
body.teach-mode .ctrl-btn {
  min-height: 32px;
  padding: 6px 16px;
  font-size: 15px;
}
body.teach-mode #status { font-size: 15px; }
body.teach-mode #footer { display: none; }
@media (max-width: 900px) {
  body.teach-mode #topbar {
    gap: 6px;
    padding: 0 8px;
  }
  body.teach-mode #topbar h1 {
    font-size: 18px;
  }
  body.teach-mode #tab-bar {
    gap: 2px;
  }
  body.teach-mode .tab-btn {
    padding: 8px 3px;
    font-size: 13px;
  }
  body.teach-mode .creator-tag {
    font-size: 13px;
  }
  body.teach-mode .mode-label {
    margin-left: 4px;
    font-size: 13px;
  }
}
</style>
</head>
<body>
<div id="loading-screen">
  <canvas id="loading-canvas" width="120" height="80" aria-label="三態粒子載入動畫"></canvas>
  <div class="loading-title">物質的<span>狀態</span></div>
  <div class="loading-sub">高中化學 第一章 — 加熱曲線・水的相圖・二氧化碳相圖・相圖比較</div>
  <div class="loading-credit">教材設計與製作：中山女高 劉泓其老師</div>
  <div class="loading-copyright">© 2026 劉泓其 All Rights Reserved.</div>
  <div class="loading-modes">
    <button id="btnModeTeach" class="mode-btn mode-teach">🎬 教學投影模式</button>
    <button id="btnModePersonal" class="mode-btn mode-personal">💻 個人使用模式</button>
  </div>
</div>

<div id="topbar">
  <h1 id="titleMain" title="點此切換模式">物質的<span>狀態</span><small id="modeLabel" class="mode-label"></small></h1>
  <span class="topbar-tag">States of Matter</span>
  <button type="button" id="creatorTag" class="creator-tag" title="點此查看聯絡資訊">教材設計與製作：中山女高 劉泓其老師</button>
</div>

<div id="tab-bar">
  <button class="tab-btn active" data-tab="heating">加熱曲線 × 微觀排列</button>
  <button class="tab-btn" data-tab="phase">水的相圖</button>
  <button class="tab-btn" data-tab="co2">二氧化碳的相圖</button>
  <button class="tab-btn" data-tab="compare">相圖比較</button>
</div>

<div id="canvas-wrap">
  <canvas id="c" aria-label="物質的狀態互動教材主畫布"></canvas>
</div>

<div id="controls-bar">
  <button class="ctrl-btn btn-play" id="btnPlay">▶ 播放</button>
  <button class="ctrl-btn btn-reset" id="btnReset">↺ 重置</button>
  <button class="ctrl-btn btn-record" id="btnRecord">⏺ 錄製下載</button>
  <div class="ctrl-sep" id="sepMain"></div>
  <span id="status">按下播放開始觀察物質三態的微觀與巨觀變化</span>
  <div class="ctrl-sep" id="sepFull"></div>
  <button class="ctrl-btn btn-fullscreen" id="btnFullscreen">⛶ 全螢幕</button>
</div>

<div id="footer">數值來源：NIST Webbook (webbook.nist.gov)；Span & Wagner CO₂ data｜化學用詞依據：樂詞網（terms.naer.edu.tw）｜<button type="button" id="footerCreator" class="footer-creator" title="點此查看聯絡資訊">教材設計與製作：中山女高 劉泓其老師</button></div>

<!-- 聯絡與致謝 Overlay -->
<div id="contactOverlay" aria-hidden="true">
  <div class="contact-sheet" role="dialog" aria-modal="true" aria-labelledby="contactTitle">
    <div class="contact-sheet-head">
      <span id="contactTitle">聯絡與致謝</span>
      <button class="btn-contact-close" id="btnCloseContact" type="button" aria-label="關閉聯絡資訊">×</button>
    </div>
    <div class="contact-body">
      <p class="contact-name">教材設計與製作：中山女高 劉泓其老師</p>
      <p>感謝您使用這份數位教材。這份「物質的狀態 — 加熱曲線、水與二氧化碳相圖」是為了讓同學能一邊播放加熱曲線、一邊對照微觀粒子排列的變化，並在水與二氧化碳的相圖上自行移動溫度與壓力，觀察三相點、臨界點與超臨界流體區的位置，建立「巨觀狀態改變對應微觀粒子排列改變」以及「水的固液界線為何呈負斜率」的概念而設計的。</p>
      <p>若對此教材有任何改進的意見、發現數值或用詞上的疏漏，或希望增加其他物質的相圖與狀態變化範例，都非常歡迎來信告訴我。</p>
      <div class="contact-mail-row">
        <span class="contact-mail-label">聯絡信箱</span>
        <a class="contact-mail-link" href="mailto:kikimo0704@m2.csghs.tp.edu.tw">kikimo0704@m2.csghs.tp.edu.tw</a>
      </div>
      <p class="contact-thanks">也謝謝每一位在課堂上使用、分享並給予回饋的老師與同學，你們的意見讓這份教材能持續變得更好。</p>
      <!-- 著作權聲明（各教材共用，逐字相同） -->
      <p class="contact-copyright">
        <span class="copyright-line">© 2026 劉泓其 All Rights Reserved.</span>
        <span class="copyright-terms">本教材之程式碼、文字、圖像、動畫及互動設計受著作權法保護。未經作者書面同意，不得重製、改作、散布、公開傳輸或作商業利用。</span>
      </p>
    </div>
  </div>
</div>

<script>
'use strict';

/*
 * 水的相圖教學近似
 * 三相點：T = 0.01 °C, P = 0.00603 atm
 * 臨界點：T = 374.1 °C, P = 217.7 atm
 * 正常沸點：T = 100.0 °C, P = 1.000 atm
 * 正常熔點：T = 0.0 °C, P = 1.000 atm
 * 二氧化碳：三相點 T = -56.6 °C, P = 5.11 atm；臨界點 T = 31.0 °C, P = 72.8 atm
 * 來源：NIST Webbook；CO₂ 臨界點與三相點採 Span & Wagner 參考資料；本教材採概念化曲線與分段近似供教學示意。
 */

const CW = 1280;
const CH = 720;
const DPR = Math.max(window.devicePixelRatio || 1, 2);
const FONT = "'Microsoft JhengHei','PingFang TC','Noto Sans TC','Hiragino Sans',system-ui,sans-serif";
const CANVAS_FONT_BUMP = 1; // 投影可讀性：在不壓住圖形的前提下，Canvas 文字整體微幅放大。

const COLORS = {
  bg: '#FAFAF8', surface: '#FFFFFF', surface2: '#F5F4F0', border: '#E8E6E0',
  text: '#1A1A2E', text2: '#4A4A6A', muted: '#8A8AA0', accent: '#C8324A',
  blue: '#2D5FA6', green: '#27795A', solid: '#D4A020', liquid: '#4080E0',
  gas: '#C8324A', gray: '#909090', super: '#9060C0', cross: '#F0A020', hydrogen: '#DFF6D8'
};

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const statusEl = document.getElementById('status');
const btnPlay = document.getElementById('btnPlay');
const btnReset = document.getElementById('btnReset');
const btnRecord = document.getElementById('btnRecord');
const btnFullscreen = document.getElementById('btnFullscreen');
const btnModeTeach = document.getElementById('btnModeTeach');
const btnModePersonal = document.getElementById('btnModePersonal');
const topbar = document.getElementById('topbar');
const titleMain = document.getElementById('titleMain');
const modeLabel = document.getElementById('modeLabel');
const creatorTag = document.getElementById('creatorTag');
const tabBar = document.getElementById('tab-bar');
const canvasWrap = document.getElementById('canvas-wrap');
const sepMain = document.getElementById('sepMain');
const sepFull = document.getElementById('sepFull');
const tabButtons = Array.from(document.querySelectorAll('.tab-btn'));
let displayMode = 'personal';
let fontScale = 1.0;
let appStarted = false;
let tabBarInTopbar = false;
const isTeach = () => displayMode === 'teaching';

canvas.width = CW * DPR;
canvas.height = CH * DPR;
ctx.setTransform(DPR, 0, 0, DPR, 0, 0);

// 舊版瀏覽器 roundRect 後援；整份教材仍維持純 Vanilla JS。
if (!CanvasRenderingContext2D.prototype.roundRect) {
  CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
    const radius = Math.min(r, Math.abs(w) / 2, Math.abs(h) / 2);
    this.moveTo(x + radius, y);
    this.arcTo(x + w, y, x + w, y + h, radius);
    this.arcTo(x + w, y + h, x, y + h, radius);
    this.arcTo(x, y + h, x, y, radius);
    this.arcTo(x, y, x + w, y, radius);
    this.closePath();
  };
}

function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
function lerp(a, b, t) { return a + (b - a) * t; }
function smoothstep(t) { t = clamp(t, 0, 1); return t * t * (3 - 2 * t); }
function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; }
function jitter(amp) { return (Math.random() - 0.5) * 2 * amp; }

function hexToRgb(hex) {
  const h = hex.replace('#', '').trim();
  return {
    r: parseInt(h.slice(0, 2), 16),
    g: parseInt(h.slice(2, 4), 16),
    b: parseInt(h.slice(4, 6), 16)
  };
}
function rgbToHex(r, g, b) {
  return '#' + [r, g, b].map(v => clamp(Math.round(v), 0, 255).toString(16).padStart(2, '0')).join('');
}
function shade(hex, amount) {
  const c = hexToRgb(hex);
  return rgbToHex(c.r + amount, c.g + amount, c.b + amount);
}
function lerpColor(c1, c2, t) {
  const a = hexToRgb(c1), b = hexToRgb(c2);
  return rgbToHex(lerp(a.r, b.r, t), lerp(a.g, b.g, t), lerp(a.b, b.b, t));
}
function drawBall(px, py, r, color) {
  const g = ctx.createRadialGradient(px - r * 0.28, py - r * 0.28, r * 0.05, px, py, r);
  g.addColorStop(0, '#FFFFFF');
  g.addColorStop(0.35, color);
  g.addColorStop(1, shade(color, -55));
  ctx.beginPath();
  ctx.arc(px, py, r, 0, Math.PI * 2);
  ctx.fillStyle = g;
  ctx.fill();
  ctx.strokeStyle = shade(color, -75);
  ctx.lineWidth = 0.8;
  ctx.stroke();
}
/**
 * 計算簡化水分子幾何（O 大球 + 兩個 H 小球，V 形鍵角 104.5°）。
 * angle 的方向為 H-O-H 夾角的中線；冰晶中會讓 H 端大致朝向相鄰 O 原子。
 */
function getWaterMoleculeAtoms(cx, cy, r, angle = 0) {
  const bondLen = r * 1.55;
  const halfAngle = 52.25 * Math.PI / 180;
  const rH = r * 0.55;
  return {
    o: { x: cx, y: cy, r },
    h1: {
      x: cx + bondLen * Math.sin(-halfAngle + angle),
      y: cy + bondLen * Math.cos(-halfAngle + angle),
      r: rH
    },
    h2: {
      x: cx + bondLen * Math.sin( halfAngle + angle),
      y: cy + bondLen * Math.cos( halfAngle + angle),
      r: rH
    },
    rH
  };
}
/**
 * 繪製簡化水分子（O 大球 + 兩個 H 小球，V 形鍵角 104.5°）
 * cx, cy：分子中心（O 原子位置）
 * r：O 原子半徑
 * angle：分子方向角（弧度）
 */
function drawWaterMolecule(cx, cy, r, angle = 0) {
  const mol = getWaterMoleculeAtoms(cx, cy, r, angle);
  const { o, h1, h2, rH } = mol;

  // O-H 共價鍵先畫在球下方，避免遮住球體光照。
  ctx.save();
  ctx.strokeStyle = 'rgba(180,140,100,0.55)';
  ctx.lineWidth = r * 0.30;
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo(o.x, o.y); ctx.lineTo(h1.x, h1.y);
  ctx.moveTo(o.x, o.y); ctx.lineTo(h2.x, h2.y);
  ctx.stroke();

  // H 原子使用統一的淡綠白色，避免固態轉液態時氫原子變色；O 原子為紅球。
  drawBall(h1.x, h1.y, rH, COLORS.hydrogen);
  drawBall(h2.x, h2.y, rH, COLORS.hydrogen);
  drawBall(o.x, o.y, r, '#D04040');
  ctx.restore();
}

/**
 * 繪製簡化二氧化碳分子（O=C=O 線型分子）。
 * cx, cy：中心 C 原子位置；r：O 原子半徑；angle：分子長軸方向。
 */
function drawCO2Molecule(cx, cy, r, angle = 0) {
  const bondLen = r * 1.82;
  const ox1 = cx + Math.cos(angle) * bondLen;
  const oy1 = cy + Math.sin(angle) * bondLen;
  const ox2 = cx - Math.cos(angle) * bondLen;
  const oy2 = cy - Math.sin(angle) * bondLen;
  const cR = r * 0.66;
  ctx.save();
  ctx.strokeStyle = 'rgba(80,80,92,0.62)';
  ctx.lineWidth = Math.max(1.2, r * 0.32);
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo(ox1, oy1); ctx.lineTo(cx, cy); ctx.lineTo(ox2, oy2);
  ctx.stroke();
  drawBall(ox1, oy1, r, '#D04040');
  drawBall(ox2, oy2, r, '#D04040');
  drawBall(cx, cy, cR, '#5A5A68');
  ctx.restore();
}

function drawHydrogenBond(h, o, oRadius, hRadius, alpha = 1) {
  // 虛線只畫 H···O 的非共價作用，而非 O···O 連線。
  const dx = o.x - h.x, dy = o.y - h.y;
  const dist = Math.hypot(dx, dy) || 1;
  const ux = dx / dist, uy = dy / dist;
  const sx = h.x + ux * hRadius * 0.85;
  const sy = h.y + uy * hRadius * 0.85;
  const ex = o.x - ux * oRadius * 0.92;
  const ey = o.y - uy * oRadius * 0.92;
  ctx.save();
  ctx.globalAlpha = alpha;
  ctx.strokeStyle = 'rgba(45,95,166,0.56)';
  ctx.lineWidth = 1.25;
  ctx.lineCap = 'round';
  ctx.setLineDash([2.2, 4.4]);
  ctx.beginPath();
  ctx.moveTo(sx, sy);
  ctx.lineTo(ex, ey);
  ctx.stroke();
  ctx.restore();
}
function closestHydrogenToO(mol, o) {
  const d1 = Math.hypot(mol.h1.x - o.x, mol.h1.y - o.y);
  const d2 = Math.hypot(mol.h2.x - o.x, mol.h2.y - o.y);
  return d1 <= d2 ? mol.h1 : mol.h2;
}
const WATER_BOND_ANGLE = 104.5 * Math.PI / 180;
function angleDistance(a, b) {
  return Math.abs(Math.atan2(Math.sin(a - b), Math.cos(a - b)));
}
function pickIceFreeAngle(donorAngle, outwardAngle) {
  // 在保持 H-O-H 約 104.5° 的前提下，選擇較朝外的第二個 O-H 鍵。
  const a1 = donorAngle + WATER_BOND_ANGLE;
  const a2 = donorAngle - WATER_BOND_ANGLE;
  return angleDistance(a1, outwardAngle) <= angleDistance(a2, outwardAngle) ? a1 : a2;
}
function getIceMoleculeAtoms(cx, cy, r, donorAngle, outwardAngle, rot = 0) {
  // 固態冰晶專用分子：一個 H 指向鄰近 O 形成 O-H···O，另一個 H 朝六邊形外側。
  const bondLen = r * 1.72;
  const rH = r * 0.56;
  const dA = donorAngle + rot;
  const fA = pickIceFreeAngle(donorAngle, outwardAngle) + rot;
  return {
    o: { x: cx, y: cy, r },
    hBond: { x: cx + Math.cos(dA) * bondLen, y: cy + Math.sin(dA) * bondLen, r: rH },
    hFree: { x: cx + Math.cos(fA) * bondLen, y: cy + Math.sin(fA) * bondLen, r: rH },
    rH
  };
}
function getIceMoleculeAtomsFromPoint(pt, r, rot = 0) {
  const donorAngle = Number.isFinite(pt.donorAngle) ? pt.donorAngle : (Number.isFinite(pt.phase) ? pt.phase : -Math.PI / 2);
  const outwardAngle = Number.isFinite(pt.outAngle) ? pt.outAngle : donorAngle + WATER_BOND_ANGLE;
  return getIceMoleculeAtoms(pt.x, pt.y, r, donorAngle, outwardAngle, rot);
}
function drawIceWaterMolecule(cx, cy, r, donorAngle, outwardAngle, rot = 0) {
  const mol = getIceMoleculeAtoms(cx, cy, r, donorAngle, outwardAngle, rot);
  const { o, hBond, hFree, rH } = mol;
  ctx.save();
  // 以深色共價鍵與淡綠白 H 原子模擬參考圖；虛線氫鍵另由 drawHydrogenBond 繪製。
  ctx.strokeStyle = 'rgba(48,48,54,0.72)';
  ctx.lineWidth = Math.max(1.1, r * 0.30);
  ctx.lineCap = 'round';
  ctx.beginPath();
  ctx.moveTo(o.x, o.y); ctx.lineTo(hBond.x, hBond.y);
  ctx.moveTo(o.x, o.y); ctx.lineTo(hFree.x, hFree.y);
  ctx.stroke();
  drawBall(hBond.x, hBond.y, rH, COLORS.hydrogen);
  drawBall(hFree.x, hFree.y, rH, COLORS.hydrogen);
  drawBall(o.x, o.y, r, '#D04040');
  ctx.restore();
  return mol;
}
function drawIceWaterMoleculeFromPoint(pt, r, rot = 0) {
  const donorAngle = Number.isFinite(pt.donorAngle) ? pt.donorAngle : (Number.isFinite(pt.phase) ? pt.phase : -Math.PI / 2);
  const outwardAngle = Number.isFinite(pt.outAngle) ? pt.outAngle : donorAngle + WATER_BOND_ANGLE;
  return drawIceWaterMolecule(pt.x, pt.y, r, donorAngle, outwardAngle, rot);
}
function drawIceHexagonCluster(cx, cy, hexR, molR, nowSec) {
  // 參考圖式：六個 H₂O 以 O-H···O 串成六邊形氫鍵環；紅色為 O，淡綠白色為 H。
  const pts = [];
  for (let i = 0; i < 6; i++) {
    const a = -Math.PI / 2 + i * Math.PI / 3;
    pts.push({
      x: cx + Math.cos(a) * hexR + Math.sin(nowSec * 7.2 + i * 1.31) * 0.55,
      y: cy + Math.sin(a) * hexR + Math.cos(nowSec * 7.2 + i * 1.67) * 0.55,
      outAngle: a,
      donorAngle: 0
    });
  }
  for (let i = 0; i < 6; i++) {
    const next = pts[(i + 1) % 6];
    pts[i].donorAngle = Math.atan2(next.y - pts[i].y, next.x - pts[i].x);
    pts[i].outAngle = Math.atan2(pts[i].y - cy, pts[i].x - cx);
  }
  const mols = pts.map((pt, i) => getIceMoleculeAtomsFromPoint(pt, molR, Math.sin(nowSec * 2.2 + i) * 0.018));
  for (let i = 0; i < 6; i++) {
    const j = (i + 1) % 6;
    drawHydrogenBond(mols[i].hBond, mols[j].o, molR, mols[i].rH, 1);
  }
  pts.forEach((pt, i) => drawIceWaterMoleculeFromPoint(pt, molR, Math.sin(nowSec * 2.2 + i) * 0.018));
}
function setFont(size, weight = '600') {
  const displaySize = Math.max(13, (size + CANVAS_FONT_BUMP) * fontScale);
  ctx.font = `${weight} ${displaySize}px ${FONT}`;
}
function drawPanel(x, y, w, h, title) {
  ctx.save();
  ctx.beginPath();
  ctx.roundRect(x, y, w, h, 12);
  ctx.fillStyle = COLORS.surface;
  ctx.fill();
  ctx.strokeStyle = COLORS.border;
  ctx.lineWidth = 1;
  ctx.stroke();
  if (title) {
    setFont(22, '800');
    ctx.fillStyle = COLORS.text;
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText(title, x + 20, y + 28);
  }
  ctx.restore();
}
function drawBubble(x, y, w, h, lines, color) {
  const arr = Array.isArray(lines) ? lines : String(lines).split('\n');
  setFont(isTeach() ? 17 : 14, '800');
  const lineH = isTeach() ? 22 : 18;
  const padX = isTeach() ? 24 : 18;
  const padY = isTeach() ? 16 : 12;
  const textW = Math.max(...arr.map(line => ctx.measureText(line).width));
  const actualW = Math.max(w, textW + padX * 2);
  const actualH = Math.max(h, arr.length * lineH + padY * 2);
  const bx = x - (actualW - w) / 2;
  const by = y - (actualH - h) / 2;
  ctx.save();
  ctx.beginPath();
  ctx.roundRect(bx, by, actualW, actualH, 8);
  ctx.fillStyle = isTeach()
    ? (color === COLORS.super ? 'rgba(245,238,252,0.96)' : 'rgba(238,248,242,0.96)')
    : (color === COLORS.super ? 'rgba(144,96,192,0.10)' : 'rgba(39,121,90,0.10)');
  ctx.fill();
  ctx.strokeStyle = color;
  ctx.lineWidth = isTeach() ? 1.8 : 1;
  ctx.stroke();
  ctx.fillStyle = color;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  arr.forEach((line, i) => ctx.fillText(line, bx + actualW / 2, by + actualH / 2 + (i - (arr.length - 1) / 2) * lineH));
  ctx.restore();
}
function drawTeachPillText(text, x, y, color) {
  if (!isTeach()) {
    ctx.fillText(text, x, y);
    return;
  }
  const metrics = ctx.measureText(text);
  const h = 26;
  ctx.save();
  ctx.beginPath();
  ctx.roundRect(x - metrics.width / 2 - 10, y - h / 2, metrics.width + 20, h, 13);
  ctx.fillStyle = 'rgba(255,255,255,0.88)';
  ctx.fill();
  ctx.strokeStyle = color;
  ctx.lineWidth = 1;
  ctx.stroke();
  ctx.fillStyle = color;
  ctx.fillText(text, x, y);
  ctx.restore();
}
function drawHighlightedText(text, x, y, color, align = 'left') {
  ctx.save();
  const metrics = ctx.measureText(text);
  const padX = 8;
  const h = 24;
  let bx = x - padX;
  if (align === 'center') bx = x - metrics.width / 2 - padX;
  if (align === 'right') bx = x - metrics.width - padX;
  ctx.beginPath();
  ctx.roundRect(bx, y - h / 2, metrics.width + padX * 2, h, 7);
  ctx.fillStyle = 'rgba(255,235,92,0.55)';
  ctx.fill();
  ctx.strokeStyle = 'rgba(224,176,24,0.72)';
  ctx.lineWidth = 1;
  ctx.stroke();
  ctx.fillStyle = color;
  ctx.textAlign = align;
  ctx.textBaseline = 'middle';
  ctx.fillText(text, x, y);
  ctx.restore();
}
function drawArrow(x1, y1, x2, y2, color, dashed = false) {
  ctx.save();
  ctx.strokeStyle = color;
  ctx.fillStyle = color;
  ctx.lineWidth = 2;
  if (dashed) ctx.setLineDash([5, 5]);
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  ctx.setLineDash([]);
  const ang = Math.atan2(y2 - y1, x2 - x1);
  ctx.beginPath();
  ctx.moveTo(x2, y2);
  ctx.lineTo(x2 - 8 * Math.cos(ang - 0.45), y2 - 8 * Math.sin(ang - 0.45));
  ctx.lineTo(x2 - 8 * Math.cos(ang + 0.45), y2 - 8 * Math.sin(ang + 0.45));
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}
function seededRandom(seed) {
  let s = seed >>> 0;
  return function() {
    s = (s * 1664525 + 1013904223) >>> 0;
    return s / 4294967296;
  };
}
function bezierPoint(a, c1, c2, b, t) {
  const u = 1 - t;
  return {
    x: u * u * u * a.x + 3 * u * u * t * c1.x + 3 * u * t * t * c2.x + t * t * t * b.x,
    y: u * u * u * a.y + 3 * u * u * t * c1.y + 3 * u * t * t * c2.y + t * t * t * b.y
  };
}
function buildHexIceLattice(centerX, centerY, radius, rand, rows = 3, cols = 3) {
  // 以參考圖的六邊形冰晶為基礎：O 原子在六邊形頂點，H 原子一端形成 O-H···O 氫鍵環，另一端朝外。
  const points = [];
  const cells = [];
  const cellCenters = [];
  const pointMap = new Map();
  const hbondMap = new Map();
  const keyOf = (x, y) => `${Math.round(x * 10)},${Math.round(y * 10)}`;
  const addPoint = (x, y) => {
    const key = keyOf(x, y);
    if (!pointMap.has(key)) {
      pointMap.set(key, points.length);
      points.push({ x, y, donorTo: null, cellCenter: null });
    }
    return pointMap.get(key);
  };
  const addHbond = (donor, acceptor) => {
    const key = donor < acceptor ? `${donor}-${acceptor}` : `${acceptor}-${donor}`;
    if (!hbondMap.has(key)) hbondMap.set(key, [donor, acceptor]);
  };
  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
      const cellX = (col + 0.5 * (row % 2)) * Math.sqrt(3) * radius;
      const cellY = row * 1.5 * radius;
      const center = { x: cellX, y: cellY };
      const cell = [];
      for (let k = 0; k < 6; k++) {
        // 轉成尖角朝上的六邊形，對應參考圖的冰晶環。
        const a = -Math.PI / 2 + k * Math.PI / 3;
        cell.push(addPoint(cellX + Math.cos(a) * radius, cellY + Math.sin(a) * radius));
      }
      cells.push(cell);
      cellCenters.push(center);
      for (let k = 0; k < 6; k++) {
        const donor = cell[k];
        const acceptor = cell[(k + 1) % 6];
        addHbond(donor, acceptor);
        if (points[donor].donorTo === null) {
          points[donor].donorTo = acceptor;
          points[donor].cellCenter = center;
        }
      }
    }
  }
  const minX = Math.min(...points.map(pt => pt.x));
  const maxX = Math.max(...points.map(pt => pt.x));
  const minY = Math.min(...points.map(pt => pt.y));
  const maxY = Math.max(...points.map(pt => pt.y));
  const dx = centerX - (minX + maxX) / 2;
  const dy = centerY - (minY + maxY) / 2;
  points.forEach((pt, i) => {
    pt.x += dx;
    pt.y += dy;
    if (pt.cellCenter) pt.cellCenter = { x: pt.cellCenter.x + dx, y: pt.cellCenter.y + dy };
    pt.row = Math.round((pt.y - (minY + dy)) / (radius * 0.75));
    pt.col = i;
  });
  cellCenters.forEach(c => { c.x += dx; c.y += dy; });
  points.forEach((pt, i) => {
    let donorTo = pt.donorTo;
    if (donorTo === null || !points[donorTo]) donorTo = (i + 1) % points.length;
    const target = points[donorTo];
    const cc = pt.cellCenter || { x: centerX, y: centerY };
    pt.donorTo = donorTo;
    pt.donorAngle = Math.atan2(target.y - pt.y, target.x - pt.x) + (rand() - 0.5) * 0.025;
    pt.outAngle = Math.atan2(pt.y - cc.y, pt.x - cc.x);
    pt.phase = pt.donorAngle;
  });
  const links = Array.from(hbondMap.values());
  return { points, cells, links, hbonds: links, cellCenters };
}

function resizeCanvas() {
  const wrap = document.getElementById('canvas-wrap');
  const ratio = Math.min(wrap.clientWidth / CW, wrap.clientHeight / CH, 1.6);
  canvas.style.width = (CW * ratio) + 'px';
  canvas.style.height = (CH * ratio) + 'px';
}
window.addEventListener('resize', resizeCanvas);

// ===== Tab 1：加熱曲線 × 微觀排列 =====
const TAB1_CURVE_MS = 11200;
const TAB1_TOTAL_MS = 12000;
const TAB1_ANNOTATION_MS = 800;
const curvePoints = [];

function curveTemp(time) {
  if (time <= 20) return -20 + time;
  if (time <= 40) return 0;
  if (time <= 70) return (time - 40) / 30 * 100;
  if (time <= 90) return 100;
  return 100 + (time - 90) / 10 * 20;
}
for (let i = 0; i <= 600; i++) {
  const t = i / 600 * 100;
  curvePoints.push({ t, T: curveTemp(t) });
}

const tab1 = {
  elapsed: 0,
  playing: false,
  ended: false,
  solidBase: [],
  solidLinks: [],
  iceHexCells: [],
  solidCenter: { x: 560, y: 176 },
  liquidCenter: { x: 600, y: 210 },
  liquidParticles: [],
  gasParticles: [],
  molecules: [],
  liquidTargets: [],
  gasTargets: [],
  meltControls: [],
  vaporControls: [],
  vaporStart: null
};

function initTab1Particles() {
  const rand = seededRandom(20260427);
  const ice = buildHexIceLattice(560, 176, 44, rand);
  tab1.solidBase = ice.points;
  tab1.solidLinks = ice.links;
  tab1.iceHexCells = ice.cells;
  tab1.solidCenter = {
    x: tab1.solidBase.reduce((sum, p) => sum + p.x, 0) / tab1.solidBase.length,
    y: tab1.solidBase.reduce((sum, p) => sum + p.y, 0) / tab1.solidBase.length
  };
  const center = tab1.solidCenter;
  const LIQUID_SCALE_X = 1.72;
  const LIQUID_SCALE_Y = 1.52;
  const GAS_SCALE_X = 3.18;
  const GAS_SCALE_Y = 2.18;
  tab1.liquidTargets = [];
  tab1.liquidParticles = [];
  tab1.gasTargets = [];
  tab1.gasParticles = [];
  tab1.solidBase.forEach(s => {
    const lx = clamp(center.x + (s.x - center.x) * LIQUID_SCALE_X + (rand() - 0.5) * 22, 205, 985);
    const ly = clamp(center.y + (s.y - center.y) * LIQUID_SCALE_Y + (rand() - 0.5) * 20, 112, 306);
    const la = rand() * Math.PI * 2;
    const ls = 0.30 + rand() * 0.30;
    tab1.liquidTargets.push({ x: lx, y: ly });
    tab1.liquidParticles.push({ x: lx, y: ly, vx: Math.cos(la) * ls, vy: Math.sin(la) * ls, phase: rand() * Math.PI * 2 });

    const gx = clamp(center.x + (s.x - center.x) * GAS_SCALE_X + (rand() - 0.5) * 54, 88, 1138);
    const gy = clamp(center.y + (s.y - center.y) * GAS_SCALE_Y + (rand() - 0.5) * 44, 62, 318);
    const ga = rand() * Math.PI * 2;
    const gs = 2.00 + rand() * 2.20;
    tab1.gasTargets.push({ x: gx, y: gy });
    tab1.gasParticles.push({ x: gx, y: gy, vx: Math.cos(ga) * gs, vy: Math.sin(ga) * gs, phase: rand() * Math.PI * 2 });
  });
  tab1.liquidCenter = {
    x: tab1.liquidTargets.reduce((sum, p) => sum + p.x, 0) / tab1.liquidTargets.length,
    y: tab1.liquidTargets.reduce((sum, p) => sum + p.y, 0) / tab1.liquidTargets.length
  };
  function pathControls(start, end, wiggle) {
    const dx = end.x - start.x;
    const dy = end.y - start.y;
    const len = Math.hypot(dx, dy) || 1;
    const nx = -dy / len;
    const ny = dx / len;
    const offset = (rand() - 0.5) * wiggle;
    return {
      c1: { x: lerp(start.x, end.x, 0.33) + nx * offset, y: lerp(start.y, end.y, 0.33) + ny * offset },
      c2: { x: lerp(start.x, end.x, 0.66) - nx * offset * 0.45, y: lerp(start.y, end.y, 0.66) - ny * offset * 0.45 }
    };
  }
  tab1.meltControls = tab1.solidBase.map((s, i) => {
    return pathControls(s, tab1.liquidTargets[i % tab1.liquidTargets.length], 16);
  });
  tab1.vaporControls = tab1.liquidTargets.map((s, i) => {
    return pathControls(s, tab1.gasTargets[i % tab1.gasTargets.length], 22);
  });
  const minSolidX = Math.min(...tab1.solidBase.map(p => p.x));
  const maxSolidX = Math.max(...tab1.solidBase.map(p => p.x));
  tab1.molecules = tab1.solidBase.map((s, i) => {
    const spreadOrder = clamp((s.x - minSolidX) / Math.max(1, maxSolidX - minSolidX) * 0.72 + rand() * 0.24, 0, 1);
    return {
      solidPos: { ...s, phase: s.phase },
      liquidPos: tab1.liquidTargets[i],
      gasPos: tab1.gasTargets[i],
      meltControl: tab1.meltControls[i],
      vaporControl: tab1.vaporControls[i],
      meltOrder: spreadOrder,
      solidRotSeed: i,
      phase: s.phase
    };
  });
  tab1.vaporStart = null;
}
function resetTab1(autoPlay = false) {
  tab1.elapsed = 0;
  tab1.playing = autoPlay;
  tab1.ended = false;
  initTab1Particles();
  updateControls();
  drawCurrentFrame(0);
}
function tab1Progress() { return clamp(tab1.elapsed / TAB1_CURVE_MS, 0, 1); }
function updateLiquidParticles(dt) {
  const minX = 205, maxX = 985, minY = 108, maxY = 310;
  tab1.liquidParticles.forEach(p => {
    p.x += p.vx * 60 * dt;
    p.y += p.vy * 60 * dt;
    p.phase = ((p.phase || 0) + dt * 0.55) % (Math.PI * 2);
    if (p.x < minX || p.x > maxX) { p.vx *= -1; p.x = clamp(p.x, minX, maxX); }
    if (p.y < minY || p.y > maxY) { p.vy *= -1; p.y = clamp(p.y, minY, maxY); }
  });
}
function updateGasParticles(dt) {
  const minX = 88, maxX = 1138, minY = 58, maxY = 320;
  tab1.gasParticles.forEach(p => {
    p.x += p.vx * 60 * dt;
    p.y += p.vy * 60 * dt;
    p.phase = ((p.phase || 0) + dt * 2.4) % (Math.PI * 2);
    if (p.x < minX || p.x > maxX) { p.vx *= -1; p.x = clamp(p.x, minX, maxX); }
    if (p.y < minY || p.y > maxY) { p.vy *= -1; p.y = clamp(p.y, minY, maxY); }
  });
}
function transformAroundCenter(pos, center, scale = 1, dx = 0, dy = 0) {
  return {
    x: center.x + (pos.x - center.x) * scale + dx,
    y: center.y + (pos.y - center.y) * scale + dy
  };
}
function solidDrawPosition(p, timeSec) {
  const amp = 2;
  return {
    x: p.x + Math.sin(timeSec * Math.PI * 2 * 1.5 + p.phase) * amp,
    y: p.y + Math.cos(timeSec * Math.PI * 2 * 1.5 + p.phase * 0.7) * amp
  };
}
function solidDrawPositionTransformed(p, timeSec, options = {}) {
  const center = tab1.solidCenter || { x: 560, y: 176 };
  const pos = solidDrawPosition(p, timeSec);
  return transformAroundCenter(pos, center, options.scale ?? 1, options.dx ?? 0, options.dy ?? 0);
}
function liquidDrawPositionTransformed(q, u) {
  return q;
}
function solidTransformedPoints(timeSec, options = {}) {
  const positions = tab1.solidBase.map((p, i) => {
    const pos = solidDrawPositionTransformed(p, timeSec, options);
    return { ...p, x: pos.x, y: pos.y, rot: Math.sin(timeSec * 1.4 + i) * 0.012 };
  });
  positions.forEach((p, i) => {
    const target = positions[tab1.solidBase[i].donorTo];
    if (target) p.donorAngle = Math.atan2(target.y - p.y, target.x - p.x);
  });
  return positions;
}
function drawSolidLinks(alpha, timeSec, options = {}, positions = null) {
  // 固態冰晶：每條虛線從「共價鍵上的 H」指向鄰近 O，明確呈現 O-H···O 氫鍵環。
  const molR = options.molR || 13;
  const pts = positions || solidTransformedPoints(timeSec, options);
  const mols = pts.map(p => getIceMoleculeAtomsFromPoint(p, molR, p.rot || 0));
  tab1.solidLinks.forEach(([donor, acceptor]) => {
    const dm = mols[donor];
    const am = mols[acceptor];
    if (!dm || !am) return;
    drawHydrogenBond(dm.hBond, am.o, molR, dm.rH, alpha);
  });
}
function drawSolidCluster(alpha, timeSec, options = {}) {
  const molR = options.molR || 13;
  const pts = solidTransformedPoints(timeSec, options);
  drawSolidLinks(alpha, timeSec, options, pts);
  pts.forEach((p, i) => {
    ctx.save();
    ctx.globalAlpha = alpha;
    drawIceWaterMoleculeFromPoint(p, molR, p.rot || Math.sin(timeSec * 1.4 + i) * 0.012);
    ctx.restore();
  });
}
function drawHydrogenBondLegend(alpha) {
  if (isTeach()) return;
  ctx.save();
  ctx.globalAlpha = alpha;
  setFont(14, '800');
  ctx.fillStyle = COLORS.blue;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText('虛線：氫鍵（H···O）', 928, 86);
  ctx.restore();
}
function drawCoexistenceBadge(text, color) {
  ctx.save();
  ctx.beginPath();
  ctx.roundRect(540, 292, 200, 38, 19);
  ctx.fillStyle = 'rgba(255,255,255,0.90)';
  ctx.fill();
  ctx.strokeStyle = color;
  ctx.lineWidth = 1.2;
  ctx.stroke();
  setFont(16, '800');
  ctx.fillStyle = color;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(text, 640, 311);
  ctx.restore();
}
function drawStatusLabel(progress) {
  const x = CW - 74, y = 180;
  ctx.save();
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  setFont(20, '800');
  function label(text, color, alpha) {
    ctx.globalAlpha = alpha;
    ctx.beginPath();
    ctx.roundRect(x - 58, y - 28, 116, 56, 12);
    ctx.fillStyle = 'rgba(255,255,255,0.88)';
    ctx.fill();
    ctx.strokeStyle = color;
    ctx.lineWidth = 1.4;
    ctx.stroke();
    ctx.fillStyle = color;
    ctx.fillText(text, x, y);
  }
  if (progress < 0.2) label('固態', COLORS.solid, 1);
  else if (progress < 0.4) label('固液共存', COLORS.green, 1);
  else if (progress < 0.7) label('液態', COLORS.liquid, 1);
  else if (progress < 0.9) label('液氣共存', COLORS.accent, 1);
  else label('氣態', COLORS.gas, 1);
  ctx.restore();
}
function tab1MeltLocalProgress(u, molecule) {
  return smoothstep((u - molecule.meltOrder * 0.70) / 0.30);
}
function tab1MoleculeSolidPoint(molecule, timeSec, options = {}) {
  const p = solidDrawPositionTransformed(molecule.solidPos, timeSec, options);
  return {
    ...molecule.solidPos,
    x: p.x,
    y: p.y,
    rot: Math.sin(timeSec * 1.4 + molecule.solidRotSeed) * 0.012
  };
}
function tab1MoleculeMeltPoint(molecule, index, u, timeSec) {
  const solidOptions = { dx: 0, dy: 0, scale: 1 };
  const localU = tab1MeltLocalProgress(u, molecule);
  const start = tab1MoleculeSolidPoint(molecule, timeSec, solidOptions);
  const q = tab1.liquidParticles[index] || molecule.liquidPos;
  const end = liquidDrawPositionTransformed(q, u);
  const center = tab1.solidCenter || { x: 560, y: 176 };
  const c1 = transformAroundCenter(molecule.meltControl.c1, center, solidOptions.scale, solidOptions.dx, solidOptions.dy);
  const c2 = molecule.meltControl.c2;
  const pos = bezierPoint(start, c1, c2, end, localU);
  return {
    ...molecule.solidPos,
    x: pos.x,
    y: pos.y,
    rot: lerp(start.rot || 0, q.phase || molecule.phase, localU),
    liquidU: localU
  };
}
function tab1MoleculeVaporPoint(molecule, index, u) {
  const localU = smoothstep((u - molecule.meltOrder * 0.32) / 0.62);
  const liquid = tab1.liquidParticles[index] || molecule.liquidPos;
  const gas = tab1.gasParticles[index] || molecule.gasPos;
  const pos = bezierPoint(liquid, molecule.vaporControl.c1, molecule.vaporControl.c2, gas, localU);
  return {
    x: pos.x,
    y: pos.y,
    rot: lerp(liquid.phase || molecule.phase, gas.phase || molecule.phase, localU),
    gasU: localU
  };
}
function drawTab1Particles(dt) {
  const p = tab1Progress();
  const timeSec = tab1.elapsed / 1000;
  ctx.save();
  ctx.beginPath();
  ctx.rect(18, 50, 1244, 305);
  ctx.clip();

  // 輕微能量流動背景，協助區分三段行為。
  const energy = p;
  const heatGrad = ctx.createLinearGradient(160, 320, 1100, 65);
  heatGrad.addColorStop(0, `rgba(212,160,32,${0.05 + 0.05 * (1 - energy)})`);
  heatGrad.addColorStop(0.55, `rgba(64,128,224,${0.04 + 0.05 * energy})`);
  heatGrad.addColorStop(1, `rgba(200,50,74,${0.04 + 0.10 * energy})`);
  ctx.fillStyle = heatGrad;
  ctx.fillRect(18, 50, 1244, 305);

  if (p < 0.2) {
    drawSolidCluster(1, timeSec);
    drawHydrogenBondLegend(1);
  } else if (p < 0.4) {
    const u = smoothstep((p - 0.2) / 0.2);
    if (tab1.playing) updateLiquidParticles(dt * (0.35 + 0.65 * u));
    drawSolidLinks(1 - u, timeSec, { molR: 13 });
    tab1.molecules.forEach((molecule, i) => {
      const pos = tab1MoleculeMeltPoint(molecule, i, u, timeSec);
      const radius = lerp(13.5, 14, pos.liquidU);
      if (pos.liquidU < 0.55) drawIceWaterMoleculeFromPoint(pos, radius, pos.rot || 0);
      else drawWaterMolecule(pos.x, pos.y, radius, pos.rot || 0);
    });
    drawHydrogenBondLegend(1 - u);
    drawCoexistenceBadge('熔點：固液共存', COLORS.green);
  } else if (p < 0.7) {
    if (tab1.playing) updateLiquidParticles(dt);
    tab1.liquidParticles.forEach(q => drawWaterMolecule(q.x, q.y, 14, q.phase || 0));
  } else if (p < 0.9) {
    const u = smoothstep((p - 0.7) / 0.2);
    if (tab1.playing) {
      updateLiquidParticles(dt * (1 - 0.25 * u));
      updateGasParticles(dt * (0.55 + 0.75 * u));
    }
    tab1.molecules.forEach((molecule, i) => {
      const pos = tab1MoleculeVaporPoint(molecule, i, u);
      drawWaterMolecule(pos.x, pos.y, lerp(14, 11, pos.gasU), pos.rot || 0);
    });
    drawCoexistenceBadge('沸點：液氣共存', COLORS.accent);
  } else {
    if (tab1.playing || tab1.ended) updateGasParticles(dt);
    tab1.gasParticles.forEach(q => drawWaterMolecule(q.x, q.y, 11, q.phase || 0));
  }
  ctx.restore();
  drawStatusLabel(p);
}
function heatX(t) { return 120 + t / 100 * 1100; }
function heatY(T) { return 660 - ((T + 20) / 150) * 260; }
function drawHeatingAxes() {
  const ox = 120, oy = 660, w = 1100, h = 260;
  ctx.save();
  ctx.strokeStyle = COLORS.border;
  ctx.lineWidth = 0.5;
  ctx.setLineDash([3, 3]);
  for (let i = 0; i <= 5; i++) {
    const x = ox + i / 5 * w;
    ctx.beginPath(); ctx.moveTo(x, oy); ctx.lineTo(x, oy - h); ctx.stroke();
  }
  for (let T = -20; T <= 120; T += 20) {
    const y = heatY(T);
    ctx.beginPath(); ctx.moveTo(ox, y); ctx.lineTo(ox + w, y); ctx.stroke();
  }
  ctx.setLineDash([]);
  ctx.strokeStyle = COLORS.text2;
  ctx.lineWidth = 1.4;
  ctx.beginPath();
  ctx.moveTo(ox, oy - h - 4); ctx.lineTo(ox, oy + 2); ctx.lineTo(ox + w + 6, oy + 2);
  ctx.stroke();
  ctx.fillStyle = COLORS.text2;
  setFont(isTeach() ? 18 : 13, '600');
  ctx.textAlign = 'right';
  ctx.textBaseline = 'middle';
  for (let T = -20; T <= 120; T += 20) ctx.fillText(String(T), ox - 10, heatY(T));
  setFont(isTeach() ? 20 : 15, '800');
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  ctx.fillText('加熱時間', ox + w / 2, oy + 22);
  ctx.save();
  ctx.translate(52, oy - h / 2);
  ctx.rotate(-Math.PI / 2);
  ctx.textBaseline = 'middle';
  ctx.fillText('溫度 T（°C）', 0, 0);
  ctx.restore();
  if (!isTeach()) {
    setFont(13, '600');
    ctx.fillStyle = COLORS.muted;
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    // 灰色補充說明移至圖表右側，避免擠在標題旁。
    ctx.fillText('概念化水的加熱曲線（非精準實驗曲線）', ox + w, 386);
  }
  ctx.restore();
}
function drawHeatingCurve() {
  const p = tab1Progress();
  const maxIndex = Math.floor(p * (curvePoints.length - 1));
  ctx.save();
  ctx.strokeStyle = COLORS.accent;
  ctx.lineWidth = 3;
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';
  ctx.beginPath();
  for (let i = 0; i <= maxIndex; i++) {
    const pt = curvePoints[i];
    const x = heatX(pt.t), y = heatY(pt.T);
    if (i === 0) ctx.moveTo(x, y);
    else ctx.lineTo(x, y);
  }
  ctx.stroke();
  if (p >= 1) {
    const alpha = clamp((tab1.elapsed - TAB1_CURVE_MS) / TAB1_ANNOTATION_MS, 0, 1);
    ctx.globalAlpha = alpha;
    [[30, 0, '熔點 0°C'], [80, 100, '沸點 100°C']].forEach(([t, temp, label]) => {
      const x = heatX(t), y = heatY(temp);
      ctx.strokeStyle = COLORS.blue;
      ctx.lineWidth = 1.5;
      ctx.setLineDash([5, 4]);
      // 熔點與沸點是溫度標示，虛線水平指向縱軸，而非向下指向加熱時間軸。
      ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(120, y); ctx.stroke();
      ctx.setLineDash([]);
      // 標籤置於水平虛線上方，避免文字被標示線遮住。
      drawBubble(138, y - 56, 126, 36, label, COLORS.green);
    });
  }
  ctx.restore();
}
function drawTab1(dt) {
  ctx.clearRect(0, 0, CW, CH);
  drawPanel(18, 16, 1244, 316, '微觀粒子排列');
  drawPanel(18, 356, 1244, 350, '加熱曲線');
  ctx.save();
  ctx.strokeStyle = COLORS.border;
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(0, 340);
  ctx.lineTo(CW, 340);
  ctx.stroke();
  ctx.restore();
  drawTab1Particles(dt);
  drawHeatingAxes();
  drawHeatingCurve();
}
function tab1PhaseDescription() {
  const p = tab1Progress();
  if (p < 0.2) return '固態 — 水分子以 H···O 氫鍵形成六邊形冰晶排列，溫度持續上升';
  if (p < 0.4) return '熔化中 — 固態水與液態水共存，吸熱但溫度不變（熔點）';
  if (p < 0.7) return '液態 — 粒子流動，溫度持續上升';
  if (p < 0.9) return '汽化中 — 液態水與氣態水共存，吸熱但溫度不變（沸點）';
  return '氣態 — 粒子高速自由運動，溫度持續上升';
}
function tab1StatusText() {
  if (!tab1.playing && tab1.elapsed === 0) return '按下播放開始觀察物質三態的微觀與巨觀變化';
  if (tab1.elapsed >= TAB1_TOTAL_MS) return '播放完畢 — 熔點與沸點已沿縱軸標示於曲線上';
  const desc = tab1PhaseDescription();
  if (!tab1.playing) return `已暫停 — ${desc}`;
  return desc;
}

// ===== Tab 2：水的相圖 =====
const TP = { T: 0.01, P: 0.00603 };
const CP = { T: 374.1, P: 217.7 };
/* oy 由 680 上移至 660：原設定使 X 軸標題底部達 729px，超出畫布高度 720px 而被裁切 */
const phaseChart = { x: 550, y: 230, w: 680, h: 430, ox: 550, oy: 660 };
const PHASE_P_MIN = 0.001;
const PHASE_P_MAX = 250;
const PHASE_LOG_MIN = Math.log10(PHASE_P_MIN);
const PHASE_LOG_MAX = Math.log10(PHASE_P_MAX);
const tab2 = {
  T: 25,
  pSlider: (Math.log10(1) + 3) / 5.4,
  hasInteracted: false,
  activeSlider: null,
  draggingState: false,
  lastPhase: '',
  phaseChangedAt: 0,
  iceMicroBase: [], iceMicroLinks: [], liquidMicro: [], gasMicro: [], superMicro: [], vaporDots: []
};
function pressureFromSlider(v) { return Math.min(PHASE_P_MAX, Math.pow(10, v * 5.4 - 3)); }
function sliderFromPressure(p) { return clamp((Math.log10(p) + 3) / 5.4, 0, 1); }
function currentPressure() { return pressureFromSlider(tab2.pSlider); }
function formatPressure(p) {
  if (p < 0.01) return p.toFixed(4);
  if (p < 0.1) return p.toFixed(3);
  if (p < 10) return p.toFixed(2);
  return p.toFixed(1);
}
function pToY(p) {
  const logP = Math.log10(clamp(p, PHASE_P_MIN, PHASE_P_MAX));
  const f = (logP - PHASE_LOG_MIN) / (PHASE_LOG_MAX - PHASE_LOG_MIN);
  return clamp(f * phaseChart.h, 0, phaseChart.h);
}
function yToP(y) {
  const f = clamp(y / phaseChart.h, 0, 1);
  return Math.pow(10, PHASE_LOG_MIN + f * (PHASE_LOG_MAX - PHASE_LOG_MIN));
}
function tToX(T) { return phaseChart.ox + (T + 50) / 500 * phaseChart.w; }
function pToGraphY(p) { return phaseChart.oy - pToY(p); }
function phaseChartXToT(x) {
  return clamp((x - phaseChart.ox) / phaseChart.w * 500 - 50, -50, 450);
}
function phaseChartYToP(y) {
  return clamp(yToP(phaseChart.oy - y), PHASE_P_MIN, PHASE_P_MAX);
}
function vaporPressure(T) {
  // 單一分段拋物插值，從三相點平滑延伸至臨界點，消除 100°C 折角。
  if (T <= TP.T) return TP.P;
  const u = clamp((T - TP.T) / (CP.T - TP.T), 0, 1);
  // 以 Hermite 多項式確保曲線在三相點與臨界點兩端切線連續：
  // 控制點：log(TP.P) → 0 → log(CP.P)，採用加權插值令100°C≈1 atm。
  const logTp = Math.log10(TP.P);
  const logCp = Math.log10(CP.P);
  // 使用三次 Bézier 對 logP 插值。控制點權重 0.79 / 0.8141 由 NIST 飽和蒸氣壓
  // 資料最小平方擬合求得，並加上硬約束使 100°C 恰為 1.000 atm（水的正常沸點）。
  // 相對誤差在 0.01~374.1°C 全區間皆 <10%。
  const p0 = logTp, p1 = lerp(logTp, logCp, 0.79), p2 = lerp(logTp, logCp, 0.8141), p3 = logCp;
  const t = u;
  const logP = (1-t)*(1-t)*(1-t)*p0 + 3*(1-t)*(1-t)*t*p1 + 3*(1-t)*t*t*p2 + t*t*t*p3;
  return Math.pow(10, logP);
}
function sublimationPressure(T) {
  const u = clamp((T + 50) / (TP.T + 50), 0, 1);
  const logP = lerp(-3, Math.log10(TP.P), Math.pow(u, 1.08));
  return Math.pow(10, logP);
}
function solidLiquidBoundaryTemp(P) {
  if (P < TP.P) return TP.T;
  if (P <= 1) {
    const u = (Math.log10(P) - Math.log10(TP.P)) / (0 - Math.log10(TP.P));
    return lerp(TP.T, 0, clamp(u, 0, 1));
  }
  // 教學視覺化：保留水的負斜率特性，並略為誇大以便投影辨識。
  return -5.0 * Math.log10(P);
}
function getPhase(T, P) {
  if (Math.abs(T - TP.T) < 1 && Math.abs(P - TP.P) < 0.002) return '三相共存';
  if (P > CP.P && T > CP.T) return '超臨界流體';
  if (T > TP.T && T < CP.T) {
    const vp = vaporPressure(T);
    if (Math.abs(Math.log10(P) - Math.log10(vp)) < 0.045) return '液氣共存';
  }
  /* 固氣共存：昇華曲線附近（三相點以下） */
  if (T < TP.T && P < TP.P) {
    const sp = sublimationPressure(T);
    if (Math.abs(Math.log10(P) - Math.log10(sp)) < 0.045) return '固氣共存';
    return P > sp ? '固態' : '氣態';
  }
  /* 固液共存：固液相界線附近（三相點以上）。水的界線為負斜率，以溫度差判定。 */
  if (P >= TP.P) {
    const bt = solidLiquidBoundaryTemp(P);
    if (Math.abs(T - bt) < 1.6) return '固液共存';
    if (T < bt) return '固態';
  } else if (T < solidLiquidBoundaryTemp(P)) {
    return '固態';
  }
  if (P > vaporPressure(T) && T < CP.T) return '液態';
  return '氣態';
}
function phaseColor(phase) {
  if (phase.includes('固')) return COLORS.solid;
  if (phase.includes('液氣')) return COLORS.blue;
  if (phase.includes('液')) return COLORS.liquid;
  if (phase.includes('超')) return COLORS.super;
  if (phase.includes('三相')) return COLORS.green;
  return COLORS.gas;
}
function tab2TemperatureFactor() {
  return clamp((tab2.T + 50) / 500, 0, 1);
}
function tab2PhaseMotionScale(phase) {
  // 溫度越高，微觀熱運動越明顯；固態以振動/轉動為主，液態與氣態則增加平移速率。
  const uAll = tab2TemperatureFactor();
  if (phase.includes('固')) return lerp(0.70, 2.05, clamp((tab2.T + 50) / 85, 0, 1));
  if (phase.includes('三相')) return lerp(0.80, 1.70, clamp((tab2.T + 20) / 80, 0, 1));
  if (phase.includes('液')) return lerp(0.75, 2.25, clamp(tab2.T / 125, 0, 1));
  if (phase.includes('超')) return lerp(1.10, 2.10, uAll);
  return lerp(1.00, 2.30, uAll);
}
function initTab2Particles() {
  const rand = seededRandom(4302);
  const iceRand = seededRandom(9051);
  const miniIce = buildHexIceLattice(240, 410, 34, iceRand, 1, 1);
  tab2.iceMicroBase = miniIce.points;
  tab2.iceMicroLinks = miniIce.links;
  tab2.liquidMicro = [];
  for (let i = 0; i < 7; i++) {
    const a = rand() * Math.PI * 2;
    tab2.liquidMicro.push({ x: 215 + rand() * 70, y: 385 + rand() * 58, vx: Math.cos(a) * (0.25 + rand() * 0.25), vy: Math.sin(a) * (0.25 + rand() * 0.25), phase: rand() * Math.PI * 2 });
  }
  tab2.gasMicro = [];
  for (let i = 0; i < 4; i++) {
    const a = rand() * Math.PI * 2;
    tab2.gasMicro.push({ x: 205 + rand() * 82, y: 370 + rand() * 82, vx: Math.cos(a) * (1.60 + rand() * 1.40), vy: Math.sin(a) * (1.60 + rand() * 1.40), phase: rand() * Math.PI * 2 });
  }
  tab2.superMicro = [];
  for (let i = 0; i < 6; i++) {
    const a = rand() * Math.PI * 2;
    tab2.superMicro.push({ x: 208 + rand() * 78, y: 374 + rand() * 76, vx: Math.cos(a) * (0.55 + rand() * 0.45), vy: Math.sin(a) * (0.55 + rand() * 0.45), phase: rand() * Math.PI * 2 });
  }
  tab2.vaporDots = [];
  for (let i = 0; i < 6; i++) {
    const a = rand() * Math.PI * 2;
    tab2.vaporDots.push({ x: 180 + rand() * 120, y: 100 + rand() * 190, vx: Math.cos(a) * (0.55 + rand() * 0.45), vy: Math.sin(a) * (0.55 + rand() * 0.45) });
  }
}
function updateMagnifierParticles(list, dt, speedScale = 1) {
  const cx = 240, cy = 410, r = isTeach() ? 78 : 52;
  const safeScale = clamp(speedScale, 0.2, 4.2);
  list.forEach(p => {
    p.x += p.vx * 60 * dt * safeScale;
    p.y += p.vy * 60 * dt * safeScale;
    p.phase = ((p.phase || 0) + dt * safeScale * 1.5) % (Math.PI * 2);
    const dx = p.x - cx, dy = p.y - cy;
    const dist = Math.hypot(dx, dy) || 1;
    if (dist > r) {
      const nx = dx / dist, ny = dy / dist;
      p.x = cx + nx * r;
      p.y = cy + ny * r;
      const dot = p.vx * nx + p.vy * ny;
      p.vx -= 2 * dot * nx;
      p.vy -= 2 * dot * ny;
    }
  });
}
function updateVaporDots(dt, speedScale = 1) {
  const minX = 177, maxX = 303, minY = 92, maxY = 306;
  const safeScale = clamp(speedScale, 0.4, 3.2);
  tab2.vaporDots.forEach(p => {
    p.x += p.vx * 60 * dt * safeScale;
    p.y += p.vy * 60 * dt * safeScale;
    if (p.x < minX || p.x > maxX) { p.vx *= -1; p.x = clamp(p.x, minX, maxX); }
    if (p.y < minY || p.y > maxY) { p.vy *= -1; p.y = clamp(p.y, minY, maxY); }
  });
}
function resetTab2() {
  tab2.T = 25;
  tab2.pSlider = sliderFromPressure(1);
  tab2.hasInteracted = false;
  updateControls();
  drawCurrentFrame(0);
}
function drawContainerContent(phase, nowSec) {
  const x = 170, y = 80, w = 140, h = 240;
  ctx.save();
  ctx.beginPath();
  ctx.roundRect(x + 4, y + 8, w - 8, h - 12, 8);
  ctx.clip();
  if (phase === '固態') {
    ctx.fillStyle = '#D0E8F5';
    ctx.beginPath();
    ctx.roundRect(x + 16, y + 126, w - 32, 92, 7);
    ctx.fill();
    ctx.strokeStyle = 'rgba(45,95,166,0.25)';
    ctx.lineWidth = 1;
    for (let i = 0; i < 4; i++) {
      ctx.beginPath();
      ctx.moveTo(x + 22, y + 142 + i * 18);
      ctx.lineTo(x + w - 22, y + 136 + i * 18);
      ctx.stroke();
    }
  } else if (phase === '液態') {
    drawLiquidInContainer(x, y, w, h, nowSec, 0.55);
  } else if (phase === '氣態') {
    drawVaporInContainer('rgba(64,128,224,0.55)', 1, 1.15 + tab2TemperatureFactor() * 1.55, 'rgba(45,95,166,0.68)');
  } else if (phase === '超臨界流體') {
    ctx.fillStyle = 'rgba(160,100,200,0.25)';
    ctx.fillRect(x + 4, y + 8, w - 8, h - 12);
    drawVaporInContainer('rgba(160,100,200,0.58)', 1.2, 1.20 + tab2TemperatureFactor() * 1.50, 'rgba(108,66,150,0.72)');
    setFont(14, '800');
    ctx.fillStyle = COLORS.super;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('超臨界流體', x + w / 2, y + 44);
  } else if (phase === '液氣共存') {
    drawLiquidInContainer(x, y, w, h, nowSec, 0.46);
    drawVaporInContainer('rgba(64,128,224,0.55)', 0.75, 1.05 + tab2TemperatureFactor() * 1.35, 'rgba(45,95,166,0.68)');
  } else if (phase === '固液共存') {
    /* 冰塊浮在液態水上：水的固態密度較小 */
    drawLiquidInContainer(x, y, w, h, nowSec, 0.52);
    const bob = Math.sin(nowSec * 1.6) * 3;
    ctx.fillStyle = '#D0E8F5';
    ctx.strokeStyle = 'rgba(45,95,166,0.30)';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.roundRect(x + 26, y + h - 18 - h * 0.52 - 26 + bob, 66, 44, 7);
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.roundRect(x + w - 96, y + h - 18 - h * 0.52 - 20 - bob, 52, 34, 6);
    ctx.fill();
    ctx.stroke();
  } else if (phase === '固氣共存') {
    /* 固體直接昇華為氣體，容器內無液體 */
    ctx.fillStyle = '#D0E8F5';
    ctx.strokeStyle = 'rgba(45,95,166,0.28)';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.roundRect(x + 16, y + 150, w - 32, 68, 7);
    ctx.fill();
    ctx.stroke();
    for (let i = 0; i < 3; i++) {
      ctx.beginPath();
      ctx.moveTo(x + 22, y + 166 + i * 18);
      ctx.lineTo(x + w - 22, y + 160 + i * 18);
      ctx.stroke();
    }
    drawVaporInContainer('rgba(64,128,224,0.52)', 0.72, 1.05 + tab2TemperatureFactor() * 1.30, 'rgba(45,95,166,0.66)');
  } else if (phase === '三相共存') {
    drawLiquidInContainer(x, y, w, h, nowSec, 0.36);
    ctx.fillStyle = '#D0E8F5';
    ctx.beginPath();
    ctx.roundRect(x + 18, y + 155, 58, 60, 6);
    ctx.fill();
    drawVaporInContainer('rgba(64,128,224,0.58)', 0.55, 0.95 + tab2TemperatureFactor() * 1.20, 'rgba(45,95,166,0.70)');
  }
  ctx.restore();
}
function drawLiquidInContainer(x, y, w, h, nowSec, fillFraction) {
  const level = y + h - 18 - h * fillFraction;
  const thermal = tab2TemperatureFactor();
  ctx.beginPath();
  ctx.moveTo(x + 8, y + h - 18);
  ctx.lineTo(x + 8, level);
  for (let xx = x + 8; xx <= x + w - 8; xx += 6) {
    const yy = level + Math.sin((xx - x) * 0.08 + nowSec * (2.2 + thermal * 3.2)) * (3 + thermal * 2.2);
    ctx.lineTo(xx, yy);
  }
  ctx.lineTo(x + w - 8, y + h - 18);
  ctx.closePath();
  ctx.fillStyle = 'rgba(64,120,200,0.55)';
  ctx.fill();
}
function drawVaporInContainer(color, sizeScale, speedScale = 1, strokeColor = 'rgba(45,95,166,0.68)') {
  ctx.save();
  updateVaporDots(1 / 60, speedScale);
  ctx.fillStyle = color;
  ctx.strokeStyle = strokeColor;
  ctx.lineWidth = 1.2;
  tab2.vaporDots.forEach((p, i) => {
    ctx.beginPath();
    ctx.arc(p.x, p.y, (3.5 + (i % 2)) * sizeScale, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();
  });
  ctx.restore();
}
function drawContainer(phase, nowSec) {
  const x = 170, y = 80, w = 140, h = 240;
  ctx.save();
  ctx.fillStyle = 'rgba(180,200,220,0.16)';
  ctx.beginPath();
  ctx.roundRect(x, y, w, h, 8);
  ctx.fill();
  drawContainerContent(phase, nowSec);
  ctx.strokeStyle = '#4A7AAA';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.roundRect(x, y, w, h, 8);
  ctx.stroke();
  ctx.strokeStyle = 'rgba(255,255,255,0.70)';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(x + 24, y + 18);
  ctx.lineTo(x + 24, y + h - 20);
  ctx.stroke();
  setFont(isTeach() ? 17 : 15, '800');
  ctx.fillStyle = COLORS.text2;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  /* 面板標題已顯示「密閉容器」，此處不再重複繪製，避免文字重疊 */
  ctx.restore();
}
/* 水分子統一半徑：固、液、氣三態的 O 球一律相同大小，避免視覺上誤解成粒子會脹縮。
   教學投影模式整體放大 1.38 倍。 */
const WATER_MOL_R = 6.5;
function tab2WaterMolR() { return WATER_MOL_R * (isTeach() ? 1.38 : 1); }
function drawTab2IceLattice(nowSec, latticeSpread = 1) {
  // 放大鏡內改為與參考圖一致的單一 O-H···O 六邊形冰晶環，並隨溫度提高增加振動。
  const solidHeat = clamp((tab2.T + 50) / 85, 0, 1);
  const amp = lerp(0.16, 2.10, solidHeat) * latticeSpread;
  const freq = lerp(3.2, 10.8, solidHeat);
  const rotAmp = lerp(0.012, 0.11, solidHeat);
  const molR = tab2WaterMolR();
  const positions = tab2.iceMicroBase.map((pt, i) => ({
    ...pt,
    x: pt.x + Math.sin(nowSec * freq + i * 1.73) * amp,
    y: pt.y + Math.cos(nowSec * freq * 0.92 + i * 2.11) * amp,
    rot: Math.sin(nowSec * (1.0 + solidHeat * 4.0) + i * 0.67) * rotAmp
  }));
  positions.forEach((p, i) => {
    const target = positions[tab2.iceMicroBase[i].donorTo];
    if (target) p.donorAngle = Math.atan2(target.y - p.y, target.x - p.x);
  });
  const mols = positions.map(p => getIceMoleculeAtomsFromPoint(p, molR, p.rot || 0));
  tab2.iceMicroLinks.forEach(([donor, acceptor]) => {
    const dm = mols[donor], am = mols[acceptor];
    if (!dm || !am) return;
    drawHydrogenBond(dm.hBond, am.o, molR, dm.rH, 0.92);
  });
  positions.forEach(p => drawIceWaterMoleculeFromPoint(p, molR, p.rot || 0));
}
function drawMagnifier(phase, dt, nowSec) {
  const cx = 240, cy = 410, r = isTeach() ? 88 : 60;
  const motionScale = tab2PhaseMotionScale(phase);
  /* 固、液、氣分子一律同一半徑，僅隨教學模式整體放大 */
  const molR = tab2WaterMolR();
  ctx.save();
  drawArrow(240, 325, 240, 350, COLORS.blue, true);
  ctx.lineWidth = 9;
  ctx.strokeStyle = 'rgba(74,122,170,0.22)';
  ctx.beginPath();
  ctx.moveTo(cx + 42, cy + 42);
  ctx.lineTo(cx + 84, cy + 84);
  ctx.stroke();
  ctx.lineWidth = 3;
  ctx.strokeStyle = '#4A7AAA';
  ctx.beginPath();
  ctx.moveTo(cx + 42, cy + 42);
  ctx.lineTo(cx + 84, cy + 84);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(cx, cy, r, 0, Math.PI * 2);
  ctx.fillStyle = '#FFFFFF';
  ctx.fill();
  ctx.strokeStyle = '#4A7AAA';
  ctx.lineWidth = 3;
  ctx.stroke();
  ctx.save();
  ctx.beginPath();
  ctx.arc(cx, cy, r - 4, 0, Math.PI * 2);
  ctx.clip();
  ctx.fillStyle = 'rgba(245,244,240,0.85)';
  ctx.fillRect(cx - r, cy - r, r * 2, r * 2);
  if (phase === '固態') {
    drawTab2IceLattice(nowSec, isTeach() ? 1.35 : 1);
  } else if (phase === '液態') {
    updateMagnifierParticles(tab2.liquidMicro, dt, motionScale);
    tab2.liquidMicro.forEach(p => drawWaterMolecule(p.x, p.y, molR, p.phase || 0));
  } else if (phase === '氣態') {
    updateMagnifierParticles(tab2.gasMicro, dt, 1.55 * motionScale);
    tab2.gasMicro.forEach(p => drawWaterMolecule(p.x, p.y, molR, p.phase || 0));
  } else if (phase === '超臨界流體') {
    updateMagnifierParticles(tab2.superMicro, dt, motionScale);
    tab2.superMicro.forEach(p => drawWaterMolecule(p.x, p.y, molR, p.phase || 0));
  } else if (phase === '液氣共存') {
    updateMagnifierParticles(tab2.liquidMicro, dt, 0.85 * motionScale);
    updateMagnifierParticles(tab2.gasMicro, dt, 1.25 * motionScale);
    tab2.liquidMicro.slice(0, 4).forEach(p => drawWaterMolecule(p.x, p.y + 8, molR, p.phase || 0));
    tab2.gasMicro.slice(0, 3).forEach(p => drawWaterMolecule(p.x, p.y - 8, molR, p.phase || 0));
  } else if (phase === '固液共存') {
    /* 冰晶格與液態水分子並存 */
    drawTab2IceLattice(nowSec, isTeach() ? 0.95 : 0.70);
    updateMagnifierParticles(tab2.liquidMicro, dt, 0.80 * motionScale);
    tab2.liquidMicro.slice(0, 5).forEach(p => drawWaterMolecule(p.x, p.y + 10, molR, p.phase || 0));
  } else if (phase === '固氣共存') {
    /* 冰晶格與氣態分子並存，無液態 */
    drawTab2IceLattice(nowSec, isTeach() ? 0.95 : 0.70);
    updateMagnifierParticles(tab2.gasMicro, dt, 1.30 * motionScale);
    tab2.gasMicro.slice(0, 4).forEach(p => drawWaterMolecule(p.x, p.y - 14, molR, p.phase || 0));
  } else if (phase === '三相共存') {
    drawTab2IceLattice(nowSec, isTeach() ? 1.0 : 0.74);
    updateMagnifierParticles(tab2.liquidMicro, dt, 0.75 * motionScale);
    updateMagnifierParticles(tab2.gasMicro, dt, 1.10 * motionScale);
    tab2.liquidMicro.slice(0, 3).forEach(p => drawWaterMolecule(p.x, p.y + 6, molR, p.phase || 0));
    tab2.gasMicro.slice(0, 2).forEach(p => drawWaterMolecule(p.x, p.y - 16, molR, p.phase || 0));
  }
  ctx.restore();
  setFont(isTeach() ? 17 : 13, '700');
  ctx.fillStyle = COLORS.text2;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  ctx.fillText('微觀視角', cx, cy + r + 12);
  ctx.restore();
}
function drawLeftPhaseView(phase, dt, nowMs) {
  const nowSec = nowMs / 1000;
  drawPanel(22, 28, 436, 652, '密閉容器');
  drawContainer(phase, nowSec);
  drawMagnifier(phase, dt, nowSec);
  const alpha = clamp((nowMs - tab2.phaseChangedAt) / 400, 0, 1);
  ctx.save();
  ctx.globalAlpha = alpha;
  setFont(isTeach() ? 32 : 22, '800');
  ctx.fillStyle = phaseColor(phase);
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(phase, 240, isTeach() ? 590 : 520);
  if (!isTeach()) {
    setFont(14, '700');
    ctx.fillStyle = COLORS.text2;
    ctx.fillText('巨觀外觀與微觀粒子同步改變', 240, 552);
  }
  ctx.restore();
}
function drawSlider(label, valueLabel, x, y, w, frac, color) {
  ctx.save();
  setFont(16, '800');
  ctx.fillStyle = COLORS.text2;
  ctx.textAlign = 'left';
  ctx.textBaseline = 'middle';
  ctx.fillText(label, 530, y);
  ctx.lineCap = 'round';
  ctx.lineWidth = 10;
  ctx.strokeStyle = COLORS.border;
  ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + w, y); ctx.stroke();
  ctx.strokeStyle = color;
  ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + w * frac, y); ctx.stroke();
  ctx.beginPath();
  ctx.arc(x + w * frac, y, 11, 0, Math.PI * 2);
  ctx.fillStyle = '#FFFFFF'; ctx.fill();
  ctx.strokeStyle = color; ctx.lineWidth = 2.4; ctx.stroke();
  setFont(isTeach() ? 17 : 15, '800');
  ctx.fillStyle = color;
  ctx.textAlign = 'left';
  ctx.fillText(valueLabel, x + w + 28, y);
  ctx.restore();
}
function drawPhaseControls(phase) {
  const T = Math.round(tab2.T);
  const P = currentPressure();
  drawPanel(500, 20, 752, 164, '控制滑桿');
  drawSlider('溫度 T', `T = ${T} °C`, 660, 76, 420, (tab2.T + 50) / 500, COLORS.accent);
  drawSlider('壓力 P', `P = ${formatPressure(P)} atm`, 660, 126, 420, tab2.pSlider, COLORS.blue);
  setFont(16, '700');
  ctx.fillStyle = COLORS.text2;
  ctx.textAlign = 'left';
  ctx.textBaseline = 'middle';
  /* 依實際文字寬度接續繪製，避免長狀態名（如「固液共存」）與標籤重疊 */
  const statusLabel = '目前狀態：';
  ctx.fillText(statusLabel, 530, 164);
  const statusLabelW = ctx.measureText(statusLabel).width;
  setFont(16, '800');
  ctx.fillStyle = phaseColor(phase);
  ctx.fillText(phase, 530 + statusLabelW + 6, 164);
}
function drawPhaseRegions() {
  const c = phaseChart;
  ctx.save();
  ctx.beginPath();
  ctx.rect(c.x, c.y, c.w, c.h);
  ctx.clip();
  ctx.fillStyle = 'rgba(255,200,180,0.25)';
  ctx.fillRect(c.x, c.y, c.w, c.h);

  // 固態區：固液負斜率曲線左側、昇華曲線上方。
  ctx.beginPath();
  ctx.moveTo(c.x, c.y);
  ctx.lineTo(tToX(solidLiquidBoundaryTemp(PHASE_P_MAX)), c.y);
  for (let i = 0; i <= 520; i++) {
    const u = i / 520;
    const logP = lerp(Math.log10(PHASE_P_MAX), Math.log10(TP.P), u);
    const P = Math.pow(10, logP);
    ctx.lineTo(tToX(solidLiquidBoundaryTemp(P)), pToGraphY(P));
  }
  for (let i = 0; i <= 520; i++) {
    const u = i / 520;
    const T = lerp(TP.T, -50, u);
    ctx.lineTo(tToX(T), pToGraphY(sublimationPressure(T)));
  }
  ctx.lineTo(c.x, c.oy);
  ctx.lineTo(c.x, c.y);
  ctx.closePath();
  ctx.fillStyle = 'rgba(200,230,255,0.45)';
  ctx.fill();

  // 液態區：固液曲線右側、蒸氣壓曲線上方。
  ctx.beginPath();
  ctx.moveTo(tToX(solidLiquidBoundaryTemp(PHASE_P_MAX)), c.y);
  ctx.lineTo(tToX(CP.T), c.y);
  ctx.lineTo(tToX(CP.T), pToGraphY(CP.P));
  for (let i = 0; i <= 520; i++) {
    const u = i / 520;
    const T = lerp(CP.T, TP.T, u);
    ctx.lineTo(tToX(T), pToGraphY(vaporPressure(T)));
  }
  for (let i = 0; i <= 520; i++) {
    const u = i / 520;
    const logP = lerp(Math.log10(TP.P), Math.log10(PHASE_P_MAX), u);
    const P = Math.pow(10, logP);
    ctx.lineTo(tToX(solidLiquidBoundaryTemp(P)), pToGraphY(P));
  }
  ctx.closePath();
  ctx.fillStyle = 'rgba(64,120,200,0.30)';
  ctx.fill();

  // 超臨界區：從臨界點壓力以上延伸到圖表頂部。
  ctx.fillStyle = 'rgba(160,100,200,0.20)';
  const scY = Math.max(pToGraphY(CP.P), c.y);
  ctx.fillRect(tToX(CP.T), c.y, c.x + c.w - tToX(CP.T), scY - c.y + 4);
  ctx.restore();
}
function drawPhaseAxes() {
  const c = phaseChart;
  ctx.save();
  ctx.save();
  ctx.beginPath();
  ctx.rect(c.x, c.y, c.w, c.h);
  ctx.clip();
  ctx.strokeStyle = COLORS.border;
  ctx.lineWidth = 0.6;
  ctx.setLineDash([3, 3]);
  for (let T = -50; T <= 450; T += 50) {
    const x = tToX(T);
    ctx.beginPath(); ctx.moveTo(x, c.y); ctx.lineTo(x, c.oy); ctx.stroke();
  }
  [0.001, 0.01, 0.1, 1, 10, 100].forEach(P => {
    const y = pToGraphY(P);
    ctx.beginPath(); ctx.moveTo(c.x, y); ctx.lineTo(c.x + c.w, y); ctx.stroke();
  });
  ctx.restore();
  ctx.setLineDash([]);
  ctx.strokeStyle = COLORS.text2;
  ctx.lineWidth = 1.4;
  ctx.beginPath();
  ctx.moveTo(c.x, c.y - 4); ctx.lineTo(c.x, c.oy + 2); ctx.lineTo(c.x + c.w + 6, c.oy + 2);
  ctx.stroke();
  setFont(isTeach() ? 17 : 13, '700');
  ctx.fillStyle = COLORS.text2;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  [-50, 0, 100, 200, 300, 400, 450].forEach(T => ctx.fillText(String(T), tToX(T), c.oy + 8));
  ctx.textAlign = 'right';
  ctx.textBaseline = 'middle';
  /* 量測刻度標籤最大寬度，供縱軸標題避讓（教學模式字級較大，不可用固定間距） */
  let tickMaxW = 0;
  [0.001, 0.01, 0.1, 1, 10, 100].forEach(P => {
    const y = pToGraphY(P);
    if (y < phaseChart.y + 10) return;
    tickMaxW = Math.max(tickMaxW, ctx.measureText(String(P)).width);
    ctx.fillText(String(P), c.x - 10, y);
  });
  const axisTitleSize = isTeach() ? 19 : 15;
  setFont(axisTitleSize, '800');
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  ctx.fillText('溫度 T（°C）', c.x + c.w / 2, c.oy + 30);
  ctx.save();
  /* 標題中心 = 刻度左緣再往左讓開半個字高，確保兩者不重疊 */
  ctx.translate(c.x - 10 - tickMaxW - axisTitleSize * 0.75, c.y + c.h / 2);
  ctx.rotate(-Math.PI / 2);
  ctx.fillText('壓力 P（atm）', 0, 0);
  ctx.restore();
  ctx.restore();
}
function drawPhaseBoundaryLines() {
  const c = phaseChart;
  ctx.save();
  ctx.beginPath(); ctx.rect(c.x, c.y, c.w, c.h); ctx.clip();
  ctx.lineJoin = 'round'; ctx.lineCap = 'round';
  // 固氣（昇華〔作用〕）曲線。
  ctx.strokeStyle = COLORS.green;
  ctx.lineWidth = 2;
  ctx.beginPath();
  for (let i = 0; i <= 1200; i++) {
    const T = lerp(-50, TP.T, i / 1200);
    const x = tToX(T), y = pToGraphY(sublimationPressure(T));
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();
  // 液氣曲線。
  ctx.strokeStyle = COLORS.accent;
  ctx.lineWidth = 2;
  ctx.beginPath();
  for (let i = 0; i <= 1200; i++) {
    const T = lerp(TP.T, CP.T, i / 1200);
    const x = tToX(T), y = pToGraphY(vaporPressure(T));
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();
  // 固液曲線：水的特性，壓力升高時溫度向左偏移（負斜率）。
  ctx.strokeStyle = COLORS.blue;
  ctx.lineWidth = 2;
  ctx.beginPath();
  for (let i = 0; i <= 1200; i++) {
    const logP = lerp(Math.log10(TP.P), Math.log10(PHASE_P_MAX), i / 1200);
    const P = Math.pow(10, logP);
    const x = tToX(solidLiquidBoundaryTemp(P)), y = pToGraphY(P);
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();
  ctx.restore();
}
function drawPhaseLabels() {
  ctx.save();
  ctx.globalAlpha = isTeach() ? 0.92 : 0.70;
  setFont(isTeach() ? 20 : 16, '800');
  ctx.fillStyle = COLORS.text2;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  setFont(isTeach() ? 19 : 14, '800');
  drawTeachPillText('固態', tToX(-35), pToGraphY(3), COLORS.text2);
  setFont(isTeach() ? 20 : 16, '800');
  drawTeachPillText('液態', tToX(142), pToGraphY(18), COLORS.text2);
  drawTeachPillText('氣態', tToX(275), pToGraphY(0.06), COLORS.text2);
  ctx.fillStyle = COLORS.super;
  setFont(isTeach() ? 18 : 14, '800');
  drawTeachPillText('超臨界流體', tToX(418), phaseChart.y + 34, COLORS.super);
  ctx.restore();
}
function drawStar(cx, cy, r, color) {
  ctx.save();
  ctx.fillStyle = color;
  ctx.beginPath();
  for (let i = 0; i < 10; i++) {
    const a = -Math.PI / 2 + i * Math.PI / 5;
    const rr = i % 2 === 0 ? r : r * 0.45;
    const x = cx + Math.cos(a) * rr;
    const y = cy + Math.sin(a) * rr;
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}
function drawSpecialPoints() {
  const tx = tToX(TP.T), ty = pToGraphY(TP.P);
  const cx = tToX(CP.T), cy = pToGraphY(CP.P);
  ctx.save();
  ctx.fillStyle = COLORS.green;
  ctx.beginPath(); ctx.arc(tx, ty, 5, 0, Math.PI * 2); ctx.fill();
  const bubbleX = (tx + 24 + 160 < phaseChart.x + phaseChart.w) ? tx + 24 : tx - 184;
  drawBubble(bubbleX, ty - (isTeach() ? 68 : 54), isTeach() ? 190 : 160, isTeach() ? 62 : 48, ['三相點', '(0.01°C, 0.006 atm)'], COLORS.green);
  drawStar(cx, cy, 9, COLORS.super);
  const criticalBubbleY = clamp(cy + (isTeach() ? 54 : 42), phaseChart.y + (isTeach() ? 72 : 58), phaseChart.oy - 84);
  drawBubble(cx - (isTeach() ? 216 : 180), criticalBubbleY, isTeach() ? 202 : 166, isTeach() ? 62 : 50, ['臨界點', '(374.1°C, 217.7 atm)'], COLORS.super);
  ctx.restore();
}
function drawStateCrosshair() {
  const x = tToX(tab2.T);
  const y = pToGraphY(currentPressure());
  const glowR = tab2.draggingState ? 17 : 14;
  ctx.save();
  ctx.beginPath();
  ctx.arc(x, y, glowR, 0, Math.PI * 2);
  ctx.fillStyle = 'rgba(240,160,32,0.30)';
  ctx.fill();
  ctx.strokeStyle = COLORS.cross;
  ctx.lineWidth = 2;
  ctx.beginPath(); ctx.moveTo(x - 8, y); ctx.lineTo(x + 8, y); ctx.moveTo(x, y - 8); ctx.lineTo(x, y + 8); ctx.stroke();
  ctx.beginPath(); ctx.arc(x, y, 3, 0, Math.PI * 2); ctx.fillStyle = COLORS.cross; ctx.fill();
  ctx.restore();
}
function drawPhaseDiagram() {
  drawPanel(500, 190, 752, 500, '水的相圖');
  drawPhaseRegions();
  drawPhaseAxes();
  drawPhaseBoundaryLines();
  drawPhaseLabels();
  drawSpecialPoints();
  drawStateCrosshair();
}
function drawTab2(dt, nowMs) {
  const T = tab2.T;
  const P = currentPressure();
  const phase = getPhase(T, P);
  if (phase !== tab2.lastPhase) {
    tab2.lastPhase = phase;
    tab2.phaseChangedAt = nowMs;
  }
  ctx.clearRect(0, 0, CW, CH);
  ctx.save();
  ctx.strokeStyle = COLORS.border;
  ctx.lineWidth = 1;
  ctx.beginPath(); ctx.moveTo(480, 0); ctx.lineTo(480, CH); ctx.stroke();
  ctx.restore();
  drawLeftPhaseView(phase, dt, nowMs);
  drawPhaseControls(phase);
  drawPhaseDiagram();
}


// ===== Tab 3：二氧化碳的相圖 =====
// CO₂ 數值：Tt = 216.592 K (-56.6 °C), Pt = 0.51795 MPa (5.11 atm)；Tc = 304.1282 K (31.0 °C), Pc = 7.3773 MPa (72.8 atm)。
const CO2_TP = { T: -56.6, P: 5.11 };
const CO2_CP = { T: 31.0, P: 72.8 };
const CO2_NORMAL_SUB = { T: -78.5, P: 1.0 };
/* CO2_T_MIN(-100°C) 的昇華壓，依 NIST Webbook = 0.1352 atm */
const CO2_SUB_LOG_MIN = Math.log10(0.1352);
const CO2_T_MIN = -100;
const CO2_T_MAX = 80;
const co2Chart = { x: 550, y: 230, w: 680, h: 430, ox: 550, oy: 660, tMin: CO2_T_MIN, tMax: CO2_T_MAX, pMin: PHASE_P_MIN, pMax: PHASE_P_MAX };
const tab3 = {
  T: 25,
  pSlider: sliderFromPressure(1),
  hasInteracted: false,
  activeSlider: null,
  draggingState: false,
  lastPhase: '',
  phaseChangedAt: 0,
  solidMicro: [], liquidMicro: [], gasMicro: [], superMicro: [], vaporDots: []
};

function chartPToY(p, chart) {
  const pMin = chart.pMin ?? PHASE_P_MIN;
  const pMax = chart.pMax ?? PHASE_P_MAX;
  const logMin = Math.log10(pMin);
  const logMax = Math.log10(pMax);
  const logP = Math.log10(clamp(p, pMin, pMax));
  const f = (logP - logMin) / (logMax - logMin);
  return clamp(f * chart.h, 0, chart.h);
}
function chartPToGraphY(p, chart) { return chart.oy - chartPToY(p, chart); }
function chartTToX(T, chart) { return chart.ox + (T - chart.tMin) / (chart.tMax - chart.tMin) * chart.w; }
function chartXToT(x, chart) {
  return clamp((x - chart.ox) / chart.w * (chart.tMax - chart.tMin) + chart.tMin, chart.tMin, chart.tMax);
}
function chartYToP(y, chart) {
  const pMin = chart.pMin ?? PHASE_P_MIN;
  const pMax = chart.pMax ?? PHASE_P_MAX;
  const logMin = Math.log10(pMin);
  const logMax = Math.log10(pMax);
  const f = clamp((chart.oy - y) / chart.h, 0, 1);
  return clamp(Math.pow(10, logMin + f * (logMax - logMin)), pMin, pMax);
}
function co2CurrentPressure() { return pressureFromSlider(tab3.pSlider); }
function co2TemperatureFactor() { return clamp((tab3.T - CO2_T_MIN) / (CO2_T_MAX - CO2_T_MIN), 0, 1); }
function co2PhaseMotionScale(phase) {
  const u = co2TemperatureFactor();
  if (phase.includes('固')) return lerp(0.62, 2.05, clamp((tab3.T - CO2_T_MIN) / (CO2_TP.T - CO2_T_MIN), 0, 1));
  if (phase.includes('液')) return lerp(0.80, 2.10, clamp((tab3.T - CO2_TP.T) / (CO2_CP.T - CO2_TP.T), 0, 1));
  if (phase.includes('超')) return lerp(1.15, 2.25, u);
  return lerp(1.05, 2.55, u);
}
function co2SublimationPressure(T) {
  // 通過 1 atm 的乾冰昇華點（-78.5°C）與三相點，使用 log(P) 平滑插值。
  // 端點與指數依 NIST Webbook 昇華壓資料最小平方擬合：
  // 低溫端 -100°C = 0.1352 atm（原寫死 0.01 atm，偏低約 13 倍）。
  if (T <= CO2_NORMAL_SUB.T) {
    const u = clamp((T - CO2_T_MIN) / (CO2_NORMAL_SUB.T - CO2_T_MIN), 0, 1);
    return Math.pow(10, lerp(CO2_SUB_LOG_MIN, 0, Math.pow(u, 0.8677)));
  }
  const u = clamp((T - CO2_NORMAL_SUB.T) / (CO2_TP.T - CO2_NORMAL_SUB.T), 0, 1);
  return Math.pow(10, lerp(0, Math.log10(CO2_TP.P), Math.pow(u, 0.7971)));
}
function co2VaporPressure(T) {
  if (T <= CO2_TP.T) return CO2_TP.P;
  const u = clamp((T - CO2_TP.T) / (CO2_CP.T - CO2_TP.T), 0, 1);
  // 指數 0.7884 依 NIST Webbook CO2 飽和蒸氣壓資料最小平方擬合（原 0.72，低溫端偏高逾 13%）。
  return Math.pow(10, lerp(Math.log10(CO2_TP.P), Math.log10(CO2_CP.P), Math.pow(u, 0.7884)));
}
function co2SolidLiquidBoundaryTemp(P) {
  if (P < CO2_TP.P) return CO2_TP.T;
  // 一般物質的固液相界線為正斜率；此處以誇大後的近似便於比較。
  return CO2_TP.T + 8.0 * Math.log10(P / CO2_TP.P);
}
function getCO2Phase(T, P) {
  if (Math.abs(T - CO2_TP.T) < 1.2 && Math.abs(Math.log10(P) - Math.log10(CO2_TP.P)) < 0.055) return '三相共存';
  if (P > CO2_CP.P && T > CO2_CP.T) return '超臨界流體';
  if (T > CO2_TP.T && T < CO2_CP.T) {
    const vp = co2VaporPressure(T);
    if (Math.abs(Math.log10(P) - Math.log10(vp)) < 0.045) return '液氣共存';
  }
  /* 固氣共存：昇華曲線附近（三相點以下） */
  if (T < CO2_TP.T && P < CO2_TP.P) {
    const sp = co2SublimationPressure(T);
    if (Math.abs(Math.log10(P) - Math.log10(sp)) < 0.045) return '固氣共存';
    return P > sp ? '固態' : '氣態';
  }
  /* 固液共存：固液相界線附近（三相點以上）。CO₂ 的界線為正斜率。 */
  if (P >= CO2_TP.P) {
    const bt = co2SolidLiquidBoundaryTemp(P);
    if (Math.abs(T - bt) < 1.6) return '固液共存';
    if (T < bt) return '固態';
  }
  if (T > CO2_TP.T && T < CO2_CP.T && P > co2VaporPressure(T)) return '液態';
  return '氣態';
}
function initTab3Particles() {
  const rand = seededRandom(6202);
  tab3.solidMicro = [];
  for (let row = 0; row < 3; row++) {
    for (let col = 0; col < 3; col++) {
      tab3.solidMicro.push({
        x: 207 + col * 28 + (row % 2) * 5,
        y: 378 + row * 25,
        phase: rand() * Math.PI
      });
    }
  }
  tab3.liquidMicro = [];
  for (let i = 0; i < 7; i++) {
    const a = rand() * Math.PI * 2;
    tab3.liquidMicro.push({ x: 207 + rand() * 84, y: 374 + rand() * 78, vx: Math.cos(a) * (0.30 + rand() * 0.30), vy: Math.sin(a) * (0.30 + rand() * 0.30), phase: rand() * Math.PI * 2 });
  }
  tab3.gasMicro = [];
  for (let i = 0; i < 5; i++) {
    const a = rand() * Math.PI * 2;
    tab3.gasMicro.push({ x: 204 + rand() * 88, y: 370 + rand() * 86, vx: Math.cos(a) * (1.85 + rand() * 1.65), vy: Math.sin(a) * (1.85 + rand() * 1.65), phase: rand() * Math.PI * 2 });
  }
  tab3.superMicro = [];
  for (let i = 0; i < 7; i++) {
    const a = rand() * Math.PI * 2;
    tab3.superMicro.push({ x: 205 + rand() * 86, y: 372 + rand() * 82, vx: Math.cos(a) * (0.70 + rand() * 0.55), vy: Math.sin(a) * (0.70 + rand() * 0.55), phase: rand() * Math.PI * 2 });
  }
  tab3.vaporDots = [];
  for (let i = 0; i < 8; i++) {
    const a = rand() * Math.PI * 2;
    tab3.vaporDots.push({ x: 180 + rand() * 120, y: 100 + rand() * 190, vx: Math.cos(a) * (0.70 + rand() * 0.70), vy: Math.sin(a) * (0.70 + rand() * 0.70) });
  }
}
function resetTab3() {
  tab3.T = 25;
  tab3.pSlider = sliderFromPressure(1);
  tab3.hasInteracted = false;
  updateControls();
  drawCurrentFrame(0);
}
function updateCO2VaporDots(dt, speedScale = 1) {
  const minX = 177, maxX = 303, minY = 92, maxY = 306;
  const safeScale = clamp(speedScale, 0.4, 4.0);
  tab3.vaporDots.forEach(p => {
    p.x += p.vx * 60 * dt * safeScale;
    p.y += p.vy * 60 * dt * safeScale;
    if (p.x < minX || p.x > maxX) { p.vx *= -1; p.x = clamp(p.x, minX, maxX); }
    if (p.y < minY || p.y > maxY) { p.vy *= -1; p.y = clamp(p.y, minY, maxY); }
  });
}
function drawCO2LiquidInContainer(x, y, w, h, nowSec, fillFraction) {
  const level = y + h - 18 - h * fillFraction;
  const thermal = co2TemperatureFactor();
  ctx.beginPath();
  ctx.moveTo(x + 8, y + h - 18);
  ctx.lineTo(x + 8, level);
  for (let xx = x + 8; xx <= x + w - 8; xx += 6) {
    const yy = level + Math.sin((xx - x) * 0.08 + nowSec * (2.4 + thermal * 3.0)) * (2.6 + thermal * 2.4);
    ctx.lineTo(xx, yy);
  }
  ctx.lineTo(x + w - 8, y + h - 18);
  ctx.closePath();
  ctx.fillStyle = 'rgba(80,150,190,0.50)';
  ctx.fill();
}
function drawCO2VaporInContainer(color, sizeScale, speedScale = 1, strokeColor = 'rgba(80,80,94,0.68)') {
  ctx.save();
  updateCO2VaporDots(1 / 60, speedScale);
  ctx.fillStyle = color;
  ctx.strokeStyle = strokeColor;
  ctx.lineWidth = 1.2;
  tab3.vaporDots.forEach((p, i) => {
    ctx.beginPath();
    ctx.arc(p.x, p.y, (3.3 + (i % 2)) * sizeScale, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();
  });
  ctx.restore();
}
function drawCO2ContainerContent(phase, nowSec) {
  const x = 170, y = 80, w = 140, h = 240;
  ctx.save();
  ctx.beginPath();
  ctx.roundRect(x + 4, y + 8, w - 8, h - 12, 8);
  ctx.clip();
  if (phase === '固態') {
    ctx.fillStyle = 'rgba(225,235,242,0.92)';
    ctx.beginPath();
    ctx.roundRect(x + 16, y + 126, w - 32, 92, 7);
    ctx.fill();
    ctx.strokeStyle = 'rgba(90,90,104,0.25)';
    ctx.lineWidth = 1;
    for (let i = 0; i < 4; i++) {
      ctx.beginPath();
      ctx.moveTo(x + 22, y + 142 + i * 18);
      ctx.lineTo(x + w - 22, y + 136 + i * 18);
      ctx.stroke();
    }
    setFont(13, '800');
    ctx.fillStyle = COLORS.text2;
    ctx.textAlign = 'center';
    ctx.fillText('乾冰', x + w / 2, y + 112);
  } else if (phase === '液態') {
    drawCO2LiquidInContainer(x, y, w, h, nowSec, 0.55);
  } else if (phase === '氣態') {
    drawCO2VaporInContainer('rgba(120,120,134,0.55)', 1, 1.30 + co2TemperatureFactor() * 1.80, 'rgba(80,80,94,0.70)');
  } else if (phase === '超臨界流體') {
    ctx.fillStyle = 'rgba(160,100,200,0.25)';
    ctx.fillRect(x + 4, y + 8, w - 8, h - 12);
    drawCO2VaporInContainer('rgba(160,100,200,0.58)', 1.2, 1.35 + co2TemperatureFactor() * 1.55, 'rgba(108,66,150,0.72)');
    setFont(14, '800');
    ctx.fillStyle = COLORS.super;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('超臨界流體', x + w / 2, y + 44);
  } else if (phase === '液氣共存') {
    drawCO2LiquidInContainer(x, y, w, h, nowSec, 0.45);
    drawCO2VaporInContainer('rgba(120,120,134,0.55)', 0.78, 1.12 + co2TemperatureFactor() * 1.40, 'rgba(80,80,94,0.70)');
  } else if (phase === '固液共存') {
    /* 固態 CO₂ 密度大於液態，乾冰沉在液面下方 */
    drawCO2LiquidInContainer(x, y, w, h, nowSec, 0.52);
    ctx.fillStyle = 'rgba(225,235,242,0.94)';
    ctx.strokeStyle = 'rgba(80,80,94,0.30)';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.roundRect(x + 24, y + h - 78, 62, 54, 7);
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.roundRect(x + w - 92, y + h - 68, 50, 44, 6);
    ctx.fill();
    ctx.stroke();
  } else if (phase === '固氣共存') {
    /* 乾冰直接昇華：容器內為固體與氣體，無液體 */
    ctx.fillStyle = 'rgba(225,235,242,0.94)';
    ctx.strokeStyle = 'rgba(80,80,94,0.28)';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.roundRect(x + 16, y + 150, w - 32, 68, 7);
    ctx.fill();
    ctx.stroke();
    for (let i = 0; i < 3; i++) {
      ctx.beginPath();
      ctx.moveTo(x + 22, y + 166 + i * 18);
      ctx.lineTo(x + w - 22, y + 160 + i * 18);
      ctx.stroke();
    }
    drawCO2VaporInContainer('rgba(120,120,134,0.52)', 0.75, 1.12 + co2TemperatureFactor() * 1.35, 'rgba(80,80,94,0.68)');
  } else if (phase === '三相共存') {
    drawCO2LiquidInContainer(x, y, w, h, nowSec, 0.36);
    ctx.fillStyle = 'rgba(225,235,242,0.94)';
    ctx.beginPath();
    ctx.roundRect(x + 18, y + 155, 58, 60, 6);
    ctx.fill();
    drawCO2VaporInContainer('rgba(120,120,134,0.58)', 0.55, 1.05 + co2TemperatureFactor() * 1.20, 'rgba(80,80,94,0.72)');
  }
  ctx.restore();
}
function drawCO2Container(phase, nowSec) {
  const x = 170, y = 80, w = 140, h = 240;
  ctx.save();
  ctx.fillStyle = 'rgba(180,200,220,0.16)';
  ctx.beginPath(); ctx.roundRect(x, y, w, h, 8); ctx.fill();
  drawCO2ContainerContent(phase, nowSec);
  ctx.strokeStyle = '#4A7AAA';
  ctx.lineWidth = 2;
  ctx.beginPath(); ctx.roundRect(x, y, w, h, 8); ctx.stroke();
  ctx.strokeStyle = 'rgba(255,255,255,0.70)';
  ctx.lineWidth = 2;
  ctx.beginPath(); ctx.moveTo(x + 24, y + 18); ctx.lineTo(x + 24, y + h - 20); ctx.stroke();
  setFont(15, '800');
  ctx.fillStyle = COLORS.text2;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  /* 面板標題已顯示「密閉容器」，此處不再重複繪製，避免文字重疊 */
  ctx.restore();
}
function drawCO2SolidMicro(nowSec, scale = 1) {
  const solidHeat = clamp((tab3.T - CO2_T_MIN) / (CO2_TP.T - CO2_T_MIN), 0, 1);
  const amp = lerp(0.25, 2.1, solidHeat);
  const freq = lerp(3.2, 10.5, solidHeat);
  const rotAmp = lerp(0.02, 0.34, solidHeat);
  tab3.solidMicro.forEach((p, i) => {
    const px = p.x + Math.sin(nowSec * freq + i * 1.4) * amp;
    const py = p.y + Math.cos(nowSec * freq * 0.9 + i * 1.8) * amp;
    drawCO2Molecule(px, py, 5.2 * scale, p.phase + Math.sin(nowSec * (1.0 + solidHeat * 4.5) + i) * rotAmp);
  });
}
function drawCO2Magnifier(phase, dt, nowSec) {
  const cx = 240, cy = 410, r = isTeach() ? 88 : 60;
  const motionScale = co2PhaseMotionScale(phase);
  const molScale = isTeach() ? 1.38 : 1;
  ctx.save();
  drawArrow(240, 325, 240, 350, COLORS.blue, true);
  ctx.lineWidth = 9;
  ctx.strokeStyle = 'rgba(74,122,170,0.22)';
  ctx.beginPath(); ctx.moveTo(cx + 42, cy + 42); ctx.lineTo(cx + 84, cy + 84); ctx.stroke();
  ctx.lineWidth = 3;
  ctx.strokeStyle = '#4A7AAA';
  ctx.beginPath(); ctx.moveTo(cx + 42, cy + 42); ctx.lineTo(cx + 84, cy + 84); ctx.stroke();
  ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI * 2); ctx.fillStyle = '#FFFFFF'; ctx.fill(); ctx.strokeStyle = '#4A7AAA'; ctx.lineWidth = 3; ctx.stroke();
  ctx.save();
  ctx.beginPath(); ctx.arc(cx, cy, r - 4, 0, Math.PI * 2); ctx.clip();
  ctx.fillStyle = 'rgba(245,244,240,0.85)';
  ctx.fillRect(cx - r, cy - r, r * 2, r * 2);
  if (phase === '固態') {
    drawCO2SolidMicro(nowSec, molScale);
  } else if (phase === '液態') {
    updateMagnifierParticles(tab3.liquidMicro, dt, motionScale);
    tab3.liquidMicro.forEach(p => drawCO2Molecule(p.x, p.y, 6.4 * molScale, p.phase || 0));
  } else if (phase === '氣態') {
    updateMagnifierParticles(tab3.gasMicro, dt, 1.55 * motionScale);
    tab3.gasMicro.forEach(p => drawCO2Molecule(p.x, p.y, 5.3 * molScale, p.phase || 0));
  } else if (phase === '超臨界流體') {
    updateMagnifierParticles(tab3.superMicro, dt, motionScale);
    tab3.superMicro.forEach(p => drawCO2Molecule(p.x, p.y, 5.9 * molScale, p.phase || 0));
  } else if (phase === '液氣共存') {
    updateMagnifierParticles(tab3.liquidMicro, dt, 0.85 * motionScale);
    updateMagnifierParticles(tab3.gasMicro, dt, 1.25 * motionScale);
    tab3.liquidMicro.slice(0, 4).forEach(p => drawCO2Molecule(p.x, p.y + 8, 5.7 * molScale, p.phase || 0));
    tab3.gasMicro.slice(0, 3).forEach(p => drawCO2Molecule(p.x, p.y - 8, 5.0 * molScale, p.phase || 0));
  } else if (phase === '固液共存') {
    drawCO2SolidMicro(nowSec, molScale);
    updateMagnifierParticles(tab3.liquidMicro, dt, 0.80 * motionScale);
    tab3.liquidMicro.slice(0, 4).forEach(p => drawCO2Molecule(p.x, p.y + 10, 5.5 * molScale, p.phase || 0));
  } else if (phase === '固氣共存') {
    drawCO2SolidMicro(nowSec, molScale);
    updateMagnifierParticles(tab3.gasMicro, dt, 1.30 * motionScale);
    tab3.gasMicro.slice(0, 4).forEach(p => drawCO2Molecule(p.x, p.y - 14, 5.0 * molScale, p.phase || 0));
  } else if (phase === '三相共存') {
    drawCO2SolidMicro(nowSec, molScale);
    updateMagnifierParticles(tab3.liquidMicro, dt, 0.75 * motionScale);
    updateMagnifierParticles(tab3.gasMicro, dt, 1.10 * motionScale);
    tab3.liquidMicro.slice(0, 2).forEach(p => drawCO2Molecule(p.x, p.y + 10, 5.2 * molScale, p.phase || 0));
    tab3.gasMicro.slice(0, 2).forEach(p => drawCO2Molecule(p.x, p.y - 14, 4.7 * molScale, p.phase || 0));
  }
  ctx.restore();
  setFont(isTeach() ? 17 : 13, '700');
  ctx.fillStyle = COLORS.text2;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  ctx.fillText('微觀視角：CO₂ 線型分子', cx, cy + r + 12);
  ctx.restore();
}
function drawCO2LeftPhaseView(phase, dt, nowMs) {
  const nowSec = nowMs / 1000;
  drawPanel(22, 28, 436, 652, '密閉容器');
  drawCO2Container(phase, nowSec);
  drawCO2Magnifier(phase, dt, nowSec);
  const alpha = clamp((nowMs - tab3.phaseChangedAt) / 400, 0, 1);
  ctx.save();
  ctx.globalAlpha = alpha;
  setFont(isTeach() ? 32 : 22, '800');
  ctx.fillStyle = phaseColor(phase);
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(phase, 240, isTeach() ? 590 : 520);
  if (!isTeach()) {
    setFont(14, '700');
    ctx.fillStyle = COLORS.text2;
    ctx.fillText('二氧化碳：1 atm 下不形成液態，會直接昇華', 240, 552);
  }
  ctx.restore();
}
function drawCO2PhaseControls(phase) {
  const T = Math.round(tab3.T);
  const P = co2CurrentPressure();
  drawPanel(500, 20, 752, 164, '控制滑桿');
  drawSlider('溫度 T', `T = ${T} °C`, 660, 76, 420, (tab3.T - CO2_T_MIN) / (CO2_T_MAX - CO2_T_MIN), COLORS.accent);
  drawSlider('壓力 P', `P = ${formatPressure(P)} atm`, 660, 126, 420, tab3.pSlider, COLORS.blue);
  setFont(16, '700');
  ctx.fillStyle = COLORS.text2;
  ctx.textAlign = 'left';
  ctx.textBaseline = 'middle';
  /* 依實際文字寬度接續繪製，避免長狀態名（如「固液共存」）與標籤重疊 */
  const statusLabel = '目前狀態：';
  ctx.fillText(statusLabel, 530, 164);
  const statusLabelW = ctx.measureText(statusLabel).width;
  setFont(16, '800');
  ctx.fillStyle = phaseColor(phase);
  ctx.fillText(phase, 530 + statusLabelW + 6, 164);
}
function drawCO2PhaseRegions(chart = co2Chart) {
  const c = chart;
  ctx.save();
  ctx.beginPath(); ctx.rect(c.x, c.y, c.w, c.h); ctx.clip();
  ctx.fillStyle = 'rgba(255,200,180,0.25)';
  ctx.fillRect(c.x, c.y, c.w, c.h);
  // 固態區：昇華曲線上方與固液線左側。
  ctx.beginPath();
  ctx.moveTo(chartTToX(c.tMin, c), c.y);
  ctx.lineTo(chartTToX(co2SolidLiquidBoundaryTemp(c.pMax), c), c.y);
  for (let i = 0; i <= 420; i++) {
    const u = i / 420;
    const logP = lerp(Math.log10(c.pMax), Math.log10(CO2_TP.P), u);
    const P = Math.pow(10, logP);
    ctx.lineTo(chartTToX(co2SolidLiquidBoundaryTemp(P), c), chartPToGraphY(P, c));
  }
  for (let i = 0; i <= 420; i++) {
    const T = lerp(CO2_TP.T, c.tMin, i / 420);
    ctx.lineTo(chartTToX(T, c), chartPToGraphY(co2SublimationPressure(T), c));
  }
  ctx.lineTo(c.x, c.oy);
  ctx.lineTo(c.x, c.y);
  ctx.closePath();
  ctx.fillStyle = 'rgba(200,230,255,0.43)';
  ctx.fill();
  // 液態區：三相點以上、臨界點以下，介於固液與液氣相界線之間。
  ctx.beginPath();
  ctx.moveTo(chartTToX(co2SolidLiquidBoundaryTemp(c.pMax), c), c.y);
  ctx.lineTo(chartTToX(CO2_CP.T, c), c.y);
  ctx.lineTo(chartTToX(CO2_CP.T, c), chartPToGraphY(CO2_CP.P, c));
  for (let i = 0; i <= 480; i++) {
    const T = lerp(CO2_CP.T, CO2_TP.T, i / 480);
    ctx.lineTo(chartTToX(T, c), chartPToGraphY(co2VaporPressure(T), c));
  }
  for (let i = 0; i <= 360; i++) {
    const logP = lerp(Math.log10(CO2_TP.P), Math.log10(c.pMax), i / 360);
    const P = Math.pow(10, logP);
    ctx.lineTo(chartTToX(co2SolidLiquidBoundaryTemp(P), c), chartPToGraphY(P, c));
  }
  ctx.closePath();
  ctx.fillStyle = 'rgba(64,120,200,0.28)';
  ctx.fill();
  // 超臨界區。
  ctx.fillStyle = 'rgba(160,100,200,0.20)';
  const scY = Math.max(chartPToGraphY(CO2_CP.P, c), c.y);
  ctx.fillRect(chartTToX(CO2_CP.T, c), c.y, c.x + c.w - chartTToX(CO2_CP.T, c), scY - c.y + 4);
  ctx.restore();
}
function drawCO2PhaseAxes(chart = co2Chart) {
  const c = chart;
  ctx.save();
  ctx.save();
  ctx.beginPath(); ctx.rect(c.x, c.y, c.w, c.h); ctx.clip();
  ctx.strokeStyle = COLORS.border;
  ctx.lineWidth = 0.6;
  ctx.setLineDash([3, 3]);
  const tStep = chart.w < 600 ? 20 : 20;
  for (let T = c.tMin; T <= c.tMax + 0.01; T += tStep) {
    const x = chartTToX(T, c);
    ctx.beginPath(); ctx.moveTo(x, c.y); ctx.lineTo(x, c.oy); ctx.stroke();
  }
  [0.001, 0.01, 0.1, 1, 10, 100].forEach(P => {
    const y = chartPToGraphY(P, c);
    ctx.beginPath(); ctx.moveTo(c.x, y); ctx.lineTo(c.x + c.w, y); ctx.stroke();
  });
  ctx.restore();
  ctx.setLineDash([]);
  ctx.strokeStyle = COLORS.text2;
  ctx.lineWidth = 1.4;
  ctx.beginPath(); ctx.moveTo(c.x, c.y - 4); ctx.lineTo(c.x, c.oy + 2); ctx.lineTo(c.x + c.w + 6, c.oy + 2); ctx.stroke();
  setFont(isTeach() ? 17 : 13, '700');
  ctx.fillStyle = COLORS.text2;
  ctx.textAlign = 'center'; ctx.textBaseline = 'top';
  [-100, -80, -60, -40, -20, 0, 20, 40, 60, 80].forEach(T => {
    if (T >= c.tMin && T <= c.tMax) ctx.fillText(String(T), chartTToX(T, c), c.oy + 8);
  });
  ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
  /* 量測刻度標籤最大寬度，供縱軸標題避讓（教學模式字級較大，不可用固定間距） */
  let co2TickMaxW = 0;
  [0.001, 0.01, 0.1, 1, 10, 100].forEach(P => {
    const y = chartPToGraphY(P, c);
    if (y < c.y + 10) return;
    co2TickMaxW = Math.max(co2TickMaxW, ctx.measureText(String(P)).width);
    ctx.fillText(String(P), c.x - 10, y);
  });
  const co2AxisTitleSize = isTeach() ? 19 : 15;
  setFont(co2AxisTitleSize, '800');
  ctx.textAlign = 'center'; ctx.textBaseline = 'top';
  ctx.fillText('溫度 T（°C）', c.x + c.w / 2, c.oy + 30);
  ctx.save();
  ctx.translate(c.x - 10 - co2TickMaxW - co2AxisTitleSize * 0.75, c.y + c.h / 2);
  ctx.rotate(-Math.PI / 2);
  ctx.fillText('壓力 P（atm）', 0, 0);
  ctx.restore();
  ctx.restore();
}
function drawCO2PhaseBoundaryLines(chart = co2Chart) {
  const c = chart;
  ctx.save();
  ctx.beginPath(); ctx.rect(c.x, c.y, c.w, c.h); ctx.clip();
  ctx.lineJoin = 'round'; ctx.lineCap = 'round';
  ctx.strokeStyle = COLORS.green;
  ctx.lineWidth = 2;
  ctx.beginPath();
  for (let i = 0; i <= 1200; i++) {
    const T = lerp(c.tMin, CO2_TP.T, i / 1200);
    const x = chartTToX(T, c), y = chartPToGraphY(co2SublimationPressure(T), c);
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();
  ctx.strokeStyle = COLORS.accent;
  ctx.beginPath();
  for (let i = 0; i <= 1200; i++) {
    const T = lerp(CO2_TP.T, CO2_CP.T, i / 1200);
    const x = chartTToX(T, c), y = chartPToGraphY(co2VaporPressure(T), c);
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();
  ctx.strokeStyle = COLORS.blue;
  ctx.beginPath();
  for (let i = 0; i <= 1200; i++) {
    const logP = lerp(Math.log10(CO2_TP.P), Math.log10(c.pMax), i / 1200);
    const P = Math.pow(10, logP);
    const x = chartTToX(co2SolidLiquidBoundaryTemp(P), c), y = chartPToGraphY(P, c);
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();
  ctx.restore();
}
function drawCO2PhaseLabels(chart = co2Chart, compact = false) {
  const c = chart;
  ctx.save();
  ctx.globalAlpha = isTeach() ? 0.92 : 0.72;
  setFont(compact ? (isTeach() ? 15 : 13) : (isTeach() ? 20 : 16), '800');
  ctx.fillStyle = COLORS.text2;
  ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
  drawTeachPillText('固態', chartTToX(-84, c), chartPToGraphY(20, c), COLORS.text2);
  drawTeachPillText('液態', chartTToX(-18, c), chartPToGraphY(25, c), COLORS.text2);
  drawTeachPillText('氣態', chartTToX(-12, c), chartPToGraphY(0.08, c), COLORS.text2);
  ctx.fillStyle = COLORS.super;
  drawTeachPillText('超臨界流體', chartTToX(55, c), c.y + (compact ? 30 : 36), COLORS.super);
  ctx.restore();
}
function drawCO2SpecialPoints(chart = co2Chart, compact = false) {
  const c = chart;
  const tx = chartTToX(CO2_TP.T, c), ty = chartPToGraphY(CO2_TP.P, c);
  const cx = chartTToX(CO2_CP.T, c), cy = chartPToGraphY(CO2_CP.P, c);
  ctx.save();
  ctx.fillStyle = COLORS.green;
  ctx.beginPath(); ctx.arc(tx, ty, compact ? 4 : 5, 0, Math.PI * 2); ctx.fill();
  drawStar(cx, cy, compact ? 7 : 9, COLORS.super);
  if (!compact) {
    const tripleW = isTeach() ? 214 : 176;
    const tripleH = isTeach() ? 64 : 52;
    const tripleY = clamp(ty + 18, c.y + 10, c.oy - tripleH - 12);
    drawBubble(tx + 22, tripleY, tripleW, tripleH, ['三相點', '(-56.6°C, 5.11 atm)'], COLORS.green);
    const criticalBubbleY = clamp(cy + 22, c.y + 60, c.oy - 80);
    drawBubble(cx - (isTeach() ? 90 : 68), criticalBubbleY, isTeach() ? 208 : 178, isTeach() ? 62 : 50, ['臨界點', '(31.0°C, 72.8 atm)'], COLORS.super);
  } else {
    setFont(13, '800');
    ctx.fillStyle = COLORS.green;
    ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
    ctx.fillText('三相點', tx + 8, ty + 18);
    ctx.fillStyle = COLORS.super;
    ctx.textAlign = 'center';
    ctx.fillText('臨界點', cx, cy + 22);
  }
  ctx.restore();
}
function drawCO2StateCrosshair() {
  const x = chartTToX(tab3.T, co2Chart);
  const y = chartPToGraphY(co2CurrentPressure(), co2Chart);
  const glowR = tab3.draggingState ? 17 : 14;
  ctx.save();
  ctx.beginPath(); ctx.arc(x, y, glowR, 0, Math.PI * 2); ctx.fillStyle = 'rgba(240,160,32,0.30)'; ctx.fill();
  ctx.strokeStyle = COLORS.cross; ctx.lineWidth = 2;
  ctx.beginPath(); ctx.moveTo(x - 8, y); ctx.lineTo(x + 8, y); ctx.moveTo(x, y - 8); ctx.lineTo(x, y + 8); ctx.stroke();
  ctx.beginPath(); ctx.arc(x, y, 3, 0, Math.PI * 2); ctx.fillStyle = COLORS.cross; ctx.fill();
  ctx.restore();
}
function drawCO2PhaseDiagram() {
  drawPanel(500, 190, 752, 500, '二氧化碳的相圖');
  drawCO2PhaseRegions(co2Chart);
  drawCO2PhaseAxes(co2Chart);
  drawCO2PhaseBoundaryLines(co2Chart);
  drawCO2PhaseLabels(co2Chart, false);
  drawCO2SpecialPoints(co2Chart, false);
  drawCO2StateCrosshair();
}
function drawTab3(dt, nowMs) {
  const T = tab3.T;
  const P = co2CurrentPressure();
  const phase = getCO2Phase(T, P);
  if (phase !== tab3.lastPhase) {
    tab3.lastPhase = phase;
    tab3.phaseChangedAt = nowMs;
  }
  ctx.clearRect(0, 0, CW, CH);
  ctx.save();
  ctx.strokeStyle = COLORS.border;
  ctx.lineWidth = 1;
  ctx.beginPath(); ctx.moveTo(480, 0); ctx.lineTo(480, CH); ctx.stroke();
  ctx.restore();
  drawCO2LeftPhaseView(phase, dt, nowMs);
  drawCO2PhaseControls(phase);
  drawCO2PhaseDiagram();
}

// ===== Tab 4：水與二氧化碳相圖比較 =====
let compareInfoOpen = false;
const compareInfoHit = { x: 406, y: 650, w: 472, h: 42 };
let compareCloseHit = null;
const compareWaterChart = { x: 86, y: 112, w: 500, h: 470, ox: 86, oy: 582, tMin: -50, tMax: 450, pMin: PHASE_P_MIN, pMax: PHASE_P_MAX };
const compareCO2Chart = { x: 718, y: 112, w: 500, h: 470, ox: 718, oy: 582, tMin: CO2_T_MIN, tMax: CO2_T_MAX, pMin: PHASE_P_MIN, pMax: PHASE_P_MAX };
function resetCompare() {
  compareInfoOpen = false;
  compareCloseHit = null;
  updateControls();
  drawCurrentFrame(0);
}
function drawCompareAxes(chart, xTicks) {
  const c = chart;
  ctx.save();
  ctx.save();
  ctx.beginPath(); ctx.rect(c.x, c.y, c.w, c.h); ctx.clip();
  ctx.strokeStyle = COLORS.border;
  ctx.lineWidth = 0.55;
  ctx.setLineDash([3, 3]);
  xTicks.forEach(T => {
    const x = chartTToX(T, c);
    ctx.beginPath(); ctx.moveTo(x, c.y); ctx.lineTo(x, c.oy); ctx.stroke();
  });
  [0.001, 0.01, 0.1, 1, 10, 100].forEach(P => {
    const y = chartPToGraphY(P, c);
    ctx.beginPath(); ctx.moveTo(c.x, y); ctx.lineTo(c.x + c.w, y); ctx.stroke();
  });
  ctx.restore();
  ctx.setLineDash([]);
  ctx.strokeStyle = COLORS.text2;
  ctx.lineWidth = 1.2;
  ctx.beginPath(); ctx.moveTo(c.x, c.y - 3); ctx.lineTo(c.x, c.oy + 2); ctx.lineTo(c.x + c.w + 4, c.oy + 2); ctx.stroke();
  setFont(13, '700');
  ctx.fillStyle = COLORS.text2;
  ctx.textAlign = 'center'; ctx.textBaseline = 'top';
  xTicks.forEach(T => ctx.fillText(String(T), chartTToX(T, c), c.oy + 7));
  ctx.textAlign = 'right'; ctx.textBaseline = 'middle';
  [0.001, 0.01, 0.1, 1, 10, 100].forEach(P => {
    const y = chartPToGraphY(P, c);
    if (y < c.y + 10) return;
    ctx.fillText(String(P), c.x - 8, y);
  });
  setFont(14, '800');
  ctx.textAlign = 'center'; ctx.textBaseline = 'top';
  ctx.fillText('溫度 T（°C）', c.x + c.w / 2, c.oy + 34);
  ctx.save();
  ctx.translate(c.x - 52, c.y + c.h / 2);
  ctx.rotate(-Math.PI / 2);
  ctx.fillText('壓力 P（atm）', 0, 0);
  ctx.restore();
  ctx.restore();
}
function drawWaterRegionsAt(chart) {
  const c = chart;
  ctx.save();
  ctx.beginPath(); ctx.rect(c.x, c.y, c.w, c.h); ctx.clip();
  ctx.fillStyle = 'rgba(255,200,180,0.25)'; ctx.fillRect(c.x, c.y, c.w, c.h);
  ctx.beginPath();
  ctx.moveTo(c.x, c.y);
  ctx.lineTo(chartTToX(solidLiquidBoundaryTemp(PHASE_P_MAX), c), c.y);
  for (let i = 0; i <= 360; i++) {
    const P = Math.pow(10, lerp(Math.log10(PHASE_P_MAX), Math.log10(TP.P), i / 360));
    ctx.lineTo(chartTToX(solidLiquidBoundaryTemp(P), c), chartPToGraphY(P, c));
  }
  for (let i = 0; i <= 360; i++) {
    const T = lerp(TP.T, c.tMin, i / 360);
    ctx.lineTo(chartTToX(T, c), chartPToGraphY(sublimationPressure(T), c));
  }
  ctx.lineTo(c.x, c.oy); ctx.lineTo(c.x, c.y); ctx.closePath();
  ctx.fillStyle = 'rgba(200,230,255,0.45)'; ctx.fill();
  ctx.beginPath();
  ctx.moveTo(chartTToX(solidLiquidBoundaryTemp(PHASE_P_MAX), c), c.y);
  ctx.lineTo(chartTToX(CP.T, c), c.y);
  ctx.lineTo(chartTToX(CP.T, c), chartPToGraphY(CP.P, c));
  for (let i = 0; i <= 420; i++) {
    const T = lerp(CP.T, TP.T, i / 420);
    ctx.lineTo(chartTToX(T, c), chartPToGraphY(vaporPressure(T), c));
  }
  for (let i = 0; i <= 360; i++) {
    const P = Math.pow(10, lerp(Math.log10(TP.P), Math.log10(PHASE_P_MAX), i / 360));
    ctx.lineTo(chartTToX(solidLiquidBoundaryTemp(P), c), chartPToGraphY(P, c));
  }
  ctx.closePath();
  ctx.fillStyle = 'rgba(64,120,200,0.30)'; ctx.fill();
  ctx.fillStyle = 'rgba(160,100,200,0.20)';
  const scY = Math.max(chartPToGraphY(CP.P, c), c.y);
  ctx.fillRect(chartTToX(CP.T, c), c.y, c.x + c.w - chartTToX(CP.T, c), scY - c.y + 4);
  ctx.restore();
}
function drawWaterLinesAt(chart, compact = true) {
  const c = chart;
  ctx.save();
  ctx.beginPath(); ctx.rect(c.x, c.y, c.w, c.h); ctx.clip();
  ctx.lineWidth = 2;
  ctx.lineJoin = 'round'; ctx.lineCap = 'round';
  ctx.strokeStyle = COLORS.green;
  ctx.beginPath();
  for (let i = 0; i <= 800; i++) {
    const T = lerp(c.tMin, TP.T, i / 800);
    const x = chartTToX(T, c), y = chartPToGraphY(sublimationPressure(T), c);
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();
  ctx.strokeStyle = COLORS.accent;
  ctx.beginPath();
  for (let i = 0; i <= 800; i++) {
    const T = lerp(TP.T, CP.T, i / 800);
    const x = chartTToX(T, c), y = chartPToGraphY(vaporPressure(T), c);
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();
  ctx.strokeStyle = COLORS.blue;
  ctx.beginPath();
  for (let i = 0; i <= 800; i++) {
    const P = Math.pow(10, lerp(Math.log10(TP.P), Math.log10(PHASE_P_MAX), i / 800));
    const x = chartTToX(solidLiquidBoundaryTemp(P), c), y = chartPToGraphY(P, c);
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();
  ctx.restore();
  const tx = chartTToX(TP.T, c), ty = chartPToGraphY(TP.P, c);
  const cx = chartTToX(CP.T, c), cy = chartPToGraphY(CP.P, c);
  ctx.fillStyle = COLORS.green; ctx.beginPath(); ctx.arc(tx, ty, 4, 0, Math.PI * 2); ctx.fill();
  drawStar(cx, cy, 7, COLORS.super);
  setFont(13, '800');
  ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
  ctx.fillStyle = COLORS.green; ctx.fillText('三相點', tx + 8, ty - 16);
  ctx.fillStyle = COLORS.super; ctx.fillText('臨界點', cx - 76, cy + 18);
  setFont(13, '800');
  ctx.fillStyle = COLORS.blue; ctx.textAlign = 'left';
  drawHighlightedText('固液線：負斜率', chartTToX(22, c), chartPToGraphY(75, c), COLORS.blue, 'left');
}
function drawWaterLabelsAt(chart) {
  const c = chart;
  ctx.save();
  ctx.globalAlpha = 0.72;
  setFont(13, '800');
  ctx.fillStyle = COLORS.text2;
  ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
  drawTeachPillText('固態', chartTToX(-34, c), chartPToGraphY(4, c), COLORS.text2);
  drawTeachPillText('液態', chartTToX(145, c), chartPToGraphY(18, c), COLORS.text2);
  drawTeachPillText('氣態', chartTToX(280, c), chartPToGraphY(0.06, c), COLORS.text2);
  ctx.fillStyle = COLORS.super;
  drawTeachPillText('超臨界流體', chartTToX(404, c), c.y + 28, COLORS.super);
  ctx.restore();
}
function drawCompareChartTitle(x, y, title, note) {
  setFont(isTeach() ? 26 : 22, '800');
  ctx.fillStyle = COLORS.text;
  ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
  ctx.fillText(title, x, y);
  if (!isTeach()) {
    setFont(13, '700');
    ctx.fillStyle = COLORS.text2;
    ctx.fillText(note, x, y + 28);
  }
}
function drawCompareInfoTag() {
  const b = compareInfoHit;
  ctx.save();
  ctx.beginPath(); ctx.roundRect(b.x, b.y, b.w, b.h, 21);
  ctx.fillStyle = compareInfoOpen ? 'rgba(45,95,166,0.12)' : '#FFFFFF';
  ctx.fill();
  ctx.strokeStyle = COLORS.blue;
  ctx.lineWidth = 1.5;
  ctx.stroke();
  setFont(15, '800');
  ctx.fillStyle = COLORS.blue;
  ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
  ctx.fillText('ⓘ 圖解標籤：為何水的熔點曲線斜率為負？', b.x + b.w / 2, b.y + b.h / 2);
  ctx.restore();
}
function compareOverlayRect() {
  return { x: 40, y: 40, w: CW - 80, h: CH - 80 };
}
function drawIceWaterExplanationOverlay() {
  ctx.save();
  ctx.fillStyle = 'rgba(26,26,46,0.32)';
  ctx.fillRect(0, 0, CW, CH);
  const { x, y, w, h } = compareOverlayRect();
  ctx.beginPath(); ctx.roundRect(x, y, w, h, 16);
  ctx.fillStyle = 'rgba(255,255,255,0.97)'; ctx.fill();
  ctx.strokeStyle = COLORS.blue; ctx.lineWidth = 2; ctx.stroke();
  compareCloseHit = { x: x + w - 52, y: y + 16, w: 36, h: 36 };
  ctx.beginPath(); ctx.arc(x + w - 34, y + 34, 18, 0, Math.PI * 2);
  ctx.fillStyle = 'rgba(245,244,240,0.98)'; ctx.fill();
  ctx.strokeStyle = 'rgba(45,95,166,0.42)'; ctx.lineWidth = 1.4; ctx.stroke();
  setFont(20, '800');
  ctx.fillStyle = COLORS.text;
  ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
  ctx.fillText('✕', x + w - 34, y + 34);
  setFont(isTeach() ? 34 : 28, '800');
  ctx.fillStyle = COLORS.text;
  ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
  ctx.fillText('水的固液相界線為何向左傾？', x + w / 2, y + 50);
  // 左側圖解：開放六邊形冰晶。
  ctx.save();
  ctx.translate(x + w * 0.30, y + 260);
  setFont(isTeach() ? 24 : 20, '800'); ctx.fillStyle = COLORS.blue; ctx.textAlign = 'center';
  ctx.fillText('冰：開放六邊形氫鍵網絡', 0, -122);
  drawIceHexagonCluster(0, -6, 66, 11.5, performance.now() / 1000);
  setFont(17, '700'); ctx.fillStyle = COLORS.text2;
  ctx.fillText('分子間空隙大', 0, 134);
  ctx.restore();
  // 右側圖解：加壓偏向密度較大的液態。
  ctx.save();
  ctx.translate(x + w * 0.70, y + 260);
  setFont(isTeach() ? 24 : 20, '800'); ctx.fillStyle = COLORS.liquid; ctx.textAlign = 'center';
  ctx.fillText('液態水：較密、體積較小', 0, -122);
  const rand = seededRandom(77);
  for (let i = 0; i < 16; i++) {
    const px = -96 + rand() * 192;
    const py = -66 + rand() * 132;
    drawWaterMolecule(px, py, 9.6, rand() * Math.PI * 2);
  }
  drawArrow(-165, 0, -118, 0, COLORS.accent, false);
  drawArrow(165, 0, 118, 0, COLORS.accent, false);
  setFont(17, '700'); ctx.fillStyle = COLORS.text2;
  ctx.fillText('加壓會偏向較小體積', 0, 134);
  ctx.restore();
  // 文字說明。
  const tx = x + 92, ty = y + 450;
  ctx.textAlign = 'left'; ctx.textBaseline = 'top';
  setFont(isTeach() ? 24 : 18, '700'); ctx.fillStyle = COLORS.text2;
  const linesPersonal = [
    '1. 冰的 H···O 氫鍵形成開放六邊形網絡，因此冰的密度小於液態水。',
    '2. 升高壓力時，系統傾向體積較小、較密的液態水，使熔點下降。',
    '3. 用克拉佩龍式看：熔化時 ΔH > 0，但水的 ΔV = V液態 − V固態 < 0，',
    '   所以固液相界線的 dP/dT < 0，圖上就會向左傾。'
  ];
  const linesTeach = [
    '冰的氫鍵形成開放六邊形網絡 → 冰密度小於液態水。',
    '加壓偏向體積較小的液態，故熔點下降（固液線向左傾）。'
  ];
  const lines = isTeach() ? linesTeach : linesPersonal;
  lines.forEach((line, i) => ctx.fillText(line, tx, ty + i * (isTeach() ? 44 : 34)));
  setFont(16, '800'); ctx.fillStyle = COLORS.blue; ctx.textAlign = 'center';
  ctx.fillText('點右上角 ✕、再次點圖解標籤，或點卡片外可關閉', x + w / 2, y + h - 32);
  ctx.restore();
}
function drawCompareIceInset() {
  // Tab4 直接顯示水的固態微觀排列，與 Tab1/Tab2 同樣採用 O-H···O 六邊形氫鍵環。
  const x = 104, y = 156, w = 178, h = 128;
  ctx.save();
  ctx.beginPath(); ctx.roundRect(x, y, w, h, 12);
  ctx.fillStyle = 'rgba(255,255,255,0.90)';
  ctx.fill();
  ctx.strokeStyle = 'rgba(45,95,166,0.35)';
  ctx.lineWidth = 1.2;
  ctx.stroke();
  setFont(isTeach() ? 16 : 13, '800');
  ctx.fillStyle = COLORS.blue;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText('固態水：O-H···O 六邊形', x + w / 2, y + 18);
  ctx.save();
  ctx.translate(x + w / 2, y + 75);
  drawIceHexagonCluster(0, 0, 27, 4.7, performance.now() / 1000);
  ctx.restore();
  setFont(13, '700');
  ctx.fillStyle = COLORS.text2;
  ctx.fillText('氫鍵形成開放網絡', x + w / 2, y + h - 17);
  ctx.restore();
}

function drawTab4() {
  ctx.clearRect(0, 0, CW, CH);
  drawPanel(22, 22, 606, 616, '');
  drawPanel(652, 22, 606, 616, '');
  drawCompareChartTitle(52, 64, '水的相圖', '固液相界線向左傾：水的特殊性');
  drawCompareChartTitle(682, 64, '二氧化碳的相圖', '一般物質固液相界線向右傾；1 atm 下直接昇華');
  drawWaterRegionsAt(compareWaterChart);
  drawCompareAxes(compareWaterChart, [-50, 0, 100, 200, 300, 400, 450]);
  drawWaterLinesAt(compareWaterChart, true);
  drawWaterLabelsAt(compareWaterChart);
  drawCO2PhaseRegions(compareCO2Chart);
  drawCompareAxes(compareCO2Chart, [-100, -80, -60, -40, -20, 0, 20, 40, 60, 80]);
  drawCO2PhaseBoundaryLines(compareCO2Chart);
  drawCO2PhaseLabels(compareCO2Chart, true);
  drawCO2SpecialPoints(compareCO2Chart, true);
  setFont(13, '800');
  ctx.fillStyle = COLORS.blue; ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
  drawHighlightedText('固液線：正斜率', chartTToX(-48, compareCO2Chart) + 8, chartPToGraphY(70, compareCO2Chart), COLORS.blue, 'left');
  drawCompareInfoTag();
  if (compareInfoOpen) drawIceWaterExplanationOverlay();
}

// ===== 畫布滑桿互動 =====
const sliderGeom = {
  temp: { x: 660, y: 76, w: 420 },
  pressure: { x: 660, y: 126, w: 420 }
};
function canvasPoint(evt) {
  const rect = canvas.getBoundingClientRect();
  const e = evt.touches ? evt.touches[0] : evt;
  return { x: (e.clientX - rect.left) / rect.width * CW, y: (e.clientY - rect.top) / rect.height * CH };
}
function pointInRect(pt, r) {
  return pt.x >= r.x && pt.x <= r.x + r.w && pt.y >= r.y && pt.y <= r.y + r.h;
}
function chartHitRect(chart) {
  return { x: chart.x, y: chart.oy - chart.h, w: chart.w, h: chart.h };
}
function sliderHit(pt) {
  if (currentTab !== 'phase' && currentTab !== 'co2') return null;
  for (const [key, g] of Object.entries(sliderGeom)) {
    if (pt.x >= g.x - 16 && pt.x <= g.x + g.w + 16 && Math.abs(pt.y - g.y) <= 20) return key;
  }
  return null;
}
function phaseStateHit(pt) {
  if (currentTab === 'phase' && pointInRect(pt, chartHitRect(phaseChart))) return 'phase';
  if (currentTab === 'co2' && pointInRect(pt, chartHitRect(co2Chart))) return 'co2';
  return null;
}
function setTab2StateFromChartPoint(pt) {
  const r = chartHitRect(phaseChart);
  const x = clamp(pt.x, r.x, r.x + r.w);
  const y = clamp(pt.y, r.y, r.y + r.h);
  tab2.T = Math.round(phaseChartXToT(x));
  tab2.pSlider = sliderFromPressure(phaseChartYToP(y));
  tab2.hasInteracted = true;
  updateControls();
}
function setTab3StateFromChartPoint(pt) {
  const r = chartHitRect(co2Chart);
  const x = clamp(pt.x, r.x, r.x + r.w);
  const y = clamp(pt.y, r.y, r.y + r.h);
  tab3.T = Math.round(chartXToT(x, co2Chart));
  tab3.pSlider = sliderFromPressure(chartYToP(y, co2Chart));
  tab3.hasInteracted = true;
  updateControls();
}
function setStateFromChartPoint(pt) {
  if (currentTab === 'phase') setTab2StateFromChartPoint(pt);
  else if (currentTab === 'co2') setTab3StateFromChartPoint(pt);
}
function setSliderValue(name, x) {
  const g = sliderGeom[name];
  const f = clamp((x - g.x) / g.w, 0, 1);
  if (currentTab === 'phase') {
    if (name === 'temp') tab2.T = Math.round(-50 + f * 500);
    if (name === 'pressure') tab2.pSlider = f;
    tab2.hasInteracted = true;
  } else if (currentTab === 'co2') {
    if (name === 'temp') tab3.T = Math.round(CO2_T_MIN + f * (CO2_T_MAX - CO2_T_MIN));
    if (name === 'pressure') tab3.pSlider = f;
    tab3.hasInteracted = true;
  }
  updateControls();
}
function setActiveSlider(hit) {
  if (currentTab === 'phase') tab2.activeSlider = hit;
  if (currentTab === 'co2') tab3.activeSlider = hit;
}
function currentActiveSlider() {
  if (currentTab === 'phase') return tab2.activeSlider;
  if (currentTab === 'co2') return tab3.activeSlider;
  return null;
}
function setDraggingState(active) {
  if (currentTab === 'phase') tab2.draggingState = active;
  if (currentTab === 'co2') tab3.draggingState = active;
}
function currentDraggingState() {
  if (currentTab === 'phase') return tab2.draggingState;
  if (currentTab === 'co2') return tab3.draggingState;
  return false;
}
function closeCompareOverlay() {
  compareInfoOpen = false;
  compareCloseHit = null;
  updateControls();
  drawCurrentFrame(0);
}
canvas.addEventListener('mousedown', e => {
  const pt = canvasPoint(e);
  if (currentTab === 'compare' && compareInfoOpen) {
    if ((compareCloseHit && pointInRect(pt, compareCloseHit)) ||
        pointInRect(pt, compareInfoHit) ||
        !pointInRect(pt, compareOverlayRect())) {
      closeCompareOverlay();
    }
    return;
  }
  if (currentTab === 'compare' && pointInRect(pt, compareInfoHit)) {
    compareInfoOpen = !compareInfoOpen;
    updateControls();
    drawCurrentFrame(0);
    return;
  }
  const hit = sliderHit(pt);
  if (hit) {
    setActiveSlider(hit);
    setSliderValue(hit, pt.x);
    drawCurrentFrame(0);
    return;
  }
  if (!isRecording && phaseStateHit(pt)) {
    setDraggingState(true);
    setStateFromChartPoint(pt);
    drawCurrentFrame(0);
  }
});
window.addEventListener('mousemove', e => {
  const active = currentActiveSlider();
  if (active) {
    setSliderValue(active, canvasPoint(e).x);
    return;
  }
  if (currentDraggingState()) setStateFromChartPoint(canvasPoint(e));
});
window.addEventListener('mouseup', () => {
  tab2.activeSlider = null; tab3.activeSlider = null;
  tab2.draggingState = false; tab3.draggingState = false;
});
canvas.addEventListener('touchstart', e => {
  const pt = canvasPoint(e);
  if (currentTab === 'compare' && compareInfoOpen) {
    e.preventDefault();
    if ((compareCloseHit && pointInRect(pt, compareCloseHit)) ||
        pointInRect(pt, compareInfoHit) ||
        !pointInRect(pt, compareOverlayRect())) {
      closeCompareOverlay();
    }
    return;
  }
  if (currentTab === 'compare' && pointInRect(pt, compareInfoHit)) {
    e.preventDefault();
    compareInfoOpen = !compareInfoOpen;
    updateControls();
    drawCurrentFrame(0);
    return;
  }
  const hit = sliderHit(pt);
  if (hit) {
    e.preventDefault();
    setActiveSlider(hit);
    setSliderValue(hit, pt.x);
    drawCurrentFrame(0);
    return;
  }
  if (!isRecording && phaseStateHit(pt)) {
    e.preventDefault();
    setDraggingState(true);
    setStateFromChartPoint(pt);
    drawCurrentFrame(0);
  }
}, { passive: false });
window.addEventListener('touchmove', e => {
  const active = currentActiveSlider();
  if (active) {
    e.preventDefault();
    setSliderValue(active, canvasPoint(e).x);
    return;
  }
  if (currentDraggingState()) {
    e.preventDefault();
    setStateFromChartPoint(canvasPoint(e));
  }
}, { passive: false });
window.addEventListener('touchend', () => {
  tab2.activeSlider = null; tab3.activeSlider = null;
  tab2.draggingState = false; tab3.draggingState = false;
});


// ===== 全域動畫、Tab 與控制列 =====
let currentTab = 'heating';
const tabAnimIds = { heating: null, phase: null, co2: null, compare: null };
let lastTimestamp = null;
let isRecording = false;
let recorder = null;
let recordedChunks = [];
let lastDrawTime = 0;
let lastControlSync = 0;

function updateControls() {
  const isNonHeating = currentTab !== 'heating';
  btnPlay.classList.toggle('is-hidden', isNonHeating);
  btnRecord.classList.toggle('is-hidden', isNonHeating);
  sepMain.classList.toggle('is-hidden', isNonHeating);
  if (isNonHeating) {
    statusEl.style.order = '1';
    btnReset.style.order = '2';
    sepFull.style.order = '3';
    btnFullscreen.style.order = '4';
    btnReset.textContent = '↺ 重置';
    btnRecord.classList.toggle('recording', isRecording);
    if (currentTab === 'phase') {
      const phase = getPhase(tab2.T, currentPressure());
      statusEl.textContent = tab2.hasInteracted
        ? `水：溫度 ${Math.round(tab2.T)}°C，壓力 ${formatPressure(currentPressure())} atm → 目前：${phase}`
        : '拖曳滑桿或點選相圖改變水的溫度與壓力，觀察巨觀與微觀的變化';
    } else if (currentTab === 'co2') {
      const phase = getCO2Phase(tab3.T, co2CurrentPressure());
      statusEl.textContent = tab3.hasInteracted
        ? `CO₂：溫度 ${Math.round(tab3.T)}°C，壓力 ${formatPressure(co2CurrentPressure())} atm → 目前：${phase}`
        : '拖曳滑桿或點選相圖改變二氧化碳的溫度與壓力，觀察相圖、容器與 CO₂ 分子運動';
    } else {
      statusEl.textContent = compareInfoOpen
        ? '圖解已開啟 — 點右上角 ✕、圖解標籤或卡片外可關閉；水因冰晶體積較大而呈現負斜率固液線'
        : '比較水與二氧化碳的相圖；點擊圖解標籤說明水的熔點曲線為何斜率為負';
    }
  } else {
    btnPlay.style.order = '1';
    btnReset.style.order = '2';
    btnRecord.style.order = '3';
    sepMain.style.order = '4';
    statusEl.style.order = '5';
    sepFull.style.order = '6';
    btnFullscreen.style.order = '7';
    btnPlay.textContent = tab1.playing ? '⏸ 暫停' : (tab1.elapsed > 0 && !tab1.ended ? '▶ 繼續' : '▶ 播放');
    btnPlay.disabled = isRecording;
    btnPlay.setAttribute('aria-pressed', String(tab1.playing));
    btnReset.textContent = '↺ 重置';
    btnRecord.textContent = isRecording ? '■ 停止錄製' : '⏺ 錄製下載';
    btnRecord.classList.toggle('recording', isRecording);
    statusEl.textContent = tab1StatusText();
  }
  tabButtons.forEach(btn => btn.disabled = isRecording);
}
function stopTabLoop(tabName) {
  if (tabAnimIds[tabName]) {
    cancelAnimationFrame(tabAnimIds[tabName]);
    tabAnimIds[tabName] = null;
  }
}
function stopAllTabLoops() {
  Object.keys(tabAnimIds).forEach(stopTabLoop);
  lastTimestamp = null;
}
function startTabLoop(tabName) {
  stopTabLoop(tabName);
  lastTimestamp = null;
  const loopMap = { heating: heatingLoop, phase: phaseLoop, co2: co2Loop, compare: compareLoop };
  tabAnimIds[tabName] = requestAnimationFrame(loopMap[tabName]);
}
function switchTab(tabName) {
  if (isRecording) return;
  stopAllTabLoops();
  currentTab = tabName;
  tab2.activeSlider = null;
  tab2.draggingState = false;
  tab3.activeSlider = null;
  tab3.draggingState = false;
  compareInfoOpen = false;
  tabButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.tab === tabName));
  if (tabName === 'heating') {
    resetTab1(false);
  } else {
    tab1.playing = false;
    updateControls();
    drawCurrentFrame(0);
  }
  startTabLoop(tabName);
}
function drawCurrentFrame(dt) {
  if (currentTab === 'heating') drawTab1(dt);
  else if (currentTab === 'phase') drawTab2(dt, performance.now());
  else if (currentTab === 'co2') drawTab3(dt, performance.now());
  else drawTab4();
}
function heatingLoop(ts) {
  if (currentTab !== 'heating') return;
  if (lastTimestamp === null) lastTimestamp = ts;
  const rawDt = Math.min(ts - lastTimestamp, 80);
  const dt = rawDt / 1000;
  lastTimestamp = ts;
  lastDrawTime = ts;
  if (tab1.playing && !tab1.ended) {
    tab1.elapsed += rawDt;
    if (tab1.elapsed >= TAB1_TOTAL_MS) {
      tab1.elapsed = TAB1_TOTAL_MS;
      tab1.playing = false;
      tab1.ended = true;
      if (isRecording) stopRecording();
    }
    if (tab1.ended || ts - lastControlSync > 250) {
      updateControls();
      lastControlSync = ts;
    }
  }
  drawTab1(dt);
  tabAnimIds.heating = requestAnimationFrame(heatingLoop);
}
function phaseLoop(ts) {
  if (currentTab !== 'phase') return;
  if (lastTimestamp === null) lastTimestamp = ts;
  const rawDt = Math.min(ts - lastTimestamp, 80);
  const dt = rawDt / 1000;
  lastTimestamp = ts;
  lastDrawTime = ts;
  drawTab2(dt, ts);
  tabAnimIds.phase = requestAnimationFrame(phaseLoop);
}
function co2Loop(ts) {
  if (currentTab !== 'co2') return;
  if (lastTimestamp === null) lastTimestamp = ts;
  const rawDt = Math.min(ts - lastTimestamp, 80);
  const dt = rawDt / 1000;
  lastTimestamp = ts;
  lastDrawTime = ts;
  drawTab3(dt, ts);
  tabAnimIds.co2 = requestAnimationFrame(co2Loop);
}
function compareLoop(ts) {
  if (currentTab !== 'compare') return;
  if (lastTimestamp === null) lastTimestamp = ts;
  const rawDt = Math.min(ts - lastTimestamp, 80);
  lastTimestamp = ts;
  lastDrawTime = ts;
  drawTab4();
  tabAnimIds.compare = requestAnimationFrame(compareLoop);
}

tabButtons.forEach(btn => btn.addEventListener('click', () => switchTab(btn.dataset.tab)));
function toggleTab1Playback() {
  if (currentTab !== 'heating' || isRecording) return;
  if (tab1.ended) resetTab1(false);
  tab1.playing = !tab1.playing;
  lastTimestamp = null; // 切換播放／暫停時重置時間戳，避免續播第一幀出現時間跳動。
  updateControls();
  drawCurrentFrame(0);
}
btnPlay.addEventListener('click', toggleTab1Playback);
btnReset.addEventListener('click', () => {
  if (currentTab === 'heating') resetTab1(false);
  else if (currentTab === 'phase') resetTab2();
  else if (currentTab === 'co2') resetTab3();
  else resetCompare();
});
btnFullscreen.addEventListener('click', () => {
  if (!document.fullscreenElement) document.documentElement.requestFullscreen();
  else document.exitFullscreen();
});
document.addEventListener('fullscreenchange', () => {
  const active = Boolean(document.fullscreenElement);
  btnFullscreen.textContent = active ? '✕ 退出全螢幕' : '⛶ 全螢幕';
  btnFullscreen.classList.toggle('is-fullscreen', active);
  resizeCanvas();
});

function bestRecorderMime() {
  if (typeof MediaRecorder === 'undefined') return '';
  const candidates = ['video/webm;codecs=vp9', 'video/webm;codecs=vp8', 'video/webm', 'video/mp4'];
  return candidates.find(type => MediaRecorder.isTypeSupported(type)) || '';
}
function startRecording() {
  if (currentTab !== 'heating' || isRecording) return;
  if (!canvas.captureStream || typeof MediaRecorder === 'undefined') {
    statusEl.textContent = '此瀏覽器不支援 MediaRecorder 錄製功能';
    return;
  }
  resetTab1(true);
  const stream = canvas.captureStream(30);
  const mimeType = bestRecorderMime();
  recordedChunks = [];
  try {
    recorder = mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream);
  } catch (err) {
    statusEl.textContent = '錄製初始化失敗，請改用支援 MediaRecorder 的瀏覽器';
    return;
  }
  recorder.ondataavailable = e => { if (e.data && e.data.size > 0) recordedChunks.push(e.data); };
  recorder.onstop = () => {
    const type = recorder.mimeType || mimeType || 'video/webm';
    const ext = type.includes('mp4') ? 'mp4' : 'webm';
    const blob = new Blob(recordedChunks, { type });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `物質的狀態_加熱曲線.${ext}`;
    document.body.appendChild(a);
    a.click();
    a.remove();
    setTimeout(() => URL.revokeObjectURL(url), 1000);
    recorder = null;
    recordedChunks = [];
    isRecording = false;
    updateControls();
  };
  isRecording = true;
  recorder.start();
  updateControls();
}
function stopRecording() {
  if (!isRecording || !recorder) return;
  if (recorder.state !== 'inactive') recorder.stop();
}
btnRecord.addEventListener('click', () => {
  if (isRecording) stopRecording();
  else startRecording();
});

// ===== 進場小動畫 =====
const loadingCanvas = document.getElementById('loading-canvas');
const lctx = loadingCanvas.getContext('2d');
function drawLoadingBall(c, x, y, r, color) {
  const g = c.createRadialGradient(x - r * 0.25, y - r * 0.25, 1, x, y, r);
  g.addColorStop(0, '#fff');
  g.addColorStop(0.35, color);
  g.addColorStop(1, shade(color, -50));
  c.beginPath(); c.arc(x, y, r, 0, Math.PI * 2); c.fillStyle = g; c.fill();
}
function loadingLoop(ts) {
  const t = (ts % 1200) / 1200;
  lctx.clearRect(0, 0, 120, 80);
  lctx.fillStyle = '#FFFFFF';
  lctx.fillRect(0, 0, 120, 80);
  const groups = [22, 60, 98];
  groups.forEach((gx, gi) => {
    const phase = clamp(t * 3 - gi, 0, 1);
    for (let i = 0; i < 6; i++) {
      const row = Math.floor(i / 3), col = i % 3;
      const ordered = { x: gx - 11 + col * 11, y: 31 + row * 12 };
      const loose = { x: gx - 13 + col * 13 + Math.sin(ts * 0.008 + i) * 2, y: 30 + row * 15 + Math.cos(ts * 0.006 + i) * 2 };
      const spread = { x: gx - 19 + (i % 2) * 38 + Math.sin(ts * 0.005 + i) * 4, y: 20 + i * 7 + Math.cos(ts * 0.006 + i) * 4 };
      const mid = phase < 0.5 ? smoothstep(phase / 0.5) : 1;
      const gasP = phase > 0.5 ? smoothstep((phase - 0.5) / 0.5) : 0;
      const base = { x: lerp(ordered.x, loose.x, mid), y: lerp(ordered.y, loose.y, mid) };
      const pos = { x: lerp(base.x, spread.x, gasP), y: lerp(base.y, spread.y, gasP) };
      const color = gasP > 0.35 ? COLORS.gas : (mid > 0.35 ? COLORS.liquid : COLORS.solid);
      drawLoadingBall(lctx, pos.x, pos.y, gasP > 0.35 ? 4.5 : 5.3, color);
    }
  });
  if (!document.getElementById('loading-screen').classList.contains('fade-out')) requestAnimationFrame(loadingLoop);
}

// ===== 啟動 =====
function applyModeLayout() {
  fontScale = isTeach() ? 1.18 : 1.0;
  if (modeLabel) modeLabel.textContent = isTeach() ? '［教學投影模式］' : '［個人模式］';
  if (isTeach() && !tabBarInTopbar) {
    topbar.appendChild(tabBar);
    tabBarInTopbar = true;
  } else if (!isTeach() && tabBarInTopbar) {
    document.body.insertBefore(tabBar, canvasWrap);
    tabBarInTopbar = false;
  }
}
function returnToModeSelect() {
  const loading = document.getElementById('loading-screen');
  loading.style.display = 'flex';
  loading.classList.remove('fade-out');
  requestAnimationFrame(loadingLoop);
}
function startWithMode(mode) {
  displayMode = mode;
  document.body.classList.toggle('teach-mode', mode === 'teaching');
  applyModeLayout();
  const loading = document.getElementById('loading-screen');
  loading.classList.add('fade-out');
  setTimeout(() => { loading.style.display = 'none'; }, 600);
  resizeCanvas();
  drawCurrentFrame(0);
  if (!appStarted) {
    appStarted = true;
    startTabLoop(currentTab);
  }
}
titleMain.addEventListener('click', returnToModeSelect);
btnModeTeach.addEventListener('click', () => startWithMode('teaching'));
btnModePersonal.addEventListener('click', () => startWithMode('personal'));

/* ── 聯絡與致謝視窗 ── */
const footerCreator = document.getElementById('footerCreator');
const contactOverlay = document.getElementById('contactOverlay');
const btnCloseContact = document.getElementById('btnCloseContact');

/* 記住由哪一個署名觸發，關閉時把焦點還回去 */
let contactOpener = null;

function isContactOpen() {
  return contactOverlay.classList.contains('is-open');
}

function openContactSheet(opener) {
  contactOpener = opener || null;
  contactOverlay.classList.add('is-open');
  contactOverlay.setAttribute('aria-hidden', 'false');
  btnCloseContact.focus();
}

function closeContactSheet() {
  contactOverlay.classList.remove('is-open');
  contactOverlay.setAttribute('aria-hidden', 'true');
  if (contactOpener) contactOpener.focus();
  contactOpener = null;
}

/* 兩處署名（教學模式標題列、個人模式頁尾）綁同一個視窗 */
creatorTag.addEventListener('click', () => openContactSheet(creatorTag));
footerCreator.addEventListener('click', () => openContactSheet(footerCreator));
btnCloseContact.addEventListener('click', closeContactSheet);
contactOverlay.addEventListener('click', evt => {
  if (evt.target === contactOverlay) closeContactSheet();
});

/* ESC 關閉聯絡視窗（本教材圖解卡片為 canvas 繪製，不共用此鍵） */
document.addEventListener('keydown', evt => {
  if (evt.key !== 'Escape') return;
  if (isContactOpen()) {
    evt.preventDefault();
    closeContactSheet();
  }
});

resizeCanvas();
initTab1Particles();
initTab2Particles();
initTab3Particles();
resetTab1(false);
applyModeLayout();
requestAnimationFrame(loadingLoop);
</script>
</body>
</html>