/* ============================================================
 * 拼音闯关 · 样式（level.css）
 * 卡通、圆润、高对比；与拼音树 / 站点风格一致；适配平板与手机
 * ============================================================ */

/* 关卡地图头部 */
.lv-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin: 4px 0 12px;
}
.lv-total { font-size: 15px; color: var(--ink); font-weight: 700; }
.lv-total b { color: #e8a200; font-size: 18px; }

/* 关卡地图网格 */
.lv-map {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 1fr;   /* 每行等高：第 3 行只有 2 张卡时不再矮一截 */
  padding-top: 8px;   /* 给关卡编号贴纸（top:-10px）留出空间，避免被裁切 */
  gap: 14px;
}
.lv-card {
  background: #fff; border: 2px solid var(--line); border-radius: 20px;
  padding: 14px 12px 12px; text-align: center; position: relative;
  box-shadow: 0 4px 0 rgba(120, 160, 200, .14);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.lv-card:hover { transform: translateY(-3px); box-shadow: 0 7px 0 rgba(120, 160, 200, .18); }
.lv-card.lv-locked { opacity: .62; filter: grayscale(.35); box-shadow: none; }
.lv-no {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: #4a9eff; color: #fff;
  font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 rgba(40, 110, 190, .4);
}
.lv-ico { font-size: 34px; line-height: 1; margin-top: 6px; }
.lv-title { font-weight: 800; color: var(--title); font-size: 16px; }
.lv-desc {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.42;
  /* 统一最多 2 行，超出省略号：各关说明长短不一，不限制会把下方星级/按钮推得高低不齐 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 38px;
}
.lv-stars { font-size: 19px; color: #ffb13d; letter-spacing: 2px; margin: auto 0 4px; }
.lv-btn {
  border: 2px solid var(--line); border-radius: 999px; background: #f4f8fd;
  padding: 7px 16px; font-size: 13.5px; font-weight: 800; color: var(--blue-mid);
  cursor: pointer; min-width: 110px;
}
.lv-btn:hover:not(:disabled) { background: #e8f2ff; }
.lv-btn.primary { background: #4a9eff; color: #fff; border-color: #2f86f0; box-shadow: 0 3px 0 rgba(40, 110, 190, .35); }
.lv-btn.primary:hover:not(:disabled) { background: #3f8ce8; }
.lv-btn:disabled { opacity: .5; cursor: not-allowed; }
/* 未解锁：只留一个灰锁图标，不再每张卡都写「未解锁」四个字（整页 14 处重复） */
.lv-lock { min-width: auto; padding: 7px 14px; }
/* 未解锁的关卡没有星级，空星只是噪音，直接隐藏 */
.lv-card.lv-locked .lv-stars { display: none; }
.lv-free { background: var(--yellow-soft); color: #a5680b; border-color: #ffd98a; box-shadow: 0 3px 0 rgba(210, 170, 70, .3); }

/* 「收起来的那几段」折叠条（level.js 动态生成）
   ⚠️ 这里必须给出规则：<button> 带了类却没有样式时，浏览器默认样式会把它压成
   一行没有边框的纯文字，几段文字还会粘在一起 —— 和 .lv-mode 是同一类坑。 */
.lv-folds { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.lv-fold {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 12px 14px; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 14px; font-weight: 800; color: var(--muted);
  background: #f7fafd; border: 2.5px dashed #cfe0f5; border-radius: 16px;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.lv-fold:hover { background: #eef5fd; border-color: #9fcaf7; }
.lv-fold:active { transform: translateY(1px); }
.lv-fold-ico { flex: 0 0 auto; font-size: 17px; line-height: 1; }
.lv-fold-n { flex: 1 1 auto; font-style: normal; min-width: 0; }
.lv-fold-go {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--blue-mid);
  background: #fff; border: 1.5px solid #cfe4ff; border-radius: 999px; padding: 3px 10px;
}
/* 手机竖屏：折叠条窄，把「点开看看」收成一行不换行 */
@media (max-width: 479px) {
  .lv-fold { font-size: 13.5px; padding: 11px 12px; gap: 6px; }
  .lv-fold-go { padding: 3px 8px; font-size: 12px; }
}

/* ⭐ 挑战入口 / 按钮（低调、自愿，仅在通关后低调出现，绝不强制） */
.lv-ch-btn, .lv-challenge-btn {
  background: #fff7e6; color: #b9791a; border-color: #ffcf7a;
}
.lv-ch-btn:hover:not(:disabled), .lv-challenge-btn:hover:not(:disabled) { background: #ffeecc; }
.lv-challenge-btn { box-shadow: 0 3px 0 rgba(200, 150, 40, .3); }
.lv-ch-btn { font-size: 12.5px; padding: 6px 12px; }
/* 地图卡：已挑战徽章（低调小角标） */
.lv-ch-badge-mini {
  font-size: 11px; font-weight: 800; color: #b9791a; background: #fff2d6;
  border: 1px solid #ffcf7a; border-radius: 999px; padding: 1px 8px;
}
/* 挑战结算：徽章卡片 / 鼓励卡片 */
.lv-ch-badge {
  background: linear-gradient(135deg, #fff6dd, #ffe7ad); border: 2px solid #ffcf7a;
  border-radius: 18px; padding: 16px 14px; font-size: 17px; font-weight: 800; color: #a5680b;
  margin: 6px 0 4px;
}
.lv-ch-badge-sub { display: block; font-size: 13px; font-weight: 700; color: #b9791a; margin-top: 6px; }
.lv-ch-tip {
  background: #f4f8fd; border: 2px dashed #cfe0f5; border-radius: 18px; padding: 14px;
  font-size: 14px; font-weight: 700; color: var(--muted); margin: 6px 0 4px;
}
.lv-ch-tip .lv-ch-badge-sub { color: #6b829c; }
/* 挑战开场：轻微金色点缀，与常规关卡区分 */
.lv-intro-ch .lv-intro-title { color: #a5680b; }

/* 家长诊断 */
.lv-diag {
  margin-top: 16px; background: #f7fafd; border: 2px solid var(--line);
  border-radius: 16px; overflow: hidden;
}
.lv-diag summary {
  cursor: pointer; padding: 10px 14px; font-size: 14px; font-weight: 800;
  color: var(--title); list-style: none;
}
.lv-diag summary::-webkit-details-marker { display: none; }
.lv-diag summary::before { content: '▸ '; }
.lv-diag[open] summary::before { content: '▾ '; }
.lv-diag-body { padding: 4px 14px 14px; font-size: 13.5px; color: var(--ink-2); }

/* 闯关答题区 */
.lv-play { max-width: 640px; margin: 0 auto; }
.lv-play-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lv-back {
  border: 2px solid var(--line); border-radius: 999px; background: #fff;
  padding: 6px 14px; font-size: 13px; font-weight: 700; color: var(--ink-2); cursor: pointer;
}
.lv-back:hover { background: #eef4fb; }
.lv-qno { font-size: 14px; font-weight: 800; color: var(--title); }

/* 答题中误点「返回地图」时的二次确认条（开场页 / 结果页不出现） */
.lv-back-confirm {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff8e6; border: 2px solid #ffd98a; border-radius: 14px;
  padding: 10px 14px; margin-bottom: 10px;
}
.lv-back-confirm[hidden] { display: none; }
.lv-back-confirm-txt { flex: 1 1 220px; font-size: 14px; font-weight: 700; color: #8a6a1c; text-align: left; }
.lv-back-no { background: #fff; }
.lv-back-yes { background: #fff2f2; border-color: #eec2c2; color: #a85050; }
.lv-back-yes:hover:not(:disabled) { background: #ffe6e6; }

.lv-stage {
  background: linear-gradient(180deg, #f2fbff 0%, #f7fff2 100%);
  border-radius: 20px; padding: 18px 16px; text-align: center;
  /* 答题是最需要聚焦的环节：舞台撑起可视高度、内容垂直居中，别让下半屏大片空着 */
  display: flex; flex-direction: column; justify-content: center;
  min-height: 58vh;
}
.lv-prompt { font-size: 19px; font-weight: 800; color: var(--title); margin-bottom: 12px; }
.lv-replay {
  border: 2px solid #4a9eff; border-radius: 999px; background: #fff; color: var(--blue-mid);
  padding: 10px 26px; font-size: 16px; font-weight: 800; cursor: pointer; margin-bottom: 18px;
  box-shadow: 0 3px 0 rgba(40, 110, 190, .25); align-self: center;
}
.lv-replay:hover { background: #e8f2ff; }
/* 选项一律竖排成通栏大按钮：3 个选项时不会出现「两个一行、第三个孤零零占左半行」 */
.lv-opts { display: grid; grid-template-columns: 1fr; gap: 14px; }
.lv-opt {
  min-height: 86px; border: 2.5px solid var(--line); border-radius: 18px; background: #fff;
  font-family: var(--pinyin); font-size: 34px; font-weight: 700; color: var(--title);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .1s ease, border-color .1s ease;
}
.lv-opt:hover:not(:disabled) { border-color: #4a9eff; transform: translateY(-2px); }
.lv-opt:active:not(:disabled) { transform: scale(.97); }
.lv-opt:disabled { cursor: default; }
.lv-opt.right { background: var(--ok-soft); border-color: var(--ok); color: #17804f; }
.lv-opt.wrong { background: var(--err-soft); border-color: var(--err); color: var(--err-ink); }
/* 该提示只在「答错 / 再试一次」时出现，配色用温柔暖褐，与答错选项一致 */
.lv-feedback { min-height: 22px; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--err-ink); }

/* 开场页：本关学什么 + 起点读音 + 开始 */
.lv-intro { text-align: center; }
.lv-intro-title { font-size: 20px; font-weight: 800; color: var(--title); }
.lv-intro-desc { font-size: 14px; color: var(--ink-2); margin: 4px 0 12px; }
.lv-intro-sec {
  background: #fff; border: 2px solid var(--line); border-radius: 16px;
  padding: 10px 12px; margin-bottom: 10px; text-align: left;
}
.lv-intro-sec h4 { font-size: 14px; font-weight: 800; color: var(--title); margin: 0 0 8px; }
.lv-intro-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lv-chip {
  font-family: var(--pinyin); font-size: 16px; font-weight: 700; color: var(--blue-mid);
  background: var(--blue-soft); border: 2px solid #d8e9fb; border-radius: 10px;
  padding: 2px 9px;
}
.lv-chip-more { font-family: var(--font); font-size: 12px; color: var(--ink-2); background: #f2f6fb; }
.lv-intro-types { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.lv-intro-goal { margin-top: 4px; font-size: 13px; color: #17804f; font-weight: 700; }
.lv-start-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-start-py {
  font-family: var(--pinyin); font-size: 34px; font-weight: 800; color: var(--title);
  background: var(--yellow-soft); border-radius: 14px; padding: 2px 14px; min-width: 62px; text-align: center;
}
.lv-start-ex { font-size: 13px; color: var(--ink-2); }
.lv-start-row .lv-btn { margin-left: auto; }
.lv-start-btn { width: 100%; min-height: 48px; font-size: 17px; margin-top: 4px; }

/* 第 17 关 · 期末总复习：五个小游戏大闯关的卡片墙 */
.lv-drill17-grid {
  display: grid; gap: 12px; margin: 14px 0 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lv-drill17 {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 132px; padding: 14px 10px 12px; cursor: pointer; text-align: center;
  font-family: inherit; font-size: inherit; color: var(--title);
  background: #fff; border: 3px solid #cfe4ff; border-radius: 18px;
  box-shadow: 0 5px 0 rgba(120, 170, 230, .28);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.lv-drill17:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(120, 170, 230, .28); }
.lv-drill17:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(120, 170, 230, .28); }
.lv-drill17.done { border-color: #9fd8b8; background: #f2fbf5; box-shadow: 0 5px 0 rgba(120, 190, 150, .28); }
.lv-d17-ico { font-size: 34px; line-height: 1.1; }
.lv-d17-name { font-size: 16px; font-weight: 800; }
.lv-d17-tip { font-size: 12px; color: var(--ink-2); min-height: 30px; }
.lv-d17-goal { font-size: 12px; font-weight: 700; color: #a5680b; background: var(--yellow-soft); border-radius: 8px; padding: 1px 8px; }
.lv-d17-st { font-size: 12px; font-weight: 700; color: #17804f; }
.lv-d17-hint { margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.lv-d17-btns { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.lv-intro-17-done .lv-intro-title { font-size: 24px; }
@media (max-width: 620px) {
  .lv-drill17-grid { grid-template-columns: 1fr; }
  .lv-drill17 { min-height: 0; padding: 10px 8px; }
  .lv-drill17-grid { gap: 8px; }
}

/* 挑战开场页：两种玩法「挑战一 / 挑战二」左右并排，各是一张可点的大卡。
   ⚠ .lv-modes / .lv-mode / .lv-mode-ico / .lv-mode-name / .lv-mode-sub 全部由
   level.js 动态生成，必须在这里给出样式：<button> 带这些类但没有规则时，
   浏览器默认样式会把两个入口压成几行没有边框的纯文字，看起来"按钮不存在"。 */
.lv-modes {
  display: grid; gap: 12px; margin: 16px 0 4px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lv-mode {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-height: 96px; padding: 14px 12px 16px; cursor: pointer; text-align: center;
  font-family: inherit; font-size: inherit; color: var(--title);
  background: #fff; border: 3px solid #cfe4ff; border-radius: 18px;
  box-shadow: 0 5px 0 rgba(120, 170, 230, .28);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.lv-mode:hover { transform: translateY(-3px); border-color: #7fb8ff; box-shadow: 0 8px 0 rgba(120, 170, 230, .3); }
.lv-mode:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(120, 170, 230, .28); }
.lv-mode-tag {
  flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #fff;
  background: #4a9eff; border-radius: 999px; padding: 2px 10px; margin-bottom: 2px;
}
.lv-mode-ico { font-size: 33px; line-height: 1.1; }
.lv-mode-name { font-size: 17px; font-weight: 800; color: var(--title); }
.lv-mode-sub { font-size: 12.5px; font-weight: 600; color: var(--ink-2); line-height: 1.5; }
/* 挑战二 · 拼音方块：橙色系，和蓝色系的「挑战一」一眼分得开 */
.lv-mode-gb { border-color: #ffdca8; box-shadow: 0 5px 0 rgba(230, 175, 70, .26); }
.lv-mode-gb:hover { border-color: #ffc46b; box-shadow: 0 8px 0 rgba(230, 175, 70, .3); }
.lv-mode-gb:active { box-shadow: 0 2px 0 rgba(230, 175, 70, .26); }
.lv-mode-gb .lv-mode-tag { background: #e8a200; }
.lv-mode-gb .lv-mode-name { color: #a5680b; }
/* 手机竖屏：挑战一 / 挑战二 仍然左右并排（一年级一眼就能看到两条路），
   所以两张卡要一起变瘦：图标小一圈、名字和说明降半档、内边距收紧。 */
@media (max-width: 479px) {
  .lv-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lv-mode { min-height: 0; padding: 10px 7px 12px; gap: 3px; border-width: 2px; border-radius: 14px; }
  .lv-mode-tag { font-size: 10.5px; padding: 2px 7px; margin-bottom: 0; }
  .lv-mode-ico { font-size: 24px; }
  .lv-mode-name { font-size: 14px; }
  .lv-mode-sub { font-size: 11px; line-height: 1.35; }
}

/* 本课会认字（拼音→识字 衔接） */
.lv-zi-sec { background: linear-gradient(180deg, #fffaf0 0%, #fff6e6 100%); border: 2px solid #ffe0a3; }
/* ⚠️ 颜色的 !important 保留：theme.css 夜间模式对同类元素另有配色，必须靠它压住。 */
.lv-zi-sec h4 { color: #a5680b !important; }
.lv-zi-tip { font-size: 12.5px; color: #9a6a1c; margin-bottom: 10px; }
.lv-zi-row { display: flex; flex-wrap: wrap; gap: 10px; }
.lv-zi-card {
  position: relative; width: 74px; min-height: 88px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: #fff; border: 2.5px solid #ffcf6e; border-radius: 16px;
  box-shadow: 0 4px 0 rgba(220, 170, 70, .3);
  transition: transform .12s ease, box-shadow .12s ease;
  padding: 6px 4px 8px;
}
.lv-zi-card:hover { transform: translateY(-3px); box-shadow: 0 6px 0 rgba(220, 170, 70, .32); }
.lv-zi-card:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(220, 170, 70, .3); }
.lv-zi-char { font-size: 38px; font-weight: 800; line-height: 1; color: var(--title); }
.lv-zi-py { font-family: var(--pinyin); font-size: 16px; font-weight: 700; color: #d2730c; }
.lv-zi-speaker {
  position: absolute; top: 4px; right: 5px; font-size: 13px; opacity: .55;
  transition: opacity .12s ease, transform .12s ease;
}
.lv-zi-card:hover .lv-zi-speaker { opacity: 1; transform: scale(1.15); }
.lv-zi-card.playing { animation: lvZiPop .35s ease; }
@keyframes lvZiPop { 0% { transform: scale(1); } 45% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* 关卡地图卡片：本课会认字徽章 */
.lv-zi-badge {
  display: inline-block; margin-bottom: 6px; align-self: center;
  font-size: 12px; font-weight: 800; color: #a5680b;
  background: #fff3d6; border: 1.5px solid #ffd98a; border-radius: 999px; padding: 2px 10px;
}

/* 识字小火车：火车头 + 字车厢 + 车尾，点车厢听音，按「火车出发」整列车连读 */
.lv-train {
  display: flex; align-items: flex-end; gap: 0;
  overflow-x: auto; padding: 14px 2px 8px; margin: 2px 0 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.lv-train-loco {
  font-size: 40px; line-height: 1; align-self: flex-end; flex: 0 0 auto;
  margin-right: 3px; filter: drop-shadow(0 3px 1px rgba(0, 0, 0, .12));
}
.lv-train-flag {
  font-size: 26px; align-self: center; margin-left: 3px; flex: 0 0 auto;
}
.lv-train-car {
  position: relative; flex: 0 0 auto;
  width: 70px; min-height: 84px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  margin: 0 -3px;                                   /* 车厢之间轻微叠挂，像真的连在一起 */
  background: #fff; border: 2.5px solid #ffcf6e; border-radius: 14px 14px 12px 12px;
  box-shadow: 0 4px 0 rgba(220, 170, 70, .3);
  padding: 8px 4px 12px;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease, border-color .2s ease;
}
.lv-train-car:hover { transform: translateY(-3px); box-shadow: 0 6px 0 rgba(220, 170, 70, .32); }
.lv-train-car:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(220, 170, 70, .3); }
.lv-car-char { font-size: 36px; font-weight: 800; line-height: 1; color: var(--title); }
.lv-car-py { font-family: var(--pinyin); font-size: 15px; font-weight: 700; color: #d2730c; }
.lv-car-speaker {
  position: absolute; top: 4px; right: 5px; font-size: 12px; opacity: .5;
  transition: opacity .12s ease, transform .12s ease;
}
.lv-train-car:hover .lv-car-speaker { opacity: 1; transform: scale(1.15); }
.lv-car-wheel {
  position: absolute; bottom: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: #5b6470; border: 2px solid #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
.lv-car-wheel.w1 { left: 14px; } .lv-car-wheel.w2 { right: 14px; }
/* 车厢被点亮（被点到 / 火车开过时） */
.lv-train-car.lit {
  background: #fff3cf; border-color: #ff9f1c;
  box-shadow: 0 6px 0 rgba(220, 150, 30, .35), 0 0 0 3px rgba(255, 180, 40, .35);
  transform: translateY(-5px);
}
.lv-train-car.lit .lv-car-char { color: #c2410c; }
/* 行驶动画：整车轻微摇摆，表示火车开动 */
.lv-train.go { animation: lvTrainRock .5s ease-in-out infinite; }
@keyframes lvTrainRock { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* 行驶中锁住车厢点击，避免打断连读 */
.lv-train.running .lv-train-car { pointer-events: none; }
.lv-train-go { min-width: 160px; }

/* 识字小火车小游戏：听音选字 —— 选项就是一节节「字宝宝车厢」 */
.lv-zigame-btn {
  width: 100%; min-height: 46px; font-size: 16px; margin: 4px 0 2px;
  background: linear-gradient(180deg, #fff3cf 0%, #ffe6a6 100%);
  color: #a5680b; border: 2.5px solid #ffcf6e; box-shadow: 0 4px 0 rgba(220, 170, 70, .32);
}
.lv-zigame-btn:hover:not(:disabled) { background: #ffe9a8; }
.lv-zi-track {
  display: flex; align-items: flex-end; gap: 0; flex-wrap: wrap; justify-content: center;
  overflow-x: auto; padding: 16px 2px 10px; -webkit-overflow-scrolling: touch;
}
.lv-zi-loco {
  font-size: 44px; line-height: 1; align-self: flex-end; flex: 0 0 auto; margin-right: 4px;
  filter: drop-shadow(0 3px 1px rgba(0, 0, 0, .12));
}
.lv-zi-opt {
  position: relative; flex: 0 0 auto;
  width: 92px; min-height: 98px; cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center;
  margin: 0 -4px;                                   /* 车厢轻微叠挂，像连在一起 */
  background: #fff; border: 2.5px solid #ffcf6e; border-radius: 16px 16px 12px 12px;
  box-shadow: 0 5px 0 rgba(220, 170, 70, .32);
  padding: 10px 4px 14px;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease, border-color .2s ease;
}
.lv-zi-opt:hover:not(:disabled) { transform: translateY(-4px); box-shadow: 0 7px 0 rgba(220, 170, 70, .34); }
.lv-zi-opt:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 2px 0 rgba(220, 170, 70, .3); }
.lv-zi-opt:disabled { cursor: default; }
.lv-zi-opt-char { font-size: 44px; font-weight: 800; line-height: 1; color: var(--title); }
.lv-zi-opt.right { background: var(--ok-soft); border-color: var(--ok); box-shadow: 0 5px 0 rgba(63, 201, 123, .3); }
.lv-zi-opt.right .lv-zi-opt-char { color: #17804f; }
.lv-zi-opt.wrong { background: var(--err-soft); border-color: var(--err); box-shadow: 0 5px 0 rgba(242, 163, 60, .3); }
.lv-zi-opt.wrong .lv-zi-opt-char { color: var(--err-ink); }
.lv-zi-opt.lit { background: #fff3cf; border-color: #ff9f1c; box-shadow: 0 6px 0 rgba(220, 150, 30, .35), 0 0 0 3px rgba(255, 180, 40, .35); transform: translateY(-5px); }
.lv-zi-opt.lit .lv-zi-opt-char { color: #c2410c; }
/* 手机竖屏：车厢缩小一点，避免溢出 */
@media (max-width: 520px) {
  .lv-zi-opt { width: 78px; min-height: 86px; }
  .lv-zi-opt-char { font-size: 38px; }
}

/* 结果页 · 错题重听（错的当场变复习） */
.lv-wrong {
  background: #fff8ef; border: 2px solid #ffdca8; border-radius: 18px;
  padding: 12px 12px 14px; margin: 4px 0 14px; text-align: left;
}
.lv-wrong-none { text-align: center; background: var(--green-soft); border-color: #b6e8cc; font-weight: 800; color: #17804f; }
.lv-wrong-head { font-size: 15px; font-weight: 800; color: #a5680b; margin-bottom: 2px; }
.lv-wrong-count { font-size: 12.5px; font-weight: 700; color: #8a6a2a; }
.lv-wrong-tip { font-size: 12px; color: var(--ink-2); margin-bottom: 8px; }
.lv-wrong-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.lv-wrong-item {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 78px; padding: 7px 10px; cursor: pointer;
  background: #fff; border: 2.5px solid #f0b768; border-radius: 14px;
  box-shadow: 0 3px 0 rgba(210, 150, 60, .25);
  transition: transform .12s ease;
}
.lv-wrong-item:hover { transform: translateY(-2px); }
.lv-wrong-py { font-family: var(--pinyin); font-size: 23px; font-weight: 800; color: #8a5210; }
.lv-wrong-flag { font-size: 11px; font-weight: 700; color: #b07a2a; }
.lv-wrong-item.is-done { border-color: #3fc97b; background: var(--green-soft); box-shadow: 0 3px 0 rgba(60, 180, 110, .22); }
.lv-wrong-item.is-done .lv-wrong-py { color: #17804f; }
.lv-wrong-item.is-done .lv-wrong-flag { color: #17804f; }
.lv-wrong .lv-btn { min-width: 0; }

/* 结果页 */
.lv-result { background: #fff; border: 2px solid var(--line); border-radius: 22px; padding: 22px 16px; text-align: center; }
.lv-result-title { font-size: 20px; font-weight: 800; color: var(--title); }
.lv-result-stars { font-size: 46px; color: #ffb13d; letter-spacing: 4px; margin: 6px 0; }
.lv-result-pct { font-size: 16px; color: var(--ink); font-weight: 700; }
.lv-result-praise { font-size: 15px; color: var(--ink-2); margin: 8px 0 14px; }
.lv-result-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* 响应式：统一 4 档断点（与 style.css 对齐） */
@media (max-width: 1023px) {
  .lv-map { grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: 12px; }
  .lv-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 639px) {
  .lv-opts { grid-template-columns: 1fr; }
  .lv-opt { min-height: 54px; font-size: 24px; }
}

/* ============================================================
 * 拼音方块 · 掉落挑战（俄罗斯方块式题型）
 * ------------------------------------------------------------
 * 方块从顶上掉下来，听音点对的那块；连对 3 / 5 / 8 题 = 合格 / 良好 / 优秀，
 * 每答对一题掉落加快一档。卡通砖块 + 高对比，一年级也看得清、点得中。
 * ============================================================ */

/* 入口按钮（开场页 / 结算页共用） */
.gb-entry {
  width: 100%; min-height: 50px; margin: 6px 0 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(180deg, #eef6ff 0%, #dfeaff 100%);
  border: 2.5px solid #b9d5ff; color: #2464a8; font-size: 15.5px;
  box-shadow: 0 4px 0 rgba(90, 140, 210, .22);
}
.gb-entry:hover:not(:disabled) { background: #dbeaff; }
.gb-entry-sub { font-style: normal; font-size: 12px; font-weight: 700; color: #5b7ea6; }
/* ⚠️ 同上：保留 !important 以压过 theme.css 夜间模式的配色（日间仍显示这里的棕色）。 */
.gb-intro-note { color: #a5680b !important; }

/* 游戏本体 */
.gb { position: relative; }
/* 「结束 ✕」：只做右上角的小字链，不在舞台正下方抢「主按钮」的位置（见 level.js 注释） */
.gb-quit {
  position: absolute; top: 0; right: 0; z-index: 3;
  padding: 5px 12px; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 800; color: #6b829c;
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.gb-quit:hover { color: #b04a4a; border-color: #f0bcbc; background: #fff6f6; }
.gb-quit:active { transform: translateY(1px); }
.gb-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
  padding-right: 84px;   /* 给右上角的「结束 ✕」让位，别叠在连对 / 星级上 */
}
.gb-streak { font-size: 14.5px; font-weight: 800; color: var(--title); }
.gb-streak b { font-size: 22px; color: #e8701a; margin: 0 2px; }
.gb-tiers { display: flex; gap: 5px; flex-wrap: wrap; }
.gb-tier {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border-radius: 999px;
  background: #f2f6fb; border: 2px solid var(--line);
  font-size: 12.5px; font-weight: 800; color: #8ba0b8;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.gb-tier i {
  font-style: normal; font-size: 11px; font-weight: 800;
  min-width: 16px; height: 16px; line-height: 16px; text-align: center;
  border-radius: 50%; background: rgba(130, 155, 185, .18);
}
.gb-tier.ever { color: #b9791a; border-color: #ffdca8; background: #fff8ec; }
.gb-tier.ever i { background: rgba(230, 170, 60, .25); }
.gb-tier.on {
  color: #fff; border-color: #f0a72e;
  background: linear-gradient(180deg, #ffbf4d 0%, #f59a1c 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 0 rgba(200, 140, 30, .32);
}
.gb-tier.on i { background: rgba(255, 255, 255, .35); color: #fff; }
/* 「连对提示」（id=gbSpeed）：旧的 .gb-speed 一代已随「不显示倍率」改版作废，
   这里跟着现用的 .gb-pace 走 —— 没有这组规则时它只是一段没有样式的斜体字。 */
.gb-pace {
  display: inline-block; margin-left: 8px; padding: 2px 10px;
  font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--muted);
  background: #f2f6fb; border: 1.5px solid var(--line); border-radius: 999px;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
/* 连对升档就换色（合格蓝 → 良好橙 → 优秀金），让「上台阶」一眼看得见 */
.gb-pace.gb-spd-t1 { color: #1f7ae0; background: #eef6ff; border-color: #cfe4ff; }
.gb-pace.gb-spd-t2 { color: #b25a12; background: #fff5ec; border-color: #ffd9b0; }
.gb-pace.gb-spd-t3 { color: #a5680b; background: #fff8e6; border-color: #ffdca8; }

/* 听音条 */
.gb-cue { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.gb-listen {
  border: 2.5px solid #4a9eff; border-radius: 999px; background: #fff; color: var(--blue-mid);
  padding: 10px 22px; font-size: 16px; font-weight: 800; cursor: pointer;
  box-shadow: 0 3px 0 rgba(40, 110, 190, .25);
}
.gb-listen:hover { background: #e8f2ff; }
.gb-listen:active { transform: translateY(1px); }
.gb-cue-tip { font-size: 13px; color: var(--ink-2); font-weight: 700; }

/* 掉落场地 */
.gb-field {
  position: relative; overflow: hidden;
  /* 手机地址栏一收一展 vh 就变，场地说高就高、说矮就矮，正在掉的方块会跟着"跳"。
     支持的浏览器统一用 svh（小视口高度，不随地址栏变化），上一行留给老浏览器。 */
  height: clamp(300px, 44vh, 420px);
  height: clamp(300px, 44svh, 420px);
  border: 2.5px solid #cfe0f5; border-radius: 18px;
  background-color: #f4faff;
  background-image:
    linear-gradient(180deg, #eef7ff 0%, #f7fcff 55%, #eefaf3 100%),
    repeating-linear-gradient(90deg, rgba(120, 170, 230, .13) 0 1px, transparent 1px 25%);
  background-blend-mode: normal;
  box-shadow: inset 0 6px 16px rgba(120, 165, 220, .16);
}
.gb-field::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: repeating-linear-gradient(45deg, #ffd98a 0 8px, #fff0cd 8px 16px);
  border-top: 2px dashed #f0b768;
}

/* 方块：圆角砖块，颜色跟着「声母 / 韵母 / 整体认读 / 音节」四类走 */
.gb-block {
  position: absolute; top: 0; left: 0;
  height: 74px; min-height: 62px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; cursor: pointer;
  font-family: var(--pinyin); font-size: 30px; font-weight: 800;
  color: #fff; border: 3px solid rgba(255, 255, 255, .55);
  box-shadow: 0 5px 0 rgba(40, 80, 140, .22), inset 0 3px 0 rgba(255, 255, 255, .35);
  transition: opacity .26s ease, box-shadow .18s ease, filter .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.gb-block .gb-py { display: block; line-height: 1; pointer-events: none; white-space: nowrap; }
/* 拼音长短不一：4 个字母 / 5 个以上各缩小一档，方块再窄也不出格 */
.gb-block.gb-l4 .gb-py { font-size: .84em; }
.gb-block.gb-l5 .gb-py { font-size: .72em; }
.gb-k-sm { background: linear-gradient(180deg, #6fb4ff 0%, #3f8ce8 100%); }
.gb-k-ym { background: linear-gradient(180deg, #4fd6c4 0%, #21a696 100%); }
.gb-k-zt { background: linear-gradient(180deg, #ffab63 0%, #f2812e 100%); }
.gb-k-syl { background: linear-gradient(180deg, #b79bff 0%, #8a63ee 100%); }
.gb-block:hover:not(:disabled) { filter: brightness(1.06); }
/* 点对了：变绿 + 轻轻弹一下（动 inner span，避免动到行内 translate 的落点） */
.gb-block.right {
  background: linear-gradient(180deg, #5fd996 0%, #22a86b 100%);
  box-shadow: 0 5px 0 rgba(30, 130, 85, .3), 0 0 0 5px rgba(60, 200, 130, .35);
}
.gb-block.right .gb-py { animation: gbPop .42s cubic-bezier(.2, 1.6, .4, 1); }
/* 点错了：温柔橙 + 抖一下（不用刺眼红，低龄不吓人） */
.gb-block.wrong {
  background: linear-gradient(180deg, #ffc477 0%, #f2a33c 100%);
  box-shadow: 0 5px 0 rgba(190, 130, 40, .28), 0 0 0 4px rgba(255, 190, 110, .4);
}
.gb-block.wrong .gb-py { animation: gbShake .34s ease; }
/* 答对后其余方块淡出，主角更突出 */
.gb-block.dim { opacity: .3; filter: grayscale(.4); }
/* 点错后把正确方块轻轻亮 2 秒（给一年级留一条自己找得到路） */
.gb-block.hint {
  animation: gbGlow 1.1s ease-in-out 2;
  box-shadow: 0 5px 0 rgba(40, 80, 140, .22), 0 0 0 6px rgba(255, 210, 90, .55);
}
.gb-block.gone { opacity: 0; }

@keyframes gbPop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes gbShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-5px) rotate(-3deg); }
  75% { transform: translateX(5px) rotate(3deg); }
}
@keyframes gbGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }

/* 反馈行 */
.gb-fb { min-height: 24px; margin-top: 10px; font-size: 14.5px; font-weight: 800; color: var(--ink-2); text-align: center; }
.gb-fb.ok { color: #17804f; }
.gb-fb.warn { color: var(--err-ink); }

/* 连对达标横幅（合格 / 良好 / 优秀） */
.gb-flash {
  position: absolute; left: 50%; top: 44%; z-index: 6;
  transform: translate(-50%, -50%) scale(.72);
  opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 14px 28px; border-radius: 24px;
  background: rgba(255, 255, 255, .95); border: 3px solid #ffd98a;
  box-shadow: 0 12px 28px rgba(60, 110, 170, .26);
  transition: opacity .2s ease, transform .24s cubic-bezier(.2, 1.5, .4, 1);
}
.gb-flash.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.gb-flash-ico { font-size: 40px; line-height: 1; }
.gb-flash-word { font-size: 27px; font-weight: 900; color: #e8701a; }
.gb-flash-sub { font-size: 13px; font-weight: 800; color: #8a6a2a; }
/* 三档配色：合格🥉蓝 / 良好🥈橙 / 优秀🥇金 —— 让"上台阶"一眼看得见，也激励孩子冲优秀。
   （文字默认橙色；合格改成蓝、良好保持橙、优秀改成金；优秀再多一点光晕） */
.gb-flash.gb-t3 { border-color: #5aa0ff; box-shadow: 0 12px 30px rgba(60, 130, 220, .34); }
.gb-flash.gb-t3 .gb-flash-ico { filter: hue-rotate(0deg); }
.gb-flash.gb-t3 .gb-flash-word { color: #1f7ae0; }
.gb-flash.gb-t5 { border-color: #ff9f33; box-shadow: 0 12px 30px rgba(240, 150, 40, .36); }
.gb-flash.gb-t5 .gb-flash-word { color: #e8701a; }
.gb-flash.gb-t8 { border-color: #ffcf5a; box-shadow: 0 14px 34px rgba(245, 190, 40, .5); }
.gb-flash.gb-t8 .gb-flash-word { color: #c8860b; }

.gb-foot { display: flex; justify-content: center; margin-top: 12px; }

/* 结算页的档次阶梯 */
.gb-result .gb-res-badge { font-size: 27px; font-weight: 900; color: #a5680b; margin: 8px 0 2px; }
.gb-res-badge.gb-res-none { font-size: 16px; color: var(--muted); }
.gb-res-ladder { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0 4px; }
.gb-res-ladder .gb-tier { font-size: 13.5px; padding: 4px 12px; }

@media (max-width: 639px) {
  .gb-field { height: clamp(260px, 42vh, 340px); height: clamp(260px, 42svh, 340px); }
  .gb-block { height: 66px; font-size: 26px; }
  .gb-cue-tip { font-size: 12px; }
  .gb-top { justify-content: center; }
}

/* 大字 / 教室模式：整体会被 html.big-mode / html.classroom 放大，这里把场地压矮一点，
   保证「头栏 + 听音条 + 场地 + 反馈 + 结束」一屏放得下，不用滚动 */
html.big-mode .gb-field { height: clamp(280px, 38vh, 380px); height: clamp(280px, 38svh, 380px); }
html.classroom .gb-field { height: clamp(240px, 30vh, 330px); height: clamp(240px, 30svh, 330px); }
html.classroom .gb-block { font-size: 32px; }