/* 四层导航页（年级 / 科目 / 单元 / 关卡）的样式 */

.head {
  flex: 0 0 auto;
  padding: 12px 18px 4px;
}

.head h1 {
  margin: 2px 0 0;
  font-size: var(--fs-title);
}

.head p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

/* 面包屑：每一层都能点回去 */
.crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.crumb-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}

.crumb-link:active {
  opacity: 0.6;
}

.crumb-sep {
  color: var(--line);
}

.map {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 14px calc(24px + var(--safe-b));
}

/* 分组小标题。首页现在是「年级」+「唱一唱」两块，
   卡片长得一样，得有个标题告诉小朋友这两堆不是一回事。 */
.map-sec {
  margin: 20px 4px 8px;
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--ink-soft);
}

.map-sec:first-child {
  margin-top: 2px;
}

.lesson {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 84px;
  margin-bottom: 12px;
  padding: 12px 16px;
  border: 0;
  border-radius: var(--r-m);
  background: var(--card);
  box-shadow: var(--shadow);
  color: inherit;
  text-align: left;
  text-decoration: none;
  font: inherit;
}

.lesson .no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}

.lesson .body {
  flex: 1 1 auto;
  min-width: 0;
}

.lesson .name {
  font-size: 22px;
  font-weight: 700;
}

.lesson .sub {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: var(--fs-small);
}

.lesson .note {
  flex: 0 0 auto;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
}

.lesson:active {
  transform: translateY(2px);
}

.lesson.locked {
  opacity: 0.55;
  box-shadow: none;
  background: #fdf3e2;
}

.lesson.locked .no {
  background: var(--line);
  color: var(--ink-soft);
}

/* 进阶关：课本之外的挑战 */
.lesson.boss {
  background: linear-gradient(#fff, #fff6e6);
  box-shadow: 0 0 0 2px var(--accent), var(--shadow);
}

.lesson.boss .no {
  background: linear-gradient(#ffb04d, #ff7a2f);
  font-size: 26px;
}

/* 儿歌：不是关卡，没有星星。换个颜色，一眼能和闯关的卡片分开。 */
.lesson.song .no {
  background: linear-gradient(#7bd7f5, #41a4f5);
  font-size: 24px;
}

/* 最难的一关 */
.lesson.boss.hard {
  box-shadow: 0 0 0 2px #e5484d, var(--shadow);
}

.lesson.boss.hard .no {
  background: linear-gradient(#ff7a6b, #e5484d);
}