/* ============================================================
 * jingxue.css —— 「经穴精读」页面的专属样式
 * ------------------------------------------------------------
 * 复用 style.css 里的 :root 变量和通用组件（card / btn / pill …），
 * 这里只写这一个页面独有的东西：小人图、经络列表、穴位卡片、小测。
 * ============================================================ */

/* ============================================================
 *  一、页面骨架：图在左、说明在右；手机上一上一下
 * ============================================================ */
.jx-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* flex 列里的按钮默认会被拉满宽，这里让「返回主页」保持小尺寸靠左 */
.jx-page > .btn,
.jx-page > .btn-ghost {
  align-self: flex-start;
  flex: none;
}

/* 人体图那一块，不要留多余的下边距 */
.jx-figure-wrap + .jx-legend { margin-top: 10px; }

/* 手机上先看图，再看列表 */
.jx-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 【为什么这里取消了「宽屏左右分栏」】
   全站外层 .app 的 max-width 只有 520px（见 css/style.css），正文区实际约 488px。
   以前这里按「视口 ≥860px」切成左右两栏，可是视口再宽容器也不会跟着变宽，
   结果右栏被压成 68px 的窄条 —— 卡片里的文字只能一个字一行竖着排，
   在电脑上打开就是一条「白条」，看着像页面坏了。
   现在统一单栏：人体图 / 分类板块 / 经络详情，一律从上到下依次排开，
   宽度永远等于正文区宽度，手机上什么样、电脑上就什么样。 */

/* ============================================================
 *  二、人体图舞台
 * ============================================================ */
.jx-stage {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 12px;
  position: relative;
}

.jx-stage-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.jx-stage-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
}

.jx-stage-hint {
  font-size: 12px;
  color: var(--ink-3);
  margin-left: auto;
}

/* 小人图本体 */
.jx-figure-wrap {
  position: relative;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 201, 60, .18) 0 60px, transparent 61px),
    linear-gradient(180deg, #FFFBF2, #FFF3E0);
  overflow: hidden;
  /* 人体本来就是「高瘦」的，若让它撑满整行宽，高度会逼近整屏。
     这里限一个最大宽度，让小人保持在舒服的观感尺寸。 */
  max-width: 320px;
  margin: 0 auto;
}

.jx-svg {
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}

/* 穴位点可点：手指友好 */
.jx-svg circle[data-pt] {
  cursor: pointer;
  transition: r .15s ease, opacity .15s ease;
}
@media (hover: hover) {
  .jx-svg circle[data-pt]:hover {
    r: 6;
  }
}

/* 经络线条淡入 */
.jx-svg path[data-mer],
.jx-svg ellipse[data-mer] {
  transition: opacity .25s ease, stroke-width .25s ease;
}

/* ============================================================
 *  三、分类标签（手三阴经 / 足三阳经 …）
 * ============================================================ */
.jx-cats {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.jx-cats::-webkit-scrollbar { display: none; }

.jx-cat {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: #FFFDF8;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: .18s;
  white-space: nowrap;
}
.jx-cat:hover { border-color: var(--orange); color: var(--orange); }
.jx-cat.on {
  background: var(--orange);
  border-color: var(--orange-d);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
 *  四、经络列表
 * ============================================================ */
.jx-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
  gap: 10px;
}

.jx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: left;
  transition: .18s;
  font-family: inherit;
}
.jx-item:hover {
  transform: translateY(-2px);
  border-color: var(--mc, var(--orange));
}
.jx-item.on {
  border-color: var(--mc, var(--orange));
  background: #FFF6EA;
  box-shadow: 0 3px 0 var(--mc, var(--orange));
}

/* 经络的小圆点色标 */
.jx-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mc, var(--orange));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 4px var(--mc, var(--orange));
}

.jx-item-txt { min-width: 0; flex: 1; }
.jx-item-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jx-item-meta {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 1px;
}

/* ============================================================
 *  五、经络详情卡
 * ============================================================ */
.jx-detail {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 16px;
  border-top: 5px solid var(--mc, var(--orange));
}

.jx-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.jx-detail-name {
  font-size: 19px;
  font-weight: 900;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}
.jx-detail-en {
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .3px;
  margin-top: 2px;
}

.jx-detail-desc {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 12px 0 0;
  padding: 11px 13px;
  background: #FFFAF0;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--mc, var(--orange));
}

/* 脏腑对应的小徽标 */
.jx-organ {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* 本经穴位：一排小药丸 */
.jx-points {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.jx-pt {
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--mc, #FF7A45) 45%, #fff);
  background: color-mix(in srgb, var(--mc, #FF7A45) 12%, #fff);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: .16s;
  font-family: inherit;
}
.jx-pt:hover {
  background: var(--mc, #FF7A45);
  color: #fff;
  transform: translateY(-1px);
}

/* ============================================================
 *  六、穴位详情弹窗内容
 * ============================================================ */
.jx-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 2px dashed var(--line);
}

.jx-modal-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  background: color-mix(in srgb, var(--mc, #FF7A45) 18%, #fff);
  border: 3px solid var(--mc, #FF7A45);
}

.jx-modal-name {
  font-size: 22px;
  font-weight: 900;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.jx-modal-belongs {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 3px;
}

.jx-loc {
  margin-top: 14px;
}
.jx-loc-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-3);
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.jx-loc-text {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink);
  padding: 11px 13px;
  background: #FFFAF0;
  border-radius: var(--radius-sm);
}

/* ============================================================
 *  七、认穴小测
 * ============================================================ */
.jx-quiz {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 16px;
}

.jx-quiz-q {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.6;
  margin: 0 0 12px;
}

.jx-quiz-opts {
  display: grid;
  gap: 9px;
}

.jx-quiz-opt {
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  background: #FFFDF8;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: .16s;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
}
.jx-quiz-opt:hover:not(:disabled) {
  border-color: var(--blue);
  background: #F3FAFF;
  transform: translateX(2px);
}
.jx-quiz-opt.ok {
  border-color: var(--green-d);
  background: #EAFBE6;
  color: #2E7D32;
}
.jx-quiz-opt.no {
  border-color: var(--red-d);
  background: #FFEDED;
  color: #C62828;
}
.jx-quiz-opt:disabled { cursor: default; }

/* L2「定位符」：选项是整句「定位」，会换好几行。
   所以徽标要钉在左上角（flex-start），字号收小一点，行距放开才读得顺。 */
.jx-quiz-opt.long {
  align-items: flex-start;
  padding: 11px 13px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.65;
}
.jx-quiz-opt.long .jx-quiz-idx {
  margin-top: 2px;
  background: #FFF1DC;
}

/* L2 反向题（给定位 → 选穴名）：把那句「定位」单独框出来，
   跟下面的四个穴名选项区分开，一眼知道题干在哪 */
.jx-quiz-quote {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 2px dashed #FFD9A8;
  background: #FFFBF2;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.72;
}

.jx-quiz-idx {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-2);
}

/* 进度 */
.jx-quiz-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.jx-quiz-pill {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink-2);
  background: var(--bg);
  padding: 4px 11px;
  border-radius: 999px;
}

/* ============================================================
 *  八、图例（哪些颜色是哪些经）
 * ============================================================ */
.jx-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px dashed var(--line);
}
.jx-legend-i {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-2);
}
.jx-legend-d {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

/* ============================================================
 *  九、首页的那个「经穴精读」入口卡片
 * ------------------------------------------------------------
 * 它复用 .stage-card 的骨架，但本质是个 <a> 链接，
 * 所以要清掉链接默认样式（下划线、蓝色）。
 * ============================================================ */
.stage-card.jx-entry,
a.jx-entry {
  text-decoration: none;
  -webkit-text-decoration: none;
  color: var(--ink);
  border-color: #FFE0C7;
}
a.jx-entry:hover,
a.jx-entry:visited,
a.jx-entry:active {
  text-decoration: none;
  color: var(--ink);
}
.stage-card.jx-entry:hover {
  transform: translateY(-2px);
  border-color: var(--orange);
}

.jx-entry-fig {
  flex: none;
  width: 54px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFF3E0;
  border-radius: 16px;
}
.jx-entry-fig svg {
  display: block;
  width: 44px;
  height: 75px;
}

/* 卡片里的名字和描述是 span，要变成块级才会换行 */
.jx-entry .stage-name,
.jx-entry .stage-desc {
  display: block;
}
.jx-entry .stage-name {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ============================================================
 *  十、小屏微调
 * ============================================================ */
@media (max-width: 380px) {
  .jx-list { grid-template-columns: 1fr 1fr; gap: 8px; }
  .jx-item { padding: 9px 10px; gap: 8px; }
  .jx-item-name { font-size: 13.5px; }
  .jx-detail { padding: 13px; }
  .jx-modal-name { font-size: 20px; }
  .jx-entry-fig { width: 46px; height: 78px; }
  .jx-entry-fig svg { width: 38px; height: 64px; }
}

/* ============================================================
 *  十一、穴位符箓图标
 * ------------------------------------------------------------
 * 穴位不再是光秃秃的圆点，而是「圆底 + 白色小篆符」。
 * 悬停 / 点击时轻轻跳一下，像小符箓活过来。
 * ============================================================ */
.jx-svg circle.jx-fu {
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), r .18s ease;
  cursor: pointer;
}

@media (hover: hover) {
  .jx-svg circle.jx-fu:hover {
    transform: scale(1.35);
    stroke-width: 3;
  }
  /* 悬停时整张图里的符箓笔画也一起提亮 */
  .jx-svg circle.jx-fu:hover ~ .jx-fu-mark { opacity: 1; }
}

/* 点击时跳一下（JS 加 class 触发） */
.jx-svg circle.jx-fu.fx-hop {
  animation: fu-hop .42s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fu-hop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.55); }
  62%  { transform: scale(.92); }
  100% { transform: scale(1); }
}

/* 高亮的符箓常驻一个呼吸光晕 */
.jx-svg circle.jx-fu-hot {
  animation: fu-breathe 1.6s ease-in-out infinite;
}
@keyframes fu-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .62; }
}

/* 五输穴类别角标（井荥输经合） */
.jx-fu-kind {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  user-select: none;
}

/* ============================================================
 *  十二、经络流光
 * ------------------------------------------------------------
 * 答对 / 学完一条经络时，一道白光沿着整条线跑一遍。
 * 原理：线长先量出来，用 stroke-dasharray 挖出一小段亮光，
 * 再用 animation 把它从头推到尾。
 * ============================================================ */
.jx-svg path.jx-flow {
  stroke-dasharray: 22 9999;
  stroke-dashoffset: 22;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.95));
  animation: jx-flow-run 1.15s ease-out 1 forwards;
  pointer-events: none;
}
@keyframes jx-flow-run {
  0%   { stroke-dashoffset: 22;    opacity: 0; }
  12%  { opacity: .95; }
  88%  { opacity: .95; }
  100% { stroke-dashoffset: -640;  opacity: 0; }
}

/* 流光动画期间，原线条稍微让一让，白光才显眼 */
.jx-svg.flowing path[data-mer] { transition: opacity .2s; }

/* ============================================================
 *  十三、关卡地图（闯关入口）
 * ============================================================ */
.mj-levels {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.mj-level {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  background: #FFFFFF;
  border: 2.5px solid var(--line, #F0E2D0);
  border-radius: 20px;
  box-shadow: 0 3px 0 rgba(214,190,160,.35);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .18s;
}
.mj-level:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(214,190,160,.35);
}
.mj-level:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 2px 0 rgba(214,190,160,.35); }

.mj-level.locked { opacity: .55; cursor: not-allowed; box-shadow: none; }
.mj-level.locked .mj-lv-num { background: #CBBBA6 !important; }

/* 关卡编号圆牌 */
.mj-lv-num {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 800;
  color: #FFFFFF;
  background: #FFB443;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.14);
}

.mj-lv-txt { flex: 1; min-width: 0; }
.mj-lv-name {
  display: block;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink, #4A3728);
  letter-spacing: .3px;
}
.mj-lv-desc {
  display: block;
  font-size: 12.5px;
  color: var(--ink-2, #9C8A7C);
  margin-top: 3px;
  line-height: 1.5;
}
.mj-lv-right { flex: none; display: flex; align-items: center; gap: 8px; }

/* 星级 */
.mj-stars { font-size: 13px; letter-spacing: 1px; }
.mj-stars .off { opacity: .28; }

.mj-lv-go { font-size: 20px; color: #CBBBA6; font-weight: 700; }

/* Boss 关特殊配色 */
.mj-level.boss { border-color: #FFD9A0; background: linear-gradient(180deg, #FFF8EC, #FFFFFF); }
.mj-level.boss .mj-lv-num { background: linear-gradient(160deg, #FF9F43, #FF7043); }

/* ============================================================
 *  十四、五输穴表格 / 知识点卡片 / 歌诀
 * ============================================================ */
.mj-table-wrap { overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; }
.mj-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  min-width: 420px;
}
.mj-table th,
.mj-table td {
  padding: 8px 9px;
  text-align: center;
  border-bottom: 1.5px solid #F5EADB;
}
.mj-table th {
  background: #FFF6E9;
  color: #7A6455;
  font-weight: 800;
  font-size: 12.5px;
  position: sticky;
  top: 0;
}
.mj-table td.rowhead {
  text-align: left;
  font-weight: 800;
  white-space: nowrap;
  color: var(--ink, #4A3728);
}
.mj-table tbody tr:hover { background: #FFFBF4; }

/* 单元格里的穴名按钮 */
.mj-cell {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--mc) 16%, #FFFFFF);
  color: #6B5443;
  font-weight: 700;
  border: 1.5px solid color-mix(in srgb, var(--mc) 34%, #FFFFFF);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  transition: transform .12s ease;
}
.mj-cell:hover { transform: translateY(-1px); }

/* 类别徽标 */
.mj-kind {
  display: inline-block;
  min-width: 20px;
  padding: 1px 5px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
  background: #C9AF93;
}
.mj-kind.k1 { background: #FF8FB1; }
.mj-kind.k2 { background: #FFB443; }
.mj-kind.k3 { background: #6FD35E; }
.mj-kind.k4 { background: #5BB8F5; }
.mj-kind.k5 { background: #B18CFF; }

/* 歌诀卡 */
.mj-song {
  background: #FFFBF2;
  border: 2.5px solid #F5E4CB;
  border-radius: 20px;
  padding: 15px 17px;
  margin-top: 12px;
}
.mj-song-title { font-size: 16px; font-weight: 800; color: var(--ink, #4A3728); }
.mj-song-sub { font-size: 12.5px; color: var(--ink-2, #9C8A7C); margin-top: 2px; }
.mj-song-lines { margin-top: 11px; }
.mj-song-line {
  font-size: 15.5px;
  line-height: 2;
  color: #6B5443;
  letter-spacing: 1.5px;
}
.mj-song-tip {
  margin-top: 11px;
  font-size: 12.5px;
  color: #8A7566;
  background: #FFF3E0;
  border-radius: 12px;
  padding: 9px 12px;
  line-height: 1.65;
}

/* 知识点卡 */
.mj-fact {
  background: #FFFFFF;
  border: 2.5px solid var(--line, #F0E2D0);
  border-radius: 20px;
  padding: 14px 16px;
  margin-top: 11px;
}
.mj-fact-head { display: flex; align-items: center; gap: 8px; }
.mj-fact-title { font-size: 15.5px; font-weight: 800; color: var(--ink, #4A3728); flex: 1; }
.mj-fact-body {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.85;
  color: #6B5443;
}
.mj-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  background: #FFE8D6;
  color: #E07B39;
  flex: none;
}

/* ============================================================
 *  十五、Boss 关：倒计时 + 连对
 * ============================================================ */
.mj-boss-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.mj-timer {
  flex: 1;
  height: 12px;
  background: #F0E2D0;
  border-radius: 99px;
  overflow: hidden;
}
.mj-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #6FD35E, #FFB443);
  transition: width .25s linear;
}
.mj-timer-fill.danger { background: linear-gradient(90deg, #FFB443, #FF5A5F); }
.mj-timer-num {
  flex: none;
  font-size: 15px;
  font-weight: 800;
  color: #E07B39;
  min-width: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Boss 关进入时的符箓兽暴走预警 */
.mj-rage {
  text-align: center;
  padding: 8px 0 2px;
}
.mj-rage-lion {
  display: inline-block;
  animation: rage-shake .5s ease-in-out infinite;
}
@keyframes rage-shake {
  0%, 100% { transform: translateX(-3px) rotate(-2deg); }
  50%      { transform: translateX(3px) rotate(2deg); }
}

/* ============================================================
 *  十六、定位符关卡：人体图点选
 * ============================================================ */
.mj-find-wrap {
  max-width: 320px;
  margin: 12px auto 0;
  position: relative;
}
.mj-find-hint {
  text-align: center;
  font-size: 13px;
  color: var(--ink-2, #9C8A7C);
  margin-top: 9px;
}

/* 点错时闪一下红圈 */
.mj-miss {
  animation: miss-ring .6s ease-out 1 forwards;
}
@keyframes miss-ring {
  0%   { opacity: .9; r: 8; }
  100% { opacity: 0;  r: 30; }
}

/* 点对时打勾 */
.mj-hit-ring {
  animation: hit-ring .55s ease-out 1 forwards;
}
@keyframes hit-ring {
  0%   { opacity: .95; r: 8; }
  100% { opacity: 0;   r: 34; }
}

/* ============================================================
 *  十七、过关时符箓兽从屏幕下方蹦出来
 * ============================================================ */
.mj-lion-jump {
  animation: lion-jump .9s cubic-bezier(.34,1.4,.5,1) 1;
}
@keyframes lion-jump {
  0%   { transform: translateY(150px) scale(.5); opacity: 0; }
  55%  { transform: translateY(-16px) scale(1.12); opacity: 1; }
  75%  { transform: translateY(4px) scale(.97); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* 连对时符箓兽越兴奋（眼睛放大、轻微抖动） */
.mj-lion-combo { animation: lion-combo .6s ease-in-out infinite; }
@keyframes lion-combo {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50%      { transform: rotate(3deg) scale(1.06); }
}

/* ============================================================
 *  十八、确认弹窗（重置进度之类）
 * ============================================================ */
.mj-confirm-line {
  font-size: 14px;
  line-height: 1.8;
  color: #6B5443;
  margin-top: 6px;
}


/* ============================================================
 *  十九、符箓显示开关 + 陪考醒狮
 * ------------------------------------------------------------
 *  为什么要做开关：实测人体图在手机上只显示 320px，
 *  316 个穴位铺满时一颗符箓只有 7px，根本看不清。
 *  所以默认只画重点穴位（五输穴 + 八脉交会穴），
 *  想看得更全再切「全部穴位」。
 * ============================================================ */

/* 陪考的小醒狮 */
.mj-lion-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 2px;
  min-height: 68px;
}
.mj-lion-combo {
  transition: transform .2s ease;
  filter: grayscale(.25);
  opacity: .72;
}
.mj-lion-combo.on {
  filter: none;
  opacity: 1;
}
.mj-lion-combo.pump { animation: lion-combo .6s ease; }
.mj-lion-tip {
  font-size: 13px;
  font-weight: 800;
  color: #FF7A45;
  animation: tip-pop .4s ease;
}
@keyframes tip-pop {
  0%   { transform: scale(.6); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}


/* ============================================================
 *  二十、正面 / 背面（原「经穴地图」）
 * ------------------------------------------------------------
 *  按姐姐这一版的要求重做：
 *   · 只留正面和背面，去掉侧面，两张并排一行
 *   · 两张图都能放大缩小
 *   · 点分类板块 → 直接出「经络一览」，不再显示人体图
 * ============================================================ */

/* ---------- 正面 / 背面：两张图并排一行 ---------- */
.jx-views {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.jx-view {
  flex: 1;
  min-width: 0;
  background: #FFFDF8;
  border: 2px solid #F3E3D2;
  border-radius: 14px;
  padding: 6px 6px 8px;
  display: flex;
  flex-direction: column;
}
.jx-view-label {
  font-size: 12px;
  font-weight: 800;
  color: #8A7566;
  text-align: center;
  letter-spacing: .5px;
  margin-bottom: 4px;
}

/* 【缩放是怎么做的】
   外层 .jx-view-body 固定最大高度 + overflow:auto；
   内层 .jx-zoom 只改「宽度百分比」来放大。
   为什么不用 transform: scale()：scale 之后元素的实际占位没变，
   浏览器不会给出滚动条，放大后就只能看到中间一小块、还拖不动。
   改成宽度百分比，占位跟着变，滚动条自动出现，拖着就能看图。 */
.jx-view-body {
  display: block;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 320px;
  border-radius: 10px;
  cursor: zoom-in;
  /* 纯色底就好。之前这里有个径向渐变，渲染出来是头顶一团黄球，
     看着像脑袋发光，把小人糊掉了。 */
  background: #FFFCF5;
}
.jx-view-body .jx-zoom { margin: 0 auto; }
.jx-map-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* − 100% ＋ 三个小按钮 */
.jx-zoom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
}
.jx-zoom-btn {
  width: 30px;
  height: 28px;
  border-radius: 9px;
  border: 2px solid #F0D9C4;
  background: #FFFDF9;
  color: #8A7566;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.jx-zoom-btn:active { transform: translateY(1px); }
.jx-zoom-pct {
  min-width: 54px;
  height: 28px;
  padding: 0 6px;
  border-radius: 9px;
  border: 2px solid #FFE2B0;
  background: #FFF7E6;
  color: #B8720F;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}
.jx-zoom-pct:active { transform: translateY(1px); }

.jx-zoomall {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border-radius: 11px;
  border: 2px dashed #EBD9C6;
  background: #FFFDF9;
  color: #9C8A7C;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.jx-zoomall:active { transform: translateY(1px); }

/* ---------- 六个分类板块 ---------- */
.jx-catblocks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.jx-catblock {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 2px solid #F3E3D2;
  background: #FFFDF9;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.jx-catblock:hover { border-color: #FFCF8A; background: #FFFBF3; }
.jx-catblock:active { transform: scale(.985); }
.jx-catblock-ico { font-size: 22px; line-height: 1; }
.jx-catblock-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jx-catblock-name { font-size: 15px; font-weight: 800; color: var(--ink); }
.jx-catblock-sub { font-size: 12px; color: var(--ink-3, #9C8A7C); margin-top: 1px; }
.jx-catblock-arr { font-size: 20px; font-weight: 700; color: #CBB6A3; }

/* 「返回正背面图」 */
.jx-back {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 11px;
  border: 2px solid #F0D9C4;
  background: #FFFDF9;
  color: #8A7566;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.jx-back:active { transform: translateY(1px); }

/* ============================================================
 *  二十一、穴位知识清单（经络详情里的「全部 X 穴」）
 * ------------------------------------------------------------
 *  姐姐把全部穴位资料补齐了，每个穴都有：编号 + 定位 + 功效。
 *  这些都是知识点，所以要能一眼看完，不是藏着让人猜。
 * ============================================================ */
.xw-zone {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  margin: 18px 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px dashed #F0E2D2;
}
.xw-zone > span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3, #9C8A7C);
}
.xw-list { display: flex; flex-direction: column; gap: 8px; }

.xw-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid #F5E7D8;
  background: #FFFDF9;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.xw-row:hover { border-color: #FFCF8A; background: #FFFBF3; }
.xw-row:active { transform: scale(.995); }
.xw-row-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.xw-row-name { font-size: 15.5px; font-weight: 800; color: var(--ink); }
.xw-row-no {
  font-size: 11px;
  font-weight: 800;
  color: #FFFFFF;
  background: #D9C4B0;
  border-radius: 6px;
  padding: 1px 6px;
  letter-spacing: .3px;
}
.xw-tag {
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  border-radius: 6px;
  padding: 1px 6px;
}
.xw-tag-w { background: #FFF0D6; color: #B8720F; }
.xw-tag-b { background: #E4F1FF; color: #2A7FC1; }
.xw-row-line {
  font-size: 13px;
  line-height: 1.62;
  color: var(--ink-2, #6B5A4C);
}
.xw-row-fn { color: #B0603A; }

/* 奇经八脉那句「它是干什么的」 */
.xw-note {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 12px;
  background: #F6F2FF;
  border-left: 4px solid #B18CFF;
  font-size: 13.5px;
  line-height: 1.75;
  color: #5B4A80;
}

/* 窄屏：两张图继续并排，只是矮一点，保证一屏能看见 */
@media (max-width: 420px) {
  .jx-view-body { max-height: 272px; }
  .jx-zoom-btn { width: 28px; height: 26px; }
  .jx-zoom-pct { min-width: 48px; }
  .jx-catblock { padding: 10px 11px; }
}

/* ---------- 绿色「去闯关」按钮 ---------- */
.mj-goto {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
  padding: 14px 16px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(180deg, #6FD36F 0%, #45B845 100%);
  box-shadow: 0 4px 0 #2E9A2E, 0 8px 18px rgba(69, 184, 69, .28);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: .4px;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}
.mj-goto:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #2E9A2E, 0 10px 22px rgba(69, 184, 69, .34);
}
.mj-goto:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #2E9A2E, 0 3px 8px rgba(69, 184, 69, .24);
}
.mj-goto-ico { font-size: 19px; line-height: 1; }
.mj-goto-txt { flex: 1; text-align: left; }
.mj-goto-arr {
  font-size: 20px;
  font-weight: 700;
  opacity: .85;
  transform: translateY(-1px);
}