/* 六州战斗模拟器 —— 样式
   以机关朋克的冷色镭光为基调：墨底、碧光、金瓷描边。全部由字符、边框与色彩构成。 */

:root {
  --底: #0b0f10;
  --底二: #121a1c;
  --底三: #182326;
  --线: #24413f;
  --线亮: #3d6f68;
  --镭: #6ef2c0;
  --镭暗: #2f8f74;
  --金: #d8b463;
  --朱: #d0574d;
  --素: #e6efec;
  --灰: #8aa3a0;
  --灰暗: #5c7472;
  --字: 15px/1.75 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --字宽: 17px/1.85 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --号: 40px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--底);
  color: var(--素);
  font: var(--字);
}

.根 { display: flex; flex-direction: column; min-height: 100vh; }

.载入中 { padding: 42px; text-align: center; color: var(--灰); letter-spacing: 2px; }

/* ---------- 顶栏 ---------- */
.顶栏 {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 18px;
  background: linear-gradient(180deg, #14201f, #0d1414);
  border-bottom: 1px solid var(--线);
  flex-wrap: wrap;
}
.标 {
  font-size: 19px;
  letter-spacing: 4px;
  color: var(--镭);
  text-shadow: 0 0 12px rgba(110, 242, 192, 0.35);
  white-space: nowrap;
}
.标小 { font-size: 12px; color: var(--灰暗); letter-spacing: 1px; }
.页签区 { display: flex; gap: 6px; flex-wrap: wrap; }
.页签 {
  padding: 5px 15px;
  border: 1px solid var(--线);
  background: var(--底二);
  color: var(--灰);
  cursor: pointer;
  letter-spacing: 2px;
  font-size: 14px;
}
.页签:hover { color: var(--素); border-color: var(--线亮); }
.页签.选中 { color: var(--底); background: var(--镭); border-color: var(--镭); font-weight: 700; }
.顶右 { margin-left: auto; display: flex; gap: 10px; align-items: center; color: var(--灰暗); font-size: 12px; }
/* 顶栏的配装自动补全开关：一枚可点的小按钮，关闭时中性、开启时以镭色示警 */
.顶右 .开关 {
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 1px 7px;
  border-radius: 2px;
  background: transparent;
  font-family: inherit;
}
.顶右 .开关:hover { border-color: var(--镭); }

/* ---------- 通用控件 ---------- */
.块 { padding: 16px 18px; }
.板 {
  background: var(--底二);
  border: 1px solid var(--线);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.板题 {
  color: var(--镭);
  letter-spacing: 3px;
  font-size: 14px;
  border-bottom: 1px dashed var(--线);
  padding-bottom: 6px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.板题 .右 { margin-left: auto; color: var(--灰暗); font-size: 12px; letter-spacing: 1px; }
.行 { display: flex; gap: 14px; flex-wrap: wrap; }
.列 { display: flex; flex-direction: column; gap: 12px; }
.半 { flex: 1 1 420px; min-width: 320px; }

label { color: var(--灰); font-size: 13px; display: block; margin-bottom: 4px; letter-spacing: 1px; }
input, select, textarea {
  width: 100%;
  background: var(--底三);
  border: 1px solid var(--线);
  color: var(--素);
  padding: 6px 9px;
  font: 13px/1.6 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--镭暗); }
textarea { resize: vertical; min-height: 120px; font-family: 'Cascadia Mono', 'Consolas', monospace; }
select { cursor: pointer; }

button {
  background: var(--底三);
  border: 1px solid var(--线亮);
  color: var(--素);
  padding: 6px 14px;
  cursor: pointer;
  font: 13px/1.6 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  letter-spacing: 2px;
}
button:hover { border-color: var(--镭); color: var(--镭); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.主 { background: var(--镭); color: #08120f; border-color: var(--镭); font-weight: 700; }
button.主:hover { color: #08120f; background: #8ff8cf; }
button.危 { border-color: #6b2b26; color: #d98c85; }
button.危:hover { border-color: var(--朱); color: var(--朱); }
button.小 { padding: 3px 9px; font-size: 12px; letter-spacing: 1px; }

.钮排 { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.注 { color: var(--灰暗); font-size: 12px; line-height: 1.7; }
.强调 { color: var(--金); }
.镭字 { color: var(--镭); }
.朱字 { color: var(--朱); }
.灰字 { color: var(--灰); }

/* ---------- 标签片 ---------- */
.片 {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--线);
  font-size: 11px;
  color: var(--灰);
  margin: 0 3px 3px 0;
  letter-spacing: 1px;
  white-space: nowrap;
}
.片.镭 { color: var(--镭); border-color: var(--镭暗); }
.片.金 { color: var(--金); border-color: #6d5a2c; }
.片.朱 { color: var(--朱); border-color: #6b2b26; }
.片.实 { background: var(--镭); color: #08120f; border-color: var(--镭); }

/* ---------- 六维表 ---------- */
.六维 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; font-size: 13px; }
.六维 div { display: flex; justify-content: space-between; border-bottom: 1px dotted #1e3030; padding: 2px 0; }
.六维 .数值 { color: var(--镭); font-family: 'Cascadia Mono', 'Consolas', monospace; }
.六维 .数值.削 { color: var(--金); }

.派生 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px 12px; font-size: 13px; }
.派生 div { display: flex; justify-content: space-between; border-bottom: 1px dotted #1e3030; padding: 2px 0; }
.派生 .数值 { color: var(--金); font-family: 'Cascadia Mono', 'Consolas', monospace; }

/* ---------- 词条列表 ---------- */
.词条列 { max-height: 340px; overflow: auto; border: 1px solid var(--线); background: #0e1617; }
.词条项 {
  padding: 6px 9px;
  border-bottom: 1px solid #16292a;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
}
.词条项:hover { background: #142123; }
.词条项.选中 { background: #16292a; border-left: 3px solid var(--镭); }
.词条项 .名 { flex: 1; }
/* 审校态标记：紧跟条名之后的一枚小徽标，不占品级那列的位置 */
.词条项 .审 {
  font-size: 10px;
  letter-spacing: 1px;
  padding: 0 5px;
  border: 1px solid;
  border-radius: 2px;
  white-space: nowrap;
}
.词条项 .审.已审 { color: var(--镭); border-color: var(--镭暗); }
.词条项 .审.待审 { color: var(--灰暗); border-color: var(--线); }
.词条项 .品 { font-size: 11px; color: var(--灰暗); }
.词条详 { padding: 9px; background: #0c1314; border: 1px dashed var(--线); font-size: 13px; margin-top: 8px; }
.词条详 h4 { margin: 0 0 6px; color: var(--镭); font-size: 14px; font-weight: 600; letter-spacing: 1px; }

/* ---------- 已选区（捏卡界面） ---------- */
.已选区 { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.已选项 {
  border: 1px solid var(--线);
  border-left: 3px solid var(--镭暗);
  background: #0e1617;
  padding: 7px 10px;
}
.已选项.选中 { border-color: var(--镭); background: #12201d; }
.已选头 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.已选头 .名 { color: var(--素); font-size: 14px; letter-spacing: 1px; cursor: pointer; }
.已选头 .名:hover { color: var(--镭); }
.已选头 .阶数区 { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.已选头 .阶数区 input { width: 56px; padding: 2px 5px; }
.已选效 { color: #cfe0dc; font-size: 13px; margin-top: 4px; line-height: 1.7; }
.词条项.高亮 { background: #17292a; }

/* ---------- 词条详情：装备此词条的人物卡 ---------- */
/* 用人列表挂在词条详情最下，分条列出引用这一条的人物卡与敌方模板 */
.用人区 { margin-top: 10px; border-top: 1px dashed var(--线); padding-top: 8px; }
.用人题 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--镭);
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.用人题 .右 { margin-left: auto; color: var(--灰暗); font-size: 11px; letter-spacing: 1px; }
.用人段 { margin-bottom: 6px; }
.用人组名 { color: var(--灰暗); font-size: 11px; letter-spacing: 1px; margin: 4px 0 3px; }
.用人条 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  padding: 3px 7px;
  border-left: 2px solid var(--线);
  background: #0e1617;
  cursor: pointer;
  font-size: 12px;
}
.用人条:hover { background: #142123; border-left-color: var(--镭); }
.用人条 .名 { color: var(--素); letter-spacing: 1px; }
.用人条.敌 { border-left-color: #6d5a2c; }
.用人条.敌:hover { border-left-color: var(--金); }
.用人条.选中 { border-left-color: var(--金); background: #1a1608; }

/* ---------- 战报 ---------- */
.战报 { display: flex; flex-direction: column; gap: 12px; }
.战段 { border: 1px solid var(--线); background: var(--底二); }
.战段.头 { border-color: var(--线亮); }
.段题 {
  padding: 5px 12px;
  background: #14201f;
  border-bottom: 1px solid var(--线);
  color: var(--镭);
  letter-spacing: 3px;
  font-size: 13px;
  display: flex;
  gap: 12px;
}
.段题 .余 { margin-left: auto; color: var(--灰); letter-spacing: 1px; font-size: 12px; }
.段行 { padding: 8px 12px; }
.行文 {
  font-family: 'Cascadia Mono', 'Consolas', 'Noto Sans SC', monospace;
  font-size: 13px;
  line-height: 1.9;
  color: #cfe0dc;
  white-space: pre-wrap;
  word-break: break-word;
}
.行文.标 { color: var(--金); }
.行文.胜 { color: var(--镭); }
.行文.伤 { color: #f0a89f; }
.行文.失 { color: var(--灰暗); }
.行文.隐 { color: #4d6360; }

.结果条 { padding: 10px 14px; border: 1px solid var(--线亮); background: #10201d; letter-spacing: 2px; }
.结果条 .果 { color: var(--镭); font-size: 17px; }
.结果板 { margin-top: 16px; border: 1px solid var(--镭暗); background: #0e1a18; padding: 12px 14px; }
.结果板 .板题 { border-bottom-color: var(--镭暗); }

/* ---------- 战报：推进进度 ---------- */
.进度 { height: 3px; background: #14201f; border: 1px solid var(--线); margin-bottom: 10px; }
.进度内 { height: 100%; background: var(--镭); transition: width 0.25s; }

/* ---------- 战报：本回合核心词条 ---------- */
.核心区 { padding: 7px 12px; background: #0d1a18; border-bottom: 1px dashed var(--线); }
.核心标 { color: var(--灰暗); font-size: 11px; letter-spacing: 2px; margin-right: 8px; }
.核心行 { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.核心侧 { font-size: 11px; padding: 0 6px; color: #08120f; font-weight: 700; }
.核心片 {
  display: inline-block;
  padding: 1px 8px;
  font-size: 12px;
  border: 1px solid var(--线);
  letter-spacing: 1px;
  cursor: help;
}
.核心片.强 { color: #08120f; background: var(--镭); border-color: var(--镭); font-weight: 700; }
.核心片.中 { color: var(--镭); border-color: var(--镭暗); }
.核心片.弱 { color: var(--灰); }
.核心片.无 { color: var(--灰暗); }

/* ---------- 战报：骰点栏与受击点变化栏 ---------- */
.骰点栏,
.受击点栏 {
  padding: 6px 12px;
  background: #0a1211;
  border-bottom: 1px dashed var(--线);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* 栏名：与底色拉开，不再与背景混同 */
.栏标 {
  color: var(--镭);
  font-size: 12px;
  letter-spacing: 3px;
  border-right: 1px solid var(--线);
  padding-right: 10px;
}
/* 两栏里的分节小字随片走，同样取深色 */
.骰点项 .小,
.受击点项 .小 { color: #24443c; }
.骰点项 .数,
.受击点项 .数 { color: #000000; font-weight: 700; }
.骰点项 .变.损,
.受击点项 .变.损 { color: #6b1a13; }
.骰点项 .变.得,
.受击点项 .变.得 { color: #0a3a2d; }
/* 这两片沿用全局的 角我／角敌 底色（亮绿与亮金），故字一律取深色，
   不用浅字压在浅底上。数字另加重并加深，读起来最清楚。 */
.骰点项,
.受击点项 {
  font-family: 'Cascadia Mono', 'Consolas', monospace;
  font-size: 12px;
  padding: 1px 8px;
  border: 1px solid rgba(8, 18, 15, 0.35);
  color: #0d1a16;
  font-weight: 600;
}
.骰点项.改 {
  border-color: #6b4a12;
  box-shadow: inset 0 0 0 1px rgba(107, 74, 18, 0.6);
}
.受击点项.损 { border-color: #7a1f18; }
.受击点项.得 { border-color: #12483a; }

/* ---------- 战报：加减值逐条（默认折起） ---------- */
.明细区 {
  border-top: 1px dashed var(--线);
  background: #0b1513;
}
.明细题 {
  padding: 6px 12px;
  cursor: pointer;
  color: #9fb5b1;
  font-size: 12px;
  letter-spacing: 2px;
  display: flex;
  gap: 12px;
  align-items: center;
  list-style: none;
  user-select: none;
}
.明细题::-webkit-details-marker { display: none; }
.明细题::before {
  content: '▸';
  color: var(--镭暗);
  font-size: 11px;
}
.明细区[open] .明细题::before { content: '▾'; }
.明细题:hover { color: var(--镭); }
.明细题 .余 { margin-left: auto; color: var(--灰暗); font-size: 11px; letter-spacing: 1px; }
.明细内 {
  padding: 4px 12px 10px 12px;
  border-top: 1px dashed var(--线);
}
.明细行 {
  font-family: 'Cascadia Mono', 'Consolas', 'Noto Sans SC', monospace;
  font-size: 12px;
  line-height: 1.85;
  color: #b9ccc8;
  white-space: pre-wrap;
  word-break: break-word;
  padding-left: 10px;
}
.明细行.侧 { color: var(--金); padding-left: 0; margin-top: 6px; }
.明细行.触 { color: #cfe0dc; }
.明细行.未 { color: #7d918d; }
.明细行.外 { color: #f0c9a0; }

/* ---------- 战后统计 ---------- */
.统计栏 { border: 1px solid var(--线); background: #0e1617; padding: 10px 12px; }
.统计栏 .空 { padding: 14px; }
.最有条 {
  padding: 6px 9px;
  margin-bottom: 8px;
  background: #1a1608;
  border-left: 3px solid var(--金);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.最有条 .名 { color: var(--金); font-size: 14px; letter-spacing: 1px; }
.统计栏 table.tb { font-size: 12px; }
.统计栏 table.tb th, .统计栏 table.tb td { padding: 3px 6px; }
.统计栏 table.tb tr.最优 td { background: #1a1608; }
.胜字 { color: var(--镭); }
.金字 { color: var(--金); }

/* ---------- 表格 ---------- */
table.tb { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tb th, table.tb td { border: 1px solid var(--线); padding: 5px 8px; text-align: left; }
table.tb th { background: #14201f; color: var(--镭); font-weight: 600; letter-spacing: 1px; }
table.tb tr:hover td { background: #131f20; }

/* ---------- 浮层 ---------- */
.遮罩 {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 8, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 40;
}
.浮层 {
  background: var(--底二);
  border: 1px solid var(--线亮);
  max-width: 860px;
  width: 100%;
  max-height: 88vh;
  overflow: auto;
  padding: 18px 20px;
  box-shadow: 0 0 42px rgba(0, 0, 0, 0.7);
}
.浮层 h3 { margin: 0 0 12px; color: var(--镭); letter-spacing: 3px; font-size: 16px; font-weight: 600; }

/* ---------- 卡片网格 ---------- */
.卡网 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.卡 {
  border: 1px solid var(--线);
  background: var(--底二);
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.卡:hover { border-color: var(--镭暗); }
.卡.选中 { border-color: var(--镭); box-shadow: 0 0 0 1px var(--镭暗) inset; }
/* 从词条详情的用人列表跳过来时，被定位的那张卡换金边，与「已设为我方」的镭边区分 */
.卡.定位 { border-color: var(--金); box-shadow: 0 0 0 1px #6d5a2c inset; }
.卡名 { color: var(--素); font-size: 15px; letter-spacing: 1px; display: flex; align-items: baseline; gap: 8px; }
.卡名 .标 { font-size: 12px; }
.卡身 { color: var(--灰暗); font-size: 12px; margin-top: 5px; line-height: 1.7; }

.分栏 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.三栏 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1080px) { .分栏, .三栏 { grid-template-columns: 1fr; } }

.带号 { position: relative; }
.号角 {
  position: absolute;
  top: -1px;
  left: -1px;
  background: var(--镭);
  color: #08120f;
  font-size: 11px;
  padding: 1px 7px;
  letter-spacing: 1px;
  font-weight: 700;
}
.角我 { background: var(--镭); }
.角敌 { background: var(--金); }

.滑条 { display: flex; align-items: center; gap: 8px; }
.滑条 input[type=range] { flex: 1; }

.说 { color: var(--灰); font-size: 12px; line-height: 1.8; }
.说 b { color: var(--金); font-weight: 600; }

.空 { color: var(--灰暗); padding: 22px; text-align: center; letter-spacing: 2px; border: 1px dashed var(--线); }

.提示 { padding: 8px 12px; border-left: 3px solid var(--金); background: #1a1a12; color: var(--金); font-size: 13px; margin-bottom: 10px; }
.提示.错 { border-color: var(--朱); background: #1d1211; color: #e9a49c; }
.提示.成 { border-color: var(--镭); background: #10201d; color: var(--镭); }

.隐 { display: none !important; }
滚 { display: block; max-height: 300px; overflow: auto; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #0c1213; }
::-webkit-scrollbar-thumb { background: #23403d; }
::-webkit-scrollbar-thumb:hover { background: var(--镭暗); }