/* ========== 基础 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #f4f7fc;
  --ink: #33405e;
  --ink-soft: #6b7694;
  --line: #dde5f2;
  --card: #ffffff;
  --teal: #39b8a7;
  --coral: #f07862;
  --sky: #5aa7e8;
  --rose: #e5789a;
  --honey: #e8a93d;
  --radius: 8px;
  --shadow: 0 6px 24px rgba(70, 95, 150, .10);
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  overflow-x: hidden;
}

.hidden { display: none !important; }

.noscript-warning {
  position: relative;
  z-index: 1000;
  padding: 12px 16px;
  background: #fff4d6;
  color: #7a5512;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid #efd28a;
}

/* ========== 星空背景 ========== */
.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(1200px 600px at 85% -10%, #eaf3ff 0%, transparent 60%),
    radial-gradient(1000px 700px at -10% 30%, #eef9f5 0%, transparent 55%),
    radial-gradient(900px 600px at 50% 115%, #fdf2ec 0%, transparent 55%),
    var(--bg);
}

.stars { position: absolute; inset: 0; }
.stars::before, .stars::after {
  content: ""; position: absolute; inset: -50%;
  background-repeat: repeat;
}
.stars-a::before {
  background-image:
    radial-gradient(2px 2px at 40px 60px, rgba(90,167,232,.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 180px 140px, rgba(240,120,98,.45), transparent 60%),
    radial-gradient(2px 2px at 320px 40px, rgba(57,184,167,.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 460px 200px, rgba(51,64,94,.35), transparent 60%),
    radial-gradient(1.8px 1.8px at 600px 90px, rgba(232,169,61,.5), transparent 60%);
  background-size: 640px 260px;
  animation: twinkle 5s ease-in-out infinite alternate;
}
.stars-b::after {
  background-image:
    radial-gradient(1.5px 1.5px at 90px 90px, rgba(229,120,154,.45), transparent 60%),
    radial-gradient(2px 2px at 260px 30px, rgba(90,167,232,.4), transparent 60%),
    radial-gradient(1.4px 1.4px at 430px 160px, rgba(57,184,167,.4), transparent 60%),
    radial-gradient(1.8px 1.8px at 560px 60px, rgba(51,64,94,.3), transparent 60%);
  background-size: 700px 220px;
  animation: twinkle 7s ease-in-out infinite alternate-reverse;
}
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }

.nebula { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.nebula-1 { width: 420px; height: 420px; right: -120px; top: 8%; background: #d7e9fb; }
.nebula-2 { width: 380px; height: 380px; left: -140px; bottom: 6%; background: #d9f2ea; }

.comet {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px 2px rgba(255,255,255,.9);
  top: 18%; left: -5%;
  animation: comet 14s linear infinite;
}
.comet::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 120px; height: 2px; transform: translateY(-50%);
  background: linear-gradient(to left, rgba(120,170,230,.7), transparent);
}
@keyframes comet {
  0%   { transform: translate(0, 0); opacity: 0; }
  6%   { opacity: 1; }
  38%  { transform: translate(110vw, 34vh); opacity: 0; }
  100% { transform: translate(110vw, 34vh); opacity: 0; }
}

/* ========== 首页 ========== */
#homeView { max-width: 1080px; margin: 0 auto; padding: 48px 20px 40px; }

.hero { text-align: center; padding: 20px 0 8px; }
.hero-badge {
  display: inline-block; padding: 4px 16px; border-radius: 999px;
  background: linear-gradient(120deg, #e3f2fd, #e0f5ef);
  border: 1px solid var(--line);
  color: var(--sky); font-size: 14px; letter-spacing: 2px;
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(26px, 5vw, 42px); line-height: 1.35;
  background: linear-gradient(100deg, #3d5a80, #39b8a7 60%, #f07862);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 14px;
}
.hero-lead { font-size: 18px; font-weight: 600; color: var(--ink); }
.hero-desc {
  max-width: 640px; margin: 10px auto 0; color: var(--ink-soft); font-size: 15px;
}
.hero-desc strong { color: var(--coral); }

.section-title {
  text-align: center; font-size: clamp(20px, 3.4vw, 26px); margin-top: 52px;
}
.section-sub { text-align: center; color: var(--ink-soft); font-size: 14px; margin-top: 4px; }

/* 星球 */
.planet-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 26px;
}

.planet-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 24px 24px;
  text-align: center;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  overflow: hidden;
}
.planet-card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(70,95,150,.16); }
.planet-card:active { transform: translateY(-2px) scale(.99); }

.planet {
  width: 96px; height: 96px; margin: 0 auto 18px;
  border-radius: 50%;
  position: relative;
  animation: float 5.5s ease-in-out infinite;
  transition: transform .3s ease;
  box-shadow:
    inset -14px -16px 26px rgba(30, 45, 80, .38),
    inset 10px 12px 20px rgba(255, 255, 255, .30),
    0 12px 28px rgba(70, 95, 150, .25);
}
.planet-card:hover .planet { transform: scale(1.08) rotate(4deg); }
@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

.planet::before { /* 表面纹理层 */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
}
.planet::after { /* 高光 + 边缘光 */
  content: ""; position: absolute; left: 18%; top: 12%;
  width: 30%; height: 22%; border-radius: 50%;
  background: rgba(255,255,255,.6); filter: blur(4px);
  box-shadow: 52px 66px 30px -18px rgba(255,255,255,.18);
}

/* 词汇星：青绿色横条纹气态行星 */
.planet.p1 { background: radial-gradient(circle at 32% 30%, #7fe0d2, #39b8a7 62%, #257f73); }
.planet.p1::before {
  background:
    repeating-linear-gradient(168deg,
      rgba(255,255,255,.22) 0 6px, transparent 6px 15px,
      rgba(18,110,98,.30) 15px 20px, transparent 20px 30px);
  mask: radial-gradient(circle at 50% 50%, #000 68%, transparent 70%);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 68%, transparent 70%);
}

/* 阅读星：珊瑚红带斑块大陆 */
.planet.p2 { background: radial-gradient(circle at 32% 30%, #ffc0ae, #f07862 60%, #c14e3a); }
.planet.p2::before {
  background:
    radial-gradient(26px 15px at 68% 34%, rgba(214,74,52,.55), transparent 70%),
    radial-gradient(34px 19px at 30% 62%, rgba(214,74,52,.45), transparent 70%),
    radial-gradient(18px 12px at 58% 76%, rgba(255,215,195,.5), transparent 70%),
    radial-gradient(14px 9px at 78% 62%, rgba(255,215,195,.4), transparent 70%),
    repeating-linear-gradient(15deg, rgba(255,255,255,.10) 0 4px, transparent 4px 18px);
}

/* 启蒙星：天蓝冰纹 + 极地冰盖 */
.planet.p3 { background: radial-gradient(circle at 32% 30%, #b6dcf9, #5aa7e8 60%, #3777b4); }
.planet.p3::before {
  background:
    radial-gradient(40px 16px at 50% 6%, rgba(255,255,255,.75), transparent 72%),
    radial-gradient(46px 15px at 50% 97%, rgba(255,255,255,.55), transparent 72%),
    repeating-linear-gradient(178deg,
      rgba(255,255,255,.28) 0 3px, transparent 3px 13px,
      rgba(46,116,180,.25) 13px 16px, transparent 16px 26px);
}

/* AI星：玫瑰色旋涡云带 */
.planet.p4 { background: radial-gradient(circle at 32% 30%, #f8c2d6, #e5789a 58%, #b84d70); }
.planet.p4::before {
  background:
    repeating-conic-gradient(from 20deg at 62% 42%,
      rgba(255,255,255,.20) 0deg 14deg, transparent 14deg 34deg,
      rgba(178,62,104,.28) 34deg 46deg, transparent 46deg 70deg);
  mask: radial-gradient(circle at 62% 42%, #000 52%, transparent 74%);
  -webkit-mask: radial-gradient(circle at 62% 42%, #000 52%, transparent 74%);
}

/* 科学星：蜂蜜色陨坑地貌 */
.planet.p5 { background: radial-gradient(circle at 32% 30%, #f9d896, #e8a93d 60%, #b57c1d); }
.planet.p5::before {
  background:
    radial-gradient(13px 13px at 64% 30%, rgba(146,96,18,.5) 40%, rgba(255,235,190,.45) 48%, transparent 68%),
    radial-gradient(9px 9px at 34% 52%, rgba(146,96,18,.5) 40%, rgba(255,235,190,.4) 50%, transparent 68%),
    radial-gradient(16px 16px at 56% 72%, rgba(146,96,18,.45) 40%, rgba(255,235,190,.4) 50%, transparent 68%),
    radial-gradient(7px 7px at 80% 58%, rgba(146,96,18,.5) 42%, transparent 66%),
    radial-gradient(6px 6px at 22% 30%, rgba(146,96,18,.4) 42%, transparent 66%);
}

.planet .ring {
  position: absolute; left: 50%; top: 50%;
  width: 150%; height: 46%;
  border: 3px solid rgba(90,120,170,.28);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-16deg);
}

.planet-orbit-dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid rgba(90,120,170,.4);
  left: 50%; top: 50%;
  animation: orbit 6s linear infinite;
}
@keyframes orbit {
  from { transform: rotate(0deg) translateX(64px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(64px) rotate(-360deg); }
}

.planet-card h3 { font-size: 17px; margin-bottom: 8px; line-height: 1.5; }
.planet-card .planet-tag {
  display: inline-block; font-size: 12px; padding: 2px 12px; border-radius: 999px;
  margin-bottom: 10px; letter-spacing: 1px;
}
.tag1 { background: #e2f6f2; color: #2a9385; }
.tag2 { background: #fdeae5; color: #d15a45; }
.tag3 { background: #e6f1fc; color: #3f86c4; }
.tag4 { background: #fceaf1; color: #c75a7e; }
.tag5 { background: #fbf2df; color: #b07c1f; }
.planet-card p { font-size: 14px; color: var(--ink-soft); text-align: left; }

/* 活动约定 */
.rules { max-width: 820px; margin: 0 auto; }
.rule-list {
  margin-top: 24px; list-style: none;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 26px;
}
.rule-list li {
  padding: 14px 0 14px 30px; position: relative;
  font-size: 14.5px; color: var(--ink-soft);
  border-bottom: 1px dashed var(--line);
}
.rule-list li:last-child { border-bottom: none; }
.rule-list li::before {
  content: ""; position: absolute; left: 4px; top: 24px;
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--sky));
}

.site-footer {
  text-align: center; margin-top: 56px; padding: 18px 0 8px;
  color: #9aa6c0; font-size: 13px; letter-spacing: 1px;
}

/* ========== 闯关页 ========== */
#campView { max-width: 1180px; margin: 0 auto; padding: 26px 20px 40px; }

.camp-header {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 22px;
}
.btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f0f4fb; border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); font-size: 14px; padding: 8px 14px; cursor: pointer;
  transition: background .2s;
  font-family: inherit;
}
.btn-back:hover { background: #e4ecf8; }

.camp-title-wrap { flex: 1; min-width: 220px; }
.camp-title-wrap h1 { font-size: clamp(18px, 3vw, 23px); }
.camp-title-wrap p { font-size: 13px; color: var(--ink-soft); }

.camp-progress { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
.camp-progress strong { color: var(--teal); font-size: 18px; }

.quick-jump {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding: 12px 16px;
  background: rgba(255,255,255,.78); border: 1px solid var(--line); border-radius: 12px;
}
.quick-jump-label { color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
.quick-jump-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.quick-jump-buttons button {
  min-width: 70px; padding: 7px 11px; border: 1px solid #b9ded8; border-radius: 999px;
  background: #f3fbfa; color: #328f83; font: 600 13px/1 inherit; cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.quick-jump-buttons button:hover { background: #dcf4ef; box-shadow: 0 4px 10px rgba(57,184,167,.18); transform: translateY(-1px); }
.quick-jump-buttons button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

.path-scroll {
  margin-top: 26px;
  overflow-x: auto;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffffcc, #f7fafecc);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  scrollbar-width: thin;
  scrollbar-color: #b9c8de transparent;
}
.path-scroll::-webkit-scrollbar { height: 8px; }
.path-scroll::-webkit-scrollbar-thumb { background: #c3d0e4; border-radius: 4px; }

.path-canvas { position: relative; }
#pathSvg { position: absolute; inset: 0; pointer-events: none; }

.path-hint { text-align: center; color: #9aa6c0; font-size: 13px; margin-top: 14px; }

/* 关卡节点 */
.level-node {
  position: absolute; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%;
  border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; font-family: inherit;
  cursor: pointer; z-index: 2;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
}
.level-node:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }

.level-node.done {
  background: linear-gradient(135deg, #58c9b8, #39b8a7);
  color: #fff; box-shadow: 0 6px 16px rgba(57,184,167,.45);
}
.level-node.current {
  background: linear-gradient(135deg, #ffb199, #f07862);
  color: #fff; box-shadow: 0 6px 20px rgba(240,120,98,.55);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(240,120,98,.55), 0 0 0 0 rgba(240,120,98,.4); }
  50% { box-shadow: 0 6px 20px rgba(240,120,98,.55), 0 0 0 14px rgba(240,120,98,0); }
}
.level-node.locked {
  background: #e8edf5; color: #a9b4c9; cursor: not-allowed;
  box-shadow: 0 4px 10px rgba(90,110,150,.12);
}
.level-node:not(.locked):hover { transform: translate(-50%, -50%) scale(1.18) rotate(-6deg); }
.level-node .lock-ico { width: 20px; height: 20px; }

.node-label {
  position: absolute; transform: translateX(-50%);
  font-size: 12px; color: var(--ink-soft); white-space: nowrap;
  z-index: 2; letter-spacing: .5px;
}

/* 悬浮提示 */
.node-tip {
  position: absolute; transform: translate(-50%, -100%);
  background: #33405e; color: #fff;
  font-size: 12.5px; line-height: 1.55;
  padding: 8px 13px; border-radius: 6px;
  white-space: nowrap; z-index: 5; pointer-events: none;
  opacity: 0; transition: opacity .18s, translate .18s;
  translate: 0 6px;
}
.node-tip::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #33405e;
}
.node-tip.show { opacity: 1; translate: 0 0; }
.node-tip .tip-time { color: #ffd9a8; }
.node-tip .tip-lock { color: #b9c4d8; }

/* ========== 弹窗 ========== */
.modal-mask {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(51, 64, 94, .38);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(40,60,100,.25);
  position: relative;
  animation: popIn .28s cubic-bezier(.34,1.4,.64,1);
  max-height: 88vh; display: flex; flex-direction: column;
}
@keyframes popIn { from { transform: scale(.92) translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-close {
  position: absolute; right: 12px; top: 10px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: #f0f4fb; color: var(--ink-soft);
  font-size: 20px; cursor: pointer; line-height: 1;
  transition: background .2s, transform .2s;
}
.modal-close:hover { background: #e2eaf7; transform: rotate(90deg); }

/* 暗号弹窗 */
.modal-code { width: min(400px, 100%); padding: 34px 30px 28px; text-align: center; }
.modal-code-icon {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e3f2fd, #e0f5ef); color: var(--sky);
}
.modal-code h3 { font-size: 19px; margin-bottom: 6px; }
.modal-code-sub { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 18px; }
#codeInput {
  width: 100%; padding: 12px 14px; font-size: 15px;
  border: 1.6px solid var(--line); border-radius: 6px;
  outline: none; transition: border-color .2s; font-family: inherit;
  text-align: center; letter-spacing: 1px;
}
#codeInput:focus { border-color: var(--sky); }
.code-error { color: var(--coral); font-size: 13px; margin-top: 8px; }

.btn-primary {
  margin-top: 18px; width: 100%; padding: 12px;
  border: none; border-radius: 6px; cursor: pointer;
  background: linear-gradient(120deg, #4bb3a2, #39b8a7);
  color: #fff; font-size: 15.5px; font-weight: 600; font-family: inherit;
  letter-spacing: 2px;
  transition: filter .2s, transform .15s;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: scale(.98); }
.btn-primary.done-state { background: linear-gradient(120deg, #9fb2cc, #8ba0bd); cursor: default; }
.btn-primary:disabled,
.btn-primary.checklist-locked {
  background: #aebbd0; cursor: not-allowed; filter: none; opacity: .82;
}

/* 关卡内容弹窗 */
.modal-level { width: min(720px, 100%); }
.level-head {
  padding: 26px 30px 16px; border-bottom: 1px solid var(--line);
}
.level-chip {
  display: inline-block; font-size: 12px; padding: 3px 12px; border-radius: 999px;
  background: #e2f6f2; color: #2a9385; letter-spacing: 1px; margin-bottom: 10px;
}
.level-head h3 { font-size: 21px; line-height: 1.5; }
.level-time { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

.level-body {
  padding: 20px 30px; overflow-y: auto; font-size: 14.5px; color: #4a5570;
}
.level-body h4 {
  font-size: 15.5px; color: var(--ink); margin: 20px 0 8px;
  padding-left: 12px; border-left: 4px solid var(--teal); line-height: 1.4;
}
.level-body h4:first-child { margin-top: 0; }
.level-body p { margin-bottom: 10px; }
.level-body ol, .level-body ul { padding-left: 22px; margin-bottom: 10px; }
.level-body li { margin-bottom: 6px; }
.level-body .note { color: var(--ink-soft); font-size: 13.5px; }
.level-figure { margin: 14px 0; text-align: center; }
.level-figure img {
  max-width: 100%; max-height: 380px; border-radius: 6px;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  cursor: zoom-in;
  transition: transform .2s ease;
}
.level-figure img:hover { transform: scale(1.015); }
.level-figure figcaption { font-size: 12.5px; color: #9aa6c0; margin-top: 6px; }
.level-example { margin: 12px 0 18px; padding: 14px; border: 1px solid #e4eaf4; border-radius: 10px; background: #fbfdff; }
.level-example > p { margin-bottom: 8px; }
.level-example .level-figure { margin-bottom: 0; }
.level-figure.image-unavailable { padding: 18px; border: 1px dashed #c7d3e5; border-radius: 8px; background: #f7faff; }
.level-figure.image-unavailable img { display: none; }
.level-image-status { display: block; color: #7886a2; font-size: 13px; }
.level-figure video {
  max-width: 100%; border-radius: 6px;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  background: #1c263c;
}
.level-body a { color: var(--sky); word-break: break-all; }

/* 第18关：当天可执行的闭环卡 */
.level18-action-card {
  margin: 16px 0 22px; padding: 18px;
  border: 1px solid #cfe9e3; border-radius: 12px;
  background: linear-gradient(145deg, #f3fbf8 0%, #f6f9ff 100%);
  box-shadow: 0 8px 24px rgba(57, 184, 167, .09);
}
.level18-action-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  margin-bottom: 8px;
}
.level18-action-head div { display: flex; flex-direction: column; gap: 1px; }
.level18-action-head span {
  color: #238a7c; font-size: 12px; font-weight: 700; letter-spacing: 1px;
}
.level18-action-head strong { color: var(--ink); font-size: 17px; line-height: 1.45; }
.level18-action-head b {
  flex: 0 0 auto; padding: 4px 10px; border-radius: 999px;
  background: #fff; border: 1px solid #bfe2da; color: #238a7c; font-size: 13px;
}
.level18-action-lead { color: #526078; font-size: 13.5px; }
.level18-steps { display: grid; gap: 8px; margin-top: 13px; }
.level18-step {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; padding: 11px 12px;
  border: 1px solid #dce7ee; border-radius: 8px; background: rgba(255,255,255,.9);
  cursor: pointer; transition: border-color .18s, background .18s, transform .18s;
}
.level18-step:hover { border-color: #8ccfc3; transform: translateY(-1px); }
.level18-step input { position: absolute; opacity: 0; pointer-events: none; }
.level18-check {
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 2px solid #aab9c9; border-radius: 6px; background: #fff;
}
.level18-step input:focus-visible + .level18-check { outline: 3px solid rgba(90,167,232,.32); outline-offset: 2px; }
.level18-step input:checked + .level18-check { border-color: var(--teal); background: var(--teal); }
.level18-step input:checked + .level18-check::after {
  content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
.level18-step.is-checked { border-color: #bde2da; background: #f0faf7; }
.level18-step-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.level18-step-copy strong { color: #34425e; font-size: 14px; }
.level18-step-copy small { color: #6c7890; font-size: 12.5px; line-height: 1.55; }
.level18-step-time {
  padding: 3px 8px; border-radius: 999px; background: #edf3fa; color: #63738d;
  font-size: 11.5px; white-space: nowrap;
}
.level18-progress { display: flex; align-items: center; gap: 10px; margin: 13px 1px 0; }
.level18-progress > span { flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: #dfe9ee; }
.level18-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #55c1b2, #39b8a7); transition: width .25s ease; }
.level18-progress strong { min-width: 98px; color: #65728a; font-size: 12px; text-align: right; }
.level18-action-card.is-complete { border-color: #75c9ba; }
.level18-action-card.is-complete .level18-progress strong { color: #238a7c; }
.level18-result {
  margin-top: 13px; padding: 10px 12px; border-left: 4px solid var(--honey);
  border-radius: 0 7px 7px 0; background: #fff9ed;
}
.level18-result p { margin: 0; font-size: 13px; }
.level18-result p + p { margin-top: 3px; }
.level18-fallback { margin: 10px 0 0 !important; color: #68758c; font-size: 12.8px; }
.level18-save-note { margin: 6px 0 0 !important; color: #95a0b2; font-size: 11.5px; }
.level18-prompt { margin: 12px 0; padding: 11px 12px; border: 1px dashed #9bcac1; border-radius: 8px; background: #fff; }
.level18-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.level18-prompt-head strong { color: #3f4c66; font-size: 13px; }
.level18-prompt p { margin: 0; color: #56647b; font-size: 12.5px; line-height: 1.65; }
.level18-copy {
  flex: 0 0 auto; padding: 5px 9px; border: 1px solid #83c9bd; border-radius: 6px;
  background: #f0faf7; color: #238a7c; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.level18-copy:hover, .level18-copy.copied { background: #dff4ef; }

/* 第19关：把标准流程校准成家庭版本 */
.level19-plan {
  margin: 16px 0 22px; padding: 18px;
  border: 1px solid #cfdcf4; border-radius: 12px;
  background: linear-gradient(145deg, #f5f8ff 0%, #fbf7ff 100%);
  box-shadow: 0 8px 24px rgba(90, 120, 180, .10);
}
.level19-plan-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 8px;
}
.level19-plan-head div { display: flex; flex-direction: column; gap: 1px; }
.level19-plan-head span { color: #5977b7; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.level19-plan-head strong { color: var(--ink); font-size: 17px; line-height: 1.45; }
.level19-plan-head > b {
  flex: 0 0 auto; padding: 4px 10px; border: 1px solid #c6d5f1; border-radius: 999px;
  background: #fff; color: #5977b7; font-size: 12px;
}
.level19-plan-lead { color: #53617b; font-size: 13.5px; }
.level19-steps { display: grid; gap: 8px; margin-top: 13px; }
.level19-step {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: 10px; padding: 11px 12px;
  border: 1px solid #dbe3f1; border-radius: 8px; background: rgba(255,255,255,.92);
  cursor: pointer; transition: border-color .18s, background .18s, transform .18s;
}
.level19-step:hover { border-color: #9cb2dc; transform: translateY(-1px); }
.level19-step input {
  position: static; z-index: 1; grid-column: 1; grid-row: 1;
  width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer;
}
.level19-check {
  grid-column: 1; grid-row: 1;
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 2px solid #aab7cf; border-radius: 6px; background: #fff;
}
.level19-step input:focus-visible + .level19-check { outline: 3px solid rgba(90,167,232,.32); outline-offset: 2px; }
.level19-step input:checked + .level19-check { border-color: #6f8dcc; background: #6f8dcc; }
.level19-step input:checked + .level19-check::after {
  content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
.level19-step.is-checked { border-color: #bdccec; background: #f2f5fd; }
.level19-step > span:not(.level19-check) { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.level19-step > span strong { color: #34425e; font-size: 14px; }
.level19-step > span small { color: #6c7890; font-size: 12.5px; line-height: 1.55; }
.level19-step > b {
  padding: 3px 8px; border-radius: 999px; background: #edf2fb; color: #667da9;
  font-size: 11.5px; white-space: nowrap;
}
.level19-fields {
  margin-top: 14px; padding: 13px; border: 1px solid #d8e1f2; border-radius: 9px; background: rgba(255,255,255,.78);
}
.level19-fields h5 { margin-bottom: 9px; color: #44526d; font-size: 13.5px; }
.level19-field { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 10px; }
.level19-field + .level19-field { margin-top: 8px; }
.level19-field span { color: #68758d; font-size: 12.5px; }
.level19-field input {
  width: 100%; padding: 8px 10px; border: 1px solid #d4deee; border-radius: 6px;
  outline: none; background: #fff; color: #3d4a63; font-family: inherit; font-size: 13px;
  transition: border-color .18s, box-shadow .18s;
}
.level19-field input:focus { border-color: #7f9bd3; box-shadow: 0 0 0 3px rgba(111,141,204,.12); }
.level19-field.is-filled input { border-color: #99b2df; background: #f7f9ff; }
.level19-progress { display: flex; align-items: center; gap: 10px; margin: 13px 1px 0; }
.level19-progress > span { flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: #dfe6f2; }
.level19-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7e9bd5, #6f8dcc); transition: width .25s ease; }
.level19-progress strong { min-width: 90px; color: #66748d; font-size: 12px; text-align: right; }
.level19-plan.is-complete { border-color: #7f9bd3; }
.level19-plan.is-complete .level19-progress strong { color: #4f6aa6; }
.level19-pass {
  margin: 12px 0 0 !important; padding: 9px 11px; border-left: 4px solid #7f9bd3;
  border-radius: 0 7px 7px 0; background: #f2f5fd; color: #53617a; font-size: 13px;
}
.level19-save-note { margin: 6px 0 0 !important; color: #96a0b3; font-size: 11.5px; }

/* 第20关：三次证据后再做家庭决策 */
.level20-board {
  margin: 16px 0 22px; padding: 18px;
  border: 1px solid #e3d5bb; border-radius: 12px;
  background: linear-gradient(145deg, #fffaf1 0%, #f7fbf7 100%);
  box-shadow: 0 8px 24px rgba(145, 111, 62, .10);
}
.level20-board-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 8px;
}
.level20-board-head div { display: flex; flex-direction: column; gap: 1px; }
.level20-board-head span { color: #a86f25; font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.level20-board-head strong { color: var(--ink); font-size: 17px; line-height: 1.45; }
.level20-board-head > b {
  flex: 0 0 auto; padding: 4px 10px; border: 1px solid #e3c990; border-radius: 999px;
  background: #fff; color: #93601f; font-size: 12px;
}
.level20-board-lead { color: #59647a; font-size: 13.5px; }
.level20-trials { display: grid; gap: 8px; margin-top: 13px; }
.level20-trial {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px; align-items: center; gap: 12px;
  padding: 11px 12px; border: 1px solid #e6dfd1; border-radius: 8px; background: rgba(255,255,255,.92);
  transition: border-color .18s, background .18s;
}
.level20-trial > span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.level20-trial strong { color: #3f4c63; font-size: 14px; }
.level20-trial small { color: #748096; font-size: 12.2px; line-height: 1.5; }
.level20-trial select {
  width: 100%; min-height: 38px; padding: 8px 30px 8px 10px;
  border: 1px solid #d8d4c9; border-radius: 7px; outline: none;
  background: #fff; color: #4f5c72; font-family: inherit; font-size: 12.5px;
}
.level20-trial select:focus { border-color: #c4934e; box-shadow: 0 0 0 3px rgba(196,147,78,.13); }
.level20-trial[data-result="green"] { border-color: #add9c8; background: #f2fbf7; }
.level20-trial[data-result="yellow"] { border-color: #e6ca86; background: #fffaf0; }
.level20-trial[data-result="red"] { border-color: #e1afa8; background: #fff5f3; }
.level20-decisions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  min-width: 0; margin: 14px 0 0; padding: 13px; border: 1px solid #e2ddcf; border-radius: 9px;
  background: rgba(255,255,255,.72);
}
.level20-decisions legend { padding: 0 5px; color: #59657b; font-size: 13px; font-weight: 700; }
.level20-decision {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto;
  align-items: center; column-gap: 8px; row-gap: 1px; padding: 9px;
  border: 1px solid #e1ddd3; border-radius: 8px; background: #fff; cursor: pointer;
}
.level20-decision input {
  z-index: 1; grid-column: 1; grid-row: 1 / span 2; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer;
}
.level20-decision > span {
  grid-column: 1; grid-row: 1 / span 2; width: 20px; height: 20px;
  border: 2px solid #b9b2a4; border-radius: 50%; background: #fff;
}
.level20-decision input:focus-visible + span { outline: 3px solid rgba(196,147,78,.22); outline-offset: 2px; }
.level20-decision input:checked + span { border: 6px solid #c4934e; }
.level20-decision strong { grid-column: 2; color: #455168; font-size: 13px; }
.level20-decision small { grid-column: 2; color: #7a8497; font-size: 11.5px; line-height: 1.45; }
.level20-decision.is-selected { border-color: #d9b36e; background: #fff9ed; }
.level20-fields {
  display: grid; gap: 8px; margin-top: 12px; padding: 13px;
  border: 1px solid #e2ddcf; border-radius: 9px; background: rgba(255,255,255,.72);
}
.level20-fields label { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 10px; }
.level20-fields label > span { color: #69758a; font-size: 12.5px; }
.level20-fields input {
  width: 100%; padding: 8px 10px; border: 1px solid #ddd8cd; border-radius: 6px;
  outline: none; background: #fff; color: #3f4b60; font-family: inherit; font-size: 13px;
}
.level20-fields input:focus { border-color: #c4934e; box-shadow: 0 0 0 3px rgba(196,147,78,.12); }
.level20-fields label.is-filled input { border-color: #d5ad64; background: #fffaf1; }
.level20-progress { display: flex; align-items: center; gap: 10px; margin: 13px 1px 0; }
.level20-progress > span { flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: #e8e1d4; }
.level20-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d2a456, #67b89b); transition: width .25s ease; }
.level20-progress strong { min-width: 104px; color: #737b8a; font-size: 12px; text-align: right; }
.level20-board.is-complete { border-color: #b3ccb9; }
.level20-board.is-complete .level20-progress strong { color: #3d8b70; }
.level20-rule, .level20-pass {
  margin: 10px 0 0 !important; padding: 9px 11px; border-radius: 0 7px 7px 0;
  color: #59647a; font-size: 13px;
}
.level20-rule { border-left: 4px solid #d5a451; background: #fff8e9; }
.level20-pass { border-left: 4px solid #63b092; background: #eef9f4; }
.level20-save-note { margin: 6px 0 0 !important; color: #989fAA; font-size: 11.5px; }

/* 第19关合并：家庭校准 + 三次验证 */
.level19-merge-intro, .level20-overview {
  margin: 2px 0 18px; padding: 17px 18px; border: 1px solid #cbd9f1; border-radius: 12px;
  background: linear-gradient(135deg, #eef4ff, #f7f4ff); box-shadow: 0 8px 22px rgba(72, 102, 163, .08);
}
.level19-merge-intro > span, .level20-overview > span {
  display: inline-block; margin-bottom: 5px; color: #5f78af; font-size: 12px; font-weight: 800; letter-spacing: 1px;
}
.level19-merge-intro h4, .level20-overview h4 { margin: 0 0 6px; color: var(--ink); font-size: 19px; }
.level19-merge-intro p, .level20-overview p { margin: 0; color: #596781; font-size: 13.5px; line-height: 1.7; }
.level19-phase {
  display: flex; align-items: center; gap: 9px; margin: 24px 0 10px; padding: 10px 12px;
  border-radius: 9px; background: #edf3ff; color: #465a86;
}
.level19-phase b { padding: 3px 8px; border-radius: 999px; background: #6f8dcc; color: #fff; font-size: 11.5px; }
.level19-phase strong { font-size: 14px; }
.level19-phase-verify { background: #fff6e7; color: #7d5b27; }
.level19-phase-verify b { background: #c4934e; }

/* 第20关：结营总复盘 */
.level20-overview { border-color: #b8ded4; background: linear-gradient(135deg, #edf9f5, #f3f7ff); }
.level20-overview > span { color: #268979; }
.level20-summary-checklist {
  margin: 16px 0 22px; padding: 18px; border: 1px solid #badfd4; border-radius: 12px;
  background: linear-gradient(145deg, #effaf6, #f7f9ff); box-shadow: 0 8px 24px rgba(48, 132, 114, .09);
}
.level20-summary-checklist-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 11px; }
.level20-summary-checklist-head span { color: #268979; font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.level20-summary-checklist-head strong { color: var(--ink); font-size: 17px; }
.level20-summary-steps { display: grid; gap: 8px; }
.level20-summary-step {
  position: relative; display: grid; grid-template-columns: 24px 130px minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 11px 12px; border: 1px solid #d3e7e2; border-radius: 8px; background: rgba(255,255,255,.92); cursor: pointer;
}
.level20-summary-step input { grid-column: 1; grid-row: 1; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.level20-summary-step > span {
  grid-column: 1; grid-row: 1; width: 22px; height: 22px; border: 2px solid #94bdb3; border-radius: 6px; background: #fff;
}
.level20-summary-step input:focus-visible + span { outline: 3px solid rgba(38,137,121,.2); outline-offset: 2px; }
.level20-summary-step input:checked + span { border-color: #319b88; background: #319b88; }
.level20-summary-step input:checked + span::after {
  content: ""; display: block; width: 9px; height: 5px; margin: 5px 0 0 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.level20-summary-step strong { color: #3b4c62; font-size: 13.5px; }
.level20-summary-step small { color: #6f7c91; font-size: 12.2px; line-height: 1.5; }
.level20-summary-step.is-checked { border-color: #99cbbc; background: #f1faf7; }
.level20-summary-action {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 10px;
  margin-top: 12px; padding: 12px; border: 1px solid #d3e7e2; border-radius: 8px; background: rgba(255,255,255,.86);
}
.level20-summary-action span { color: #596a7e; font-size: 13px; font-weight: 700; }
.level20-summary-action input {
  width: 100%; padding: 8px 10px; border: 1px solid #cbded9; border-radius: 6px; outline: none;
  background: #fff; color: #3f4d60; font-family: inherit; font-size: 13px;
}
.level20-summary-action input:focus { border-color: #4aa792; box-shadow: 0 0 0 3px rgba(49,155,136,.12); }
.level20-summary-action.is-filled input { border-color: #72b7a7; background: #f4fbf9; }
.level20-summary-progress { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.level20-summary-progress > span { flex: 1; height: 8px; overflow: hidden; border-radius: 999px; background: #d8e8e4; }
.level20-summary-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #56ad9a, #7598d4); transition: width .25s ease; }
.level20-summary-progress strong { min-width: 92px; color: #64758a; font-size: 12px; text-align: right; }
.level20-summary-checklist > p { margin: 7px 0 0; color: #929daa; font-size: 11.5px; }
.level20-summary-checklist.is-complete { border-color: #6bb3a3; }
.level20-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 12px 0 20px; }
.level20-principles p {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 9px; margin: 0; padding: 11px 12px;
  border: 1px solid #dce5f0; border-radius: 9px; background: #f8faff;
}
.level20-principles b { grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #6f8dcc; color: #fff; font-size: 12px; }
.level20-principles strong { color: #3e4c65; font-size: 13.5px; }
.level20-principles span { color: #748096; font-size: 12px; line-height: 1.45; }
.level20-journey { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 22px; padding: 0; list-style: none; }
.level20-journey li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; padding: 10px; border: 1px solid #dce4ef; border-radius: 8px; background: #fff; }
.level20-journey li > b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #eef3fc; color: #5e78ad; font-size: 13px; }
.level20-journey li > span { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.level20-journey strong { color: #415069; font-size: 13px; }
.level20-journey small { color: #7a8598; font-size: 11.5px; line-height: 1.45; }
.camp-final-summary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 24px; padding: 0; list-style: none; }
.camp-final-summary-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid #dce4ef; border-radius: 8px; background: #fff; color: #415069; font-size: 13px; line-height: 1.45; }
.camp-final-summary-list li > b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #eef3fc; color: #5e78ad; font-size: 12px; }
.graduation-banner { margin: 0 0 18px; padding: 14px 16px; border: 1px solid #b9e3d8; border-radius: 10px; background: linear-gradient(135deg, #eefbf7, #f7fbff); color: #39766c; }
.level20-resource-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 12px 0 22px !important; padding: 0 !important; list-style: none !important; }
.level20-resource-list li { margin: 0 !important; padding: 12px !important; border: 1px solid #d8e6e1; border-radius: 9px; background: #f8fcfa; }
.level20-resource-list li::before { display: none !important; }
.level20-resource-list div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.level20-resource-list strong { color: #375368; font-size: 14px; }
.level20-resource-list div span { padding: 2px 7px; border-radius: 999px; background: #dff3ed; color: #2d846f; font-size: 10.5px; font-weight: 700; }
.level20-resource-list p { margin: 7px 0 5px; color: #617084; font-size: 12.2px; line-height: 1.5; }
.level20-resource-list small { color: #8a96a6; font-size: 11px; }

/* 班级码 */
.class-code-box {
  margin: 14px 0; padding: 18px 16px; text-align: center;
  background: linear-gradient(120deg, #e9f7f3, #e8f1fd);
  border: 1.6px dashed #7fc8bb; border-radius: var(--radius);
}
.class-code-label { display: block; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 6px; }
.class-code {
  display: inline-block; font-size: 30px; font-weight: 800; letter-spacing: 6px;
  color: #2a9385; font-family: "Consolas", "Courier New", monospace;
  padding: 2px 10px;
}

/* 图片全屏放大 */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(28, 38, 60, .88);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out;
  animation: fadeIn .2s ease;
}
.lightbox img {
  max-width: 96vw; max-height: 92vh;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  animation: popIn .25s cubic-bezier(.34,1.3,.64,1);
}
.lightbox-hint {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.75); font-size: 13px; letter-spacing: 1px;
  pointer-events: none;
}
.level-placeholder {
  text-align: center; padding: 40px 10px; color: var(--ink-soft);
}
.level-placeholder .ph-icon {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%;
  background: #eef3fb; display: flex; align-items: center; justify-content: center;
  color: #9fb2cc;
}

.level-foot { padding: 14px 30px 22px; border-top: 1px solid var(--line); }

/* ========== 响应式 ========== */
@media (max-width: 640px) {
  #homeView { padding: 34px 14px 30px; }
  .planet-grid { grid-template-columns: 1fr; gap: 18px; }
  .planet { width: 84px; height: 84px; }
  .camp-header { padding: 14px 16px; gap: 12px; }
  .camp-progress { width: 100%; }
  .quick-jump { padding: 12px; }
  .level-head, .level-body, .level-foot { padding-left: 20px; padding-right: 20px; }
  .level-node { width: 54px; height: 54px; font-size: 16px; }
  .level18-action-card { margin-left: -6px; margin-right: -6px; padding: 14px; }
  .level18-action-head { align-items: center; }
  .level18-step { grid-template-columns: 24px minmax(0, 1fr); }
  .level18-step-time { grid-column: 2; justify-self: start; }
  .level19-plan { margin-left: -6px; margin-right: -6px; padding: 14px; }
  .level19-step { grid-template-columns: 24px minmax(0, 1fr); }
  .level19-step > b { grid-column: 2; justify-self: start; }
  .level19-field { grid-template-columns: 1fr; gap: 4px; }
  .level20-board { margin-left: -6px; margin-right: -6px; padding: 14px; }
  .level20-board-head { align-items: center; }
  .level20-trial { grid-template-columns: 1fr; gap: 7px; }
  .level20-decisions { grid-template-columns: 1fr; }
  .level20-fields label { grid-template-columns: 1fr; gap: 4px; }
  .level19-phase { align-items: flex-start; }
  .level20-summary-checklist { margin-left: -6px; margin-right: -6px; padding: 14px; }
  .level20-summary-step { grid-template-columns: 24px minmax(0, 1fr); }
  .level20-summary-step small { grid-column: 2; }
  .level20-summary-action { grid-template-columns: 1fr; gap: 5px; }
  .level20-principles, .level20-journey, .level20-resource-list, .camp-final-summary-list { grid-template-columns: 1fr; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .planet-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .planet, .planet-orbit-dot, .comet, .level-node.current,
  .stars-a::before, .stars-b::after { animation: none; }
}