/* 六州战斗模拟器 —— 镭光主题（视觉美化层）
   ============================================================
   本文件是叠加在 样式.css 之上的纯视觉主题层：
   只覆写颜色、边框与装饰，不依赖界面结构变动，
   不改动任何功能逻辑与人物、词条数据。

   还原方法：删除 首页.html 中引用本文件的那一行
   （<link rel="stylesheet" href="/网页/镭光主题.css">），
   即完全回到原样；亦可连同本文件与 网页/素材 一并删除。

   风格依据：燕丹特区·绿脸工业一侧——墨黑城底、荧光镭绿、
   装饰艺术式的斜切与直角铜饰；素材取自工作区标志素材。
   造型语言为「切角」：按钮、页签、浮层取斜切硬角，不用圆角；
   配色一律单色平涂，不使用跨色相渐变；层次靠明度差与辉光拉开。
   全部资源为项目内相对路径引用，不依赖任何网络资源，
   整个文件夹压缩分发后显示效果一致。 */

/* ---------- 〇、标题字体：寒蝉高黑体（仅用于标题与结构字，正文不变） ---------- */
@font-face {
  font-family: '镭黑';
  src: url('./素材/字体/寒蝉高黑体.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* ---------- 一、色彩变量覆写：主色仍为绿，向「镭光」提亮 ---------- */
:root {
  --底: #070b0b;
  --底二: #0d1516;
  --底三: #131e20;
  --线: #35605a;
  --线亮: #5fa098;
  --镭: #6ff5b2;
  --镭暗: #2fa87c;
  --金: #dcb86a;
  --朱: #d0574d;
  --素: #e9f3ee;
  --灰: #92aca7;
  --灰暗: #5f7976;
  /* 主题层新增：辉光用色 */
  --荧: rgba(111, 245, 178, 0.16);
  --荧强: rgba(111, 245, 178, 0.42);
  --金荧: rgba(220, 184, 106, 0.16);
}

/* ---------- 二、页面底景：城底辉光 + 机关格线 + 脸谱水印 + CRT 屏膜 ---------- */
html { background: var(--底); }
body {
  background:
    radial-gradient(1200px 620px at 76% -12%, rgba(111, 245, 178, 0.07), transparent 62%),
    radial-gradient(900px 520px at 6% 112%, rgba(220, 184, 106, 0.05), transparent 60%),
    repeating-linear-gradient(0deg, rgba(111, 245, 178, 0.022) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(111, 245, 178, 0.022) 0 1px, transparent 1px 46px),
    var(--底);
}
/* CRT 屏膜：极淡扫描线 + 轻暗角 + 缓慢下移的亮带。
   走复古荧光屏的路子：扫描线以绿相余辉为主、几乎不压暗，
   辉光依旧从下层透出。盖在全屏最上，纯装饰，不拦截任何点击。 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 46%, rgba(111, 245, 178, 0.035) 50%, transparent 54%) 0 0 / 100% 300% no-repeat,
    radial-gradient(130% 105% at 50% 50%, transparent 70%, rgba(0, 0, 0, 0.16) 100%) 0 0 / 100% 100% no-repeat,
    repeating-linear-gradient(0deg, rgba(111, 245, 178, 0.028) 0 1px, rgba(0, 0, 0, 0.05) 1px 2px, transparent 2px 4px);
  animation: 扫带 11s linear infinite;
}
/* 右下角的绿脸工业脸谱水印：极淡，纯装饰，不拦截任何点击 */
body::after {
  content: '';
  position: fixed;
  right: -3vmin;
  bottom: -5vmin;
  width: 44vmin;
  height: 57vmin;
  background: url('./素材/绿脸标徽.png') no-repeat center / contain;
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.根 { position: relative; z-index: 1; }

/* ---------- 三、顶栏：单色墨底 + 镭色细线 + 脸谱徽记 ---------- */
.顶栏 {
  position: relative;
  background: #0c1413;
  border-bottom: 1px solid var(--线);
  box-shadow: 0 1px 0 rgba(111, 245, 178, 0.1), 0 10px 26px -14px rgba(0, 0, 0, 0.9);
}
.顶栏::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: rgba(111, 245, 178, 0.34);
  box-shadow: 0 0 8px rgba(111, 245, 178, 0.4);
  pointer-events: none;
}
/* 题字前的小脸谱徽记 */
.顶栏 .标::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 31px;
  margin-right: 11px;
  vertical-align: -7px;
  background: url('./素材/绿脸标徽.png') no-repeat center / contain;
  filter: drop-shadow(0 0 6px rgba(111, 245, 178, 0.55));
}
/* 题字：单色镭绿 + 呼吸辉光 */
.顶栏 .标 {
  font-family: '镭黑', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  letter-spacing: 3px;
  color: var(--镭);
  text-shadow: 0 0 14px rgba(111, 245, 178, 0.42);
  animation: 辉光呼吸 7s ease-in-out infinite;
}
.标小 {
  letter-spacing: 1.5px;
  color: var(--灰);
}

/* ---------- 四、按钮：斜切硬角 + 双层描边（切角语言） ----------
   外层背景即「边框色」，内层 ::before 缩进 1px 为底色，
   两层各裁一次斜角，得到沿切角走的细描边；全程直角与斜切，不用圆角。 */
button {
  position: relative;
  z-index: 0;
  isolation: isolate;
  border: 0;
  background: var(--线);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  padding: 6px 14px;
  color: var(--素);
  font: 13px/1.6 '镭黑', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  letter-spacing: 2px;
  transition: background 0.15s, color 0.15s, filter 0.15s, transform 0.15s;
}
button::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--底三);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
button:hover {
  background: var(--镭暗);
  color: var(--镭);
  filter: drop-shadow(0 0 7px rgba(111, 245, 178, 0.35));
}
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
button.小 {
  padding: 3px 9px;
  font-size: 12px;
  letter-spacing: 1px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
button.小::before {
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
/* 主按钮：镭灯整枚点亮 */
button.主 {
  background: var(--镭);
  color: #08120f;
  font-weight: 700;
  filter: drop-shadow(0 0 9px rgba(111, 245, 178, 0.3));
}
button.主::before { background: var(--镭); }
button.主:hover {
  background: #a6ffd9;
  color: #08120f;
  filter: drop-shadow(0 0 14px rgba(111, 245, 178, 0.55));
  transform: translateY(-1px);
}
button.主:hover::before { background: #8ff8cf; }
/* 危险按钮：血色描边 */
button.危 { background: #6b2b26; color: #d98c85; }
button.危:hover {
  background: var(--朱);
  color: #ffe3df;
  filter: drop-shadow(0 0 8px rgba(208, 87, 77, 0.45));
}
/* 顶栏开关等以 .片 为皮的小按钮：不切角，维持细框 */
button.片 {
  clip-path: none;
  background: transparent;
  border: 1px solid var(--线);
  padding: 1px 7px;
}
button.片::before { display: none; }

/* ---------- 五、页签：切角 + 选中镭灯（加大样式仅顶栏，词条页类签保持小按钮） ---------- */
.顶栏 .页签区 {
  flex: 1 1 auto;
  min-width: 340px;
  max-width: 760px;
  gap: 14px;
}
.顶栏 .页签 {
  flex: 1 1 auto;
  font-family: '镭黑', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  font-weight: 700;
  background: var(--线);
  color: var(--灰);
  padding: 9px 0;
  font-size: 16px;
  letter-spacing: 22px;
  text-align: center;
  text-indent: 22px; /* 抵消末字后的字距，视觉居中 */
}
.顶栏 .页签::before {
  /* 未选中页签的底色：偏绿的深墨底 + 内缘微光，避免大按钮显得空 */
  background: #13211f;
  box-shadow: inset 0 0 22px -7px rgba(111, 245, 178, 0.3);
}
/* 页签左端竖饰标：一枚小镭绿立柱 */
.顶栏 .页签::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 15px;
  background: var(--镭暗);
  box-shadow: 0 0 7px rgba(111, 245, 178, 0.3);
}
.顶栏 .页签:hover { background: var(--镭暗); color: var(--素); }
.顶栏 .页签:hover::after { background: var(--镭); }
.顶栏 .页签.选中 {
  background: var(--镭);
  color: #08120f;
  font-weight: 700;
  filter: drop-shadow(0 0 10px rgba(111, 245, 178, 0.45));
}
.顶栏 .页签.选中::before { background: var(--镭); }
.顶栏 .页签.选中::after { background: #08120f; box-shadow: none; }
.顶栏 .页签.选中:hover { background: #8ff8cf; color: #08120f; }
.顶栏 .页签.选中:hover::before { background: #8ff8cf; }
/* 词条页类目签：维持原尺寸的小切角按钮，仅微调色面 */
.板 .页签 { background: var(--线); color: var(--灰); letter-spacing: 2px; }
.板 .页签::before { background: #101a19; }
.板 .页签:hover { background: var(--镭暗); color: var(--素); }
.板 .页签.选中 { background: var(--镭); color: #08120f; }
.板 .页签.选中::before { background: var(--镭); }

/* ---------- 六、输入控件：左侧竖饰线 + 聚焦光环 ---------- */
input:not([type='checkbox']):not([type='radio']):not([type='range']),
select,
textarea {
  background: var(--底三);
  border: 1px solid var(--线);
  box-shadow: inset 2px 0 0 var(--线亮);
}
input:not([type='checkbox']):not([type='radio']):not([type='range']):focus,
select:focus,
textarea:focus {
  border-color: var(--镭暗);
  box-shadow: inset 2px 0 0 var(--镭暗), 0 0 0 1px rgba(111, 245, 178, 0.2), 0 0 14px rgba(111, 245, 178, 0.14);
}
/* 复选框与下拉框的原生控件取镭色，不再露出系统蓝 */
input[type='checkbox'], input[type='radio'] { accent-color: var(--镭暗); width: auto; }
select { accent-color: var(--镭暗); }
/* 六维滑条：墨槽 + 镭芯 */
input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  height: 22px;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 5px;
  background: #16281f;
  border: 1px solid var(--线);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  margin-top: -6px;
  background: var(--镭);
  border: 1px solid #08120f;
  box-shadow: 0 0 10px rgba(111, 245, 178, 0.55);
}
input[type='range']::-moz-range-track {
  height: 5px;
  background: #16281f;
  border: 1px solid var(--线);
}
input[type='range']::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 0;
  background: var(--镭);
  border: 1px solid #08120f;
  box-shadow: 0 0 10px rgba(111, 245, 178, 0.55);
}

/* ---------- 七、面板：四角铜饰 + 内描细线 + 题标镭条 ---------- */
.板 {
  position: relative;
  background: var(--底二);
  box-shadow: 0 2px 14px -8px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(111, 245, 178, 0.04);
}
.板::before,
.板::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.板::before {
  top: 5px;
  left: 5px;
  border-top: 2px solid var(--镭暗);
  border-left: 2px solid var(--镭暗);
}
.板::after {
  bottom: 5px;
  right: 5px;
  border-bottom: 2px solid var(--镭暗);
  border-right: 2px solid var(--镭暗);
}
/* 板题前的竖镭条（板题本身是 flex，直接作为首项排入） */
.板题::before {
  content: '';
  width: 4px;
  height: 15px;
  background: var(--镭);
  box-shadow: 0 0 8px var(--荧强);
}
.板题 {
  font-family: '镭黑', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  letter-spacing: 2px;
  border-bottom: 1px dashed var(--线);
}

/* ---------- 八、标签片与号角：微光 ---------- */
.片.镭 { box-shadow: 0 0 8px -3px var(--荧); }
.片.金 { box-shadow: 0 0 8px -3px var(--金荧); }
.号角 { box-shadow: 0 0 10px -2px rgba(111, 245, 178, 0.5); }
.号角.角敌 { box-shadow: 0 0 10px -2px rgba(220, 184, 106, 0.5); }

/* ---------- 九、战报：段框角饰、进度镭流、结果辉光 ---------- */
.战段 {
  position: relative;
  box-shadow: 0 2px 12px -8px rgba(0, 0, 0, 0.8);
}
.战段::before,
.战段::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  pointer-events: none;
}
.战段::before {
  top: 4px;
  right: 4px;
  border-top: 2px solid var(--线亮);
  border-right: 2px solid var(--线亮);
}
.战段::after {
  bottom: 4px;
  left: 4px;
  border-bottom: 2px solid var(--线亮);
  border-left: 2px solid var(--线亮);
}
.战段.头 { box-shadow: 0 2px 14px -8px rgba(111, 245, 178, 0.25); }
.战段.头::before,
.战段.头::after { border-color: var(--镭暗); }
.段题 {
  font-family: '镭黑', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  background: #12211d;
  border-bottom: 1px solid var(--线);
}
.进度 { background: #0a1211; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.65); }
.进度内 {
  background: var(--镭);
  box-shadow: 0 0 10px rgba(111, 245, 178, 0.65);
}
.结果条 {
  background: #10201d;
  border-left: 3px solid var(--镭暗);
  box-shadow: inset 0 0 26px rgba(111, 245, 178, 0.06);
}
.结果条 .果 {
  font-family: '镭黑', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  text-shadow: 0 0 14px rgba(111, 245, 178, 0.55);
}
.结果板 { box-shadow: 0 0 22px -10px rgba(111, 245, 178, 0.35); }
/* 战报正文（行文）一律不加辉光，保证密集文字可读 */
.行文 { text-shadow: none; }
.核心片.强 { box-shadow: 0 0 8px -2px var(--荧强); }
.栏标 { text-shadow: 0 0 8px rgba(111, 245, 178, 0.35); }

/* ---------- 十、词条列表与已选区：选中辉光 ---------- */
.词条列 { background: #0c1415; box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.45); }
.词条项:hover { background: #12201f; }
.词条项.选中 { background: #14272a; box-shadow: 0 0 14px -6px var(--荧强); }
.词条项.高亮 { background: #16292a; }
.词条详 { background: #0b1213; }
.已选项 { background: #0d1516; }
.已选项.选中 { background: #11201c; box-shadow: 0 0 12px -6px var(--荧强); }

/* ---------- 十一、表格与统计：表头压深、斑马纹 ---------- */
table.tb th { background: #14211d; }
tbody tr:nth-child(even) td { background: rgba(111, 245, 178, 0.026); }
table.tb tr:hover td { background: #13211f; }
.最有条 {
  background: #1a1608;
  box-shadow: inset 0 0 20px rgba(220, 184, 106, 0.06);
}
.最有条 .名 { text-shadow: 0 0 10px rgba(220, 184, 106, 0.45); }
table.tb tr.最优 td { background: #1a1608; }

/* ---------- 十二、卡片网格：悬停显角饰并浮起 ---------- */
.卡 { position: relative; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.卡::before,
.卡::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.卡::before {
  top: 4px;
  left: 4px;
  border-top: 2px solid var(--镭);
  border-left: 2px solid var(--镭);
}
.卡::after {
  bottom: 4px;
  right: 4px;
  border-bottom: 2px solid var(--镭);
  border-right: 2px solid var(--镭);
}
.卡:hover {
  border-color: var(--镭暗);
  box-shadow: 0 4px 18px -8px rgba(111, 245, 178, 0.4);
  transform: translateY(-1px);
}
.卡:hover::before, .卡:hover::after,
.卡.选中::before, .卡.选中::after { opacity: 1; }
.卡.选中 { box-shadow: 0 0 0 1px var(--镭暗) inset, 0 0 20px -8px rgba(111, 245, 178, 0.5); }

/* ---------- 十三、浮层：切角双层描边 + 提示 ---------- */
.遮罩 { background: rgba(3, 7, 7, 0.78); backdrop-filter: blur(4px); }
.浮层 {
  position: relative;
  z-index: 0;
  isolation: isolate;
  border: 0;
  background: var(--线亮);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  box-shadow: 0 0 52px rgba(0, 0, 0, 0.85);
}
.浮层::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--底二);
  clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
}
.浮层 h3 {
  font-family: '镭黑', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--线);
  padding-bottom: 8px;
  text-shadow: 0 0 10px rgba(111, 245, 178, 0.35);
}
.提示 { background: #1a1a12; }
.提示.成 { background: #10201d; }
.提示.错 { background: #1d1211; }

/* ---------- 十四、载入与滚动条、选区 ---------- */
.载入中 { animation: 明灭 1.6s ease-in-out infinite; }
::-webkit-scrollbar-track { background: #0a1011; }
::-webkit-scrollbar-thumb {
  background: #2c5a4e;
  border: 1px solid #0a1011;
}
::-webkit-scrollbar-thumb:hover { background: var(--镭暗); }
::selection { background: rgba(111, 245, 178, 0.28); color: #eafff4; }

/* ---------- 十五、动效与降级 ---------- */
@keyframes 辉光呼吸 {
  0%, 100% { text-shadow: 0 0 12px rgba(111, 245, 178, 0.32); }
  50% { text-shadow: 0 0 20px rgba(111, 245, 178, 0.55); }
}
@keyframes 明灭 {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
/* CRT 亮带回扫：整幅三层背景缓慢下移，亮带周期性掠过屏幕 */
@keyframes 扫带 {
  from { background-position: 0 -300%, 0 0, 0 0; }
  to { background-position: 0 130%, 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}