/* ══════════════════ 全域 ══════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
body {
  font-family: "DFKai-SB", "BiauKai", "標楷體", "PMingLiU", "新細明體", "Microsoft JhengHei", "微軟正黑", serif;
  background: #f6f1e6;   /* 米黃色底,誦經傳統色調 */
  color: #1a1a1a;
}

/* 主題色 */
body.theme-white-on-black { background: #000; color: #fff; }
body.theme-white-on-black .home-title { color: #fff; }
body.theme-white-on-black .home-sub { color: #ccc; }
body.theme-white-on-black .home-btn { background: #222; color: #fff; border-color: #fff; }
body.theme-white-on-black .home-btn:hover { background: #333; }
body.theme-white-on-black .corner-dot { color: #fff; }
body.theme-white-on-black .nav-hint { color: rgba(255,255,255,0.35); }
body.theme-white-on-black .page-info { color: rgba(255,255,255,0.5); }
body.theme-white-on-black .settings-panel { background: #111; color: #eee; border-color: #444; }
body.theme-white-on-black .settings-panel select,
body.theme-white-on-black .settings-panel input[type="number"] { background:#222; color:#eee; border-color:#555; }

/* 字型 — 補齊 iOS / Android / Windows / Mac 各平台的字型 fallback,手機也能切換 */
/* 三種字型:全部以 Google Fonts 為基底(所有裝置一致),再讓系統原生字型優先 */
body.font-kaiti .reader-content, body.font-kaiti .home-title {
  font-family:
    "DFKai-SB", "BiauKai", "標楷體", "STKaiti", "楷體",
    "Noto Serif TC", "Noto Serif CJK TC", serif;
}
body.font-mingliu .reader-content, body.font-mingliu .home-title {
  font-family:
    "PMingLiU", "MingLiU", "新細明體", "Songti TC", "STSong",
    "Noto Serif TC", "Noto Serif CJK TC", serif;
}
body.font-yahei .reader-content, body.font-yahei .home-title {
  font-family:
    "PingFang TC", "Heiti TC", "Microsoft JhengHei", "微軟正黑體",
    "Noto Sans TC", "Noto Sans CJK TC", sans-serif;
}

.screen { position: fixed; inset: 0; }
.hidden { display: none !important; }

/* ══════════════════ 首頁 ══════════════════ */
#home { display: flex; align-items: center; justify-content: center; text-align: center; }
.home-inner { padding: 24px; }
.home-title {
  font-size: clamp(32px, 7vw, 60px);
  letter-spacing: 0.15em;
  margin-bottom: 40px;
  color: #4a2c1a;
  line-height: 1.9;
}
.home-title ruby { display: inline; ruby-align: center; }
/* 硬性規定:首頁大字經名永遠不顯示注音,不管設定如何 */
#home ruby rt,
.home-title ruby rt { display: none !important; }
.home-title-zhuyin { display: none; }
.home-btn {
  display: block; margin: 12px auto;
  font-size: 20px; padding: 12px 32px;
  min-width: 220px;
  border: 2px solid #4a2c1a;
  border-radius: 4px;
  background: #f6f1e6; color: #4a2c1a;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.1em;
}
.home-btn:hover { background: #eee1c6; }
.home-btn.secondary { background: transparent; }
.home-hint { margin-top: 28px; font-size: 12px; color: #999; }
.home-btn.small { font-size: 14px; padding: 6px 20px; min-width: 140px; }

/* ══════════════════ 次數統計面板 ══════════════════ */
.stats-panel {
  position: fixed;
  left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  background: #fff; color: #222;
  border: 1px solid #ccc; border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  z-index: 200; overflow: hidden;
  display: flex; flex-direction: column;
  font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
}
body.theme-white-on-black .stats-panel { background: #111; color: #eee; border-color: #444; }
.stats-panel .settings-body { overflow-y: auto; }
.stats-summary { padding: 6px 4px 12px; font-size: 14px; color: #555; text-align: center; }
body.theme-white-on-black .stats-summary { color: #aaa; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stats-table th, .stats-table td { padding: 6px 8px; text-align: center; border-bottom: 1px solid #eee; }
body.theme-white-on-black .stats-table th, body.theme-white-on-black .stats-table td { border-color: #333; }
.stats-table thead th { background: #f4f4f4; font-weight: 600; }
body.theme-white-on-black .stats-table thead th { background: #222; }
.stats-table tbody tr.today td { background: #fff8dc; font-weight: bold; }
body.theme-white-on-black .stats-table tbody tr.today td { background: #2a2410; }
.stats-empty { text-align: center; padding: 30px 10px; color: #999; }

/* 進階選項面板內文 */
.adv-intro { font-size: 14px; color: #444; margin-bottom: 14px; line-height: 1.6; }
body.theme-white-on-black .adv-intro { color: #ccc; }
.adv-section { margin-bottom: 16px; border-top: 1px solid #eee; padding-top: 10px; }
body.theme-white-on-black .adv-section { border-color: #333; }
.adv-section h4 { font-size: 15px; margin-bottom: 6px; color: #4a2c1a; }
body.theme-white-on-black .adv-section h4 { color: #d9a76c; }
.adv-section ol { margin-left: 20px; font-size: 13px; line-height: 1.8; color: #333; }
body.theme-white-on-black .adv-section ol { color: #ddd; }
.adv-section ol li { margin-bottom: 4px; }
.adv-section .ico { font-family: sans-serif; font-size: 14px; }
.adv-note { margin-top: 14px; padding: 10px; background: #f6f1e6; font-size: 12px; color: #666; border-radius: 4px; line-height: 1.6; }
body.theme-white-on-black .adv-note { background: #1a1a1a; color: #aaa; }

/* ══════════════════ 閱讀器 ══════════════════ */
#reader { display: flex; align-items: stretch; }
.reader-container {
  flex: 1;
  padding: min(6vw, 40px) min(6vw, 40px);
  padding-bottom: 60px;
  position: relative;
  overflow: hidden;
}
.reader-content {
  width: 100%;
  height: 100%;
  line-height: 1.9;
  font-size: 30px;
}

/* 直式 (右→左) */
.reader-content.vertical {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: upright;
  -webkit-text-orientation: upright;
  overflow-wrap: normal;
}
/* 橫式 (上→下 = 一般由左到右閱讀,自然由上換行至下) */
.reader-content.horizontal { writing-mode: horizontal-tb; }

/* ruby 注音 — 讓 rt 不撐開 ruby 的縱向大小,所有字保持一致 */
ruby { ruby-align: center; }
.reader-content ruby rt {
  font-size: 0.4em;
  line-height: 0.85;      /* rt 內符號緊靠,3-4 符號也不撐爆 */
  letter-spacing: -0.05em;
  color: inherit;
  opacity: 0.75;
  font-family: "Noto Sans TC","PingFang TC","PMingLiU","SimSun",sans-serif;
}
/* 直式:讓 rt 自然大小(允許聲調 ˊ ˇ ˋ 完整顯示,不裁字) */
.reader-content.vertical ruby {
  ruby-position: over;
  -webkit-ruby-position: after;
  display: inline-block;
  vertical-align: top;
}
.reader-content.vertical ruby rt {
  text-orientation: upright;
  overflow: visible;
}

.reader-content.no-zhuyin rt { display: none; }

.reader-content .punc { opacity: 0.6; }

/* 章名區塊 — 只是 block-level 換行,字大小和正文完全一致 */
.reader-content .juan-block,
.reader-content .chap-block { display: block; padding: 0; margin: 0; }

/* 大間隔:一個空白佔位,vertical-rl 下佔滿當前 column 縱向,強制下個字新 column,並在新 column 前留空白 */
.reader-content .big-gap {
  display: inline-block;
  inline-size: 100%;     /* vertical-rl 下 = 縱向 100% column 高 → 塞滿當前 column */
  block-size: 1.4em;     /* vertical-rl 下 = 橫向 1.4em → 造出一整個空白 column */
  vertical-align: top;
}
/* 橫式(上到下)時 big-gap 對應橫排的段間留白 */
.reader-content.horizontal .big-gap {
  inline-size: 100%; block-size: 1.4em;
  /* horizontal 下 inline=水平,block=垂直:1.4em 高全寬空白列 */
}

/* 頁面資訊:置於 nav-down 按鈕上方 */
.page-info {
  position: absolute; bottom: calc(14% + 6px); left: 50%; transform: translateX(-50%);
  font-size: 13px; color: rgba(0,0,0,0.45);
  letter-spacing: 0.05em;
  pointer-events: none;
  z-index: 60;
  white-space: nowrap;
  background: rgba(246,241,230,0.6);
  padding: 2px 8px;
  border-radius: 3px;
}
body.theme-white-on-black .page-info { color: rgba(255,255,255,0.55); background: rgba(0,0,0,0.55); }
@media (max-width: 500px) {
  .page-info { bottom: calc(12% + 4px); font-size: 12px; }
}

/* 四邊大觸控按鈕:純箭頭,不出現任何色塊 */
.nav-btn {
  position: absolute; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  color: rgba(0,0,0,0.15);
  font-size: 44px; font-weight: normal;
  cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  font-family: inherit;
  padding: 0;
  transition: color 0.12s;
}
.nav-btn:hover  { color: rgba(0,0,0,0.45); background: transparent; }
.nav-btn:active { color: rgba(0,0,0,0.7);  background: transparent; }
.nav-btn:focus  { outline: none; background: transparent; }
.nav-btn::-moz-focus-inner { border: 0; }
/* 首頁的 nav 按鈕更明顯一點,方便 PC 使用者看到 */
#home .nav-btn { color: rgba(0,0,0,0.28); }
#home .nav-btn:hover { color: rgba(0,0,0,0.6); }

/* 左右各占約 22% 寬 × 58% 高,置中垂直 */
.nav-left  { left:  0; top: 21%; width: 22%; height: 58%; }
.nav-right { right: 0; top: 21%; width: 22%; height: 58%; }
/* 上下各占約 58% 寬 × 12% 高,置中水平 */
.nav-up    { top: 0;    left: 21%; right: 21%; height: 12%; }
.nav-down  { bottom: 0; left: 21%; right: 21%; height: 12%; }

body.theme-white-on-black .nav-btn         { color: rgba(255,255,255,0.10); background: transparent; }
body.theme-white-on-black .nav-btn:hover   { color: rgba(255,255,255,0.28); background: transparent; }
body.theme-white-on-black .nav-btn:active  { color: rgba(255,255,255,0.5);  background: transparent; }

@media (max-width: 500px) {
  .nav-left, .nav-right { width: 24%; }
  .nav-up, .nav-down    { height: 12%; left: 24%; right: 24%; }
  .nav-btn { font-size: 36px; }
}

/* ══════════════════ 左下角小點 ══════════════════ */
.corner-dot {
  position: fixed; left: 12px; bottom: 12px;
  width: 28px; height: 28px; line-height: 24px; text-align: center;
  font-size: 32px; font-weight: bold;
  cursor: pointer; z-index: 100;
  color: rgba(0,0,0,0.35);
  transition: color 0.2s;
}
.corner-dot:hover { color: rgba(0,0,0,0.9); }

/* ══════════════════ 設定面板 ══════════════════ */
.settings-panel {
  position: fixed;
  left: 16px; bottom: 48px;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  background: #fff; color: #222;
  border: 1px solid #ccc; border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  z-index: 200;
  overflow-y: auto;
  font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
}
.settings-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  position: sticky; top: 0; background: inherit;
}
.settings-header button { background: none; border: none; font-size: 18px; cursor: pointer; color: inherit; }
.settings-body { padding: 12px 14px; }
.row {
  margin-bottom: 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 14px;
}
.row > label:first-child {
  min-width: 72px; font-weight: 500; color: #666; flex-shrink: 0;
}
.row .sw { display: inline-flex; align-items: center; gap: 4px; font-weight: normal; color: inherit; min-width: auto; }
.row select, .row input[type="number"] {
  padding: 4px 8px; border: 1px solid #bbb; border-radius: 3px; font: inherit;
  background: #fff; color: inherit;
}
.row input[type="range"] { flex: 1; min-width: 100px; }
.row.actions button {
  padding: 6px 14px; margin-right: 8px;
  border: 1px solid #bbb; background: #f4f4f4; color: #333;
  border-radius: 3px; cursor: pointer; font: inherit;
}
body.theme-white-on-black .row.actions button { background:#222; color:#eee; border-color:#555; }
.row.info { font-size: 11px; color: #888; }

/* toast */
.toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.75); color: #fff;
  padding: 8px 16px; border-radius: 4px; z-index: 300;
  font-size: 14px;
}

/* Very small screens */
@media (max-width: 480px) {
  .home-title { letter-spacing: 0.1em; }
  .nav-hint { font-size: 40px; }
  .reader-container { padding: 12px; padding-bottom: 40px; }
}