/* ===== 造星计划 Orbit Builder · 骨架样式 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: #0a0f1a;
  color: #d7e0ee;
  overflow: hidden;
}

/* ---------- 顶栏 ---------- */
#topbar {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 14px;
  background: linear-gradient(180deg, #131c2e, #0e1524);
  border-bottom: 1px solid #233452;
}
.brand { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.brand .logo { font-size: 20px; }
.brand .title { font-size: 17px; font-weight: 700; letter-spacing: 1px; color: #fff; white-space: nowrap; }
.brand .title em { font-style: normal; font-size: 12px; color: #7fa6d9; margin-left: 6px; }
.missionTag {
  font-size: 12px; color: #a9c7f2; background: #1b2a45;
  border: 1px solid #2d4a77; border-radius: 12px; padding: 3px 10px; white-space: nowrap;
}
.controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ctrlLabel { font-size: 12px; color: #8fa3c4; display: flex; align-items: center; gap: 5px; }
select {
  background: #17233b; color: #d7e0ee; border: 1px solid #2d4a77;
  border-radius: 6px; padding: 3px 6px; font-size: 12px;
}
.btn {
  background: #1a2942; color: #d7e0ee; border: 1px solid #33507f;
  border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer;
  transition: background .15s, transform .05s;
}
.btn:hover { background: #24395e; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: #1f6feb; border-color: #3d8bff; color: #fff; font-weight: 600; }
.btn.primary:hover { background: #2b7df5; }

.chip {
  font-size: 12px; font-weight: 600; border-radius: 12px; padding: 4px 12px;
  border: 1px solid transparent; white-space: nowrap;
}
.chip.idle    { background: #223048; color: #9fb2cf; }
.chip.running { background: #14532d; color: #86efac; border-color: #22c55e; animation: pulse 1.1s infinite; }
.chip.paused  { background: #713f12; color: #fcd34d; border-color: #f59e0b; }
.chip.success { background: #1e3a8a; color: #bfdbfe; border-color: #3b82f6; }
.chip.fail    { background: #7f1d1d; color: #fecaca; border-color: #ef4444; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------- 主体布局 ---------- */
#main { display: flex; height: calc(100vh - 54px); min-height: 0; }

#left {
  width: 470px; flex: 0 0 470px; border-right: 1px solid #233452;
  background: #101827; display: flex; flex-direction: column; min-height: 0;
}
#blocklyDiv { flex: 1; min-height: 0; }
#wsHint {
  font-size: 12px; line-height: 1.7; color: #8fa3c4;
  border-top: 1px solid #233452; padding: 8px 12px; background: #0d1524;
}
#wsHint b { color: #ffd76a; }

#stage { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #0a0f1a; }

/* 任务简报 */
#brief {
  padding: 8px 14px; background: #0d1524; border-bottom: 1px solid #233452;
}
.briefTitle { font-size: 14px; font-weight: 700; color: #7fd1ff; }
#briefText { font-size: 12.5px; color: #b9c6de; margin-top: 3px; line-height: 1.6; }

/* 共用"航天小贴士"提示条（0-3 → 1-1 轨道概念铺垫 / 1-2 实时倾角预览） */
#tipBar {
  padding: 5px 14px; font-size: 12px; line-height: 1.6; color: #ffe9a8;
  background: #221d0d; border-bottom: 1px solid #5b4a1e;
}
#tipBar.hidden { display: none; }
#tipBar.ok   { color: #d5ffe6; background: #0e3a24; border-bottom-color: #2f8f56; }
#tipBar.warn { color: #ffe2b3; background: #2a200c; border-bottom-color: #8a6a1f; }

/* ---------- 真实任务档案（可折叠对照卡） ---------- */
.archiveRow { padding: 4px 14px; background: #0b1220; border-bottom: 1px solid #1c2942; }
.archiveBtn {
  font-size: 11.5px; color: #a9c7f2; background: #131f35;
  border: 1px solid #2d4a77; border-radius: 6px; padding: 3px 10px; cursor: pointer;
}
.archiveBtn:hover { background: #1a2b47; color: #d3e5ff; }
.archiveBtn.hidden { display: none; }
.archiveCard {
  padding: 8px 14px; background: #0d1524; border-bottom: 1px solid #233452;
}
.archiveCard.hidden { display: none; }
.archiveTitle { font-size: 12.5px; font-weight: 700; color: #7fd1ff; margin-bottom: 3px; }
.archiveText { font-size: 12px; line-height: 1.7; color: #b9c6de; }

/* ---------- 右上角：矢量显示开关 ---------- */
.vecToggle {
  display: flex; align-items: center; gap: 4px;
  background: #16233b; border: 1px solid #2d4a77; border-radius: 8px;
  padding: 3px 6px;
}
.vtLabel { font-size: 11px; color: #8fa3c4; margin-right: 2px; }
.vtBtn {
  font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 5px;
  background: #223048; color: #9fb2cf; border: 1px solid #2d4a77; cursor: pointer;
}
.vtBtn.on { background: #1f6feb; color: #fff; border-color: #3d8bff; font-weight: 700; }
.vtBtn.future { opacity: .5; cursor: not-allowed; font-style: italic; }

/* Cesium 容器与 HUD 悬浮层 */
#cesiumWrap { flex: 1; position: relative; min-height: 0; }
#cesiumContainer { position: absolute; inset: 0; }
#cesiumContainer .cesium-viewer-bottom { display: none; }

#teleHud {
  position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px;
  pointer-events: none;
}
.tile {
  background: rgba(8, 14, 26, .78); border: 1px solid rgba(80,120,190,.4);
  border-radius: 8px; padding: 6px 12px; min-width: 96px; backdrop-filter: blur(2px);
}
.tile .k { display: block; font-size: 11px; color: #7fa6d9; }
.tile .v { display: block; font-size: 18px; font-weight: 700; font-family: Consolas, monospace; color: #fff; }

#consoleHud {
  position: absolute; top: 12px; right: 12px; width: 330px; max-height: 150px;
  display: flex; flex-direction: column; background: rgba(8, 14, 26, .72);
  border: 1px solid rgba(80,120,190,.35); border-radius: 8px; overflow: hidden;
  backdrop-filter: blur(2px);
}
.consoleTitle { font-size: 11px; color: #9fb2cf; padding: 4px 10px; border-bottom: 1px solid rgba(80,120,190,.25); }
#logBox { overflow-y: auto; padding: 4px 10px; font-size: 11.5px; line-height: 1.65; font-family: Consolas, monospace; }
#logBox .lg-info  { color: #c9d6ec; }
#logBox .lg-ok    { color: #7ee2a8; }
#logBox .lg-warn  { color: #ffd76a; }
#logBox .lg-bad   { color: #ff8d8d; }
#logBox .lg-t     { color: #55698c; }

#hintHud {
  position: absolute; right: 12px; bottom: 12px; font-size: 11px; color: #6d83a6;
  background: rgba(8,14,26,.5); padding: 4px 8px; border-radius: 6px; pointer-events: none;
}

/* 结算弹窗 */
#overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 16, .62); z-index: 50;
}
#overlay.hidden { display: none; }
.card {
  width: min(540px, 92%); background: linear-gradient(180deg, #16223a, #0e1730);
  border: 1px solid #33507f; border-radius: 14px; padding: 22px 26px;
  box-shadow: 0 18px 60px rgba(0,0,0,.6); text-align: center;
}
.resultTitle { font-size: 22px; font-weight: 800; color: #fff; }
#starRow { font-size: 34px; letter-spacing: 10px; margin: 6px 0 2px; }
.star { color: #3a4a66; text-shadow: 0 0 0 transparent; }
.star.lit { color: #ffd76a; text-shadow: 0 0 14px rgba(255, 215, 106, .75); }
.resultDetail { font-size: 13px; color: #b9c6de; line-height: 1.8; margin: 6px 0 10px; }
.resultDetail b { color: #fff; }
.knowCard {
  text-align: left; background: #0c1424; border: 1px solid #27406b; border-radius: 8px;
  padding: 10px 14px; font-size: 12.5px; line-height: 1.7; color: #a9c7f2; margin-bottom: 14px;
}
.knowCard .t { font-weight: 700; color: #7fd1ff; }
.cardBtns { display: flex; gap: 10px; justify-content: center; }

/* 响应式兜底：太窄时收窄积木面板 */
@media (max-width: 1050px) {
  #left { width: 360px; flex-basis: 360px; }
  #consoleHud { width: 250px; }
}

/* ============================================================
 * 以下为「关卡选择页 / 多关架构」新增样式
 * ============================================================ */

/* ---------- 通用工具 ---------- */
.hidden { display: none !important; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* 返回选关按钮 */
.backLink {
  font-size: 12px; color: #7fd1ff; text-decoration: none; white-space: nowrap;
  border: 1px solid #2d4a77; border-radius: 6px; padding: 4px 8px; background: #13203a;
}
.backLink:hover { background: #1b2f52; color: #bfe3ff; }

/* ---------- 首页（关卡选择）---------- */
body.home { overflow: auto; }
#homeMain {
  height: calc(100vh - 54px); overflow-y: auto;
  padding: 18px 26px 40px; background: radial-gradient(1200px 600px at 70% -10%, #101c33 0%, #0a0f1a 60%);
}
.statRight { margin-left: auto; display: flex; gap: 8px; }
.statPill {
  font-size: 12px; color: #a9c7f2; background: #1b2a45;
  border: 1px solid #2d4a77; border-radius: 12px; padding: 4px 10px; white-space: nowrap;
}

.intro {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  background: linear-gradient(90deg, #111d33, #0d1524); border: 1px solid #233452;
  border-radius: 12px; padding: 14px 20px; margin-bottom: 22px;
}
.introText h1 { font-size: 19px; color: #fff; letter-spacing: 1px; }
.introText p { font-size: 12.5px; color: #93a6c6; margin-top: 4px; line-height: 1.7; }
.progressWrap { margin-left: auto; min-width: 230px; }
.progressLabel { font-size: 12px; color: #9fb2cf; margin-bottom: 4px; text-align: right; }
.progressTrack { height: 10px; background: #16233b; border: 1px solid #27406b; border-radius: 6px; overflow: hidden; }
.progressFill { height: 100%; background: linear-gradient(90deg, #1f6feb, #7fd1ff); border-radius: 6px; transition: width .4s; }

.chap { margin-bottom: 26px; }
.chapHead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.chapIcon {
  font-size: 24px; width: 46px; height: 46px; flex: 0 0 46px;
  display: flex; align-items: center; justify-content: center;
  background: #131f35; border: 1px solid #2d4a77; border-radius: 10px;
}
.chapMeta h2 { font-size: 16px; color: #fff; letter-spacing: .5px; }
.chapMeta p { font-size: 12px; color: #8fa3c4; margin-top: 2px; }
.chapGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }

.lvlTile {
  text-align: left; cursor: pointer; font-family: inherit; color: inherit;
  background: linear-gradient(180deg, #141f35, #101827);
  border: 1px solid #233452; border-radius: 12px; padding: 12px 14px;
  transition: transform .08s, border-color .15s, box-shadow .15s;
}
.lvlTile.ready:hover {
  border-color: #3d8bff; transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(31, 111, 235, .18);
}
.lvlTile.planned { opacity: .58; filter: saturate(.55); }
.lvlTile.planned:hover { border-color: #5b4a1e; opacity: .75; }
.lvlTile .tHead { display: flex; align-items: center; justify-content: space-between; }
.lvlId {
  font-size: 12px; font-weight: 700; color: #7fd1ff; background: #12233c;
  border: 1px solid #27406b; border-radius: 6px; padding: 1px 7px;
}
.tStars { font-size: 13px; letter-spacing: 2px; }
.tStars i { font-style: normal; color: #3a4a66; }
.tStars i.on { color: #ffd76a; text-shadow: 0 0 8px rgba(255, 215, 106, .6); }
.lvlTile .tTitle { font-size: 15px; font-weight: 700; color: #fff; margin-top: 7px; }
.lvlTile .tSub { font-size: 12px; color: #93a6c6; margin-top: 2px; line-height: 1.5; min-height: 34px; }
.tFoot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; align-items: center; }
.tag { font-size: 10.5px; padding: 2px 7px; border-radius: 8px; white-space: nowrap; }
.tagFunc { background: #132a47; color: #7fc8ff; border: 1px solid #27406b; }
.tag.state.go { background: #0f3a23; color: #7ee2a8; border: 1px solid #1d6b3f; }
.tag.state.soon { background: #33270f; color: #e6b45a; border: 1px solid #6b521d; }
.tag.state.lock { background: #232a38; color: #9fb2cf; border: 1px solid #3a4a66; }
.lvlTile.ready.locked { opacity: .55; filter: saturate(.65); }
.lvlTile.ready.locked:hover { transform: none; border-color: #233452; box-shadow: none; }
#homeFoot { font-size: 11.5px; color: #5c7194; text-align: center; margin-top: 10px; }

/* toast 提示 */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  background: rgba(20, 32, 54, .96); color: #ffd76a;
  border: 1px solid #5b4a1e; padding: 10px 18px; border-radius: 10px;
  font-size: 13px; max-width: min(600px, 88vw); z-index: 200;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}

/* ---------- 开发中关卡占位屏 ---------- */
#plannedOverlay {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  background: #0a0f1a; padding: 20px;
}
#plannedOverlay.hidden { display: none; }
.plannedCard { width: min(560px, 94%); }
.plannedBadge {
  display: inline-block; font-size: 12px; font-weight: 600; color: #ffd76a;
  background: #33270f; border: 1px solid #6b521d; border-radius: 10px;
  padding: 3px 12px; margin-bottom: 12px;
}
#plannedTitle { font-size: 22px; margin-bottom: 6px; }

/* ---------- 单步模式（逐块观察动画）---------- */
#stepBar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; border-top: 1px solid #233452; background: #0b1220;
}
.btn.small { padding: 4px 10px; font-size: 12px; }
#btnStepMode.on {
  background: #35488a; border-color: #7fa6ff; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(127, 166, 255, .55);
}
.stepInfo { font-size: 11.5px; color: #93a6c6; flex: 1; min-width: 160px; line-height: 1.6; }
.stepInfo b { color: #ffd76a; }
.chip.step { background: #312e81; color: #c7d2fe; border-color: #6366f1; }