/* The Millers 练一练 — 居中舞台式布局（参考句乐部），移动端适配 */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green: #16a34a;
  --red: #e5484d;
  --text: #1a1a1a;
  --muted: #8a8f98;
  --line: #e6e8eb;
  --bg: #ffffff;
  /* 固定句法颜色系统：颜色只由前端按 chunk.type 映射，数据不存颜色。
     谓语（核心动作）= 网站主色绿；其余角色后续可再调。 */
  --c-subject: #2563eb;
  --c-predicate: #16a34a;
  --c-object: #d97706;
  --c-complement: #db2777;
  --c-adverbial: #7c3aed;
  --c-modifier: #0891b2;
  --c-clause: #475569;
  --c-vocative: #c026d3;
  --c-other: #64748b;
}
.chunk-subject { color: var(--c-subject); }
.chunk-predicate { color: var(--c-predicate); }
.chunk-object { color: var(--c-object); }
.chunk-complement { color: var(--c-complement); }
.chunk-adverbial { color: var(--c-adverbial); }
.chunk-modifier { color: var(--c-modifier); }
.chunk-clause { color: var(--c-clause); }
.chunk-vocative { color: var(--c-vocative); }
.chunk-other { color: var(--c-other); }

html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* 移动端软键盘弹起时动态收缩，舞台不被顶飞 */
  overflow: hidden;
}

/* 顶栏：进度 */
.topbar { padding: 10px 20px 0; }
.hud {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  padding-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.hud-right { display: inline-flex; align-items: center; gap: 12px; position: relative; }
.hud-left { display: inline-flex; align-items: center; gap: 10px; }
.hud-unit { font-size: 14px; font-weight: 600; color: var(--text); }
.hud-dim { font-size: 12px; color: var(--muted); }
/* 当前练习方式标签：常显，点击打开设置弹层 */
.hud-mode {
  font-size: 11px;
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 999px;
  padding: 1px 8px;
  cursor: pointer;
  user-select: none;
}
.hud-mode:hover { background: #eef8f1; }
.hud-back {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.hud-back:hover { color: var(--text); }
#settingsBtn {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
}
#settingsBtn:hover { color: var(--text); }
#settingsPanel {
  position: absolute;
  top: 26px;
  right: 0;
  z-index: 60;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.1);
  padding: 12px 14px;
  min-width: 170px;
  text-align: left;
}
#settingsPanel[hidden] { display: none; }
#settingsPanel .sp-title { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
#settingsPanel .sp-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--text);
  padding: 5px 0;
  cursor: pointer;
  white-space: nowrap;
}
#settingsPanel .sp-tag {
  font-size: 11px;
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 999px;
  padding: 0 6px;
  line-height: 16px;
}
#settingsPanel .sp-note { font-size: 11px; color: var(--muted); }
.progress { height: 4px; background: var(--line); border-radius: 2px; }
#progressFill { height: 100%; width: 0; background: var(--green); border-radius: 2px; transition: width .25s ease; }

/* 主区域 */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  overflow: hidden;
}

/* 历史台词：小字、暗淡、可滚动 */
#history {
  max-height: 22vh;
  overflow-y: auto;
  padding-top: 8px;
  flex-shrink: 0;
}
.hist-line { padding: 4px 0; font-size: 13px; color: #b0b4ba; }
.hist-line .speaker { font-weight: 600; margin-right: 6px; opacity: .8; }
.hist-line .zh { display: none; }

/* 舞台：内容整体居中但略偏上（主要练习内容约在视口 40%~45% 高度），不死锁正中 */
#stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 12vh;
  gap: 24px;
  min-height: 0;
  overflow-y: auto;
}

.a-line { text-align: center; margin-bottom: 24px; }
.a-line:last-child { margin-bottom: 0; }
.a-line .speaker {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
  opacity: .85;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 14px; /* 行距拉开，多行换行不挤 */
  justify-content: center;
  align-items: flex-end;
}

.chip {
  font-size: 32px;
  font-weight: 700;
  padding: 2px 2px 6px;
  border-bottom: 4px solid currentColor;
  border-radius: 2px;
  animation: pop .18s ease;
}
@keyframes pop {
  0% { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.blank {
  display: inline-block;
  font-size: 32px; /* 与词卡同字号，内联宽度按词长计算 */
  width: 44px;
  height: 1.05em; /* 空格也要有行高，行间才有呼吸感 */
  border-bottom: 4px solid var(--line);
  border-radius: 2px;
}
.blank.active { border-bottom-color: var(--green); }

/* 正在输入的内容：显示在当前空格位置，宽度固定为词宽，逐字符推进 */
.typed {
  display: inline-block;
  text-align: left;
  font-size: 32px;
  font-weight: 700;
  color: var(--green);
  border-bottom: 4px solid var(--green);
  border-radius: 2px;
  padding: 2px 0 6px;
  min-width: 20px;
  white-space: pre;
}
.typed.hint { color: var(--muted); border-bottom-style: dashed; }
.typed.error { color: var(--red); border-bottom-color: var(--red); animation: shake .3s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* 结构解析页：英语句子是视觉中心，语块上直接着色，role 标在语块下方；
   词义/语法详解是第三层信息，点击语块才展开 */
.struct-sentence {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 10px;
  justify-content: center;
  align-items: flex-end;
}
.s-chunk {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px 6px;
  border-radius: 10px;
  cursor: pointer;
}
.s-chunk:hover { background: #f5f6f7; }
.s-chunk.open { background: #eef8f1; }
.s-en {
  font-size: 30px;
  font-weight: 700;
  padding: 2px 2px 6px;
  border-bottom: 4px solid currentColor;
  border-radius: 2px;
}
.s-role { margin-top: 7px; font-size: 12px; color: var(--muted); }
.s-zh { text-align: center; font-size: 16px; color: #555; }
.s-detail {
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
}
.sd-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; font-weight: 700; font-size: 16px; }
.sd-role { font-size: 12px; font-weight: 400; color: var(--muted); }
.sd-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.sd-en { font-weight: 600; min-width: 90px; }
.sd-zh { color: #555; }
.sd-note { color: #a8adb5; font-size: 12px; }
.sd-zh-line { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); color: var(--muted); }
#prompt .p-dim { color: var(--muted); font-size: 14px; }

/* 参考句（跟写模式 / 阶梯预热）：完整句子直接展示，语块句法色，当前语块浅底高亮 */
.ref-sentence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
}
.ref-chunk {
  font-size: 24px;
  font-weight: 700;
  padding: 2px 6px 5px;
  border-bottom: 3px solid currentColor;
  border-radius: 6px 6px 2px 2px;
}
.ref-chunk.ref-active { background: #eef8f1; }
@media (max-width: 480px) {
  .ref-chunk { font-size: 20px; }
}

/* 中文提示：舞台下方居中 */
#prompt { text-align: center; }
#prompt .p-line { margin-bottom: 6px; font-size: 19px; color: #333; }
#prompt .p-line:last-child { margin-bottom: 0; }
#prompt .speaker { font-size: 13px; font-weight: 600; margin-right: 6px; }

/* 底部：快捷键提示条 */
#controls {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
#controls button {
  font-size: 14px;
  color: var(--muted);
  border: none;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
}
#controls button:active { color: var(--text); }
#controls kbd {
  font-family: inherit;
  font-size: 12px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 2px 7px;
  background: #f7f8f9;
  color: var(--text);
}
#nextBtn { color: var(--green); font-weight: 600; }
#nextBtn[hidden] { display: none; }

/* 隐藏的真实输入框（移动端点屏幕唤起键盘） */
.ghost {
  position: fixed;
  bottom: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  opacity: .01;
  border: none;
  font-size: 16px;
  z-index: -1;
}

/* 结束页 */
#endScreen {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.96);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
#endScreen[hidden] { display: none; }
#endScreen .card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
#endScreen h2 { font-size: 22px; margin-bottom: 20px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 8px; margin-bottom: 24px; }
.stat .num { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .label { font-size: 12px; color: var(--muted); }
#retryBtn {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 0;
  border: none;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  cursor: pointer;
}
#retryBtn:active { background: #128a3f; }
.end-next {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  padding: 10px 0;
  border: 1px solid var(--green);
  border-radius: 12px;
}
.end-next:hover { background: #eef8f1; }
.end-next[hidden] { display: none; }
.end-back {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.end-back:hover { color: var(--text); }

/* 小屏：词卡略缩 */
@media (max-width: 480px) {
  .chip, .typed, .blank { font-size: 26px; }
  .blank { width: 34px; }
  .s-en { font-size: 24px; }
  .s-role { font-size: 11px; }
  .s-detail { font-size: 13px; }
  .sd-en { min-width: 70px; }
  #prompt .p-line { font-size: 17px; }
  #stage { gap: 20px; padding-bottom: 8vh; }
}

/* ---------- 阅读页（index.html）：选集 → 听读 → 练习 ---------- */
body.reader { display: block; height: auto; overflow: auto; }
#layout { display: flex; min-height: 100vh; }

/* Sidebar：收紧，item 不做成大按钮 */
#side {
  width: 230px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  padding: 20px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
}
.brand { font-size: 17px; font-weight: 800; margin-bottom: 16px; padding: 0 10px; }
.brand small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.ep-item {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 2px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid transparent;
}
.ep-item:hover { background: #f5f6f7; }
.ep-item.on { background: #eef8f1; border-color: var(--green); }
.ep-label { font-size: 11px; font-weight: 700; color: var(--green); letter-spacing: .5px; }
.ep-title { display: block; font-size: 13.5px; font-weight: 600; margin-top: 1px; line-height: 1.35; }
.ep-zh { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

/* 正文：以 sidebar 右侧剩余空间为基准，向左靠，不大面积留白 */
#artBody { flex: 1; min-width: 0; padding: 24px 24px 80px 32px; }
.art-inner { max-width: 720px; }

/* 右栏：本集知识（sticky 知识地图；无 emoji，绿点 + 英文小标题） */
#know {
  width: 440px;
  flex-shrink: 0;
  background: #fafbfc;
  border-left: 1px solid var(--line);
  padding: 24px 24px 40px;
}
.know-sticky {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  scrollbar-width: none; /* 隐藏内联滚动条，保持可滚 */
}
.know-sticky::-webkit-scrollbar { display: none; }
.know-title { font-size: 15px; font-weight: 700; margin-bottom: 18px; }
.kg { margin-bottom: 24px; }
.kg-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 10px;
}
.kg-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.kg-title .kg-en { font-size: 10.5px; font-weight: 600; color: #b0b4ba; letter-spacing: 1px; }

.k-item { cursor: pointer; }
.k-en { font-weight: 700; }
.k-zh { color: #6b7280; }
.k-detail {
  display: none;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  font-weight: 400;
  color: #555;
  line-height: 1.65;
}
.k-item.open .k-detail { display: block; }

/* 重点词汇：chip，en + zh 同行；默认中性灰，联动 hover / 点击才变绿 */
.kg-words .k-item {
  display: inline-block;
  background: #f5f6f7;
  border-radius: 8px;
  padding: 6px 12px;
  margin: 0 6px 8px 0;
}
.kg-words .k-en { font-size: 13.5px; }
.kg-words .k-zh { font-size: 12px; margin-left: 8px; }
.kg-words .k-item.k-hover,
.kg-words .k-item.open {
  background: #eef8f1;
  outline: 1.5px solid rgba(22, 163, 74, .4);
}

/* 地道口语：双列白底卡片 */
.kg-phrases { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kg-phrases .kg-title { grid-column: 1 / -1; }
.kg-phrases .k-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.kg-phrases .k-en { display: block; font-size: 13.5px; line-height: 1.4; }
.kg-phrases .k-zh { display: block; font-size: 12px; margin-top: 2px; }
.kg-phrases .k-item:hover { border-color: var(--green); }
.kg-phrases .k-item.k-hover,
.kg-phrases .k-item.open {
  background: #f2f9f4;
  border-color: var(--green);
}

/* 语法小课堂：卡片规则与详解直接可见；默认中性灰，联动 hover / 点击才变绿 */
.kg-grammar .k-item {
  background: #f5f6f7;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.kg-grammar .k-en { display: block; font-size: 14px; line-height: 1.4; }
.kg-grammar .k-zh { display: block; font-size: 12.5px; color: #4b5563; margin-top: 2px; }
.kg-grammar .k-detail { display: block; border-top: none; margin-top: 6px; padding-top: 0; }
.kg-grammar .k-item.k-hover,
.kg-grammar .k-item.open {
  background: #f2f9f4;
  border-color: rgba(22, 163, 74, .4);
}

/* 联动：正文标记只给极轻的绿色虚线，不染色 */
.km {
  border-bottom: 2px dotted rgba(22, 163, 74, .5);
  cursor: pointer;
}
.km:hover { background: #eef8f1; }
.dlg.flash { background: #f2f9f4; transition: background .3s; }

/* 窄屏/移动端：右栏隐藏，知识点变正文后的折叠区块 */
.know-mobile { display: none; }
@media (max-width: 1100px) {
  #know { display: none; }
  .know-mobile {
    display: block;
    margin-top: 32px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 16px;
  }
  .know-mobile summary { font-size: 14px; font-weight: 700; cursor: pointer; }
  .know-mobile .kg { margin-top: 14px; }
}
@media (max-width: 480px) {
  .kg-phrases { grid-template-columns: 1fr; }
}

/* Episode Header（紧凑）：集号 / 标题+练习按钮同行 / 信息行 / 播放器 */
.art-label { font-size: 12px; font-weight: 700; color: var(--green); letter-spacing: 1px; }
.art-titlerow { margin-top: 4px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.art-titlerow h1 { font-size: 26px; }
.art-meta { margin-top: 8px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.btn-primary {
  display: inline-block;
  background: var(--green);
  color: #fff;
  padding: 8px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
}
.btn-primary:active { background: #128a3f; }
.btn-ghost {
  display: inline-block;
  background: #fff;
  color: var(--text);
  padding: 8px 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.btn-ghost:active { background: #f5f6f7; }

/* 中译开关 */
.zh-toggle {
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 12px;
  color: var(--muted);
  background: #fff;
  cursor: pointer;
}
.zh-toggle.on { color: var(--green); border-color: var(--green); }
body.hide-zh .dlg-zh { display: none; }

/* 整集音频播放器：简洁自定义条，高度约 48px */
#player {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px 12px;
}
.p-play {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: none;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.p-play:active { background: #128a3f; }
.p-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.p-seek { flex: 1; accent-color: var(--green); min-width: 0; }
.p-replay { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; padding: 4px; }
.p-replay:active { color: var(--text); }

/* 对话正文：角色信息在台词上方，正文占满阅读宽度；无卡片无气泡 */
#dialogue { margin-top: 26px; }
.dlg {
  margin-bottom: 26px;
  padding: 4px 0 4px 12px;
  border-left: 3px solid transparent;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
}
.dlg:hover { background: #fafbfc; }
.dlg.playing { border-left-color: var(--green); background: #f2f9f4; }
.dlg-speaker { font-size: 14px; font-weight: 600; }
.dlg-speaker small { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 8px; }
.dlg-en { margin-top: 4px; font-size: 18px; line-height: 1.6; color: #222; display: flex; align-items: flex-start; gap: 12px; }
.dlg-en .en-text { flex: 1; }
/* 句播音图标：常显浅灰，hover/播放中变绿，提示每句可单独点听 */
.dlg-play { flex-shrink: 0; margin-top: 5px; color: #c6cad1; cursor: pointer; }
.dlg-play:hover { color: var(--green); }
.dlg.playing .dlg-play { color: var(--green); }
.dlg-zh { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: #6b7280; }

/* 阅读结束区：Input → Recall 的自然过渡 */
.art-end { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 32px; text-align: center; }
.art-end .end-label { font-size: 13px; color: var(--muted); }
.art-end .end-tip { margin-top: 12px; font-size: 15px; color: #333; line-height: 1.7; }
.art-end .end-actions { margin-top: 20px; display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.art-missing { color: var(--muted); text-align: center; margin-top: 60px; }

/* 页脚：联系作者（小红书 / 抖音，阅读页与练习结束页共用） */
.site-footer {
  margin-top: 40px; padding: 18px 0 8px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 13px; color: var(--muted);
}
.site-footer .flink {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 16px; text-decoration: none; color: #4b5563;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .15s, color .15s;
}
.site-footer .flink svg { width: 14px; height: 14px; display: block; }
.site-footer .flink.xhs svg { fill: #ff2442; }
.site-footer .flink.dy svg { fill: #161823; }
.site-footer .flink:hover { border-color: var(--green); color: var(--green); }

/* 移动端：sidebar 变顶部横向列表 */
@media (max-width: 768px) {
  #layout { flex-direction: column; }
  #side {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 12px;
  }
  .brand { margin-bottom: 8px; }
  #epList { display: flex; gap: 8px; overflow-x: auto; }
  .ep-item { flex-shrink: 0; margin-bottom: 0; }
  #artBody { padding: 16px 18px 56px; }
  .art-titlerow h1 { font-size: 22px; }
  .art-titlerow { gap: 10px; }
  .dlg { margin-bottom: 22px; }
  .dlg-en { font-size: 17px; }
  .dlg-zh { font-size: 14px; }
}