/* ============================================================
   新概念英语 · 闯关模式
   - 全局黑白主题切换（地图 + 终端统一）
   - 地图：星阵围棋式蜿蜒关卡地图（黑白灰）
   - 终端：Linux 命令行输出流，进入关卡才显示
   - 唯一彩色：检查时错误单词高亮(红)
   ============================================================ */

:root {
  --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace;
}

/* 深色（黑底白字） */
[data-theme="dark"] {
  --bg: #0b0b0b;
  --panel: #141414;
  --bg-deep: #050505;
  --border: #2e2e2e;
  --border-soft: #1f1f1f;
  --fg: #f2f2f2;
  --dim: #8a8a8a;
  --err: #ff5252;
  --err-soft: rgba(255, 82, 82, 0.16);
  --glow: rgba(255, 255, 255, 0.16);
  --sel: rgba(255, 255, 255, 0.06);
}

/* 浅色（白底黑字） */
[data-theme="light"] {
  --bg: #ffffff;
  --panel: #ffffff;
  --bg-deep: #f3f3f1;
  --border: #dcdcd8;
  --border-soft: #eaeae6;
  --fg: #111111;
  --dim: #8a8a8a;
  --err: #e03131;
  --err-soft: rgba(224, 49, 49, 0.10);
  --glow: rgba(0, 0, 0, 0.15);
  --sel: rgba(0, 0, 0, 0.05);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  font-family: var(--mono);
  background: var(--bg);
  color: var(--fg);
  transition: background 0.2s, color 0.2s;
}

/* ============================================================
   地图视图（星阵围棋式 · 黑白）
   ============================================================ */
#mapView {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
}
.map-brand { display: flex; align-items: center; gap: 12px; }
.map-logo { font-size: 26px; line-height: 1; }
.map-brand-txt h1 { font-size: 18px; font-weight: 800; color: var(--fg); letter-spacing: 0.5px; }
.map-brand-txt .sub { font-size: 12px; color: var(--dim); }
.map-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.map-progress { font-size: 13px; color: var(--dim); }
.mp-btn {
  font-family: inherit;
  font-size: 13px;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.mp-btn:hover { background: var(--sel); }
.mp-btn.primary { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 700; }
.mp-btn.primary:hover { background: var(--dim); border-color: var(--dim); }

.map-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 22px;
  font-size: 12.5px;
  color: var(--dim);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.lg { display: inline-flex; align-items: center; gap: 6px; }
.lg-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.lg-dot.done { background: var(--fg); }
.lg-dot.cur { border: 2px solid var(--fg); background: transparent; }
.lg-dot.locked { border: 1px solid var(--border); background: transparent; }

.map-scroll { flex: 1; overflow: auto; }
.map { position: relative; margin: 0 auto; }
.map-lines { position: absolute; top: 0; left: 0; pointer-events: none; }
.map-lines path {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 12;
}

/* 章节 banner */
.banner {
  position: absolute;
  height: 46px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--fg);
  background: var(--panel);
  border-radius: 8px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.banner .b-title { font-weight: 800; color: var(--fg); }
.banner .b-state { font-size: 12px; color: var(--dim); }
.banner.active { border-left-color: var(--fg); }
.banner.locked { border-left-color: var(--border); opacity: 0.55; }

/* 关卡节点（一课 = 一个关卡） */
.lv {
  position: absolute;
  width: 72px; height: 72px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: transform 0.12s;
}
.lv:hover { transform: translate(-50%, -50%) scale(1.1); }
.lv .lv-ring {
  position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(var(--fg) calc(var(--p, 0) * 1%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  opacity: 0.85;
  pointer-events: none;
}
.lv .lv-num { font-size: 19px; font-weight: 800; line-height: 1; color: var(--fg); }
.lv .lv-frac { font-size: 11px; line-height: 1; color: var(--dim); font-weight: 700; }
.lv .lv-stamp {
  position: absolute; top: -6px; right: -6px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 11px; line-height: 19px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg);
  z-index: 3;
}
.lv.done { background: var(--fg); border-color: var(--fg); }
.lv.done .lv-num { color: var(--bg); }
.lv.done .lv-frac { color: var(--bg); opacity: 0.75; }
.lv.done .lv-ring { display: none; }
.lv.done .lv-stamp { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.lv.cur { border: 3px solid var(--fg); background: transparent; animation: lvPulse 1.5s ease-in-out infinite; }
.lv.cur .lv-num { color: var(--fg); }
.lv.cur .lv-frac { color: var(--dim); }
.lv.cur .lv-stamp { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.lv.locked { opacity: 0.5; }
.lv.locked .lv-num { color: var(--dim); }
.lv.locked .lv-frac { color: var(--dim); }
.lv.locked .lv-ring { display: none; }
.lv.locked .lv-stamp { color: var(--dim); }
@keyframes lvPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--glow); }
  50% { box-shadow: 0 0 0 11px transparent; }
}

/* ============================================================
   终端视图（进入关卡才显示 · 命令行输出流）
   ============================================================ */
#termView {
  height: 100vh;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#term {
  width: min(940px, 100%);
  height: min(92vh, 720px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.term-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-wrap: wrap;
}
.term-dot { width: 10px; height: 10px; border-radius: 2px; background: var(--fg); flex-shrink: 0; }
.term-title { color: var(--fg); font-size: 13px; font-weight: 700; }
.term-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tbtn {
  font-family: inherit;
  font-size: 12.5px;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.tbtn:hover { background: var(--sel); border-color: var(--fg); }

.term-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 30px;
  line-height: 1.8;
  font-size: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-soft) transparent;
}
.term-body::-webkit-scrollbar { width: 8px; }
.term-body::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 4px; }

/* 命令行输出 */
.cmd { color: var(--fg); white-space: pre-wrap; word-break: break-word; }
.prompt { color: var(--fg); font-weight: 700; }
.dim { color: var(--dim); }
.rule { border: none; border-top: 1px dashed var(--border); margin: 14px 0; }
.lk { color: var(--fg); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.lk:hover { background: var(--sel); }

/* 小关进度点（间隔加大） */
.steps { display: inline-flex; flex-wrap: wrap; gap: 12px; margin: 4px 0; }
.step { cursor: pointer; color: var(--border); font-size: 15px; line-height: 1; }
.step:hover { color: var(--dim); }
.step.done { color: var(--fg); }
.step.cur { color: var(--fg); box-shadow: inset 0 -2px 0 var(--fg); }
.step.locked { color: var(--border-soft); cursor: not-allowed; }

.btn {
  font-family: inherit;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 7px 14px;
  font-size: 13.5px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.15s;
}
.btn:hover:not(:disabled) { background: var(--sel); border-color: var(--fg); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-primary:hover:not(:disabled) { background: var(--dim); border-color: var(--dim); }

.input-line {
  display: flex;
  align-items: flex-start;
  margin: 6px 0 0;
}
.input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.8;
  padding: 0;
  margin: 0 0 0 6px;
  resize: none;
  overflow: hidden;
  caret-color: var(--fg);
}
.input::placeholder { color: var(--dim); }
.input:focus { box-shadow: none; }

.actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* 检查结果（唯一彩色：错误单词高亮） */
.diff { font-size: 15px; line-height: 1.95; word-break: break-word; }
.w.ok { color: var(--fg); }
.w.bad {
  color: var(--err);
  background: var(--err-soft);
  border-radius: 3px;
  padding: 0 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ok-line { color: var(--fg); margin-top: 12px; font-size: 16px; font-weight: 700; }
.bad-line { color: var(--dim); margin-top: 12px; }
.pwd { color: var(--fg); font-weight: 800; letter-spacing: 1px; }

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #eee;
  border: 1px solid #444;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--mono);
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   解锁面板
   ============================================================ */
.unlock-panel {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.unlock-card {
  width: min(380px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.unlock-title { font-weight: 800; font-size: 15px; color: var(--fg); }
.unlock-desc { font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.unlock-input {
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: 6px;
  text-align: center;
  padding: 10px;
  background: var(--bg-deep);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 8px;
  outline: none;
}
.unlock-input:focus { border-color: var(--fg); }
.unlock-msg { font-size: 12.5px; color: var(--err); min-height: 18px; }
.unlock-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 600px) {
  .map-header { padding: 12px 14px; }
  .map-tools { width: 100%; }
  #termView { padding: 8px; }
  #term { height: 96vh; }
  .term-actions { margin-left: 0; }
}