/* ============================================================
   季风线 · MONSOON LINE  —— 界面样式
   基调：军用航电 v2078 —— 深空蓝黑 / 荧光琥珀 / 冷绿
   ============================================================ */

:root{
  --bg:      #05080c;
  --panel:   #0a1016;
  --panel2:  #0d151d;
  --line:    #1e2c38;
  --line2:   #2d4252;
  --amber:   #ffb03a;
  --amber-d: #8a5c17;
  --green:   #4fe08a;
  --cy:      #45d6ff;
  --red:     #ff4d4d;
  --txt:     #b9c8d4;
  --txt-d:   #6b7d8c;
  --mono: "Consolas","DejaVu Sans Mono","Courier New",monospace;
  --cn: "Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;
}

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

html,body{
  width:100%; height:100%; overflow:hidden;
  background:var(--bg); color:var(--txt);
  font-family:var(--cn);
  -webkit-font-smoothing:antialiased;
}

/* 全局扫描线 / 暗角 */
body::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}

canvas#cv{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:1; }

/* ---------- 屏幕切换 ---------- */
.screen{
  position:fixed; inset:0; z-index:100;
  display:none; flex-direction:column;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(24,48,68,.55), transparent 60%),
    linear-gradient(160deg,#05080c 0%,#070d13 45%,#04070a 100%);
  padding:0;
}
.screen.active{ display:flex; animation:fadein .22s ease; }
@keyframes fadein{ from{opacity:0} to{opacity:1} }

/* ---------- 顶栏 / 底栏 ---------- */
.bar{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 22px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(20,38,54,.9), rgba(10,16,22,.7));
  font-family:var(--mono); letter-spacing:2px; font-size:13px;
  flex:0 0 auto;
}
.bar.bottom{ border-bottom:none; border-top:1px solid var(--line);
  background:linear-gradient(0deg, rgba(20,38,54,.9), rgba(10,16,22,.7));
  justify-content:flex-end; gap:12px; }
.bar-t{ color:var(--amber); text-shadow:0 0 8px rgba(255,176,58,.45); }
.bar-r{ color:var(--txt-d); font-size:12px; }
.bar-r b{ color:var(--cy); }

/* ---------- 按钮 ---------- */
.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:2px;
  padding:10px 20px; cursor:pointer; color:var(--txt);
  background:linear-gradient(180deg,#13202b,#0b1319);
  border:1px solid var(--line2); border-radius:2px;
  transition:.13s; position:relative;
}
.btn:hover{ color:#fff; border-color:var(--amber); background:linear-gradient(180deg,#1d2f3d,#101a22);
  box-shadow:0 0 14px rgba(255,176,58,.28); }
.btn:active{ transform:translateY(1px); }
.btn.primary{ color:#08111a; font-weight:700;
  background:linear-gradient(180deg,#ffc862,#e79a1e); border-color:#ffd489; }
.btn.primary:hover{ box-shadow:0 0 20px rgba(255,176,58,.6); }
.btn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }

/* ============================================================
   标题屏
   ============================================================ */
#scr-title{ align-items:center; justify-content:center; padding:40px; }
.boot{
  position:absolute; top:22px; left:26px; font-family:var(--mono);
  font-size:12px; line-height:1.9; color:#3d5566;
}
.bootline .ok{ color:var(--green); }
.bootline .warn{ color:var(--amber); }

.logo{
  font-family:var(--mono); font-size:clamp(56px,11vw,140px); font-weight:700;
  letter-spacing:.06em; line-height:.9; color:#eaf4fb;
  text-shadow:0 0 30px rgba(69,214,255,.35), 0 0 90px rgba(69,214,255,.14);
}
.logo2{ color:var(--amber); text-shadow:0 0 34px rgba(255,176,58,.55); }
.logo-cn{
  font-size:clamp(20px,3.4vw,42px); letter-spacing:.55em; color:#8fb4cc;
  margin-top:6px; text-indent:.55em; text-shadow:0 0 18px rgba(69,214,255,.3);
}
.logo-sub{
  font-family:var(--mono); font-size:13px; letter-spacing:6px; color:var(--txt-d);
  margin-top:14px;
}
.title-lore{
  max-width:760px; margin:34px auto 30px; text-align:center; line-height:2;
  font-size:15px; color:#93a7b6;
}
.title-lore b{ color:var(--cy); font-weight:600; }
.title-lore .red{ color:var(--red); font-weight:700; letter-spacing:1px; }
.menu{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.foot{
  position:absolute; bottom:18px; font-family:var(--mono); font-size:11px;
  color:#334a5a; letter-spacing:2px;
}

/* ============================================================
   机库
   ============================================================ */
.hangar-grid{ flex:1 1 auto; display:grid; grid-template-columns:340px 1fr; gap:0; min-height:0; }
.ac-list{
  border-right:1px solid var(--line); overflow-y:auto; padding:14px; background:rgba(6,11,16,.55);
}
.ac-card{
  padding:12px 14px; margin-bottom:9px; cursor:pointer; border:1px solid var(--line);
  background:linear-gradient(180deg,#0c141b,#080d12); border-left:3px solid var(--line2);
  transition:.13s;
}
.ac-card:hover{ border-color:var(--line2); background:linear-gradient(180deg,#13202b,#0b1319); }
.ac-card.sel{ border-color:var(--amber); border-left-color:var(--amber);
  background:linear-gradient(180deg,#1a2836,#0d161e); box-shadow:inset 0 0 26px rgba(255,176,58,.12); }
.ac-card .n{ font-family:var(--mono); font-size:15px; color:#dbe8f2; letter-spacing:1px; }
.ac-card.sel .n{ color:var(--amber); }
.ac-card .c{ font-family:var(--mono); font-size:11px; color:var(--txt-d); margin-top:3px; letter-spacing:1px; }
.ac-card .r{ font-size:12px; color:#6e8494; margin-top:5px; }

/* 机库详情面板：左上文字、右上俯视识别图、下方武器选择 */
.ac-panel{ overflow-y:auto; padding:22px 28px; display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  grid-template-areas:"main view" "weapons weapons";
  gap:20px 26px; align-content:start; }
.ac-main{ grid-area:main; min-width:0; }
.ac-view{ grid-area:view; min-width:0; }
.ac-weapons{ grid-area:weapons; min-width:0; }
#planCv{ width:100%; height:auto; display:block; border:1px solid var(--line);
  background:#070d12; }
/* 机库 3D 预览：与资料库详情页同一个渲染器，挂载跟着配置实时变 */
#hangar3d{ width:100%; height:220px; display:block; border:1px solid var(--line);
  background:#070d12; margin-bottom:10px; }
.ac-view-cap{ font-family:var(--mono); font-size:11px; color:var(--txt-d);
  margin-top:9px; line-height:1.85; letter-spacing:.4px; }

/* ---- 挂载点编辑器：左列挂载点组，右列该组的可选武器卡片 ---- */
.hp-stores{ display:grid; grid-template-columns:236px minmax(0,1fr);
  gap:14px; margin-bottom:18px; align-items:start; }
.hp-groups{ display:flex; flex-direction:column; gap:6px; }
.hp-row{ padding:9px 11px; border:1px solid var(--line);
  border-left:3px solid transparent; cursor:pointer;
  background:rgba(10,16,22,.6); transition:border-color .12s, background .12s; }
.hp-row:hover{ border-color:var(--line2); }
.hp-row.on{ border-left-color:var(--amber); background:rgba(255,176,58,.06); }
.hp-top{ display:flex; align-items:baseline; gap:8px; }
.hp-id{ font-family:var(--mono); font-size:14px; font-weight:700; color:var(--txt-d); }
.hp-row.on .hp-id{ color:var(--amber); }
.hp-lb{ font-size:13px; color:var(--txt); }
.hp-sub{ font-family:var(--mono); font-size:10px; color:var(--txt-d);
  margin-top:3px; letter-spacing:.4px; }
.hp-cur{ font-family:var(--mono); font-size:11.5px; color:var(--green); margin-top:6px; }
.hp-cur.empty{ color:#4a6172; }

.hp-picker{ display:grid; grid-template-columns:repeat(auto-fill,minmax(236px,1fr));
  gap:9px; align-content:start; max-height:352px; overflow-y:auto; padding-right:4px; }
.pk-head{ grid-column:1/-1; font-family:var(--mono); font-size:11px;
  color:var(--txt-d); letter-spacing:1px; }
.pk-card{ padding:10px 12px; border:1px solid var(--line); cursor:pointer;
  background:linear-gradient(180deg,#0c141b,#080d12); transition:.13s; }
.pk-card:hover{ border-color:var(--line2); background:#101a23; }
.pk-card.on{ border-color:var(--green); box-shadow:inset 0 0 20px rgba(79,224,138,.1); }
.pk-card.empty.on{ border-color:var(--txt-d); box-shadow:none; }
.pk-n{ font-family:var(--mono); font-size:13px; color:#cfe0ec;
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.pk-card.on .pk-n{ color:var(--green); }
.pk-cn{ font-size:11px; color:var(--txt-d); }
.pk-cnt{ margin-left:auto; color:var(--cy); font-size:12px; }
.pk-role{ font-family:var(--mono); font-size:10.5px; color:var(--amber);
  margin-top:4px; letter-spacing:.4px; }
.pk-d{ font-size:11.5px; color:var(--txt-d); margin-top:5px; line-height:1.62; }
.pk-d b{ color:var(--txt); }
.pk-q{ font-family:var(--mono); font-size:10.5px; color:#4a6172;
  margin-top:7px; padding-top:6px; border-top:1px solid rgba(30,44,56,.7); }

/* ---- 载弹汇总 ---- */
.ld-head{ font-family:var(--mono); font-size:11px; letter-spacing:1.6px;
  color:var(--txt-d); margin:4px 0 7px; }
.ld-row{ display:grid; grid-template-columns:1fr 64px 82px;
  font-family:var(--mono); font-size:12px; padding:3px 0;
  border-bottom:1px solid rgba(30,44,56,.5); }
.ld-row .n{ color:var(--txt); }
.ld-row .a{ color:var(--cy); text-align:right; }
.ld-row .s{ color:var(--txt-d); text-align:right; font-size:11px; }
.ld-row.empty .n{ color:var(--txt-d); }
.ld-mass{ margin-top:10px; font-family:var(--mono); font-size:11px;
  color:var(--txt-d); line-height:1.8; }
.ld-mass b{ color:var(--green); }
.ld-mass b.warn{ color:var(--amber); }
.ld-pen{ display:flex; flex-wrap:wrap; gap:5px 9px; align-items:baseline; margin-top:7px; }
.ld-pen .l{ font-family:var(--mono); font-size:10px; color:var(--txt-d); letter-spacing:.6px; }
.ld-pen b{ font-family:var(--mono); font-size:10.5px; font-weight:400; color:var(--txt-d); }
.ld-pen b.warn{ color:var(--amber); }
.ld-note{ margin-top:9px; font-size:11px; color:#4a6172; line-height:1.7; }

/* ---- 资料库里的数据表（装备图鉴用） ---- */
.cx-table{ width:100%; border-collapse:collapse; margin:6px 0 18px;
  font-family:var(--mono); font-size:12px; }
.cx-table th{ text-align:left; padding:6px 10px 6px 0; color:var(--txt-d);
  font-weight:400; letter-spacing:1px; border-bottom:1px solid var(--line2);
  white-space:nowrap; }
.cx-table td{ padding:7px 10px 7px 0; color:var(--txt);
  border-bottom:1px solid rgba(30,44,56,.55); vertical-align:top; }
.cx-table td .d{ color:var(--txt-d); font-size:11px; }
.cx-table td b{ color:var(--cy); }
.cx-note{ font-size:12.5px; color:var(--txt-d); line-height:1.85; margin:0 0 14px; }
.cx-fly{ display:inline-block; font-size:9px; padding:0 4px; margin-left:5px;
  border:1px solid var(--green); color:var(--green); vertical-align:middle;
  letter-spacing:.5px; white-space:nowrap; }
.ac-view-cap b{ color:var(--green); }
.ac-view-cap .hw{ color:var(--cy); }
.ac-name{ font-family:var(--mono); font-size:28px; color:var(--amber); letter-spacing:2px; }
.ac-role{ font-size:13px; color:var(--txt-d); margin-top:4px; letter-spacing:2px; }
.stat{ margin:18px 0; max-width:520px; }
.stat-row{ display:grid; grid-template-columns:96px 1fr 46px; gap:10px; align-items:center; margin-bottom:7px; }
.stat-row .l{ font-family:var(--mono); font-size:11px; color:var(--txt-d); letter-spacing:1px; }
.stat-row .v{ font-family:var(--mono); font-size:11px; color:var(--cy); text-align:right; }
.stat-bar{ height:6px; background:#0c161e; border:1px solid var(--line); position:relative; }
.stat-bar i{ position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#1f6f92,#45d6ff); display:block; }
/* 被挂载吃掉的那一段：紧接在实心条右边，暗红 */
.stat-bar u{ position:absolute; top:0; bottom:0; display:block;
  background:rgba(255,77,77,.45); }
.stat-row .v em{ font-style:normal; color:var(--red); font-size:9.5px; margin-left:3px; }
.ac-desc{ font-size:13.5px; line-height:1.95; color:#8fa3b2; max-width:640px;
  border-left:2px solid var(--line2); padding-left:14px; margin-bottom:20px; }
.ac-desc em{ color:var(--amber); font-style:normal; }

.sp-head{ font-family:var(--mono); font-size:12px; color:var(--amber); letter-spacing:3px;
  border-bottom:1px solid var(--line); padding-bottom:6px; margin-bottom:12px; }
/* .sp-list / .sp-item 已随挂载系统移除（旧版"三选一特殊武器"的卡片样式） */
.ac-loadout{ margin-top:20px; font-family:var(--mono); font-size:12px; color:var(--txt-d); line-height:2; }
.ac-loadout b{ color:var(--cy); }

/* ============================================================
   简报
   ============================================================ */
.brief-wrap{ flex:1 1 auto; display:grid; grid-template-columns:1fr 400px; gap:0; min-height:0; }
.brief-main{ padding:24px 34px; overflow-y:auto; }
.brief-side{ border-left:1px solid var(--line); padding:20px; overflow-y:auto; background:rgba(6,11,16,.5); }
.msn-no{ font-family:var(--mono); font-size:12px; letter-spacing:4px; color:var(--txt-d); }
#bName{ font-size:34px; color:var(--amber); margin:6px 0 4px; letter-spacing:3px; font-weight:600;
  text-shadow:0 0 22px rgba(255,176,58,.3); }
.msn-loc{ font-family:var(--mono); font-size:12px; color:var(--cy); letter-spacing:2px; margin-bottom:18px; }
.msn-prose{ font-size:14.5px; line-height:2.05; color:#93a7b6; max-width:760px; margin-bottom:22px;
  border-left:2px solid var(--amber-d); padding-left:16px; }
.msn-prose b{ color:#dbe8f2; }
.msn-prose .red{ color:var(--red); }
.msn-prose .cy{ color:var(--cy); }
.msn-block{ margin-bottom:18px; }
.blk-h{ font-family:var(--mono); font-size:12px; color:var(--amber); letter-spacing:3px;
  border-bottom:1px solid var(--line); padding-bottom:5px; margin-bottom:9px; }
.msn-block ul{ list-style:none; }
.msn-block li{ font-size:13.5px; line-height:1.95; padding-left:18px; position:relative; color:#8fa3b2; }
.msn-block li::before{ content:"▸"; position:absolute; left:0; color:var(--green); }
.msn-block li.th::before{ content:"⚠"; color:var(--red); }
#mapCv{ width:100%; height:auto; border:1px solid var(--line); background:#060b10; display:block; }
.intel{ font-family:var(--mono); font-size:11.5px; line-height:2.1; color:var(--txt-d); margin-top:14px; }
.intel b{ color:var(--cy); }

/* ============================================================
   结算
   ============================================================ */
#scr-debrief{ align-items:center; justify-content:center; padding:30px; overflow-y:auto; }
.debrief-wrap{ text-align:center; max-width:760px; width:100%; }
.rank{
  font-family:var(--mono); font-size:120px; line-height:1; font-weight:700;
  color:var(--amber); text-shadow:0 0 46px rgba(255,176,58,.6); margin-bottom:6px;
}
.rank.s{ color:#7dfaff; text-shadow:0 0 60px rgba(125,250,255,.8); }
.rank.a{ color:var(--green); text-shadow:0 0 46px rgba(79,224,138,.6); }
.rank.f{ color:var(--red); text-shadow:0 0 46px rgba(255,77,77,.6); }
#dTitle{ font-size:28px; letter-spacing:6px; color:#dbe8f2; margin-bottom:6px; font-weight:600; }
.dsub{ font-family:var(--mono); font-size:12px; color:var(--txt-d); letter-spacing:2px; margin-bottom:22px; }
table.score{ margin:0 auto 22px; width:100%; max-width:520px; font-family:var(--mono); font-size:13px; }
table.score td{ padding:8px 12px; border-bottom:1px solid var(--line); text-align:left; color:var(--txt-d); }
table.score td:last-child{ text-align:right; color:var(--cy); }
table.score tr.hi td:last-child{ color:var(--amber); font-weight:700; }
.dquote{ font-size:14px; line-height:2; color:#8fa3b2; font-style:italic;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 10px; margin-bottom:24px; }

/* ============================================================
   资料库
   ============================================================ */
.codex-wrap{ flex:1 1 auto; display:grid; grid-template-columns:230px 1fr; min-height:0; }
.codex-nav{ border-right:1px solid var(--line); overflow-y:auto; padding:12px; background:rgba(6,11,16,.5); }
.cx-cat{ font-family:var(--mono); font-size:11px; color:var(--amber-d); letter-spacing:3px; margin:14px 0 7px 4px; }
.cx-item{ padding:8px 12px; cursor:pointer; font-size:13px; color:var(--txt-d); border-left:3px solid transparent; }
.cx-item:hover{ color:#dbe8f2; background:#0e1820; }
.cx-item.sel{ color:var(--amber); border-left-color:var(--amber); background:#101c26; }
.codex-body{ overflow-y:auto; padding:26px 34px; }
.cx-title{ font-size:26px; color:var(--amber); letter-spacing:2px; margin-bottom:4px; }
.cx-sub{ font-family:var(--mono); font-size:12px; color:var(--txt-d); letter-spacing:2px; margin-bottom:20px; }
.cx-text{ font-size:14px; line-height:2.1; color:#93a7b6; max-width:820px; }
.cx-text p{ margin-bottom:14px; }
.cx-text b{ color:#dbe8f2; }
.cx-text .cy{ color:var(--cy); }
.cx-text .am{ color:var(--amber); }
.cx-text .rd{ color:var(--red); }
.cx-text h4{ font-family:var(--mono); font-size:13px; color:var(--amber); letter-spacing:2px;
  margin:22px 0 8px; border-bottom:1px solid var(--line); padding-bottom:5px; }
.cx-table{ width:100%; max-width:820px; border-collapse:collapse; font-family:var(--mono); font-size:12px; margin:12px 0; }
.cx-table th{ text-align:left; padding:7px 10px; color:var(--amber); border-bottom:1px solid var(--line2);
  font-weight:400; letter-spacing:1px; }
.cx-table td{ padding:7px 10px; border-bottom:1px solid var(--line); color:#8fa3b2; }
.cx-table tr:hover td{ background:#0d1720; }

/* ============================================================
   单位详情页（js/unitview.js）
   从两个图鉴条目里点单位名进来。
   ============================================================ */
.cx-unit{ cursor:pointer; display:inline-block; }
.cx-unit:hover{ color:#dbe8f2; }
.cx-unit:hover b{ color:var(--cy); text-decoration:underline; }

.uv-head{ margin-bottom:18px; }
.uv-back{ font-family:var(--mono); font-size:11px; color:var(--txt-d);
  letter-spacing:1px; padding:3px 9px; border:1px solid var(--line2); margin-bottom:12px; }
.uv-back:hover{ color:var(--amber); border-color:var(--amber-d); }
.uv-title{ font-size:26px; color:var(--amber); letter-spacing:2px; margin:5px 0 3px; }
.uv-title .uv-nick{ font-family:var(--mono); font-size:13px; color:var(--txt-d); letter-spacing:2px; }
.uv-sub{ font-family:var(--mono); font-size:12px; color:var(--txt-d); letter-spacing:2px; }

.uv-body{ display:grid; grid-template-columns:minmax(320px,480px) 1fr; gap:26px; margin-bottom:8px; }
.uv-left{ display:flex; flex-direction:column; gap:14px; }
.uv-right{ min-width:0; }
.uv-desc{ max-width:640px; }
.uv-desc p:first-child{ margin-top:0; }

.uv-panel{ border:1px solid var(--line); background:#060b10; }
.uv-cap{ font-family:var(--mono); font-size:10.5px; color:var(--txt-d); letter-spacing:2px;
  padding:6px 9px; border-bottom:1px solid var(--line); }
.uv-3d{ display:block; width:100%; height:250px; cursor:grab; }
.uv-plan{ display:block; width:100%; height:auto; }
.uv-noplan{ font-size:12px; color:var(--txt-d); line-height:1.9; padding:16px 12px; }
.uv-tiny{ font-size:11px; color:var(--txt-d); line-height:1.8; font-family:var(--mono); }
.uv-tiny code{ color:var(--cy); }

.uv-h4{ font-family:var(--mono); font-size:13px; color:var(--amber); letter-spacing:2px;
  margin:22px 0 8px; border-bottom:1px solid var(--line); padding-bottom:5px; }
.uv-para th{ width:150px; }
.uv-neutral{ color:var(--amber); }

/* ============================================================
   操作说明
   ============================================================ */
.help-wrap{ flex:1 1 auto; display:grid; grid-template-columns:1fr 1fr; gap:34px;
  padding:26px 44px; overflow-y:auto; min-height:0; }
.help-col h3{ font-family:var(--mono); font-size:13px; color:var(--amber); letter-spacing:3px;
  margin:6px 0 12px; border-bottom:1px solid var(--line); padding-bottom:6px; }
.khelp{ font-size:13px; line-height:1.95; color:#8fa3b2; margin:0 0 12px;
  padding-left:12px; border-left:2px solid var(--amber-d); }
.khelp b{ color:var(--amber); }
table.keymap{ width:100%; border-collapse:collapse; margin-bottom:26px; }
table.keymap td{ padding:7px 8px; font-size:13px; color:#8fa3b2; vertical-align:top; }
table.keymap td:first-child{ width:150px; white-space:nowrap; }
kbd{ font-family:var(--mono); font-size:11.5px; padding:2px 7px; margin-right:2px;
  background:#101a23; border:1px solid var(--line2); border-bottom-width:2px; border-radius:3px; color:#cfe0ec; }
.tips{ list-style:none; }
.tips li{ font-size:13px; line-height:2; color:#8fa3b2; padding-left:16px; position:relative; }
.tips li::before{ content:"·"; position:absolute; left:4px; color:var(--amber); }
.tips b{ color:var(--cy); }
.tips .red{ color:var(--red); }

/* ============================================================
   更新记录
   数据来自 js/changelog.js（由 tools/release.js 从 CHANGELOG.md 生成）。
   排版按"一条版本一根竖线"来：当前版本那根线是琥珀色，其余是冷灰。
   ============================================================ */
.cl-wrap{ flex:1 1 auto; overflow-y:auto; min-height:0; padding:24px 44px 40px; }
.cl-empty{
  font-size:13px; line-height:2; color:#8fa3b2; max-width:640px;
  padding-left:12px; border-left:3px solid var(--line2);
}
.cl-item{
  border-left:3px solid var(--line2); padding:0 0 0 18px;
  margin:0 0 30px; max-width:880px;
}
.cl-item.cl-cur{ border-left-color:var(--amber); }
.cl-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.cl-ver{ font-family:var(--mono); font-size:19px; color:var(--cy); letter-spacing:1px; }
.cl-item.cl-cur .cl-ver{ color:var(--amber); }
.cl-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:2px;
  padding:2px 7px; border:1px solid var(--line2); color:var(--txt-d);
}
.cl-tag.t-big{ color:var(--amber); border-color:var(--amber-d); }
.cl-tag.t-mid{ color:var(--cy); border-color:#1f5c72; }
.cl-date{ font-family:var(--mono); font-size:12px; color:var(--txt-d); }
.cl-title{ font-size:15px; color:#dbe8f2; letter-spacing:1px; }
.cl-now{
  font-family:var(--mono); font-size:10.5px; letter-spacing:2px;
  color:#08111a; background:var(--amber); padding:2px 7px;
}
.cl-lead{ font-size:14px; line-height:2; color:#93a7b6; margin:0 0 12px; max-width:760px; }
.cl-sec{ margin-bottom:10px; }
.cl-sh{ font-family:var(--mono); font-size:11.5px; color:var(--amber-d); letter-spacing:3px; margin:0 0 6px; }
.cl-list{ list-style:none; }
.cl-list li{
  font-size:13px; line-height:1.95; color:#8fa3b2;
  padding-left:16px; position:relative; max-width:820px;
}
.cl-list li::before{ content:"·"; position:absolute; left:4px; color:var(--amber); }
.cl-list b{ color:#dbe8f2; }
.cl-list code, .cl-lead code{ font-family:var(--mono); font-size:12px; color:var(--cy); }
.cl-foot{
  font-family:var(--mono); font-size:11px; color:#334a5a; letter-spacing:1px;
  line-height:1.9; max-width:820px; margin-top:6px;
}

/* ============================================================
   无线电字幕
   ============================================================ */
/* 左上角，罗盘带之下、空速带之上。以前在底部中央，三四行一叠就压住了
   准星、武器面板和左下的仪表；这一块在所有分辨率下都是空的。
   高度封顶，多出来的旧行从上面裁掉（flex-end + overflow:hidden）。 */
#radio{
  position:fixed; left:16px; top:62px; z-index:200;
  width:min(520px,38vw); max-height:calc(34vh - 84px); overflow:hidden;
  pointer-events:none; display:flex; flex-direction:column; justify-content:flex-end; gap:4px;
}
.rad-line{
  font-size:14px; line-height:1.55; letter-spacing:.3px;
  color:#dff0ff; text-shadow:0 2px 6px #000,0 0 18px rgba(0,0,0,.95);
  animation:radin .18s ease; transition:opacity .4s;
}
.rad-line .who{
  font-family:var(--mono); font-size:12.5px; letter-spacing:1px; margin-right:8px;
  padding:1px 6px; border-left:3px solid var(--cy); background:rgba(10,26,36,.7);
}
.rad-line.enemy .who{ border-left-color:var(--red); color:#ffb3b3; }
.rad-line.ally  .who{ border-left-color:var(--cy);  color:#a8e6ff; }
.rad-line.cmd   .who{ border-left-color:var(--green);color:#a9f5c8; }
.rad-line .tx{ }
.rad-line.enemy .tx{ color:#ffd6d6; }
.rad-line.radiofx{ font-family:var(--mono); letter-spacing:.5px; }
@keyframes radin{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* 系统提示：挂载切换、目标不匹配、交战规则等"操作反馈"。
   这些不是谁在无线电里说话，放在屏幕中下方、准星与武器面板之间。 */
#sysnote{
  position:fixed; left:50%; bottom:27vh; transform:translateX(-50%); z-index:210;
  pointer-events:none; text-align:center; max-width:min(640px,80vw);
}
.sys-line{
  display:inline-block; font-size:14px; line-height:1.55; letter-spacing:.4px;
  color:#e8f6ff; padding:4px 14px; background:rgba(8,20,28,.72);
  border-top:1px solid rgba(120,200,240,.35); border-bottom:1px solid rgba(120,200,240,.35);
  text-shadow:0 1px 4px #000; animation:radin .18s ease; transition:opacity .35s;
}
.sys-line.warn{ color:#ffe2b8; border-color:rgba(255,170,80,.5); }

/* ============================================================
   暂停
   ============================================================ */
.overlay{
  position:fixed; inset:0; z-index:800; display:none;
  align-items:center; justify-content:center; background:rgba(3,6,9,.82);
}
.overlay.on{ display:flex; }
.pause-box{ text-align:center; border:1px solid var(--line2); padding:40px 60px;
  background:var(--panel); }
.pause-box h2{ font-family:var(--mono); font-size:40px; letter-spacing:10px; color:var(--amber);
  margin-bottom:8px; }
.pause-box .menu{ margin-top:24px; }

/* ============================================================
   设置面板 —— 独立设置页与暂停菜单内的设置页共用同一套控件
   由 game.js 的 buildSettingsInto() 动态生成
   ============================================================ */
.set-wrap{ flex:1 1 auto; overflow-y:auto; min-height:0; padding:22px 34px; }
.set-wrap.in-overlay{ flex:none; max-height:50vh; padding:4px 2px; }
.set-col{ max-width:680px; }
.set-group{ font-family:var(--mono); font-size:12px; color:var(--amber); letter-spacing:3px;
  border-bottom:1px solid var(--line); padding-bottom:6px; margin:20px 0 10px; }
.set-group:first-child{ margin-top:0; }
.set-row{ display:grid; grid-template-columns:132px 1fr 64px; gap:14px; align-items:center;
  padding:6px 0; }
.set-row > label{ font-size:13px; color:#8fa3b2; }
.set-row .set-val{ font-family:var(--mono); font-size:12px; color:var(--cy); text-align:right; }
.set-row input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:4px;
  background:#12202b; border:1px solid var(--line); outline:none; cursor:pointer; }
.set-row input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:13px; height:18px; background:var(--amber); border:1px solid #ffd489; cursor:pointer; }
.set-row input[type=range]::-moz-range-thumb{ width:13px; height:18px; background:var(--amber);
  border:1px solid #ffd489; border-radius:0; cursor:pointer; }
.set-row .set-toggle{ font-family:var(--mono); font-size:12px; letter-spacing:1px; padding:5px 12px;
  cursor:pointer; background:#13202b; border:1px solid var(--line2); color:var(--txt-d);
  grid-column:2 / span 2; justify-self:start; }
.set-row .set-toggle:hover{ color:#fff; border-color:var(--amber); }
.set-row .set-toggle.on{ background:#1a2b1f; border-color:var(--green); color:var(--green); }
/* 下拉选择：给不该热切换的选项（如机位）用 */
.set-row .set-select{ font-family:var(--mono); font-size:12px; letter-spacing:.5px; width:100%;
  padding:5px 9px; background:#0d1620; color:var(--green); cursor:pointer; outline:none;
  border:1px solid rgba(79,224,138,0.28); border-radius:0; }
.set-row .set-select:hover{ border-color:var(--amber); color:#fff; }
.set-row .set-select:focus{ border-color:var(--green); }
.set-row .set-select option{ background:#0d1620; color:#c8d8e4; }

/* 主菜单左上角的版本戳：只为了让玩家（和开发时）确认部署到了哪一版。

   位置从左上角挪到右上角：左上角是开机自检那几行 .boot 的地盘，
   两者都绝对定位在同一个角落，字一直是叠着印出来的。
   加版本号之后第一行变长，重叠就更明显了 —— 干脆搬到对面。 */
.ver-stamp{ position:absolute; right:22px; top:18px; text-align:right;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.4px; color:#4a6070; line-height:1.6;
  pointer-events:none; user-select:text; max-width:46vw; }
.ver-stamp b{ color:#6f8fa3; font-weight:400; }
.ver-stamp i{ color:#3d5261; font-style:normal; }
.set-hint{ font-size:12px; color:var(--txt-d); line-height:1.9; padding:4px 0 2px; }

/* ============================================================
   暂停菜单（带子页签）
   ============================================================ */
.pause-box.wide{ width:min(760px,92vw); padding:24px 32px 20px; }
.pause-box.wide h2{ font-size:30px; letter-spacing:9px; margin-bottom:14px; }
.pause-tabs{ display:flex; gap:8px; justify-content:center; margin-bottom:18px;
  border-bottom:1px solid var(--line); padding-bottom:12px; }
.ptab{ font-family:var(--mono); font-size:12px; letter-spacing:1px; padding:7px 16px; cursor:pointer;
  background:transparent; border:1px solid var(--line2); color:var(--txt-d); transition:.13s; }
.ptab:hover{ color:#fff; border-color:var(--amber); }
.ptab.on{ background:#1a2836; border-color:var(--amber); color:var(--amber); }
.pane{ display:none; text-align:left; }
.pane.on{ display:block; }
.pane .dsub{ text-align:center; margin-bottom:16px; }
.pane .menu{ justify-content:center; }

/* 暂停菜单里的迷你操作说明 */
.minihelp{ font-size:12.5px; line-height:1.85; color:#8fa3b2; max-height:46vh; overflow-y:auto;
  padding-right:6px; }
.minihelp table{ width:100%; border-collapse:collapse; }
.minihelp td{ padding:4px 8px; vertical-align:top; }
.minihelp td:first-child{ width:130px; white-space:nowrap; color:#cfe0ec; }
.minihelp h4{ font-family:var(--mono); font-size:12px; color:var(--amber); letter-spacing:2px;
  margin:14px 0 6px; }
.minihelp h4:first-child{ margin-top:0; }

/* ============================================================
   简报页的任务选择

   这里用 **grid** 而不是 flex:wrap。原来每条是 `flex:1 1 190px`，
   于是同一行里的卡片会互相拉伸填满整行 —— 十一关排出来就是
   "第一行六张被压窄、第二行四张被撑宽"，行与行宽度不一致，
   看起来像是没对齐。

   grid + `minmax(200px,1fr)` 让**所有卡片同宽**，列数随窗口变化，
   最后一行不满也只是留下空位，不会把剩下的卡片拉宽。
   200px 是卡片里最长的一行字（英文代号如 "UNDER THE ANVIL"）
   在 12px 等宽字体下不换行的下限。
   ============================================================ */
.msn-list{ display:grid; gap:10px; margin-bottom:20px;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.msn-item{ padding:10px 14px; cursor:pointer; border:1px solid var(--line);
  background:linear-gradient(180deg,#0c141b,#080d12); transition:.13s;
  min-width:0; }
.msn-item:hover{ border-color:var(--line2); background:#101a23; }
.msn-item.sel{ border-color:var(--amber); background:linear-gradient(180deg,#1a2836,#0d161e);
  box-shadow:inset 0 0 22px rgba(255,176,58,.1); }
.msn-item .no{ font-family:var(--mono); font-size:10.5px; color:var(--txt-d); letter-spacing:2px; }
.msn-item .nm{ font-size:15px; color:#dbe8f2; margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msn-item.sel .nm{ color:var(--amber); }
.msn-item .st{ font-size:11px; color:var(--txt-d); margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msn-item .st.done{ color:var(--green); }

/* ============================================================
   战役选择
   —— 标题与简报之间的一层。关卡怎么选属于简报（那里才有目标、
      威胁与情报），这里只回答"打的是哪一场仗"。
   ============================================================ */
#scr-campaign{ padding:0; }
.camp-wrap{ flex:1 1 auto; overflow-y:auto; padding:26px 30px; min-height:0; }
.camp-hint{ font-family:var(--mono); font-size:12px; letter-spacing:1px;
  color:var(--txt-d); margin-bottom:18px; }
.camp-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:18px; }
.camp-card{ padding:18px 20px; cursor:pointer; border:1px solid var(--line);
  background:linear-gradient(180deg,#0f1a23,#0a1218); transition:.13s; }
.camp-card:hover{ border-color:var(--amber); background:linear-gradient(180deg,#16242f,#0b1319);
  box-shadow:0 0 18px rgba(255,176,58,.25); }
.camp-card .cc-no{ font-family:var(--mono); font-size:10.5px; letter-spacing:2px; color:var(--txt-d); }
.camp-card .cc-name{ font-size:20px; color:#dbe8f2; margin-top:4px; }
.camp-card:hover .cc-name{ color:var(--amber); }
.camp-card .cc-en{ font-family:var(--mono); font-size:11px; letter-spacing:2px;
  color:var(--amber); margin-left:8px; }
.camp-card .cc-desc{ font-size:12.5px; color:#93a7b6; line-height:1.8; margin-top:10px; }
.camp-card .cc-foot{ font-family:var(--mono); font-size:11px; color:var(--txt-d);
  margin-top:14px; display:flex; justify-content:space-between; gap:12px; }
.camp-card .cc-prog b{ color:var(--green); }
.camp-card .cc-prog i{ font-style:normal; color:var(--txt-d); }
.camp-card .cc-per{ font-family:var(--mono); font-size:10.5px; color:var(--txt-d);
  margin-top:6px; letter-spacing:1px; }
/* 资料封存：未来的战役在列表里占位，但不承诺任何内容 */
.camp-card.camp-locked{ cursor:not-allowed; opacity:.5; }
.camp-card.camp-locked:hover{ border-color:var(--line); box-shadow:none;
  background:linear-gradient(180deg,#0f1a23,#0a1218); }
.camp-card.camp-locked:hover .cc-name{ color:#dbe8f2; }

/* 滚动条 */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:#070c11; }
::-webkit-scrollbar-thumb{ background:#1e2c38; }
::-webkit-scrollbar-thumb:hover{ background:#2d4252; }

@media (max-width:1000px){
  .hangar-grid{ grid-template-columns:1fr; }
  .ac-list{ max-height:180px; border-right:none; border-bottom:1px solid var(--line); }
  .brief-wrap{ grid-template-columns:1fr; }
  .brief-side{ display:none; }
  .help-wrap{ grid-template-columns:1fr; }
  .cl-wrap{ padding:18px 18px 30px; }
  .ac-panel{ grid-template-columns:1fr; grid-template-areas:"view" "main" "weapons"; }
}
