/* pixel.css — UI 字型對應與機長對話框樣式
 *
 * 原為 JRPG 像素風地基（Cubic 11 點陣字），因點陣中文子集缺字、閱讀不順，已全面改回
 * 無襯線（見下方 --font-pixel）。本檔現在只負責：UI 字型對應、機長對話框/反應條/慶祝框
 * 版面。點陣字檔與其子集工具（tools/subset_font.py、pixel_charset.txt）已一併移除。
 *
 * 載入順序：本檔在 app.css 之後載入，才能覆蓋既有 font-family。
 */

/* 全站 UI 字型：無襯線（IBM Plex Sans + Noto Sans TC）。
 * 原本整個 UI 走 Cubic 11 點陣字（麥塊風），但點陣中文子集缺字、閱讀不順，已全面改回無襯線。
 * --font-pixel 保留變數名（多處引用），但現在解析為無襯線 UI 字，一處改、全站生效。
 * 數字/讀數（--font-data）維持 tokens.css 的 IBM Plex Mono 儀表字。 */
:root {
  --font-pixel: var(--font-ui);
}

/* 整個 UI 預設走無襯線 UI 字（長文題幹/解析仍在下方指定 Noto） */
body {
  font-family: var(--font-pixel);
}

/* 短標籤/標題/清單：改用 balance 讓多行長度平均，避免手機窄螢幕最後一行只落單一兩字
 * （body 的 text-wrap:pretty 對「很短的兩行文字」調整空間有限）。長清單超過數行時
 * 瀏覽器會自動略過 balance，不受影響；本來就一行的標籤也不受影響。
 * 若日後新增的短標籤在窄螢幕出現落單字，補進這串選擇器即可。 */
.home-aud-label,
.home-domain-items,
.mastery-zh {
  text-wrap: balance;
}
/* 更新專區標題偏長（像一句話），balance 會讓右側留白大到像沒展開（2026-07-13 使用者回報）。
 * 改用 pretty：第一行填滿、仍避免尾行孤字。 */
.update-item-title { text-wrap: pretty; }

/* ── 學習本文維持 Noto（方案 B：UI 像素、題目/解析不像素）──
 * 這些是長篇可讀內容：題幹、答案、解析、重點、physics 白話/科學、
 * MCQ 選項、空難案例與來源說明。其餘 UI chrome 全部走像素字。 */
.card-face .q,
.card-face .a,
.card-face .explain,
.card-face .hint,
.key-points,
.physics-body,
.trivia-example-body,
.choice-text,
.lib-q,
.lib-answer .a,
.lib-answer .explain,
.lib-answer .key-points,
.accident-event,
.accident-summary,
.accident-source,
.accident-watch,
.source-ref,
.source-note,
.widget-caption,
.figure-caption {
  font-family: var(--font-cjk);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 圖表（widget／儀表 figure）內的 SVG 文字走自己的字型（PingFang/JhengHei/Arial），
 * 但 body 的「關閉平滑」會繼承進去讓字有鋸齒感——圖表容器內恢復反鋸齒。 */
.widget-container,
.card-figure,
.lib-figure {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 像素藝術圖放大時保持硬邊、不要模糊（機長頭像 2026-07-19 改扁平向量後
 * 已無使用者，規則保留給日後的像素元素） */
.pixel-art,
img.pixel-art,
.pixel-art img,
.pixel-art svg {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* 品牌字標「FLIGHT DECK」改回 app.css 的無襯線 --font-ui（原本被改成像素招牌）。
 * 原「像素質感微調」letter-spacing 區塊已移除：無襯線字不需要為點陣易讀而加字距，
 * CJK 加字距反而顯鬆；logo/callsign 的字距仍由 app.css 提供。 */

/* 數字/讀數已改像素字（見上方 --font-data 覆蓋）：.study-counter / .tile-num /
 * .mastery-meta / .chip b / .home-domain-count / .lib-stat 等隨之變像素，
 * 與 UI 一致。題目/解析本文仍走 Noto（下方明確指定）。 */

/* ── 機長角色（批次 B2；頭像 2026-07-19 改扁平向量，不再套像素硬邊）── */
.captain-svg {
  width: 100%; height: 100%; display: block;
}

/* JRPG 對話框：左頭像 + 右文字框 */
.captain-dialog {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--gold); border-radius: var(--radius);
  padding: 16px; margin-top: 16px;
  animation: slide-down .2s ease;
}
.captain-portrait {
  width: 72px; height: 72px; flex: none;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 4px;
}
.captain-bubble { flex: 1; min-width: 0; }
.captain-name {
  font-family: var(--font-pixel); color: var(--gold);
  font-size: 13px; letter-spacing: 1px; margin-bottom: 5px;
}
.captain-line {
  font-family: var(--font-pixel); color: var(--text);
  line-height: 1.7; margin: 0; font-size: 15px;
}
.captain-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.captain-actions .btn { flex: none; padding: 8px 16px; }

/* 學習中的反應條（答對/答錯換表情） */
.captain-react {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 2px; padding: 8px 12px;
  border-radius: var(--radius-sm);
  animation: slide-down .22s ease;
}
.captain-react .captain-portrait {
  width: 40px; height: 40px; padding: 2px;
}
.captain-react-line { font-family: var(--font-pixel); font-size: 14px; line-height: 1.5; }
.captain-react.react-right { background: rgba(159,230,160,.08); border: 1px solid rgba(159,230,160,.25); }
.captain-react.react-right .captain-react-line { color: var(--success); }
.captain-react.react-wrong { background: rgba(255,180,84,.07); border: 1px solid rgba(255,180,84,.22); }
.captain-react.react-wrong .captain-react-line { color: var(--amber-soft); }

/* 升階慶祝：機長入鏡（RPG 風） */
.celebrate .captain-portrait {
  width: 72px; height: 72px; margin: 0 auto 8px;
  background: var(--surface-2); border: 1px solid var(--gold);
}
.celebrate .captain-name { text-align: center; }
.celebrate-line {
  font-family: var(--font-pixel); color: var(--amber-soft);
  font-size: 14px; line-height: 1.6; margin: 4px 0 14px; text-align: center;
  /* 平衡換行，避免最後一行只剩一兩個字加標點（手機窄螢幕尤其明顯） */
  text-wrap: balance;
}