/* Completion is a calm achievement badge; the current lesson remains a separate state. */
.course-lesson.completed {
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 12%,var(--white)),color-mix(in srgb,var(--sage) 56%,var(--white)) 65%);
  border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 13%,transparent),0 2px 0 color-mix(in srgb,var(--gold) 12%,transparent);
}
.course-lesson.completed:not(.current)::before {
  content:"";
  position:absolute;
  left:-1px;
  top:-1px;
  bottom:-1px;
  width:5px;
  border-radius:17px 0 0 17px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 75%,#fff),var(--gold));
  pointer-events:none;
}
.course-lesson.completed:hover { border-color:color-mix(in srgb,var(--gold) 68%,var(--green)); }
.course-lesson.completed .lesson-symbol { color:var(--green); }
.course-lesson.completed .lesson-top { color:var(--muted); }
.course-lesson.completed .lesson-stars {
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:3px 7px;
  border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--white) 84%,var(--gold));
  font-size:16px;
  line-height:1;
}
.lesson-star { color:color-mix(in srgb, var(--muted) 48%, var(--line)); }
.lesson-star.is-filled { color:var(--gold); }
/* The result dialog wraps the same three-star rating in its larger reward row. */
.result-stars .lesson-stars {
  position:static;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:32px;
  vertical-align:middle;
}
.result-stars .lesson-star { font-size:1em; line-height:1; }
/* Optional compact seal for cards where a checkmark alone is easy to miss. */
.lesson-complete-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 7px;
  border:1px solid color-mix(in srgb,var(--green) 30%,var(--line));
  border-radius:999px;
  background:color-mix(in srgb,var(--sage) 65%,var(--white));
  color:var(--green);
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
}
.course-lesson.current:not(.completed) { box-shadow:0 3px 0 color-mix(in srgb,var(--green) 12%,transparent); }
.course-lesson.completed.current { border-width:2px; border-color:var(--green); }
.course-lesson.completion-celebration { animation:lesson-complete-pop .65s cubic-bezier(.2,.8,.25,1); }
.course-lesson.completion-celebration::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(110deg,transparent 35%,color-mix(in srgb,#fff 72%,var(--gold)) 50%,transparent 65%);
  transform:translateX(-120%);
  pointer-events:none;
  animation:lesson-complete-sheen .75s ease-out 1;
}
@keyframes lesson-complete-pop {
  0% { transform:scale(.975); filter:saturate(.85); box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 42%,transparent); }
  28% { transform:scale(1.025); filter:saturate(1.12); box-shadow:0 0 0 7px color-mix(in srgb,var(--gold) 18%,transparent); }
  100% { transform:scale(1); filter:saturate(1); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 13%,transparent),0 2px 0 color-mix(in srgb,var(--gold) 12%,transparent); }
}
@keyframes lesson-complete-sheen {
  to { transform:translateX(120%); }
}
@media (max-width:600px) {
  .course-lesson.completed .lesson-stars { gap:2px; padding:2px 5px; font-size:13px; }
  .lesson-complete-badge { font-size:9px; padding:2px 6px; }
}
@media (prefers-reduced-motion:reduce) {
  .course-lesson.completion-celebration,.course-lesson.completion-celebration::after { animation:none; }
}

/* A quieter, more editorial course map: each level card has only its number,
   title and fixed three-star rating. The status stays in its accessible name. */
.learn-map { position:relative;isolation:isolate; }
.map-hero {
  position:relative;isolation:isolate;overflow:hidden;padding:0 22px 0 24px;
  border:1px solid color-mix(in srgb,var(--theme-accent) 28%,var(--line));
  border-radius:24px;
  background:linear-gradient(115deg,color-mix(in srgb,var(--theme-soft) 76%,var(--white)),color-mix(in srgb,var(--theme-canvas) 66%,var(--white)) 58%,color-mix(in srgb,var(--theme-card) 84%,var(--white)));
  box-shadow:0 10px 28px color-mix(in srgb,var(--ink) 6%,transparent),inset 0 1px 0 #ffffffb0;
}
.map-hero::before {
  content:"";position:absolute;z-index:-1;right:20%;top:-90%;width:360px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--gold) 20%,transparent),transparent 67%);
  animation:hero-light-drift 12s ease-in-out infinite alternate;pointer-events:none;
}
.map-hero::after { content:"✧";position:absolute;right:44%;top:17px;color:var(--gold);font-size:17px;opacity:.7;animation:soft-twinkle 3.4s ease-in-out infinite;pointer-events:none; }
.map-hero canvas {
  position:relative;z-index:0;border:1px solid color-mix(in srgb,var(--white) 75%,var(--theme-accent));
  box-shadow:0 8px 20px color-mix(in srgb,var(--green) 12%,transparent),inset 0 1px 0 #ffffffa0;
  animation:hero-cat-float 5.5s ease-in-out infinite;
}
.map-summary {
  border:1px solid color-mix(in srgb,var(--line) 82%,var(--white));border-radius:13px;
  padding:4px 17px;background:color-mix(in srgb,var(--white) 66%,transparent);
  box-shadow:0 4px 12px color-mix(in srgb,var(--ink) 3%,transparent),inset 0 1px 0 #ffffffa6;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.map-progress { overflow:hidden;background:color-mix(in srgb,var(--theme-accent) 16%,var(--white));box-shadow:inset 0 1px 2px color-mix(in srgb,var(--ink) 7%,transparent); }
.map-progress i { position:relative;background:linear-gradient(90deg,var(--theme-accent),var(--gold));transition:width .65s cubic-bezier(.2,.8,.2,1); }
.map-progress i::after { content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#ffffff9c 48%,transparent 70%);transform:translateX(-100%);animation:progress-glint 3.2s ease-in-out infinite; }
.chapter-button {
  position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--line) 82%,var(--white));
  background:linear-gradient(140deg,color-mix(in srgb,var(--white) 78%,transparent),color-mix(in srgb,var(--theme-soft) 30%,var(--white)));
  box-shadow:0 2px 7px color-mix(in srgb,var(--ink) 4%,transparent),inset 0 1px 0 #ffffffa3;
}
.chapter-button:hover { transform:translateY(-2px);border-color:color-mix(in srgb,var(--theme-accent) 62%,var(--line));box-shadow:0 7px 16px color-mix(in srgb,var(--theme-accent) 14%,transparent); }
.chapter-button[aria-pressed="true"] {
  background:linear-gradient(130deg,var(--green),color-mix(in srgb,var(--green) 70%,var(--theme-focus)))!important;
  border-color:transparent;box-shadow:0 6px 15px color-mix(in srgb,var(--green) 22%,transparent),inset 0 1px 0 #ffffff35;
}
.chapter-heading { position:relative;border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent);padding:0 2px 7px; }
.chapter-heading h2 { letter-spacing:-.035em; }
.chapter-heading .eyebrow { letter-spacing:.23em;color:var(--gold); }
.course-lessons { perspective:1000px; }
.course-lesson,.course-lesson.current {
  display:grid;grid-template-rows:auto minmax(0,1fr);align-content:stretch;gap:5px;
  position:relative;isolation:isolate;overflow:hidden;text-align:left;
  background:linear-gradient(145deg,color-mix(in srgb,var(--theme-card) 95%,var(--white)),color-mix(in srgb,var(--theme-soft) 23%,var(--theme-card)));
  border:1px solid color-mix(in srgb,var(--line) 90%,var(--white));
  box-shadow:0 3px 9px color-mix(in srgb,var(--ink) 5%,transparent),inset 0 1px 0 #ffffffd4;
  animation:lesson-card-arrive .42s cubic-bezier(.2,.75,.25,1) both;
  animation-delay:calc(var(--lesson-order,0) * 34ms);
  transition:transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s,border-color .24s,background .24s;
}
.course-lesson::before {
  content:"";position:absolute;z-index:-1;top:-39px;right:-33px;width:115px;height:115px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--theme-accent) 14%,transparent),transparent 72%);pointer-events:none;
}
.course-lesson:not(.completion-celebration)::after {
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;
  background:linear-gradient(112deg,transparent 31%,color-mix(in srgb,var(--white) 55%,transparent) 48%,transparent 64%);
}
.course-lesson:not(.completion-celebration):hover::after { animation:card-sheen .72s ease-out 1; }
.course-lesson:hover,.course-lesson.current:hover {
  transform:translateY(-3px) scale(1.012);z-index:2;
  border-color:color-mix(in srgb,var(--theme-accent) 66%,var(--line));
  box-shadow:0 12px 24px color-mix(in srgb,var(--theme-accent) 16%,transparent),0 3px 8px color-mix(in srgb,var(--ink) 7%,transparent),inset 0 1px 0 #ffffffef;
}
.course-lesson:active { transform:translateY(0) scale(.99); }
.course-lesson:focus-visible { z-index:3;outline:2px solid var(--theme-focus)!important;outline-offset:2px; }
.course-lesson .lesson-number {
  align-self:start;justify-self:start;display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:18px;padding:0 7px;border:1px solid color-mix(in srgb,var(--theme-accent) 28%,var(--line));
  border-radius:999px;background:color-mix(in srgb,var(--theme-soft) 74%,var(--white));
  color:var(--muted);font:700 9px/1 "Segoe UI","Microsoft YaHei",sans-serif;letter-spacing:.15em;
}
.course-lesson h3 {
  align-self:center;max-width:100%;margin:0;padding:0 1px 7px 0;
  color:var(--ink);font-family:"Segoe UI","Microsoft YaHei",sans-serif;
  font-size:clamp(15px,1.05vw,19px);font-weight:720;letter-spacing:-.035em;line-height:1.28;
  text-wrap:balance;overflow-wrap:anywhere;
}
.lesson-stars {
  position:absolute;right:11px;bottom:8px;display:inline-flex;align-items:center;gap:2px;
  padding:2px 6px;border:1px solid color-mix(in srgb,var(--line) 78%,var(--white));
  border-radius:999px;background:color-mix(in srgb,var(--white) 82%,transparent);
  color:color-mix(in srgb,var(--muted) 65%,var(--line));font-size:13px;line-height:1;
  box-shadow:0 2px 5px color-mix(in srgb,var(--ink) 4%,transparent);
}
.lesson-star { transition:transform .22s,color .22s,filter .22s; }
.lesson-star.is-filled { color:var(--gold);filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--gold) 25%,transparent)); }
.course-lesson:hover .lesson-star { transform:translateY(-1px); }
.course-lesson.completed { border-color:color-mix(in srgb,var(--gold) 44%,var(--line)); }
.course-lesson.completed .lesson-stars { font-size:15px;padding:3px 7px;background:color-mix(in srgb,var(--white) 88%,var(--gold)); }
.course-lesson.current:not(.completed) {
  border:1.5px solid color-mix(in srgb,var(--theme-focus) 78%,var(--line));
  background:linear-gradient(140deg,color-mix(in srgb,var(--theme-soft) 84%,var(--white)),color-mix(in srgb,var(--theme-card) 90%,var(--theme-accent)));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent) 14%,transparent),0 7px 16px color-mix(in srgb,var(--theme-accent) 12%,transparent),inset 0 1px 0 #ffffffd9;
}
.course-lesson.current:not(.completed) .lesson-number { color:var(--green);border-color:color-mix(in srgb,var(--theme-accent) 46%,var(--line)); }
.course-lesson.ahead { background:linear-gradient(145deg,color-mix(in srgb,var(--theme-card) 73%,var(--paper)),color-mix(in srgb,var(--paper) 82%,var(--theme-soft))); }
.course-lesson.game-card { background:linear-gradient(145deg,color-mix(in srgb,var(--theme-soft) 65%,var(--theme-card)),color-mix(in srgb,var(--theme-card) 94%,var(--theme-canvas))); }
.course-lesson.game-card.ahead { background:linear-gradient(145deg,color-mix(in srgb,var(--theme-soft) 44%,var(--theme-card)),color-mix(in srgb,var(--theme-card) 82%,var(--paper))); }
.course-lesson.completed:not(.current)::before { width:115px;height:115px;left:auto;right:-33px;top:-39px;bottom:auto;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gold) 17%,transparent),transparent 72%); }
.course-lesson.completed .lesson-number { border-color:color-mix(in srgb,var(--gold) 37%,var(--line));background:color-mix(in srgb,var(--gold) 12%,var(--white)); }
.map-pagination button { background:color-mix(in srgb,var(--white) 80%,transparent); }
@keyframes lesson-card-arrive { from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes card-sheen { 0%{opacity:0;transform:translateX(-110%)}18%{opacity:1}100%{opacity:0;transform:translateX(110%)} }
@keyframes hero-light-drift { from{transform:translate(-15px,8px) scale(.92)}to{transform:translate(18px,-6px) scale(1.06)} }
@keyframes hero-cat-float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)} }
@keyframes soft-twinkle { 0%,100%{opacity:.36;transform:scale(.84) rotate(-8deg)}50%{opacity:.94;transform:scale(1.08) rotate(8deg)} }
@keyframes progress-glint { 0%,60%{transform:translateX(-100%)}90%,100%{transform:translateX(115%)} }
@media(max-width:600px) {
  .map-hero { border-radius:18px;padding:8px 12px 8px 14px; }
  .map-hero::before { right:8%; }
  .map-hero::after { right:37%;top:9px;font-size:12px; }
  .map-summary { padding:3px 9px; }
  .course-lesson,.course-lesson.current { gap:3px;padding:7px 8px;border-radius:13px; }
  .course-lesson h3 { font-size:clamp(13px,3.8vw,16px);line-height:1.25;padding-bottom:8px; }
  .course-lesson .lesson-number { min-width:31px;height:16px;font-size:8px; }
  .lesson-stars,.course-lesson.completed .lesson-stars { right:7px;bottom:6px;gap:1px;padding:2px 5px;font-size:12px; }
}
@media(max-height:700px) and (min-width:700px) {
  .course-lesson h3 { font-size:15px; }
  .course-lesson .lesson-number { height:15px;font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .map-hero::before,.map-hero::after,.map-hero canvas,.map-progress i::after,.course-lesson { animation:none!important; }
  .course-lesson,.lesson-star { transition:none; }
}