/* ============================================
   滕王阁序 · 背诵助手 — 深色主题 / 宋体
   配色集中在 :root，改主题只需改这里
   ============================================ */
:root {
  --bg: #191817;          /* 页面背景 */
  --panel: #22211f;       /* 左右面板 */
  --panel-hover: #2a2825; /* 段落 hover */
  --active: #38311f;      /* 高亮背景（暗金调） */
  --active-border: #c8a45c;/* 高亮左边线 / 点缀金 */
  --text: #e8e0d0;        /* 主文字 */
  --text-dim: #94897a;    /* 次要文字 */
  --rt: #8a7f6c;          /* 拼音颜色 */
  --border: #34312c;      /* 分隔线 */
  --radius: 8px;
}

/* 浅色主题（点击左上角按钮切换，选择会持久化） */
[data-theme="light"] {
  --bg: #f2ede2;
  --panel: #ffffff;
  --panel-hover: #efe8d6;
  --active: #f5e9c8;
  --active-border: #a8853c;
  --text: #3a342a;
  --text-dim: #8d8370;
  --rt: #9a9078;
  --border: #ddd3bd;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: "SimSun", "Songti SC", "STSong", "宋体", serif;
  line-height: 2;
}

/* ---------------- 顶部标题 ---------------- */
.header {
  flex: none;
  position: relative; /* 供右上角进度按钮定位 */
  text-align: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}

.header h1 {
  margin: 0;
  font-size: 26px;
  font-weight: normal;
  letter-spacing: 8px;
  color: var(--active-border);
}

.header .subtitle {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--text-dim);
}

/* ---------------- 左上角：深浅主题切换 ---------------- */
.theme-btn {
  position: absolute;
  top: 10px;
  left: 12px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.theme-btn:hover { background: var(--panel-hover); }

/* ---------------- 顶部右侧：常驻背诵进度 ---------------- */
.progress-wrap {
  position: absolute;
  top: 10px;
  right: 14px;
}

#progressPct {
  font-size: 16px;
  font-weight: bold;
  color: var(--active-border);
}

/* ---------------- 首次进入的操作提示 ---------------- */
.hint-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.hint-modal.hidden { display: none; }

.hint-modal-box {
  width: min(320px, 85vw);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 22px 20px;
  text-align: center;
}

.hint-modal-box p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--text);
}

.hint-ok-btn {
  padding: 6px 28px;
  font-family: inherit;
  font-size: 14px;
  color: #191817;
  background: var(--active-border);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.hint-ok-btn:hover { opacity: 0.9; }

/* ---------------- 两栏布局 ---------------- */
.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
}

.pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.pane-title {
  flex: none;
  padding: 8px 14px;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.pane .content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px;
}

/* ---------------- 原文句子 ---------------- */
.seg {
  padding: 4px 2px;
  margin-bottom: 8px;
}

.seg-head {
  margin-bottom: 6px;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-dim);
}

.comment {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-dim);
}

.line {
  margin: 0;
  font-size: 19px;
  line-height: 1.9;
  text-align: justify;
  cursor: pointer;
  border-radius: 6px;
  padding: 3px 8px;
  transition: background 0.15s ease;
}

.line:hover { background: var(--panel-hover); }

.line.active { background: var(--active); }

/* ---------------- 拼音 ---------------- */
ruby {
  ruby-position: above;
  /* 每个注音字块之间留空隙，避免相邻拼音粘连 */
  margin: 0 1px;
}

ruby rt {
  font-size: 0.55em;
  color: var(--rt);
  user-select: none;
  letter-spacing: 0;
  /* 拼音用无衬线字体，避免宋体下拼音显示怪异 */
  font-family: "Arial", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: normal;
}

/* ---------------- 右侧译文 ---------------- */
.trans {
  margin: 0 0 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 15px;
  color: var(--text-dim);
  text-align: justify;
  cursor: pointer;
  transition: background 0.15s ease;
}

.trans:hover { background: var(--panel-hover); }

.trans.active {
  background: var(--active);
  color: var(--text);
}

/* ---------------- 滚动条 ---------------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================
   H5 / 窄屏：上下两栏各占半屏独立滚动，加大字号
   ============================================ */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr; /* 原文 / 译文各占半屏 */
    gap: 8px;
    padding: 8px;
  }

  .header {
    padding: 10px 12px 8px;
    text-align: center;
  }
  .header h1 { font-size: 22px; letter-spacing: 4px; }
  .header .subtitle { font-size: 12px; }

  .pane-title { padding: 6px 12px; font-size: 13px; }
  .pane .content { padding: 10px 12px; }

  /* 原文字号加大，拼音随 ruby 自动放大 */
  .line { font-size: 22px; padding: 5px 6px; }
  .seg-head { font-size: 13px; }
  .comment { font-size: 13px; }

  /* 译文字号加大 */
  .trans { font-size: 17px; }

  /* 进度微调 */
  .progress-wrap { top: 8px; right: 10px; }

  /* 主题按钮微调 */
  .theme-btn { top: 8px; left: 8px; font-size: 12px; padding: 5px 10px; }
}