/* English58 · 卡通风格视觉系统
   核心手法：3px 深色描边 + 无模糊硬阴影 + 按压下沉 + 大圆角 */

:root {
  --bg: #fff8ee;
  --bg-dot: #ecdfc9;
  --surface: #ffffff;
  --surface-soft: #fdf6ea;

  --ink: #2f2f2f;
  --text: #2b2b2b;
  --muted: #7c7c7c;
  --hint: #a9a9a9;

  --primary: #4b7bec;
  --primary-dark: #3560c4;
  --primary-soft: #e3ecff;

  --success: #45c646;
  --success-dark: #34a034;
  --success-soft: #ddf7dd;

  --danger: #ff5a5f;
  --danger-dark: #d64046;
  --danger-soft: #ffe4e4;

  --accent: #ffc838;
  --accent-dark: #d99f00;

  --radius: 22px;
  --radius-sm: 16px;
  --radius-pill: 999px;

  --line: 3px solid var(--ink);
  --drop: 0 5px 0 var(--ink);
  --drop-sm: 0 3px 0 var(--ink);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  background-image: radial-gradient(var(--bg-dot) 1.6px, transparent 1.6px);
  background-size: 24px 24px;
  color: var(--text);
  font: 15px/1.6 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: 660px; margin: 0 auto; padding: 26px 20px 64px; }
.wrap.narrow { max-width: 560px; }

/* ---------------- 顶部 ---------------- */
.topbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
/* 直播答题页顶栏里多放了词库名：间距收紧、品牌略缩小，给中间的词库名腾空间；
   .topbar .brand 的 font-size 优先级更高，需在 .brand 之后覆盖（本规则已在其后声明）
   刷题页顶栏只有 返回/品牌/模式标签，保持原始间距与字号，不受影响 */
.wrap-live .topbar { gap: 8px; }
.wrap-live .topbar .brand { font-size: 14px; }
.topbar .back,
.topbar .brand,
.topbar .mode-tag,
.topbar .top-right { flex: none; }
.brand {
  display: inline-block;
  font-size: 17px; font-weight: 800; letter-spacing: -0.3px;
  background: var(--accent);
  border: var(--line);
  border-radius: var(--radius-pill);
  padding: 3px 16px 5px;
  box-shadow: var(--drop-sm);
  transform: rotate(-1.5deg);
}
.brand span { color: var(--primary-dark); }

.back {
  font-size: 13px; font-weight: 700; color: var(--ink);
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 4px 14px 5px;
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.back:active { transform: translateY(2px); box-shadow: none; }

h1 { font-size: 26px; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.6px; }
.lead { color: var(--muted); font-size: 14px; margin: 0 0 24px; }

.section-title {
  display: inline-block;
  font-size: 11.5px; font-weight: 800; color: var(--ink);
  letter-spacing: 0.4px;
  background: var(--primary-soft);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 2px 11px 3px;
  margin: 16px 0 6px;
  transform: rotate(-1deg);
}

/* ---------------- 模式卡片 ---------------- */
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mode {
  background: var(--surface);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--drop);
  padding: 16px 14px 14px;
  display: flex; flex-direction: column; gap: 3px;
  position: relative;
  min-width: 0;
  transition: transform .1s;
}
.mode .name { font-size: 14px; font-weight: 800; }
.mode .desc { font-size: 12px; color: var(--muted); line-height: 1.45; word-break: break-word; }
.mode .tag {
  align-self: flex-start;
  font-size: 11px; font-weight: 700;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 0 8px;
  margin-top: 6px;
  background: var(--surface-soft);
}
.mode.active {
  background: var(--primary-soft);
  border-color: var(--primary-dark);
  box-shadow: 0 5px 0 var(--primary-dark);
  transform: rotate(-1deg);
}
.mode.active .tag { background: var(--primary); color: #fff; }
.mode.disabled { opacity: .62; }

/* 选中态强化：右上角勾号徽章 + tag 换成「当前模式 / 点击切换」 */
.mode .tag-on { display: none; }
.mode.active .tag-on { display: inline-block; }
.mode.active .tag-off { display: none; }
.mode.active::after {
  content: '✓';
  position: absolute;
  top: -11px; right: -11px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary);
  color: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 2px 0 var(--ink);
  font-size: 15px; font-weight: 900; line-height: 1;
  z-index: 2;
}

/* ---------------- 词库列表 ---------------- */
.decks { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.deck {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--drop);
  padding: 15px 18px;
  position: relative;
  min-width: 0;
  transition: transform .08s, box-shadow .08s;
}
.deck:hover { transform: translate(-1px, -2px); box-shadow: 0 7px 0 var(--ink); }
.deck:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.deck .dot {
  width: 14px; height: 14px; flex: none;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
}
.deck:nth-child(2n) .dot { background: var(--primary); }
.deck:nth-child(3n) .dot { background: var(--success); }
.deck:nth-child(5n) .dot { background: var(--danger); }
.deck .meta { flex: 1; min-width: 0; }
.deck .name { display: block; font-size: 15px; font-weight: 800; }
.deck .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.deck .count {
  flex: none; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--surface-soft);
  border: 2px solid var(--ink);
  border-radius: 14px;
  padding: 3px 10px 4px;
  line-height: 1.25;
}
.deck .count b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); }

/* ---------------- 答题头部 ---------------- */
.study-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; color: var(--muted);
  margin-bottom: 8px;
}
.study-head .spacer { flex: 1; }
.deck-label {
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 1px 10px 2px;
}
.deck-label:empty { display: none; }
/* 直播页把词库名放进了顶栏：那里字号不再继承 .study-head，且空间有限需可收缩省略 */
.wrap-live .topbar .deck-label {
  font-size: 12px; font-weight: 700; line-height: 1.5;
  padding: 1px 6px 2px;
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.counter {
  background: var(--ink); color: #fff;
  border-radius: var(--radius-pill);
  padding: 1px 10px 2px;
}

/* 自动开关 */
.switch {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; user-select: none; margin-left: auto;
  position: relative;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 46px; height: 26px; border-radius: var(--radius-pill);
  background: #e2e2e2; border: 2.5px solid var(--ink);
  box-sizing: border-box;
  position: relative; flex: none;
  transition: background .18s ease;
}
.switch .track::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 1.5px;
  width: 18px; height: 18px;
  margin-top: -9px;              /* 18/2，配合 top:50% 精确垂直居中 */
  box-sizing: border-box;        /* 伪元素不吃全局 border-box，必须显式声明 */
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--ink);
  transition: transform .18s ease;
}
.switch input:checked + .track { background: var(--success); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 3px solid var(--primary); outline-offset: 2px; }

/* ---------------- 单词区 ---------------- */
.quiz-card {
  background: var(--surface);
  border: var(--line);
  border-radius: var(--radius);
  padding: 18px 16px 16px;
}
/*
 * 两张卡片之间夹着倒计时条，所以用 .options-card 控制下卡间距，
 * 不能再靠 .quiz-card + .quiz-card（中间隔了计时条，相邻选择器匹配不到）
 */
.options-card { margin-top: 8px; }

.question-card { transition: padding .25s ease; }
/* 作答后整体收紧，把高度让给答案区 */
.question-card.answered { padding: 10px 14px 12px; }

.word-box {
  /* 竖排：.word[data-speak] 是 inline-block（为高亮只包住文字），
     不加 flex 的话音标会跟单词挤在同一行 */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 14px;
  transition: margin-bottom .25s ease;
}
.question-card.answered .word-box {
  /* 作答后单词与音标横排，省掉一整行高度 */
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-bottom: 10px;
}
.question-card.answered .word { margin: 0; }
.question-card.answered .phonetic { font-size: 12px; }
.word {
  font-size: 36px; font-weight: 800; letter-spacing: -1px;
  margin: 0 0 6px; word-break: break-word;
  color: var(--text);
  text-shadow: 3px 3px 0 rgba(47, 47, 47, .1);
  transition: font-size .25s ease;
}
/* 显示答案后单词缩小上移，给下方的答案和例句让出空间 */
.question-card.answered .word { font-size: 20px; }
.phonetic {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
/*
 * 词性：四个选项词性一致时，JS 会把它从选项里提出来放到音标前面，
 * 选项文字就能短一截。不一致时留空，:empty 直接不占位。
 */
.phonetic .pos {
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.phonetic .pos:empty { display: none; }
.speaker {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid var(--ink); background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  box-shadow: 0 2.5px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.speaker:active { transform: translateY(2px); box-shadow: none; }
.speaker::after {
  content: ''; width: 0; height: 0;
  border-left: 8px solid var(--ink);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  margin-left: 3px;
}

/* ---------------- 倒计时 ---------------- */
/*
 * 独立在两个卡片之间，不在选项卡内部。
 * 左右 padding = 卡片内边距 16 + 描边 3，让进度条和卡片正文对齐。
 */
.timer-wrap {
  display: none; align-items: center; gap: 10px;
  margin: 8px 0 0;
  padding: 0 19px;
}
.timer-wrap.on { display: flex; }
.timer-track {
  flex: 1; height: 14px;
  background: var(--surface);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.timer-track i {
  display: block; height: 100%; width: 100%;
  background: var(--primary);
  border-radius: var(--radius-pill);
}
.timer-num {
  flex: none;
  font-size: 14px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 26px; text-align: right; line-height: 1;
}
.timer-wrap.warn .timer-track i { background: var(--danger); }
.timer-wrap.warn .timer-num { color: var(--danger-dark); }
.timer-wrap.follow .timer-track i { background: var(--success); }
.timer-wrap.follow .timer-num { color: var(--success-dark); }

/* ---------------- 选项 ---------------- */
.options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.opt {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; text-align: left;
  background: var(--surface);
  border: var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text);
  cursor: pointer;
  min-height: 50px;
  line-height: 1.4;
  transition: transform .08s, background .12s;
}
/*
 * 悬停反馈
 *
 * 原来 hover 是整块换成米色底（--surface-soft），问题有两个：
 *   1. 和「已选中」的视觉太像 —— 自动模式下人去干别的了，鼠标停在
 *      某一格上不动，那一格就一直显米色，看着像被选中；
 *   2. 触屏设备上 :hover 会「粘」在最后点过的那一格，等于假高亮。
 * 现在改成：只给有真指针的设备（鼠标/触控板）一个 1px 上浮，
 * 不换底色；触屏设备干脆不要 hover 态，点按反馈由 :active 负责。
 */
@media (hover: hover) and (pointer: fine) {
  .opt:hover:not(:disabled) {
    transform: translateY(-1px);
  }
}
.opt:active:not(:disabled) {
  transform: translateY(1px);
}
.opt:disabled { cursor: default; }
.opt .key {
  flex: none; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--ink);
  background: var(--surface-soft);
  border: 2px solid var(--ink);
  border-radius: 8px;
  line-height: 1;
}
.opt .txt { flex: 1; line-height: 1.35; padding-top: 1px; }
.opt .mark { flex: none; font-size: 15px; font-weight: 800; line-height: 1.3; }

.opt.right {
  background: var(--success-soft);
  border-color: var(--success-dark);
}
.opt.right .key { background: var(--success); color: #fff; border-color: var(--success-dark); }
.opt.right .mark { color: var(--success-dark); }

.opt.wrong {
  background: var(--danger-soft);
  border-color: var(--danger-dark);
}
.opt.wrong .key { background: var(--danger); color: #fff; border-color: var(--danger-dark); }
.opt.wrong .mark { color: var(--danger-dark); }

.opt.dim { opacity: .42; }


/* ---------------- 例句区 ---------------- */
.detail {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 2px dashed #e9e9e9;
}
/* 没有答案时不显示分隔线和留白 */
.detail:empty {
  margin: 0;
  padding: 0;
  border: 0;
}
.detail .verdict,
.detail .example,
.detail .decks-of { animation: pop .22s ease-out; }
/* 只做位移、不改 opacity：避免任何环境下出现"半透明卡住"的情况 */
@keyframes pop {
  from { transform: translateY(7px); }
  to   { transform: none; }
}

.detail .verdict {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 800; margin-bottom: 4px;
}
.detail .verdict.ok { color: var(--success-dark); }
.detail .verdict.no { color: var(--danger-dark); }

/* ---------------- 揭晓区：词性与变形 ---------------- */
.senses {
  margin: 2px 0 7px;
  animation: pop .22s ease-out;
}
.senses-hd {
  font-size: 10.5px; font-weight: 800; color: var(--hint);
  letter-spacing: .3px; margin-bottom: 3px;
}
.sense-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px;
  padding: 2px 0 3px;
  font-size: 12.5px; line-height: 1.45;
}
.sense-row + .sense-row { border-top: 1px dashed #f0f0f0; }
.sense-row .sp {
  flex: none; font-size: 11px; font-weight: 800;
  color: var(--muted); min-width: 26px;
}
.sense-row.cur .sp { color: var(--primary-dark); }
.sense-row .sm { color: var(--ink); min-width: 0; }
.sense-row .fms { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.sense-row .fm {
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--surface-soft);
  border-radius: 4px;
  padding: 1px 5px 2px;
  white-space: nowrap;
}
.sense-row .fm i {
  font-style: normal; font-weight: 700; opacity: .7; margin-right: 3px;
}

.reveal {
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 2px 12px 3px;
  font: inherit; font-size: 12px; font-weight: 800; color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.reveal:active { transform: translateY(2px); box-shadow: none; }

/* 例句不做描边，用浅底块区分，省掉四边 5px 的边框占位 */
.example {
  background: var(--surface-soft);
  border-radius: 10px;
  padding: 6px 10px;
  margin-bottom: 4px;
}
.example.ok { background: var(--success-soft); }
.example .en { font-size: 12.5px; font-weight: 600; margin: 0 0 1px; line-height: 1.35; }
.example .en em {
  font-style: normal; font-weight: 800; color: var(--primary-dark);
  background: var(--primary-soft);
  border-radius: 4px; padding: 0 3px;
}
.example.ok .en em { color: var(--success-dark); background: #c9f0c9; }
.example .cn { font-size: 11.5px; color: var(--muted); margin: 0; line-height: 1.35; }
.example .empty { font-size: 12px; color: var(--hint); }

/* 收录词库信息：页面底部，不占卡片空间 */
.page-foot {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--hint);
  line-height: 1.6;
}
.page-foot:empty { display: none; }

/* 折叠的额外例句 */
.more-btn {
  display: block;
  width: 100%;
  padding: 4px 0 0;
  font: inherit; font-size: 11px; font-weight: 700;
  color: var(--muted);
  background: none; border: 0;
  cursor: pointer;
}
.more-btn:hover { color: var(--ink); }

/* 朗读中的文字高亮：类似卡拉OK跟读 */
[data-speak].speaking {
  background: #fff0b3;
  border-radius: 6px;
  box-shadow: 0 0 0 4px #fff0b3;   /* 视觉外扩，不占布局空间 */
  transition: background .12s ease, box-shadow .12s ease;
}
/* 让高亮只包住文字，而不是整行 */
.word[data-speak] { display: inline-block; }
.verdict.answer-line { display: inline-block; }

/* ---------------- 操作区 ---------------- */
.actions-slot { margin-top: 2px; }
.actions-slot:empty { display: none; }
.actions-slot .actions { margin-top: 10px; }

.actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.actions .kbd-hint { font-size: 12px; font-weight: 600; color: var(--hint); }
.btn {
  font: inherit; font-size: 14px; font-weight: 800;
  padding: 8px 22px 9px;
  border-radius: var(--radius-sm);
  border: var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--drop-sm);
  transition: transform .08s, box-shadow .08s;
  margin-left: auto;
}
.btn:hover { transform: translate(-1px, -2px); box-shadow: 0 5px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: none; }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { box-shadow: 0 5px 0 var(--primary-dark); }

/*
 * 结算页三个按钮（回首页 / 只刷错词 / 再来一轮）平分一行。
 * .btn 默认 flex-shrink:1，窄屏会被挤到文字换行，所以这里改成
 * 等分 + nowrap：空间不够时整颗按钮换行，而不是把字拆成两行。
 */
.result-actions { gap: 8px; flex-wrap: nowrap; }
.result-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  margin-left: 0;
  padding: 8px 6px 9px;
  font-size: 13px;
  white-space: nowrap;
  text-align: center;
}

/* ---------------- 结算 ---------------- */
.result-card {
  background: var(--surface);
  border: var(--line);
  border-radius: var(--radius);
  padding: 16px 14px 14px;
  text-align: center;
}
.result-card .big {
  font-size: 42px; font-weight: 800; line-height: 1;
  letter-spacing: -2px;
  color: var(--primary);
  text-shadow: 3px 3px 0 var(--primary-soft);
}
.result-card .big small { font-size: 18px; font-weight: 800; }
.result-card .label {
  color: var(--muted); font-size: 12px; font-weight: 700;
  margin: 4px 0 10px;
}
.result-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.result-stats div {
  background: var(--surface-soft);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 8px 6px 7px;
}
.result-stats b { display: block; font-size: 17px; font-weight: 800; }
.result-stats span { font-size: 10.5px; font-weight: 700; color: var(--muted); }

/*
 * 错词列表：两列网格。原来一条占一整行的 88px，15 条能吃掉 1300px；
 * 两列后行数减半，单条也压到 40 多像素。
 * 列宽用 minmax(0,1fr) 防止长单词把网格撑破。
 */
.wrong-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  margin-top: 0;
}
.wrong-item {
  padding: 5px 0 6px;
  border-bottom: 1.5px dashed #e9e9e9;
  min-width: 0;
}
.wrong-item .w {
  font-size: 13px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wrong-item .w span { font-size: 11px; color: var(--muted); font-weight: 600; margin-left: 5px; }
.wrong-item .m {
  font-size: 11.5px; font-weight: 600; color: var(--success-dark);
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------- 加载 ---------------- */
.loading {
  text-align: center; color: var(--muted); font-size: 14px; font-weight: 700;
  padding: 60px 0;
}
.loading::after {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--primary);
  animation: blink 1s infinite;
}
@keyframes blink {
  0%, 100% { opacity: .2; transform: translateY(0); }
  50%      { opacity: 1;  transform: translateY(-4px); }
}

/* ---------------- 页脚 ---------------- */
.foot {
  margin-top: 52px;
  font-size: 11px;
  font-weight: 600;
  color: #bcbcbc;
  text-align: center;
  line-height: 1.8;
  letter-spacing: 0.2px;
}
.foot a {
  color: #a8a8a8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.foot a:hover { color: var(--muted); }

/* ---------------- 自动进入下一组 ---------------- */
.auto-next {
  margin-top: 10px;
  background: var(--primary-soft);
  border: var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 12px 10px;
}
.an-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 7px;
}
.an-text {
  font-size: 13px; font-weight: 700; color: var(--primary-dark);
}
.an-text b {
  font-size: 17px; font-weight: 800; color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}
.an-cancel {
  margin-left: auto;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--muted);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.an-cancel:hover { color: var(--danger-dark); }
.an-track {
  height: 6px;
  background: #ffffff;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.an-track i {
  display: block; height: 100%; width: 100%;
  background: var(--primary);
  border-radius: var(--radius-pill);
}

/* ---------------- 顶栏模式标签 ---------------- */
/* 这里原来是「声音」按钮（挑系统朗读音色），朗读已经改成播服务器上的预生成
   音频，那个面板基本没用了，位子换成只读的模式标签：刷题页=练习模式，
   直播页=直播模式。虚线描边 + 灰字，看起来就不是能点的按钮。 */
.mode-tag {
  margin-left: auto;
  font-size: 11.5px; font-weight: 800; letter-spacing: .3px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 2px dashed var(--muted);
  border-radius: var(--radius-pill);
  padding: 3px 11px 4px;
  white-space: nowrap;
  user-select: none;
}

/* ---------------- 小屏 ---------------- */
@media (max-width: 520px) {
  .wrap { padding: 16px 14px 40px; }
  h1 { font-size: 22px; }
  .word { font-size: 30px; }
  .question-card.answered .word { font-size: 18px; }
  .quiz-card { padding: 14px 12px 12px; }
  .timer-wrap { padding: 0 15px; }   /* 卡片内边距 12 + 描边 3 */
  .opt { font-size: 12px; padding: 7px 9px; }
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode:last-child { display: none; }
  .mode.active::after { width: 26px; height: 26px; top: -9px; right: -8px; font-size: 13px; }
  .result-card .big { font-size: 36px; }
  .actions { flex-wrap: wrap; }
  .actions .kbd-hint { display: none; }   /* 小屏没有物理键盘，省出空间给按钮 */
  .actions .btn { margin-left: 0; flex: 1; text-align: center; }
}

/*
 * 极窄屏：两列放不下，退回单列。
 *
 * 断点别定在 380 或 400 —— 安卓主流机型的 CSS 宽度正好是 360
 * （1080 物理像素 ÷ 3 倍密度），会整片命中、四个选项变成一列，
 * 而 iPhone 是 390，反而正常。只有 320 这种更老的尺寸才真的排不下两列。
 */
@media (max-width: 320px) {
  .options { grid-template-columns: 1fr; }
}

/* ==================== 词库选择抽屉 ==================== */
/* 顶栏词库名可点击：给它一点可点的暗示 */
.deck-label { cursor: pointer; }
.deck-label:not(:empty)::after {
  content: '▾';
  font-size: 9px; margin-left: 3px; opacity: .55;
}

.deck-sheet { position: fixed; inset: 0; z-index: 60; }
.deck-sheet[hidden] { display: none; }
.deck-sheet-mask { position: absolute; inset: 0; background: rgba(28, 22, 14, .38); }
.deck-sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 76vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--line);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  animation: sheetUp .2s ease-out;
}
@keyframes sheetUp {
  from { transform: translateY(20px); }
  to   { transform: none; }
}
.deck-sheet-hd {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 800; color: var(--ink);
  padding-bottom: 8px;
}
.deck-sheet-x {
  border: 0; background: none; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--muted);
  padding: 4px 6px;
}
.deck-sheet-list {
  display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.deck-item {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%; box-sizing: border-box;
  text-align: left; font: inherit; color: var(--ink);
  text-decoration: none; cursor: pointer;
  background: var(--surface-soft);
  border: 2px solid #ece4d6;
  border-radius: 10px;
  padding: 9px 11px;
}
.deck-item .di-nm { flex: none; font-size: 13px; font-weight: 800; }
.deck-item .di-sub {
  flex: 1; min-width: 0;
  font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.deck-item .di-cnt {
  flex: none; font-size: 11px; color: var(--hint);
  font-variant-numeric: tabular-nums;
}
.deck-item.current { border-color: var(--ink); background: var(--surface); }
.deck-item.current .di-nm::after {
  content: ' 当前'; font-size: 10px; font-weight: 700; color: var(--primary-dark);
}
.deck-item.busy { opacity: .5; pointer-events: none; }

/* ==================== 答对特效：大勾 + 撒花 ====================
   盖在页面中间，pointer-events: none 所以永远不挡点击。
   1 秒左右自动消失，不拖慢答题节奏。 */
.fx-layer {
  position: fixed; inset: 0;
  z-index: 90;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  overflow: hidden;
  /* 整体抬高：正中会压住选项卡，往上挪后落在答案/例句区，
     既不挡刚点的那一行，也更像从题目卡上「盖章」出来的 */
  transform: translateY(-100px);
}

.fx-correct {
  position: relative; z-index: 5;
  animation: fxOut .3s ease-out .52s both;
}

.fx-check {
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 56px; font-weight: 800; line-height: 1;
  border: 3px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  /* 弹一下再回落：起点小、过冲一点，有「啪」地盖下来的手感 */
  animation: fxPop .5s cubic-bezier(.2, 1.6, .4, 1) both;
}

/* 撒花碎片：从中心向四周飞散，随机方向/颜色/延迟由行内变量给 */
.fx-bit {
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 2px;
  background: var(--c, var(--accent));
  animation: fxBit .82s cubic-bezier(.2, .7, .35, 1) var(--d, 0ms) both;
}
.fx-bit.round { border-radius: 50%; }

@keyframes fxPop {
  0%   { transform: scale(.35); opacity: 0; }
  55%  { transform: scale(1.1); opacity: 1; }
  75%  { transform: scale(.97); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes fxOut {
  to { transform: translateY(-16px) scale(.94); opacity: 0; }
}

@keyframes fxBit {
  0%   { transform: translate(0, 0) rotate(0deg) scale(.5); opacity: 0; }
  18%  { opacity: 1; }
  100% {
    transform: translate(var(--dx, 0px), var(--dy, -80px)) rotate(var(--rot, 180deg)) scale(1);
    opacity: 0;
  }
}

/* 系统开了「减弱动态效果」就只留一个静态勾，不撒花 */
@media (prefers-reduced-motion: reduce) {
  .fx-check { animation: none; }
  .fx-correct { animation: fxOut .3s ease-out .35s both; }
  .fx-bit { display: none; }
}

/* 自动模式下没有点击手势时，浏览器的自动播放策略会拦掉第一声朗读。
   这里给一个「点一下」的浮层，点完即解锁，浮层自己消失。 */
.sound-hint {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 120;
  margin: 0;
  padding: 9px 18px;
  border: var(--line);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--drop-sm);
  animation: hintIn .22s ease-out both;
}

.sound-hint:active {
  transform: translateX(-50%) translateY(2px);
  box-shadow: none;
}

@keyframes hintIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 出题规则说明：页面最底部，静态文案，换题不重绘 */
.rule-note {
  margin: 22px auto 4px;
  max-width: 30em;
  padding-top: 14px;
  border-top: 1px dashed #e6ddd0;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--hint);
}

/* 进度说明与清除入口：小字链接，不靠颜色表达危险语义 */
.progress-note { margin-top: 6px; padding-top: 0; border-top: 0; }
.clear-progress {
  font: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0 2px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.clear-progress:hover { color: var(--ink); }
.clear-progress:disabled { opacity: .55; cursor: default; text-decoration: none; }
.clear-progress:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ==================== 看义拼词 ==================== */
/* 模式卡改成链接后沿用 .mode 外观，只补键盘焦点态 */
.mode[data-mode] { cursor: pointer; }
.mode[data-mode]:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.spell-prompt { text-align: center; }
.spell-pos {
  font-size: 12px; font-weight: 800; color: var(--muted);
  margin-bottom: 4px; min-height: 18px;
}
.spell-meaning {
  margin: 0; font-size: 26px; font-weight: 800; line-height: 1.4;
  word-break: break-word;
}
.spell-answer {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.spell-answer[hidden] { display: none; }
.spell-word { font-size: 22px; font-weight: 800; color: var(--success-dark); }
.spell-ipa { font-size: 12px; color: var(--muted); }

.spell-form { display: flex; gap: 10px; align-items: stretch; min-width: 0; }
.spell-input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 17px; font-weight: 700;
  padding: 11px 12px;
  border: var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.spell-input::placeholder { color: var(--hint); font-weight: 500; }
.spell-input:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.spell-input:disabled { opacity: .85; }
.spell-input.right { border-color: var(--success-dark); background: var(--success-soft); }
.spell-input.wrong { border-color: var(--danger-dark); background: var(--danger-soft); }
.spell-submit { flex: none; }
.spell-feedback { margin-top: 8px; font-size: 13px; }
.spell-feedback:empty { display: none; }

@media (max-width: 520px) {
  .spell-meaning { font-size: 22px; }
  .spell-input { font-size: 16px; padding: 10px; }  /* 16px 防 iOS 聚焦自动缩放 */
  .spell-submit { padding: 10px 14px; }
}