/* ============================================================
   编程星球 · 设计系统
   暖白纸感底 + 墨蓝主色 + 琥珀点缀 · 克制而精致的教育品牌感
   间距 8px 刻度 · 圆角 14-18px · 1px 细边框 + 悬浮轻抬升
   一屏布局：无页面级滚动 · 无折叠 · 点击最少
   ============================================================ */

/* ---------- 设计变量 ---------- */
:root {
  --bg: #F7F4EF;
  --card: #FFFFFF;
  --ink: #24304A;
  /* P3-5 对比度达 WCAG AA：--ink-soft 原 #6B7688 在 --bg 上只有 4.19（需 4.5），
     加深到 #667182 → 4.50（正文与次要文字都过 AA） */
  --ink-soft: #667182;
  /* --amber 保留 #B4713B 作**图形/边框**色（在 --bg 上 3.57 ≥ 3.0 达标）；
     文字另用 --amber-ink（4.53 ≥ 4.5）—— 一个色相两个明度，
     既保住品牌暖色调，又让所有小字过 AA。 */
  --amber: #B4713B;
  --amber-ink: #9D6233;
  --ok: #3E7C59;
  /* P3-5：teal 原 #2f9e8f 在白底只有 3.28（作为文字需 4.5）。
     定义成变量并加深到 #257B70 —— 已按**最严场景**（提示按钮文字压在
     teal 10% 叠加底 #EAF5F4 上）验算：按钮底 4.55 / 白 5.07 / --bg 4.62，
     三处全过 AA。此前只有 `var(--teal, #2f9e8f)` fallback、没有变量定义。 */
  --teal: #257B70;
  --line: #E8E1D6;

  --r-s: 10px;
  --r-m: 14px;
  --r-l: 18px;

  --shadow-soft: 0 1px 2px rgba(36, 48, 74, .04), 0 8px 20px rgba(36, 48, 74, .06);
  --shadow-lift: 0 14px 32px rgba(36, 48, 74, .12);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: 'PingFang SC', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .01em;
  display: flex;
  flex-direction: column;
}

/* ---------- 背景：极简动态（柔光晕 + 细网格呼吸，透明度 < 6%） ---------- */
body::before {
  content: '';
  position: fixed; inset: -18%;
  background:
    radial-gradient(38% 32% at 18% 20%, rgba(180, 113, 59, .055), transparent 70%),
    radial-gradient(42% 36% at 84% 80%, rgba(36, 48, 74, .05), transparent 72%);
  animation: halo 34s var(--ease) infinite alternate;
  pointer-events: none;
  z-index: -2;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(36, 48, 74, .035) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(36, 48, 74, .035) 0 1px, transparent 1px 56px);
  animation: breathe 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}
@keyframes halo {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
}
@keyframes breathe {
  from { opacity: .5; }
  to   { opacity: 1; }
}

/* ---------- 通用排版与入场动效 ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .45s var(--ease) var(--d, 0s), transform .45s var(--ease) var(--d, 0s);
}
body .reveal.in { opacity: 1; transform: none; }

/* 页面切出：淡出后再跳转 */
.main { transition: opacity .2s ease, transform .2s ease; }
body.leaving .main { opacity: 0; transform: translateY(8px); }

/* ---------- 顶栏（细导航，52px 一行） ---------- */
.topbar {
  flex: 0 0 auto;
  height: 52px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 clamp(14px, 3vw, 32px);
  background: rgba(247, 244, 239, .82);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 30;
}
.topbar .logo, #kcHud .logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 700; letter-spacing: .08em;
  cursor: pointer; white-space: nowrap; color: var(--ink);
}
.topbar .logo svg, #kcHud .logo svg { width: 24px; height: 24px; display: block; }
.topbar .logo .logo-img, #kcHud .logo .logo-img {
  width: 24px; height: 24px; display: block;
  border-radius: 6px; object-fit: cover;
}
.topbar .crumb, #kcHud .crumb {
  font-size: 12.5px; color: var(--ink-soft); letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .spacer { flex: 1; }
.topbar .chip, #kcHud .chip {
  border: 1px solid var(--line); background: rgba(255, 255, 255, .55);
  color: var(--ink); border-radius: 999px; padding: 6px 14px;
  font-size: 12.5px; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .25s var(--ease), color .25s, transform .25s var(--ease), box-shadow .25s;
  white-space: nowrap;
}
.topbar .chip:hover, #kcHud .chip:hover {
  border-color: var(--amber); color: var(--amber-ink);
  transform: translateY(-1px); box-shadow: var(--shadow-soft);
}
.topbar .chip .cavatar, #kcHud .chip .cavatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  overflow: hidden; display: inline-flex; flex: 0 0 22px;
}
.topbar .chip .cavatar svg, #kcHud .chip .cavatar svg { width: 100%; height: 100%; }
.topbar .chip .chip-label, #kcHud .chip .chip-label { letter-spacing: .06em; }
.topbar .chip .chip-name, #kcHud .chip .chip-name {
  font-size: 12px; color: var(--ink-soft);
  max-width: 90px; overflow: hidden; text-overflow: ellipsis;
}
.topbar .chip:hover .chip-name, #kcHud .chip:hover .chip-name { color: inherit; }
.topbar .top-link {
  font-size: 13px; color: var(--ink); text-decoration: none;
  letter-spacing: .06em; padding-bottom: 2px;
  background-image: linear-gradient(var(--amber), var(--amber));
  background-repeat: no-repeat; background-size: 0 1px; background-position: 0 100%;
  transition: background-size .35s var(--ease), color .25s;
}
.topbar .top-link:hover { color: var(--amber-ink); background-size: 100% 1px; }

/* 课程页顶栏：课程名 + 一句话简介 + 返回 */
.cs-top .cs-title {
  font-size: 16px; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
}
.cs-top .cs-tag {
  font-size: 12px; color: var(--ink-soft); letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 通用按钮 ---------- */
.btn {
  border: none; background: none; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; letter-spacing: .05em;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background .25s, color .25s, border-color .25s;
}
.btn:active { transform: scale(.97); }
.btn-run {
  background: var(--ink); color: #fff;
  font-size: 15px; padding: 11px 26px; border-radius: var(--r-m);
  position: relative; overflow: hidden;
}
.btn-run::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .22) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .65s var(--ease);
}
.btn-run:hover { background: #2C3B58; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-run:hover::after { transform: translateX(130%); }
.btn-run:disabled { background: #C4C9D2; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-run:disabled::after { display: none; }
/* 「运行中」状态：实时型引擎点运行后给出明确的绿色脉冲反馈，避免「看不出按没按过」 */
.btn-run.kc-running { background: #2f9e8f; box-shadow: 0 0 0 0 rgba(47, 158, 143, .5); animation: kc-runpulse 1.4s infinite; }
.btn-run.kc-running::after { display: none; }
@keyframes kc-runpulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 158, 143, .45); }
  70% { box-shadow: 0 0 0 10px rgba(47, 158, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 158, 143, 0); }
}
.btn-reset, .btn-tool {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-m);
  font-size: 14px; padding: 10px 20px;
}
.btn-tool { padding: 9px 18px; font-size: 13.5px; }
.btn-reset:hover, .btn-tool:hover {
  border-color: var(--ink); background: rgba(255, 255, 255, .7);
  transform: translateY(-2px); box-shadow: var(--shadow-soft);
}
.btn-sm { padding: 8px 18px; font-size: 13px; }
.tri { width: 9px; height: 11px; display: block; }
.btn:hover .tri { transform: translateX(1px); transition: transform .25s var(--ease); }

/* 文字按钮（首页课程面板用） */
.link-btn {
  border: 1px solid var(--line); background: rgba(255, 255, 255, .6);
  color: var(--ink); border-radius: 999px; padding: 1px 12px;
  font-size: 11.5px; font-family: inherit; letter-spacing: .06em;
  cursor: pointer; white-space: nowrap; line-height: 1.75;
  transition: border-color .25s, color .25s, background .25s, transform .25s var(--ease), box-shadow .25s;
}
.link-btn:hover {
  border-color: var(--amber); color: var(--amber-ink);
  transform: translateY(-1px); box-shadow: var(--shadow-soft);
}
.link-btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.link-btn.primary:hover { background: #2C3B58; border-color: #2C3B58; color: #fff; }

/* ============================================================
   闯关页 play.html
   ============================================================ */
.main {
  flex: 1; display: flex; min-height: 0;
  position: relative; z-index: 1;
}
.stage-col {
  width: 46%; min-width: 380px;
  display: flex; flex-direction: column;
  padding: 12px; gap: 10px;
}
.code-col {
  flex: 1; position: relative; min-width: 0;
  background: var(--card);
  border-left: 1px solid var(--line);
  z-index: 1;
}

/* 任务卡（压缩到 ~92px：关卡名 + 一句话任务 + 知识点单行小字） */
.mission-card {
  flex: 0 0 auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: 9px 18px 8px;
}
.mission-card .mtitle {
  font-size: 16px; font-weight: 700; line-height: 1.45; letter-spacing: .02em;
}
.mission-card .mdesc {
  font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; line-height: 1.55;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mission-card .mchip {
  display: block; margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--amber-ink); letter-spacing: .03em; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mission-card .mchip:empty { display: none; }

/* 游戏舞台（占满剩余高度） */
.stage-wrap {
  flex: 1; min-height: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-l);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.stage-wrap canvas { display: block; border-radius: var(--r-s); }

/* 控制条（~56px） */
.controls {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: 8px 14px;
}
.controls .btn {
  line-height: 1.2; padding: 10px 22px; font-size: 14px; border-radius: var(--r-m);
}
.speed-ctl {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  color: var(--ink-soft); font-size: 12.5px; letter-spacing: .06em;
}
.speed-ctl input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 132px; height: 4px; border-radius: 99px;
  background: var(--line); outline: none; cursor: pointer;
}
.speed-ctl input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(36, 48, 74, .3);
  transition: transform .2s var(--ease);
}
.speed-ctl input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.speed-ctl input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ink); border: 3px solid #fff; cursor: pointer;
}
.speed-ctl input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 99px; background: var(--line);
}
.speed-ctl .speed-min { font-size: 11px; letter-spacing: .12em; }

/* 提示：任务卡内常显一行，不遮挡游戏画面 */
.hint-bar {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.7; color: var(--ink-soft);
}
.hint-bar .hint-label {
  flex: 0 0 auto; font-size: 11px; letter-spacing: .18em;
  color: var(--amber-ink); padding-right: 10px; border-right: 1px solid var(--line);
}

/* ---------- 弹层：磨砂遮罩 + 白色窄卡 + 纯排版（.show 显示机制） ---------- */
.picker-mask, .win-mask {
  position: fixed; inset: 0;
  background: rgba(36, 48, 74, .38);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  display: none; align-items: center; justify-content: center;
  z-index: 100;
}
.picker-mask.show, .win-mask.show { display: flex; animation: fadeIn .25s ease; }
.win-mask { z-index: 200; background: rgba(36, 48, 74, .46); }

.picker {
  background: var(--card); border-radius: var(--r-l);
  padding: 26px 26px 22px;
  width: min(460px, 92vw); max-height: 84vh; overflow: auto;
  box-shadow: 0 30px 80px rgba(36, 48, 74, .28);
  animation: fadeUp .35s var(--ease);
}
#ansMask .picker { width: min(520px, 92vw); }
.picker h3 { font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.picker .psub { font-size: 13px; color: var(--ink-soft); margin: 6px 0 18px; }
.picker .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.picker .cell {
  border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 12px 6px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; background: var(--card);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.picker .cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--ink-soft); }
.picker .cell.sel { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.picker .cell .av { width: 58px; height: 58px; }
.picker .cell .av svg { width: 100%; height: 100%; }
.picker .cell .nm { font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.picker .prow { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; }

#ansPwd {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--r-m);
  background: var(--bg); color: var(--ink);
  font-family: inherit; font-size: 15px;
  transition: border-color .25s, box-shadow .25s;
}
#ansPwd:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(36, 48, 74, .08); }
#ansErr { color: var(--amber-ink); font-size: 13px; min-height: 20px; margin-top: 8px; }
#ansBody {
  display: none; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 14px 16px; font-size: 14px; line-height: 1.9; margin-top: 10px;
}

/* 教师面板（P0-3）：参考答案 + 课堂工具 */
.kc-tpanel-row {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-soft); text-transform: none;
  margin: 4px 0 8px; padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.kc-tpanel-row:first-child { margin-top: 0; }
.kc-tpanel-answer {
  background: var(--bg); border: 1px solid var(--line);
  border-left: 3px solid var(--teal, #2f9e8f);
  border-radius: var(--r-m); padding: 12px 14px;
  font-size: 14px; line-height: 1.9; margin-bottom: 16px;
  word-break: break-word;
}
.kc-tpanel-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.kc-tpanel-msg {
  margin-top: 10px; min-height: 18px;
  font-size: 13px; color: var(--teal, #2f9e8f);
}

/* ---------- 设置弹窗（P1-5） ---------- */
.set-list { display: flex; flex-direction: column; gap: 4px; }
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.set-row:last-child { border-bottom: 0; }
.set-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.set-txt b { font-size: 15px; font-weight: 600; color: var(--ink); }
.set-txt i {
  font-style: normal; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45;
}
/* 开关：原生 checkbox 藏起来，用滑块呈现（键盘仍可聚焦操作） */
.set-sw {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; position: relative;
  width: 46px; height: 26px; margin: 0;
  border-radius: 999px; cursor: pointer;
  background: rgba(36, 48, 74, .18);
  transition: background .2s var(--ease);
}
.set-sw::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s var(--ease);
}
.set-sw:checked { background: var(--ok, #3e7c59); }
.set-sw:checked::after { transform: translateX(20px); }
.set-sw:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* HUD 里的设置按钮（与"重置"同级，矮视口也别挤掉） */

/* 胜利卡 */
.win-card {
  background: var(--card); border-radius: var(--r-l);
  padding: 40px 48px 34px;
  text-align: center; max-width: 90vw;
  box-shadow: 0 30px 80px rgba(36, 48, 74, .3);
  animation: winIn .45s var(--ease);
}
@keyframes winIn {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.win-card .stars {
  font-size: 40px; letter-spacing: .22em; line-height: 1.2;
  color: var(--amber-ink); text-indent: .22em;
}
.win-card .wtitle {
  font-size: 26px; font-weight: 700; letter-spacing: .04em; margin: 14px 0 6px;
}
.win-card .wsub { color: var(--ink-soft); font-size: 14px; margin-bottom: 24px; }
.win-card .wbtns { display: flex; gap: 12px; justify-content: center; }

/* 提示浮层 toast（JS 会内联写入背景色，这里统一覆写为设计系统配色） */
.toast {
  position: fixed; left: 50%; top: 66px; transform: translateX(-50%) translateY(-14px);
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--amber) !important;
  color: var(--ink) !important;
  border-radius: var(--r-m); padding: 11px 20px; font-size: 14px;
  box-shadow: var(--shadow-lift);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s var(--ease);
  z-index: 300; max-width: 80vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast[style*="238, 251, 244"] { border-left-color: var(--ok) !important; }
.toast[style*="255, 241, 240"] { border-left-color: var(--amber) !important; }

/* 闯关页三块内容错落入场 */
.main .mission-card { animation: fadeUp .42s var(--ease) both; }
.main .stage-wrap   { animation: fadeUp .42s var(--ease) .08s both; }
.main .controls     { animation: fadeUp .42s var(--ease) .16s both; }
.code-col           { animation: fadeIn .5s var(--ease) .12s both; }

#blocklyDiv { position: absolute; inset: 0; }

/* ============================================================
   首页 index.html —— 一屏两栏学科结构（左小学 · 右初中）
   ============================================================ */
.slogan {
  flex: 0 0 auto; height: 56px;
  display: flex; align-items: baseline; gap: 14px;
  padding: 0 clamp(14px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.slogan h1 {
  font-size: 21px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; line-height: 56px;
  animation: fadeUp .5s var(--ease) both;
}
.slogan p {
  font-size: 12.5px; color: var(--ink-soft); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: fadeUp .5s var(--ease) .08s both;
}

/* 连续学习天数（P2-3）：紧跟 slogan 文案，窄屏时先被省略号裁掉 */.streak {
  flex: 0 0 auto; margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: #b45309;
  background: rgba(245, 158, 11, .13);
  border: 1px solid rgba(245, 158, 11, .32);
  border-radius: 999px; padding: 3px 12px;
  white-space: nowrap;
  animation: fadeUp .5s var(--ease) .16s both;
}
.streak[hidden] { display: none; }
.streak-flame { font-size: 13px; line-height: 1; }

/* ---------- 收集物图鉴（P2-1） ---------- */
.dex-count {
  font-variant-numeric: tabular-nums;
  color: var(--amber-ink); font-weight: 700; margin-left: 2px;
}
.dex-picker { width: min(720px, 94vw); }
.dex-body {
  max-height: 62vh; overflow-y: auto;
  padding-right: 4px;
  display: flex; flex-direction: column; gap: 14px;
}
.dex-body::-webkit-scrollbar { width: 6px; }
.dex-body::-webkit-scrollbar-thumb { background: rgba(36, 48, 74, .16); border-radius: 99px; }
.dex-course {
  font-size: 14px; font-weight: 700; color: var(--ink);
  padding-bottom: 4px; border-bottom: 2px solid var(--amber);
  letter-spacing: .04em;
}
.dex-theme { display: flex; align-items: flex-start; gap: 10px; }
.dex-theme-name {
  flex: 0 0 84px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); line-height: 34px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dex-grid {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.dex-cell {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 17px; line-height: 1;
  border: 1px dashed var(--line);
  background: rgba(36, 48, 74, .03);
  transition: transform .2s var(--ease);
}
.dex-cell.got {
  border-style: solid; border-color: rgba(245, 158, 11, .45);
  background: rgba(245, 158, 11, .12);
}
.dex-cell.got:hover { transform: translateY(-2px) scale(1.08); }
.dex-unknown { color: rgba(36, 48, 74, .26); font-weight: 700; }
.dex-emoji { font-size: 17px; line-height: 1; }

/* ---------- 主题地图（P2-4） ----------
   10 个主题串成一条路径：节点=主题，连线=学习顺序。
   与列表视图共用同一容器高度，切换时不产生跳动。 */
.theme-map {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 4px 2px 6px;
}
.theme-map[hidden] { display: none; }
.tm-track {
  display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.tm-track::before {
  /* 竖向路径线：从第一个节点中心贯到最后一个 */
  content: ''; position: absolute;
  left: 17px; top: 22px; bottom: 22px; width: 2px;
  background: repeating-linear-gradient(to bottom,
    var(--line) 0 6px, transparent 6px 12px);
}
.tm-node {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 42px; min-height: 40px; max-height: 54px;
  padding: 0 8px 0 0;
  background: none; border: 0; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  border-radius: var(--r-s);
  transition: background .2s;
}
.tm-node:hover { background: rgba(255, 255, 255, .72); }
.tm-dot {
  flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: var(--card); border: 2px solid var(--line);
  color: var(--ink-soft);
}
.tm-node.done .tm-dot {
  background: var(--ok, #3e7c59); border-color: var(--ok, #3e7c59);
  color: #fff;
}
.tm-node.next .tm-dot {
  border-color: var(--amber); color: var(--amber-ink);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .2);
}
.tm-node.locked { cursor: not-allowed; opacity: .58; }
.tm-node.locked .tm-dot { border-style: dashed; }
.tm-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-node.locked .tm-name { color: var(--ink-soft); font-weight: 500; }
.tm-meta {
  flex: 0 0 auto;
  font-size: 11.5px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  background: rgba(36, 48, 74, .06);
  border-radius: 999px; padding: 2px 9px;
}
.tm-node.done .tm-meta { background: rgba(62, 124, 89, .12); color: var(--ok, #3e7c59); }
.tm-node.next .tm-meta { background: rgba(245, 158, 11, .16); color: #b45309; }

/* 卡头里的视图切换按钮：选中态用琥珀描边区分 */
.card-head .link-btn.js-map.on {
  color: var(--amber-ink); font-weight: 700;
  border-color: rgba(245, 158, 11, .5);
}



.home-main { padding: 6px clamp(12px, 2vw, 22px); overflow: hidden; }
/* 单页模式一键直达（用户 2026-10-26 需求） */
.hero-cta{
  display:block;margin:6px auto 10px;width:min(520px,92%);text-align:center;text-decoration:none;
  padding:14px 20px;border-radius:14px;font-size:17px;font-weight:800;letter-spacing:.04em;color:#fff;
  background:linear-gradient(135deg,#ff8a3c,#ff5e7e);box-shadow:0 10px 26px rgba(255,94,126,.34);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,94,126,.46)}
.hero-cta:active{transform:translateY(0)}
.course-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
}

/* 课程面板（course-card）：整栏一门课，超高时面板内列表自行滚动兜底 */
.course-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: 8px 10px;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.course-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-lift);
  border-color: #DDD4C5;
}
/* 栏头：课程名 + 副标题 + 进度（pbar/ptxt）+ 课程详情文字按钮 */
.card-head {
  flex: 0 0 auto; height: 30px; margin-bottom: 4px;
  display: flex; align-items: center; gap: 10px;
  overflow: hidden;
}
.course-title {
  flex: 0 1 auto; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.course-sub {
  flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--ink-soft);
  letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.course-prog { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.course-prog .pbar { width: clamp(36px, 5vw, 76px); }
.course-prog .ptxt { width: clamp(46px, 4vw, 60px); }

/* 主题行（lesson-row）：主题名 + 关卡格
   行内文字一律单行省略号，行高随列表区弹性收缩，绝不换行撑高 */
.lesson-list {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto; overflow-x: hidden;
}
/* 切到地图视图时要真的藏起来：.lesson-list 是 display:flex，
   会覆盖 [hidden] 的 UA 默认 display:none，不加这条切换会失效 */
.lesson-list[hidden] { display: none; }
.lesson-list::-webkit-scrollbar, .cs-body::-webkit-scrollbar, .cs-side::-webkit-scrollbar { width: 6px; height: 6px; }
.lesson-list::-webkit-scrollbar-track, .cs-body::-webkit-scrollbar-track, .cs-side::-webkit-scrollbar-track { background: transparent; }
.lesson-list::-webkit-scrollbar-thumb, .cs-body::-webkit-scrollbar-thumb, .cs-side::-webkit-scrollbar-thumb {
  background: rgba(36, 48, 74, .16); border-radius: 99px;
}
.lesson-row {
  flex: 1 1 42px; min-height: 34px; max-height: 52px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px; border-radius: var(--r-s); cursor: pointer;
  border: 1px solid transparent;
  font-size: 13px; line-height: 1.4;
  overflow: hidden;
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.lesson-row:hover {
  background: rgba(255, 255, 255, .72);
  border-color: var(--line);
  transform: translateY(-1px);
}

.lesson-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 主题难度★（P1-2）：5 星制，实心=难度，空心=余量。
   放在主题名右侧、关卡格左侧，紧凑不抢视线。 */
.lesson-diff {
  flex: 0 0 auto;
  font-size: 11px; line-height: 1; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  user-select: none;
}
.diff-stars { color: var(--amber-ink); font-weight: 700; }
.diff-stars .diff-dim { color: rgba(36, 48, 74, .18); font-weight: 400; }

.pbar {
  width: 48px; height: 4px; background: rgba(36, 48, 74, .09);
  border-radius: 99px; overflow: hidden;
}
.pbar i {
  display: block; height: 100%; width: 0;
  background: var(--amber); border-radius: 99px;
  transition: width .9s var(--ease);
}
.ptxt {
  font-size: 10.5px; color: var(--ink-soft); width: 34px; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ============================================================
   课程详情页 course.html —— 左栏四小块 + 右栏主题/关卡全平铺
   ============================================================ */
.cs-main {
  padding: 10px clamp(12px, 2vw, 22px);
  gap: 12px;
  overflow: hidden;
}
.cs-side {
  flex: 0 1 32%; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto; overflow-x: hidden;
}
.side-block {
  flex: 0 0 auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 10px 14px;
}
.side-title {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}

/* 课程简介：小字段落 */
.side-intro {
  font-size: 11.5px; line-height: 1.8; color: var(--ink-soft);
}

/* 课程目标：编号小字列表 */
.goal-list { list-style: none; }
.goal-item {
  display: flex; gap: 8px; align-items: baseline;
  padding: 3px 2px; font-size: 11.5px; line-height: 1.6;
  border-bottom: 1px solid var(--line);
}
.goal-item:last-child { border-bottom: none; }
.goal-no {
  flex: 0 0 auto; font-size: 10px; font-weight: 600;
  letter-spacing: .12em; color: var(--amber-ink);
  font-variant-numeric: tabular-nums;
}

/* 课标对照表（小字 3~4 行） */
.std-table { width: 100%; border-collapse: collapse; font-size: 11.5px; line-height: 1.55; }
.std-table th, .std-table td {
  text-align: left; padding: 4px 6px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.std-table th {
  color: var(--ink-soft); font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
}
.std-table tr:last-child td { border-bottom: none; }
.std-item { width: 38%; font-weight: 600; color: var(--ink); }
.std-map { color: var(--ink-soft); }

/* 学段信息 */
.grade-info { display: flex; flex-direction: column; gap: 4px; }
.gi-row { display: flex; gap: 10px; align-items: baseline; font-size: 11.5px; line-height: 1.6; }
.gi-label {
  flex: 0 0 56px; font-size: 10.5px; letter-spacing: .12em; color: var(--ink-soft);
}
.gi-row b { font-weight: 600; color: var(--ink); }

/* 右栏：主题行内平铺全部关卡格（无折叠） */
.cs-body {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto; overflow-x: hidden;
}
.cs-body .lesson-row { flex: 1 1 44px; min-height: 36px; max-height: 54px; height: auto; padding: 0 10px; gap: 10px; }
.cs-body .lesson-name { font-size: 13.5px; }

/* 关卡格（level-cell）：小号两位序号，一击进关 */
.level-grid {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: stretch; min-width: 0; overflow: hidden;
  display: flex; align-items: center; gap: 3px;
}
.level-cell {
  flex: 0 0 auto;
  width: clamp(24px, 2.4vw, 30px); height: 100%; max-height: 32px; min-height: 22px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--ink); line-height: 1;
  font-variant-numeric: tabular-nums; overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.level-cell:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-soft);
  border-color: var(--ink-soft);
}
.level-cell .lnum { font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.level-cell.done { border-color: rgba(62, 124, 89, .5); background: rgba(62, 124, 89, .07); color: var(--ok); }
.level-cell.current { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
/* 未解锁（P1-2）：先通过上一关才能进。视觉上明确"关着"，但仍可点击 → 给出提示而非无响应 */
.level-cell.locked {
  border-style: dashed;
  background: rgba(36, 48, 74, .04);
  color: rgba(36, 48, 74, .34);
  cursor: not-allowed;
}
.level-cell.locked:hover { transform: none; box-shadow: none; border-color: var(--line); }
/* 键盘可达（P3）：Tab 聚焦时给清晰焦点环，与 hover 区分开 */
.level-cell:focus-visible {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 2px var(--amber);
  transform: translateY(-2px);
}
.level-cell.locked:focus-visible { transform: none; box-shadow: 0 0 0 2px var(--ink-soft); }
.cs-body .level-cell { width: clamp(28px, 2.8vw, 36px); }

/* ============================================================
   闯关页 play.html —— 三区上下布局（HUD / 舞台 / 积木区）
   ============================================================ */
html, body { height: 100%; overflow: hidden; }
body { height: 100dvh; }

#kcShell {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  min-height: 0;
  /* 顶栏之下占满剩余高度（body 高度锁定 100dvh，禁止整页滚动） */
  height: 100%;
  max-height: 100%;
}

/* ---------- HUD：P4 起与原 .topbar 合并为**一行**（原 52+56=108px → 56px） ---------- */
#kcHud {
  flex: 0 0 auto;
  min-height: 56px;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 20;
  /* 窄屏放不下时允许换行，而不是把控件挤出屏幕 */
  flex-wrap: wrap;
  row-gap: 6px;
}
/* 品牌 + 位置（原 .topbar 左侧），两者之间不额外留白 */
#kcHud .kc-hud-brand {
  display: flex; align-items: center; gap: 12px;
  min-width: 0; flex: 0 1 auto;
}
#kcHud .kc-hud-brand .logo { flex: 0 0 auto; }
#kcHud .kc-hud-brand .crumb { min-width: 0; }
/* 任务区：basis 用 auto 而非固定 200px —— 固定值会把整行总宽推过视口，
   触发 flex-wrap 换行（实测 1504px > 1360px → HUD 变 99px 白占两行）。 */
#kcHud .kc-hud-goal { flex: 1 1 auto; min-width: 140px; }
#kcHud .kc-hud-goal-title {
  font-size: 14px; font-weight: 700; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#kcHud .kc-hud-goal-desc {
  font-size: 11.5px; color: var(--ink-soft); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 统计与控件（P4 后移入 #kcBar：游戏正下方的控制条） */
#kcBar .kc-hud-stats { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
#kcBar .kc-hud-item {
  min-width: 44px; padding: 3px 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  text-align: center;
}
#kcBar .kc-hud-val {
  font-size: 14px; font-weight: 700; line-height: 1.25;
  font-variant-numeric: tabular-nums; transition: transform .18s var(--ease), color .18s;
}
#kcBar .kc-hud-key { font-size: 10px; color: var(--ink-soft); letter-spacing: .08em; }
#kcBar .kc-hud-val.kc-pop { transform: scale(1.25); color: var(--amber-ink); }
#kcBar .kc-hud-val.kc-bad { transform: scale(1.2); color: #c0392b; }
#kcBar .kc-hud-val.kc-good { transform: scale(1.2); color: var(--ok); }
#kcBar .kc-hud-ctrls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
#kcBar .kc-hud-ctrls .btn { line-height: 1.1; padding: 8px 16px; font-size: 13.5px; border-radius: 12px; }
#kcBar .kc-hud-ctrls .kc-run { padding: 8px 18px; }
/* P5 步进按钮：与「运行/重置」并列，用 teal 描边区分"慢节奏"语义 */
#kcBar .kc-hud-ctrls .kc-step {
  padding: 8px 14px; font-size: 13.5px;
  border-color: rgba(37, 123, 112, .45);
  color: var(--teal);
}
#kcBar .kc-hud-ctrls .kc-step:hover {
  border-color: var(--teal); color: var(--teal);
  background: rgba(37, 123, 112, .1);
}
#kcBar .kc-hud-ctrls .kc-step[hidden] { display: none; }
#kcBar .speed-ctl { gap: 6px; }
#kcBar .speed-ctl input[type="range"] { width: 84px; }

/* P4：设置直选（原弹窗三开关搬到顶栏） */
#kcHud .kc-hud-tools {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding-left: 8px; border-left: 1px solid var(--line);
}
#kcHud .tg {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); color: var(--ink-soft);
  cursor: pointer; line-height: 1;
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
#kcHud .tg:hover { transform: translateY(-1px); border-color: var(--amber); color: var(--amber-ink); }
#kcHud .tg:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* 开启态：实心着色，一眼看出"这个是开着的" */
#kcHud .tg.tg-on {
  background: rgba(37, 123, 112, .12);
  border-color: rgba(37, 123, 112, .45);
  color: var(--teal);
}
#kcHud .tg.tg-on:hover { color: var(--teal); border-color: var(--teal); }

/* P4：右侧角色/教师/答案一组 */
#kcHud .kc-hud-chips {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  margin-left: auto;
}

/* ---------- 左右主布局（2026-10-24：游戏画面更大） ----------
   #kcMain 横排：左列 = 舞台 + 控制条，右列 = 整列编程区。 */
#kcMain {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}
#kcLeft {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; flex-direction: column;
  padding: 10px 10px 10px 12px;
  gap: 10px;
}
#kcStage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
/* 控制条：游戏正下方 —— 统计 + 运行/重置/步进 + 快慢，一行放下 */
#kcBar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
}
#kcTeachBar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  min-height: 24px;
  font-size: 12px; color: var(--ink-soft);
  overflow: hidden;
}
/* 知识点做成胶囊标签（信息布局优化）：与提示按钮同一视觉语言（圆角胶囊），
   一眼分清「这关学什么」与「求助」两个功能区。原来三段文字平铺无分组，
   视觉上糊成一条。 */
#kcTeachBar .kc-teach-concept {
  color: var(--amber-ink);
  background: rgba(180, 113, 59, .10);
  border: 1px solid rgba(180, 113, 59, .28);
  border-radius: 999px;
  padding: 2px 12px;
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 0; max-width: 54%;
}
/* 提示区靠右：求助是次要动作，不该和知识点抢左侧主视线 */
#kcTeachBar .kc-teach-hint {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  min-width: 0; flex: 0 1 auto;
}
#kcTeachBar .kc-teach-hint #hintText {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; max-width: 38ch;
  color: var(--ink-soft);
}
#kcTeachBar .kc-teach-hint b { color: var(--amber-ink); font-weight: 600; margin-right: 6px; letter-spacing: .1em; }
#kcTeachBar .kc-teach-concept:empty { display: none; }

/* ===== 素养展示层 · 顶栏学习彩带（语法 / 算法 / 素养）===== */
#kcLearnRibbon {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 7px 12px;
  background: linear-gradient(180deg, rgba(36,48,74,.06), rgba(36,48,74,.02));
  border-bottom: 1px solid var(--line, #e7e2d8);
}
#kcLearnRibbon .kc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  padding: 3px 11px; border-radius: 999px; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
#kcLearnRibbon .kc-chip-syn  { color: #2b5c8a; background: rgba(43,92,138,.10); border: 1px solid rgba(43,92,138,.26); }
#kcLearnRibbon .kc-chip-algo { color: #6a3d8a; background: rgba(106,61,138,.10); border: 1px solid rgba(106,61,138,.26); }
#kcLearnRibbon .kc-chip-lit  { color: #9a5a12; background: rgba(201,162,39,.14); border: 1px solid rgba(201,162,39,.34); }
/* 窄屏：算法较长，优先保留 语法 + 素养 */
@media (max-width: 720px) {
  #kcLearnRibbon .kc-chip-algo { display: none; }
}

/* ===== 素养展示层 · 通关底部浮卡 ===== */
.learn-win-banner {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(140%);
  display: flex; align-items: center; gap: 12px;
  max-width: min(560px, 92vw);
  background: #fff; border: 1px solid rgba(201,162,39,.4);
  border-radius: 16px; box-shadow: 0 12px 32px rgba(36,48,74,.18);
  padding: 12px 14px; z-index: 9000; opacity: 0;
  transition: transform .42s cubic-bezier(.2,.8,.25,1), opacity .3s ease;
}
.learn-win-banner.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.learn-win-banner .lwb-badge {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(135deg, #F2C94C, #E0972B); color: #fff;
}
.learn-win-banner .lwb-text { flex: 1 1 auto; min-width: 0; }
.learn-win-banner .lwb-lit { display: block; font-size: 15px; font-weight: 700; color: #7a4d10; }
.learn-win-banner .lwb-sub { display: block; font-size: 12.5px; color: var(--ink-soft, #6b6457); margin-top: 2px; }
.learn-win-banner .lwb-btn {
  flex: 0 0 auto; border: 0; cursor: pointer; color: #fff;
  background: #2f9e8f; border-radius: 10px; padding: 8px 14px; font-weight: 700; font-size: 13px;
}
.learn-win-banner .lwb-btn:hover { filter: brightness(1.05); }

/* ===== 素养展示层 · 成长单弹窗 ===== */
.learn-book.show { display: flex; }
.learn-book-card {
  width: min(560px, 92vw); background: #fff; border-radius: 18px; padding: 24px;
  box-shadow: 0 18px 50px rgba(36,48,74,.28); text-align: left;
}
.learn-book-card h3 { font-size: 20px; font-weight: 800; letter-spacing: .02em; color: #24304A; margin: 0 0 6px; }
.learn-book-card .lb-count { font-size: 14px; font-weight: 700; color: #9a5a12; margin-bottom: 14px; }
.learn-book-card .lb-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.learn-book-card .lb-pill {
  font-size: 13px; font-weight: 600; color: #3b4a63;
  background: rgba(43,92,138,.08); border: 1px solid rgba(43,92,138,.2);
  border-radius: 999px; padding: 6px 13px;
}
.learn-book-card .lb-empty { font-size: 13px; color: var(--ink-soft, #6b6457); }
.learn-book-card .lb-foot { font-size: 12.5px; color: var(--ink-soft, #6b6457); line-height: 1.6; margin-bottom: 4px; }
.learn-book-card .prow { margin-top: 16px; display: flex; justify-content: flex-end; }

/* P2-5 三级提示按钮：轻点 → 再点 → 看思路 */
.kc-hint-btn {
  flex: 0 0 auto;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--teal, #2f9e8f);
  background: rgba(47, 158, 143, .1);
  border: 1px solid rgba(47, 158, 143, .35);
  border-radius: 999px;
  padding: 2px 11px;
  cursor: pointer; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.kc-hint-btn:hover { background: rgba(47, 158, 143, .2); border-color: var(--teal, #2f9e8f); }
.kc-hint-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.kc-hint-btn.kc-hint-done {
  color: var(--ink-soft); background: transparent;
  border-color: var(--line); cursor: default; font-weight: 500;
}
.kc-hint-btn.kc-hint-done:hover { background: transparent; border-color: var(--line); }

.stage-wrap {
  flex: 1 1 auto; min-height: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-l);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.stage-wrap canvas { display: block; border-radius: var(--r-s); }
/* 触控适配（P3）：舞台画布吃触摸拖拽（鼠标引擎/aiclass 拖样本），
   必须禁掉浏览器默认手势，否则手指拖角色时页面跟着滚。 */
#kcCanvas { touch-action: none; }
/* overlay 通道：绝对定位叠在主画布之上，不吃指针事件 */
#kcOverlay {
  position: absolute; left: 0; top: 0;
  pointer-events: none; z-index: 5;
  border-radius: var(--r-s);
}

/* 失败轻提示条 */
#kcFailBar {
  position: absolute; left: 50%; top: 12px; transform: translate(-50%, -8px);
  padding: 7px 16px; border-radius: 999px;
  background: rgba(192, 57, 43, .92); color: #fff;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
  opacity: 0; pointer-events: none; z-index: 30;
  transition: opacity .22s ease, transform .22s var(--ease);
  max-width: 86%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#kcFailBar.show { opacity: 1; transform: translate(-50%, 0); }

/* 结算面板（叠在舞台上） */
#kcSettle {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(36, 48, 74, .42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 40; padding: 12px;
}
#kcSettle.show { display: flex; animation: fadeIn .25s ease; }
.kc-settle-card {
  background: var(--card); border-radius: var(--r-l);
  padding: 22px 26px 18px; text-align: center;
  max-width: 92%; box-shadow: var(--shadow-lift);
  animation: fadeUp .35s var(--ease);
}
.kc-settle-stars { font-size: 38px; letter-spacing: .18em; line-height: 1.2; color: #D9DEE8; }
.kc-settle-stars .kc-star { display: inline-block; transform: scale(.8); transition: transform .3s var(--ease), color .3s; }
.kc-settle-stars .kc-star.on { color: var(--amber-ink); transform: scale(1.18); }
.kc-settle-title { font-size: 19px; font-weight: 700; margin: 10px 0 4px; letter-spacing: .03em; }
.kc-settle-sub { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 14px; }
/* P2-2 关后复盘：知识点单独一行、更醒目（这是"收获"，不是附属信息） */
.kc-settle-learn {
  font-size: 14px; font-weight: 600; color: var(--ink);
  line-height: 1.6; margin-bottom: 4px;
}
.kc-settle-stat { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
.kc-settle-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.kc-settle-btns .btn { font-size: 13px; padding: 8px 16px; }

/* 震屏 */
.stage-wrap.kc-shake { animation: kcShake .4s ease; }
@keyframes kcShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 3px); }
  40% { transform: translate(4px, -3px); }
  60% { transform: translate(-3px, -2px); }
  80% { transform: translate(3px, 2px); }
}

/* ---------- 编程区（右列，占满整列高度） ----------
   P1-4：折叠状态由 .kc-fold 控制（JS 绑定 #kcGrip 点击 + 持久化）。
   2026-10-24 左右排版：积木区从底部 38vh 改为右列整列，
   左缘竖直 grip 可左右拖动调宽（JS initGripDrag），点击仍折叠/展开。 */
#kcCode {
  flex: 0 0 42%;
  min-width: 240px;
  min-height: 0;
  position: relative;
  background: var(--card);
  border-left: 1px solid var(--line);
  transition: flex-basis .28s var(--ease);
  z-index: 10;
}
#kcCode.kc-fold { flex-basis: 26px; min-width: 26px; }
#kcCode.kc-fold #blocklyDiv,
#kcCode.kc-fold .kc-none-panel { display: none; }
#kcGrip {
  position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 12;
  background: none; border: 0; padding: 0; height: 100%;
  touch-action: none;
}
#kcGrip span {
  display: block; width: 4px; height: 44px; border-radius: 99px;
  background: var(--line);
  transition: background .2s, height .2s var(--ease);
}
#kcGrip:hover span, #kcGrip:focus-visible span { background: var(--amber); height: 64px; }
#kcGrip:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
#blocklyDiv { position: absolute; inset: 0 0 0 14px; }

/* ============================================================
   响应式：移动端三区最小高度与自动折叠
   ============================================================ */
@media (max-width: 640px) {
  #kcHud { flex: 0 0 auto; min-height: 56px; flex-wrap: wrap; padding: 6px 10px; row-gap: 6px; }
  /* 合并后的一行在窄屏换行的顺序：品牌 → 任务 → 设置 → 角色组 */
  #kcHud .kc-hud-brand { order: 0; flex: 1 1 auto; }
  #kcHud .kc-hud-goal { flex: 1 1 100%; order: 1; }
  #kcHud .kc-hud-tools { order: 4; border-left: 0; padding-left: 0; }
  #kcHud .kc-hud-chips { order: 5; margin-left: 0; }
  /* 手机竖屏放不下左右布局 → 回退上下：舞台在上、编程区在下。
     ★左列必须 flex:1+min-height:0 受视口约束：若 flex:0 0 auto 按内容撑高，
       画布残留的旧高度会把整列撑出视口，grip 跟着不可见（实测 gripY=941 > 800）。 */
  #kcMain { flex-direction: column; }
  #kcLeft { flex: 1 1 auto; min-height: 0; padding: 6px 8px 0; gap: 6px; }
  #kcCode { flex: 0 0 34vh; min-width: 0; border-left: 0; border-top: 1px solid var(--line); }
  #kcCode.kc-fold { flex-basis: 26px; min-width: 0; }
  #kcGrip { left: 0; right: 0; top: 0; bottom: auto; width: 100%; height: 14px; }
  #kcGrip span { width: 44px; height: 4px; }
  #kcGrip:hover span, #kcGrip:focus-visible span { width: 64px; height: 4px; }
  #blocklyDiv { inset: 14px 0 0 0; }
  /* 用 ID 提高优先级：类选择器 .stage-wrap{min-height:320px}（后方媒体块）会盖过这里的班级覆盖 */
  #kcStageWrap { min-height: 200px; }
  #kcBar { padding: 6px 10px; gap: 8px; }
  .kc-settle-stars { font-size: 30px; }
}

/* 中屏（≤1200px）：合并后的一行固定项仍超宽（品牌321+设置117+角色208…）
   会触发换行变成两行。这里收掉"锦上添花"的文字标签，把一行压回视口宽度内。 */
@media (max-width: 1200px) and (min-width: 641px) {
  #kcHud .kc-hud-brand .crumb { display: none; }        /* 位置面包屑：任务名已含关卡信息 */
  #kcHud .chip .chip-label { display: none; }           /* 「更换角色」文字，只留头像+名字 */
  #kcBar .speed-ctl input[type="range"] { width: 56px; }
  #kcBar .kc-hud-item { min-width: 38px; padding: 3px 6px; }
}
/* 窄桌面（≤980px）：右列收窄，保证舞台仍是主角 */
@media (max-width: 980px) and (min-width: 641px) {
  #kcCode { flex-basis: 40%; min-width: 210px; }
  #kcBar .speed-ctl input[type="range"] { width: 48px; }
}

@media (max-width: 640px) {
  .main { overflow-y: auto; overflow-x: hidden; }
  .slogan { height: auto; padding: 10px 16px; flex-wrap: wrap; gap: 2px 12px; }
  .slogan h1 { line-height: 1.5; font-size: 18px; white-space: normal; }
  .slogan p { white-space: normal; }
  .home-main { overflow: visible; }
  .course-grid { display: flex; flex-direction: column; gap: 8px; }
  .course-card { flex: 0 0 auto; overflow: visible; }
  .card-head { height: auto; flex-wrap: wrap; padding: 4px 0; overflow: visible; }
  .lesson-list { overflow: visible; }
  .lesson-row {
    flex: 0 0 auto; height: auto; min-height: 30px; max-height: none;
    padding: 6px; flex-wrap: wrap;
  }
  .lesson-elems { white-space: normal; overflow: visible; }
  .cs-main { flex-direction: column; overflow-y: auto; }
  .cs-side { flex: 0 0 auto; overflow: visible; }
  .cs-body { overflow: visible; }
  .cs-body .lesson-row { flex: 0 0 auto; height: auto; max-height: none; }
  .level-grid { margin-left: 0; flex-wrap: wrap; align-self: auto; overflow: visible; }
  .level-cell { height: 38px; }
  .main { flex-direction: column; }
  .stage-col { width: 100%; min-width: 0; }
  .stage-wrap { min-height: 320px; }
  .code-col { border-left: none; border-top: 1px solid var(--line); min-height: 420px; }
  .mission-card .mdesc, .mission-card .mchip { white-space: normal; }
}

/* ============================================================
   动效降级
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, body .reveal { opacity: 1 !important; transform: none !important; }
  body::before, body::after { animation: none; }
  body.leaving .main { opacity: 1; transform: none; }
}

/* ============================================================
   自定义角色（需求3）：上传照片 / 马赛克画一个
   复用 .picker / .cell / .btn 体系，只补入口格与画板布局。
   ============================================================ */
.picker .cell.cc-act-cell .av.cc-act {
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1;
  background: var(--bg); border-radius: 50%;
  border: 1px dashed var(--line);
}
.picker .cell.cc-act-cell .nm { color: var(--amber-ink); }

/* 自定义角色删除角标：两步确认（点一次变红"!"，3 秒内再点才删） */
.picker .cell .cc-del {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; padding: 0;
  border-radius: 50%; border: 1.5px solid var(--card);
  background: var(--ink-soft); color: #fff;
  font-size: 14px; font-weight: 700; line-height: 1;
  cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s, background .18s, transform .18s;
}
.picker .cell { position: relative; }              /* 角标定位锚 */
.picker .cell:hover .cc-del,
.picker .cell .cc-del:focus-visible { opacity: 1; }
.picker .cell .cc-del:hover { transform: scale(1.12); }
.picker .cell .cc-del.armed { opacity: 1; background: #c0392b; animation: ccPulse 1s infinite; }
@keyframes ccPulse { 50% { transform: scale(1.15); } }
@media (hover: none) {                              /* 触摸设备没有 hover，常显 */
  .picker .cell .cc-del { opacity: 1; }
}

#ccMask .picker { width: min(430px, 92vw); }
.cc-main { display: flex; gap: 16px; align-items: flex-start; }
#ccBoard {
  width: 272px; height: 272px; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-m);
  touch-action: none;          /* 触摸涂色时不触发页面滚动 */
  cursor: crosshair; background: #f4eee0;
  flex: 0 0 auto;
}
.cc-side { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 90px; }
.cc-pal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cc-swatch {
  width: 100%; aspect-ratio: 1; border-radius: 10px; padding: 0;
  border: 2px solid rgba(36, 48, 74, .14); cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s;
}
.cc-swatch:hover { transform: scale(1.08); }
.cc-swatch:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cc-swatch.sel { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--amber); }
.cc-eraser {
  padding: 8px 10px; border-radius: var(--r-m); font-size: 13px; font-weight: 600;
  font-family: inherit; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer;
}
.cc-eraser.sel { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); color: var(--amber-ink); }
@media (max-width: 560px) {
  .cc-main { flex-direction: column; align-items: center; }
  .cc-side { width: 272px; max-width: 100%; }
  .cc-pal { grid-template-columns: repeat(8, 1fr); }
}