:root {
  --bg: #0d1117;
  --panel: #161b22;
  --border: #30363d;
  --text: #c9d1d9;
  /* 一级：读它才能作答 */
  --clue: #5fd7c0;
  --clue-bg: rgba(95, 215, 192, 0.1);
  --clue-line: rgba(95, 215, 192, 0.45);
  --puzzle: #d2a8ff;
  --puzzle-bg: rgba(210, 168, 255, 0.1);
  --puzzle-line: rgba(210, 168, 255, 0.42);
  --info: #79c0ff;
  /* 二级：结果反馈 */
  --good: #7ee787;
  --bad: #f85149;
  --warn: #ffa657;
  /* 三级：称号与数据 */
  --status: #e3b341;
  --dex: #b6c2cf;
  /* 四级：可以淡掉的辅助信息 */
  --story: #8593a0;
  --sys: #6b7683;
  --input-bg: #0d1117;
  --panel-70: rgba(22, 27, 34, 0.7);
  --btn-bg: #21262d;
  --btn-hover: #58a6ff;
  --send-bg: #238636;
  --send-hover: #2ea043;
  --shadow: rgba(1, 4, 9, 0.55);
}

[data-theme="light"] {
  --bg: #f6f8fa;
  --panel: #ffffff;
  --border: #d0d7de;
  --text: #1f2328;
  --clue: #0a7a6b;
  --clue-bg: rgba(10, 122, 107, 0.08);
  --clue-line: rgba(10, 122, 107, 0.4);
  --puzzle: #8250df;
  --puzzle-bg: rgba(130, 80, 223, 0.08);
  --puzzle-line: rgba(130, 80, 223, 0.35);
  --info: #0969da;
  --good: #1a7f37;
  --bad: #cf222e;
  --warn: #bc4c00;
  --status: #9a6700;
  --dex: #424a53;
  --story: #57606a;
  --sys: #6e7781;
  --input-bg: #ffffff;
  --panel-70: rgba(255, 255, 255, 0.7);
  --btn-bg: #f6f8fa;
  --btn-hover: #0969da;
  --send-bg: #1a7f37;
  --send-hover: #2da44e;
  --shadow: rgba(31, 35, 40, 0.2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", -apple-system, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#topbar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  flex-shrink: 0;
}

#title { color: var(--status); font-weight: 700; letter-spacing: 1px; }
#hp { color: var(--warn); font-weight: 700; }
#phase { color: var(--info); font-weight: 700; }
#timer { color: var(--bad); font-weight: 700; }

#themeBtn {
  padding: 5px 12px;
  background: var(--btn-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}

#themeBtn:hover { border-color: var(--btn-hover); color: var(--btn-hover); }

#log {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  line-height: 1.8;
  font-size: 15px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 今日战绩：独立浮层（不占版面，压在叙事流之上）；--ib-h 由 JS 按输入条实际高度测量 */
#side {
  position: fixed;
  top: calc(var(--tb-h, 42px) + 12px);
  right: 12px;
  z-index: 10;
  width: min(262px, 62vw);
  max-height: calc(100vh - var(--ib-h, 112px) - var(--tb-h, 42px) - 20px);
  padding: 10px 12px;
  background: var(--panel-70);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px var(--shadow);
  font-size: 14px;
}

#todayPanel summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
  list-style: none;
  cursor: pointer;
  color: var(--status);
  font-weight: 700;
  letter-spacing: .5px;
  user-select: none;
}

#todayPanel summary::-webkit-details-marker { display: none; }
#todayPanel summary::before { content: '▸'; color: var(--sys); }
#todayPanel[open] summary::before { content: '▾'; }

#todayCount { color: var(--sys); font-size: 12px; font-weight: 400; }

#todayList {
  margin-top: 6px;
  /* details 的内部内容容器不吃父级 flex 约束，直接按可视区算高度自己滚动 */
  max-height: calc(100vh - var(--ib-h, 112px) - var(--tb-h, 42px) - 76px);
  overflow-y: auto;
  padding-right: 2px;
}

.today-empty { color: var(--sys); font-size: 13px; }

.today-item { padding: 5px 0; border-bottom: 1px dashed var(--border); line-height: 1.5; }
.today-item:last-child { border-bottom: none; }
.today-word { display: block; color: var(--clue); font-weight: 700; }
.today-mean { display: block; color: var(--dex); font-size: 13px; }

#log .line { margin-bottom: 2px; animation: fadein .15s ease-out; text-align: center; }

/* 长句旁白收缩成居中小块并左对齐，避免居中换行参差 */
#log .line.story,
#log .line.sys {
  display: table;
  margin: 4px auto;
  max-width: 100%;
  text-align: left;
}

/* 列表块（图鉴、洞察、称号行）整体居中，行内左对齐，数字与词首尾成列 */
#log .line.status,
#log .line.dex,
#log .line.dex-warn,
#log .line.dex-bad {
  display: block;
  margin: 1px auto;
  max-width: 760px;
  text-align: left;
  line-height: 1.7;
}

/* 一级：释义——必须一眼看清 */
#log .line.clue {
  display: table;
  margin: 10px auto 8px;
  padding: 3px 18px;
  border: 1px solid var(--clue-line);
  border-radius: 8px;
  background: var(--clue-bg);
  color: var(--clue);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.5;
}

/* 一级：待填字母（乱序、星号、挖空） */
#log .line.puzzle {
  display: table;
  margin: 6px auto 8px;
  padding: 2px 16px;
  border: 1px dashed var(--puzzle-line);
  border-radius: 8px;
  background: var(--puzzle-bg);
  color: var(--puzzle);
  font-family: Consolas, "Courier New", monospace;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.5;
}

/* 一级：要你做什么 */
#log .line.task { color: var(--info); font-size: 15px; font-weight: 700; }

/* 二级：结果反馈 */
#log .line.good { color: var(--good); font-weight: 600; }
#log .line.bad { color: var(--bad); font-weight: 600; }
#log .line.warn { color: var(--warn); font-weight: 600; }

/* 三级：称号、积分、图鉴数据；图鉴行按逃跑紧迫度换色 */
#log .line.status { color: var(--status); font-weight: 600; }
#log .line.dex { color: var(--dex); font-size: 14px; }
#log .line.dex-warn { color: var(--warn); font-size: 14px; }
#log .line.dex-bad { color: var(--bad); font-size: 14px; font-weight: 600; }

/* 四级：叙事旁白与系统说明——不该抢戏 */
#log .line.story { color: var(--story); font-size: 14px; }
#log .line.sys { color: var(--sys); font-size: 13px; line-height: 1.6; }

/* AI 学单词：飞走的词龙名做成链接 */
#log button.wordLearn {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}

#log button.wordLearn:hover { color: var(--info); text-decoration-style: solid; }
#log button.wordLearn.active { color: var(--info); text-decoration-style: solid; }

/* AI 详解浮层：贴在单词下方，整段一次显示（不走流式） */
#learnPanel {
  position: absolute;
  z-index: 20;
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px 16px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px var(--shadow);
  white-space: normal;
  text-align: left;
  line-height: 1.7;
  font-size: 14px;
}

#learnPanel .lp-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

#learnPanel .lp-word { color: var(--puzzle); font-size: 18px; font-weight: 700; letter-spacing: .5px; }
#learnPanel .lp-tag { color: var(--sys); font-size: 12px; flex: 1; }

#learnPanel .lp-close {
  padding: 2px 10px;
  background: var(--btn-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--sys);
  font-size: 12px;
  cursor: pointer;
}

#learnPanel .lp-close:hover { border-color: var(--btn-hover); color: var(--btn-hover); }
#learnPanel .lp-body { color: var(--text); }
#learnPanel .lp-h { color: var(--clue); font-weight: 700; margin: 10px 0 2px; }
#learnPanel .lp-h:first-child { margin-top: 0; }
#learnPanel .lp-p { margin: 2px 0; }

@keyframes fadein {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}

#inputbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

#inputrow { display: flex; gap: 8px; width: 100%; max-width: 680px; }

/* 备案信息：贴着输入条底端的最低层级，不参与游戏四级视觉层级 */
#beian {
  flex-shrink: 0;
  padding: 0 0 6px;
  background: var(--panel);
  text-align: center;
  font-size: 12px;
}

#beian a { color: var(--sys); text-decoration: none; }
#beian a:hover { color: var(--btn-hover); text-decoration: underline; }

#quickbar { display: flex; gap: 8px; justify-content: center; }

#regionsbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-width: 680px;
}

.region { padding: 5px 10px; font-size: 12px; color: var(--info); }

.quick {
  padding: 6px 16px;
  background: var(--btn-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.quick:hover:not(:disabled) { border-color: var(--btn-hover); color: var(--btn-hover); }
.quick.active { border-color: var(--info); color: var(--info); }
.quick:disabled { opacity: .5; cursor: not-allowed; }

#cmd {
  flex: 1;
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 15px;
  outline: none;
}

#cmd:focus { border-color: var(--btn-hover); }
#cmd:disabled { opacity: .6; }

#send {
  padding: 10px 22px;
  background: var(--send-bg);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

#send:hover:not(:disabled) { background: var(--send-hover); }
#send:disabled { opacity: .5; cursor: not-allowed; }