/* ============================================================
   PYTHON QUEST · 小蛇大冒险 —— 3A 风格界面
   ============================================================ */
:root {
  --bg: #05070f;
  --panel: rgba(16, 20, 38, .82);
  --panel-solid: #101426;
  --line: rgba(120, 160, 255, .18);
  --line-strong: rgba(140, 200, 255, .38);
  --text: #e8edff;
  --muted: #8b95c4;
  --gold: #ffd24a;
  --cyan: #6ff0ff;
  --violet: #a77bff;
  --red: #ff5c74;
  --green: #4ce39a;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text); font-family: var(--sans);
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
kbd {
  font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 5px;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line);
}
button { font-family: inherit; cursor: pointer; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(140, 170, 255, .25); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================ 布局 ============================ */
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  height: 100vh;
  width: 100vw;
}
.viewport { position: relative; overflow: hidden; background: #05070f; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ============================ HUD ============================ */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .4s ease; }
.hud.live { opacity: 1; }
.hud > * { pointer-events: none; }
.hud button { pointer-events: auto; }
.hud-tl { position: absolute; top: 18px; left: 18px; }
.hud-tr { position: absolute; top: 18px; right: 18px; display: flex; align-items: center; gap: 8px; }
.hud-bl { position: absolute; left: 20px; bottom: 26px; display: flex; flex-direction: column; gap: 8px; }
.hud-bc { position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px; }

.mission-card {
  min-width: 268px; max-width: 330px;
  padding: 12px 14px 13px;
  background: linear-gradient(135deg, rgba(14, 19, 40, .88), rgba(20, 26, 52, .72));
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  backdrop-filter: blur(9px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: slideLeft .5s cubic-bezier(.2, .9, .25, 1);
}
.mc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mc-code {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: #06121f;
  background: var(--gold); padding: 2px 8px; border-radius: 4px; font-weight: 700;
}
.mc-biome { font-size: 10px; letter-spacing: 1.6px; color: var(--muted); }
.mc-name { font-size: 17px; font-weight: 700; letter-spacing: .5px; }
.mc-obj { font-size: 11.5px; color: #b9c2ea; margin: 4px 0 9px; line-height: 1.5; }
.mc-rows { display: flex; flex-direction: column; gap: 5px; }
.mc-row { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 1.2px; color: var(--muted); }
.mc-row b { color: var(--text); font-size: 12px; letter-spacing: 0; }
.mc-row i { font-style: normal; }
.meter { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--green), var(--gold)); transition: width .25s ease; }

.icon-btn {
  width: 34px; height: 34px; border-radius: 10px; font-size: 14px;
  background: rgba(14, 19, 40, .8); color: var(--text);
  border: 1px solid var(--line); backdrop-filter: blur(8px);
  transition: transform .14s, border-color .14s, background .14s;
}
.icon-btn:hover { transform: translateY(-2px); border-color: var(--line-strong); background: rgba(30, 40, 75, .9); }
.star-chip {
  font-size: 12px; color: var(--muted); padding: 7px 12px; border-radius: 10px;
  background: rgba(14, 19, 40, .8); border: 1px solid var(--line); backdrop-filter: blur(8px);
}
.star-chip b { color: var(--gold); font-size: 14px; }
.star-chip s { text-decoration: none; opacity: .6; }

.rank-stars { display: flex; gap: 6px; font-size: 22px; text-shadow: 0 0 12px rgba(255, 210, 74, .7); }
.rank-stars span { color: #3a4270; transition: color .3s, transform .3s; display: inline-block; }
.rank-stars span.on { color: var(--gold); }
.rank-stars span.pop { animation: starPop .55s cubic-bezier(.2, 1.5, .4, 1); }
.combo {
  align-self: flex-start; font-size: 12px; letter-spacing: 2px; color: #06121f;
  background: linear-gradient(120deg, var(--cyan), var(--gold));
  padding: 4px 10px; border-radius: 6px; font-weight: 700;
  animation: popIn .3s ease;
}
.combo b { font-size: 14px; }

.ticker {
  font-size: 12px; color: #cfd7ff; padding: 7px 16px; border-radius: 999px;
  background: rgba(10, 14, 30, .8); border: 1px solid var(--line);
  backdrop-filter: blur(8px); white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.ticker.warn { color: #ffd9df; border-color: rgba(255, 92, 116, .5); }
.ticker.good { color: #d8ffe9; border-color: rgba(76, 227, 154, .5); }

.hud-banner {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; padding: 18px 40px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .55), transparent);
  animation: bannerIn .45s ease;
}
.hud-banner b {
  display: block; font-size: 34px; letter-spacing: 8px; color: var(--red);
  text-shadow: 0 0 24px rgba(255, 92, 116, .7);
}
.hud-banner span { display: block; margin-top: 6px; font-size: 13px; color: #ffd7de; letter-spacing: 1px; }
.hud-banner.good b { color: var(--gold); text-shadow: 0 0 30px rgba(255, 210, 74, .8); }

.rank-pop {
  position: absolute; top: 50%; right: 14%; transform: translateY(-50%);
  text-align: center; animation: popIn .5s cubic-bezier(.2, 1.4, .4, 1);
}
.rank-pop b {
  display: block; font-size: 62px; line-height: 1; font-style: italic;
  color: var(--gold); text-shadow: 0 0 30px rgba(255, 210, 74, .8);
}
.rank-pop span { font-size: 11px; letter-spacing: 4px; color: var(--muted); }

.letterbox {
  position: absolute; left: 0; right: 0; height: 0; background: #000;
  z-index: 8; pointer-events: none; transition: height .45s cubic-bezier(.3, .9, .3, 1);
}
.letterbox.top { top: 0; }
.letterbox.bottom { bottom: 0; }
.letterbox.show { height: 9vh; }

/* ============================ 代码面板 ============================ */
.ide {
  display: flex; flex-direction: column; min-width: 0; height: 100vh;
  background: linear-gradient(180deg, #0c1024, #080b18);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 40px rgba(0, 0, 0, .5);
}
.ide-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}
.tabs { display: flex; align-items: center; gap: 8px; }
.tab {
  font-family: var(--mono); font-size: 12px; padding: 5px 11px; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, rgba(111, 240, 255, .16), transparent);
  border: 1px solid var(--line); border-bottom: none; color: var(--cyan);
}
.tab-dim { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 1px; }
.ide-btns { display: flex; align-items: center; gap: 6px; }
select {
  font-family: inherit; font-size: 11px; padding: 6px 7px; border-radius: 8px;
  background: #141a33; color: var(--text); border: 1px solid var(--line);
}
.btn-run {
  font-size: 12.5px; font-weight: 700; letter-spacing: .5px;
  padding: 8px 16px; border-radius: 10px; border: 1px solid #ffe08a;
  background: linear-gradient(120deg, #ffe07a, #ffb020);
  color: #2b1f00;
  box-shadow: 0 0 18px rgba(255, 200, 60, .35);
  transition: transform .14s, box-shadow .14s;
}
.btn-run:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 26px rgba(255, 200, 60, .6); }
.btn-run:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn-sq {
  width: 32px; height: 32px; border-radius: 9px; font-size: 13px;
  background: #141a33; color: var(--text); border: 1px solid var(--line);
}
.btn-sq:hover:not(:disabled) { border-color: var(--line-strong); }
.btn-sq:disabled { opacity: .4; cursor: not-allowed; }

.editor-wrap {
  display: flex; flex: 1 1 auto; min-height: 150px;
  background: #06080f; border-bottom: 1px solid var(--line); overflow: hidden;
}
.gutter {
  flex: 0 0 auto; padding: 12px 8px 12px 12px; text-align: right;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.75;
  color: #39406b; background: rgba(255, 255, 255, .015);
  border-right: 1px solid rgba(255, 255, 255, .05); user-select: none; overflow: hidden;
}
.code-area { position: relative; flex: 1 1 auto; min-width: 0; }
.code-area pre.highlight, .code-area textarea {
  position: absolute; inset: 0; margin: 0; padding: 12px 14px;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.75; tab-size: 4;
  white-space: pre; overflow: auto; border: 0;
}
.code-area pre.highlight { pointer-events: none; color: #d7ddff; }
.code-area textarea {
  background: transparent; color: transparent; caret-color: var(--gold);
  resize: none; outline: none; z-index: 2; -webkit-text-fill-color: transparent;
}
.code-area textarea::selection { background: rgba(111, 240, 255, .3); }
.code-line { display: block; min-height: 1.75em; }
.code-line.active { background: rgba(255, 210, 74, .14); box-shadow: inset 3px 0 0 var(--gold); }
.code-line.error-line { background: rgba(255, 92, 116, .18); box-shadow: inset 3px 0 0 var(--red); }
.tok-kw { color: #ff79c6; font-weight: 600; }
.tok-str { color: #a1f7a1; }
.tok-num { color: #ffb86c; }
.tok-com { color: #4f577f; font-style: italic; }
.tok-builtin { color: #6ff0ff; }
.tok-func { color: #ffd24a; }
.tok-def { color: #c9a4ff; font-weight: 600; }

.ide-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; font-size: 11px; color: var(--muted);
  border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .015);
}
.ide-tools { display: flex; gap: 6px; padding: 8px 12px; flex-wrap: wrap; }
.ide-tools button {
  font-size: 11.5px; padding: 6px 10px; border-radius: 9px;
  background: #141a33; border: 1px solid var(--line); color: #cdd6ff;
  transition: transform .12s, border-color .12s;
}
.ide-tools button:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.hint-box {
  margin: 0 12px 8px; padding: 8px 11px; font-size: 12px; line-height: 1.7;
  color: #ffeaa7; background: rgba(255, 210, 74, .08);
  border-left: 3px solid var(--gold); border-radius: 8px; max-height: 130px; overflow: auto;
}
.console-panel { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 96px; }
.log-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 2px;
  color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
}
.link-btn { background: none; border: none; color: var(--cyan); font-size: 10.5px; letter-spacing: 1px; }
.console {
  flex: 1 1 auto; min-height: 60px; max-height: 150px; overflow: auto;
  padding: 8px 12px; font-family: var(--mono); font-size: 12px; line-height: 1.6;
}
.msg { white-space: pre-wrap; word-break: break-word; animation: fadeIn .16s ease; }
.msg.info { color: #7f89b8; }
.msg.out { color: #cfe4ff; }
.msg.ok { color: var(--green); }
.msg.err { color: #ff8fa1; }
.msg .tag { color: #5b648f; }

.ability-wrap { flex: 0 0 auto; border-top: 1px solid var(--line); padding: 8px 12px 12px; overflow: auto; max-height: 34vh; }
.ability-head { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: 2px; color: var(--muted); margin-bottom: 7px; }
.ability-head .dim { letter-spacing: 0; }
.ability-bar { display: flex; flex-direction: column; gap: 8px; }
.ab-group > .ab-title { font-size: 10px; letter-spacing: 1.4px; color: #6d76a6; margin-bottom: 5px; }
.ab-items { display: flex; flex-wrap: wrap; gap: 6px; }
.ab {
  font-family: var(--mono); font-size: 11.5px; padding: 6px 9px; border-radius: 8px;
  background: linear-gradient(180deg, #1a2140, #131834);
  border: 1px solid var(--line); color: #cfd8ff;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.ab:hover { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 0 14px rgba(111, 240, 255, .25); color: #fff; }
.ab.kw { border-color: rgba(167, 123, 255, .4); color: #d9c7ff; }
.ab.kw:hover { border-color: var(--violet); box-shadow: 0 0 14px rgba(167, 123, 255, .3); }

/* ============================ 通用弹层 ============================ */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: radial-gradient(1200px 700px at 50% 30%, rgba(30, 40, 80, .55), rgba(3, 5, 12, .92));
  backdrop-filter: blur(6px);
  animation: fadeIn .3s ease;
}
.panel-modal {
  width: min(460px, 100%); max-height: 88vh; overflow: auto;
  padding: 22px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(24, 30, 56, .96), rgba(12, 16, 32, .98));
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.panel-modal.wide { width: min(760px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-head h2 { margin: 0; font-size: 19px; letter-spacing: 1px; }
.x-btn { background: none; border: none; color: var(--muted); font-size: 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.big-btn {
  font-size: 13.5px; padding: 11px 22px; border-radius: 12px;
  background: linear-gradient(180deg, #1c2344, #141a33);
  border: 1px solid var(--line); color: var(--text);
  letter-spacing: .5px; transition: transform .14s, border-color .14s, box-shadow .14s;
}
.big-btn:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.big-btn.primary {
  background: linear-gradient(120deg, #ffe07a, #ffb020); color: #2b1f00; font-weight: 700;
  border-color: #ffe08a; box-shadow: 0 0 26px rgba(255, 200, 60, .35);
}
.big-btn.primary:hover { box-shadow: 0 0 40px rgba(255, 200, 60, .6); }
.pause-btns { display: flex; flex-direction: column; gap: 10px; }
.pause-btns .big-btn { width: 100%; }

/* ============================ 开机动画 ============================ */
.overlay.boot { background: #000; z-index: 60; }
.studio { text-align: center; animation: bootIn 1.1s cubic-bezier(.2, .9, .3, 1); }
.studio-logo {
  font-size: 42px; font-weight: 800; letter-spacing: 6px; color: #fff;
  text-shadow: 0 0 40px rgba(120, 190, 255, .8);
}
.studio-logo span { color: var(--gold); margin-left: 12px; font-weight: 300; letter-spacing: 14px; }
.studio-sub { margin-top: 14px; font-size: 11px; letter-spacing: 9px; color: #7e88b8; }
.boot-bar { width: 220px; height: 2px; margin: 30px auto 0; background: rgba(255, 255, 255, .12); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--gold)); animation: bootBar 1.9s ease forwards; }

/* ============================ 标题界面 ============================ */
.title-screen { background: radial-gradient(1200px 800px at 50% 10%, #16204a 0%, #05070f 70%); z-index: 55; }
.title-bg { position: absolute; inset: 0; }
#titleFx { width: 100%; height: 100%; display: block; }
.title-inner { position: relative; text-align: center; z-index: 2; }
.logo-snake { font-size: 54px; animation: floatY 3.4s ease-in-out infinite; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6)); }
.game-logo {
  margin: 6px 0 2px; font-size: clamp(38px, 6vw, 76px); font-weight: 800; letter-spacing: 6px;
  background: linear-gradient(180deg, #ffffff 20%, #9fd6ff 60%, #6f9dff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 34px rgba(120, 190, 255, .45));
}
.game-logo span {
  display: block; font-size: .52em; letter-spacing: 16px; font-weight: 300;
  background: linear-gradient(90deg, var(--gold), #ff9f43);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.game-sub { margin: 4px 0 16px; font-size: 13px; letter-spacing: 2px; color: #a9b4dd; }
.title-stats { display: flex; gap: 18px; justify-content: center; font-size: 12.5px; color: var(--muted); margin-bottom: 22px; }
.title-stats b { color: var(--gold); }
.title-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.title-foot { margin-top: 26px; font-size: 11px; color: #5d6690; letter-spacing: .5px; }

/* ============================ 关卡选择 ============================ */
.level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.level-card {
  position: relative; text-align: left; padding: 13px; border-radius: 13px;
  border: 1px solid var(--line); color: var(--text);
  background: linear-gradient(160deg, rgba(38, 48, 92, .8), rgba(14, 18, 36, .9));
  transition: transform .16s, border-color .16s, box-shadow .16s;
  overflow: hidden;
}
.level-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.level-card .lc-code { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--muted); }
.level-card .lc-name { font-size: 14px; font-weight: 700; margin: 5px 0 3px; }
.level-card .lc-concept { font-size: 11px; color: var(--violet); }
.level-card .lc-stars { margin-top: 8px; font-size: 13px; letter-spacing: 2px; color: var(--gold); }
.level-card .lc-biome {
  position: absolute; right: -14px; top: -14px; width: 54px; height: 54px; border-radius: 50%;
  opacity: .5; filter: blur(6px);
}
.level-card.cleared::after {
  content: "CLEARED"; position: absolute; right: 8px; bottom: 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--green);
}

/* ============================ 任务简报 ============================ */
.brief-card {
  width: min(560px, 100%); padding: 28px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, rgba(22, 28, 54, .96), rgba(10, 13, 26, .98));
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  animation: briefIn .55s cubic-bezier(.2, .9, .25, 1);
}
.brief-code { font-family: var(--mono); font-size: 11px; letter-spacing: 5px; color: var(--gold); }
.brief-card h2 { margin: 8px 0 6px; font-size: 26px; letter-spacing: 1px; }
.brief-concept {
  display: inline-block; font-size: 11px; color: var(--violet);
  border: 1px solid rgba(167, 123, 255, .4); background: rgba(167, 123, 255, .12);
  padding: 3px 10px; border-radius: 999px; margin-bottom: 12px;
}
.brief-text { font-size: 13.5px; line-height: 1.8; color: #c8d0f4; margin: 0 0 16px; }
.brief-goal { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin-bottom: 20px; }
.brief-goal div { font-size: 11px; color: var(--muted); }
.brief-goal div span { display: block; letter-spacing: 1.6px; font-size: 10px; margin-bottom: 3px; }
.brief-goal div b { color: var(--text); font-size: 12.5px; letter-spacing: 0; }
.brief-hint { margin-top: 14px; font-size: 11px; color: #5d6690; }

/* ============================ 结算 ============================ */
.complete-card {
  width: min(560px, 100%); max-height: 90vh; overflow: auto; text-align: center;
  padding: 24px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(26, 32, 60, .97), rgba(10, 13, 26, .99));
  border: 1px solid rgba(255, 210, 74, .35);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .8), 0 0 60px rgba(255, 200, 60, .12);
  animation: briefIn .5s cubic-bezier(.2, .9, .25, 1);
}
.complete-banner {
  font-family: var(--mono); font-size: 11px; letter-spacing: 7px; color: var(--gold);
  padding-bottom: 10px; border-bottom: 1px solid rgba(255, 210, 74, .22); margin-bottom: 14px;
}
.complete-card h2 { margin: 0 0 12px; font-size: 21px; }
.win-stars { display: flex; justify-content: center; gap: 12px; font-size: 42px; margin-bottom: 6px; }
.win-stars span { color: #333b66; display: inline-block; }
.win-stars span.on { color: var(--gold); text-shadow: 0 0 26px rgba(255, 210, 74, .85); }
.win-stars span.pop { animation: starPop .6s cubic-bezier(.2, 1.6, .4, 1); }
.rank-badge {
  font-size: 46px; font-style: italic; font-weight: 800; line-height: 1; margin: 4px 0 8px;
  color: var(--gold); text-shadow: 0 0 30px rgba(255, 210, 74, .7);
}
.win-stats { display: flex; justify-content: center; gap: 20px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.win-stats b { color: var(--text); }
.win-code {
  margin: 14px 0 4px; padding: 11px 13px; text-align: left; max-height: 132px; overflow: auto;
  font-family: var(--mono); font-size: 11.5px; color: #a9b6ff; white-space: pre;
  background: #06080f; border: 1px solid var(--line); border-radius: 10px;
}

/* ============================ 手册 ============================ */
.help-lead { color: #dbe2ff; font-size: 13.5px; }
.help-list { color: #c8d0f4; font-size: 13px; line-height: 1.9; padding-left: 20px; }
.help-list code { background: rgba(255, 255, 255, .08); padding: 1px 5px; border-radius: 5px; font-size: 12px; }
.panel-modal h3 { margin: 18px 0 8px; font-size: 13px; letter-spacing: 2px; color: var(--cyan); }
.api-table { display: grid; gap: 3px; font-size: 12.5px; }
.api-row { display: grid; grid-template-columns: minmax(190px, 40%) 1fr; gap: 10px; padding: 4px 0; border-bottom: 1px dashed rgba(255, 255, 255, .07); }
.api-row code { font-family: var(--mono); color: var(--gold); }
.api-row span { color: var(--muted); }
.snippet {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.75; padding: 12px;
  background: #06080f; border: 1px solid var(--line); border-radius: 10px;
  color: #b9c2ff; white-space: pre; overflow: auto;
}

/* ============================ 动画 ============================ */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes starPop { 0% { transform: scale(.2) rotate(-25deg); } 60% { transform: scale(1.35) rotate(6deg); } 100% { transform: scale(1); } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes bootIn { from { opacity: 0; transform: scale(.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bootBar { from { width: 0; } to { width: 100%; } }
@keyframes bannerIn { from { opacity: 0; transform: translate(-50%, -50%) scale(1.2); letter-spacing: 18px; } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes briefIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

/* ============================ 响应式 ============================ */
@media (max-width: 1080px) {
  .app { grid-template-columns: 1fr; grid-template-rows: minmax(280px, 44vh) 1fr; }
  .ide { height: auto; border-left: none; border-top: 1px solid var(--line); }
  .editor-wrap { min-height: 120px; }
  .mission-card { min-width: 0; max-width: 250px; padding: 9px 11px; }
  .mc-name { font-size: 14px; }
  .mc-obj { display: none; }
  .hud-bc { display: none; }
}

/* ============================ v2 新增：调试 / 补全 / 语法检查 ============================ */
#mcKeyRow b { color: var(--gold); }
#mcKeyRow.empty b { color: var(--muted); }
#mcLinesRow b.over { color: var(--red); }
.btn-sq.active { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(111, 240, 255, .3); }

.ide-status { gap: 10px; flex-wrap: nowrap; }
#editorStatus { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.syntax-ok { color: var(--green); font-size: 11px; flex: 1 1 auto; text-align: right; }
.syntax-bad { color: var(--red); font-size: 11px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.code-line.syntax-error { text-decoration: underline wavy rgba(255, 107, 129, .85); text-underline-offset: 4px; }
.gutter div.err { color: var(--red); font-weight: 700; }

/* 自动补全 */
.ac-pop {
  position: absolute; z-index: 20; min-width: 210px; max-height: 200px; overflow: auto;
  background: rgba(10, 14, 30, .97); border: 1px solid rgba(111, 240, 255, .45);
  border-radius: 10px; padding: 4px; box-shadow: 0 16px 40px rgba(0, 0, 0, .65), 0 0 20px rgba(111, 240, 255, .12);
  backdrop-filter: blur(8px); animation: fadeIn .1s ease;
}
.ac-item { display: flex; gap: 8px; align-items: baseline; padding: 5px 8px; border-radius: 7px; cursor: pointer; }
.ac-item code { font-family: var(--mono); font-size: 12px; color: var(--gold); white-space: nowrap; }
.ac-item span { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-item.on { background: linear-gradient(90deg, rgba(111, 240, 255, .18), rgba(111, 240, 255, .04)); }
.ac-item.on code { color: #fff; }
.ac-item.on span { color: #cfe4ff; }

/* 设置开关 */
.settings { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 8px; }
.settings-title { font-size: 10.5px; letter-spacing: 2px; color: var(--muted); }
.switch { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #cdd6ff; cursor: pointer; }
.switch input { display: none; }
.switch span {
  width: 36px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, .12);
  border: 1px solid var(--line); position: relative; flex: 0 0 auto; transition: background .18s, border-color .18s;
}
.switch span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #8b95c4; transition: transform .18s, background .18s;
}
.switch input:checked + span { background: rgba(111, 240, 255, .25); border-color: var(--cyan); }
.switch input:checked + span::after { transform: translateX(16px); background: var(--cyan); }

/* 成绩档案 */
.profile-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 4px; }
.pf-stat {
  padding: 12px 10px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, rgba(40, 50, 95, .55), rgba(16, 20, 38, .7));
  border: 1px solid var(--line);
}
.pf-stat b { display: block; font-size: 24px; color: var(--gold); text-shadow: 0 0 18px rgba(255, 210, 74, .4); }
.pf-stat span { font-size: 10.5px; color: var(--muted); letter-spacing: .5px; }
.pf-stat i { font-style: normal; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ach {
  display: flex; gap: 9px; align-items: center; padding: 9px 10px; border-radius: 11px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02); opacity: .45;
  transition: opacity .2s, border-color .2s, box-shadow .2s;
}
.ach .ach-icon { font-size: 19px; filter: grayscale(1); }
.ach b { display: block; font-size: 12px; }
.ach span { font-size: 10px; color: var(--muted); }
.ach.on { opacity: 1; border-color: rgba(255, 210, 74, .45); box-shadow: 0 0 18px rgba(255, 210, 74, .12); }
.ach.on .ach-icon { filter: none; }
.ach.on b { color: var(--gold); }
.pf-table { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.pf-row { display: grid; grid-template-columns: 46px 1fr 74px 84px; gap: 8px; align-items: center; padding: 5px 2px; border-bottom: 1px dashed rgba(255, 255, 255, .06); }
.pf-row.head { color: var(--muted); font-size: 10px; letter-spacing: 1.4px; border-bottom: 1px solid var(--line); }
.pf-row .pf-code { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.pf-row .pf-name { color: #dfe4ff; }
.pf-row .pf-stars { color: var(--gold); letter-spacing: 1px; }
.pf-row .pf-best { color: var(--muted); font-family: var(--mono); font-size: 11px; }