/* hud.css — 遥测屏 / 工程图纸风样式基础库
   规范见 DESIGN.md 第 8 节：
   冷青绿主色 #4A9B8E / 琥珀 #D4A574 / 血红 #C0392B / 深灰蓝底 #0F1419
   禁止：磨砂玻璃、渐变光斑、圆角>4px、霓虹发光、AI味大数字
*/
:root {
  --bg: #0F1419;
  --bg-panel: #141A20;
  --bg-raised: #1A222A;
  --line: rgba(74, 155, 142, 0.3);
  --line-strong: rgba(74, 155, 142, 0.55);
  --accent: #4A9B8E;
  --accent-dim: #2E6B62;
  --amber: #D4A574;
  --blood: #C0392B;
  --text: #C8D2D0;
  --text-dim: #6F7D7A;
  --text-bright: #E6EEEC;
  --mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --serif: 'Source Han Serif SC', 'Noto Serif SC', 'Songti SC', Georgia, serif;
  --r: 2px; /* 圆角上限 4px，统一 2px */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100%;
}

/* 网格点阵背景（1px 点阵） */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(74, 155, 142, 0.10) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* 切角矩形面板 */
.panel {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  padding: 16px 18px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.panel-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}

input[type="text"], input[type="number"], textarea, select {
  width: 100%;
  background: #0B0F13;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-bright);
  font-family: var(--mono);
  font-size: 14px;
  padding: 9px 11px;
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
}
input::placeholder { color: var(--text-dim); }

button {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 120ms linear, color 120ms linear;
}
button:hover:not(:disabled) { background: rgba(74, 155, 142, 0.12); color: var(--text-bright); }
button:disabled { opacity: 0.35; cursor: not-allowed; }
button.primary { border-color: var(--accent); color: var(--bg); background: var(--accent); }
button.primary:hover:not(:disabled) { background: #5AB3A4; color: var(--bg); }
button.danger { border-color: var(--blood); color: var(--blood); }

.field { margin-bottom: 14px; }

/* 状态徽章（工程标记样式） */
.badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--text-dim);
}
.badge.ok { border-color: var(--accent); color: var(--accent); }
.badge.warn { border-color: var(--amber); color: var(--amber); }
.badge.bad { border-color: var(--blood); color: var(--blood); }

.small { font-size: 12px; color: var(--text-dim); }
.mono-dim { color: var(--text-dim); }

/* 扫描线动画（叙事文本流入时用） */
@keyframes scanline {
  0% { opacity: 0.85; transform: translateY(-2px); }
  100% { opacity: 0; transform: translateY(0); }
}
.scan {
  position: relative;
}
.scan::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--accent);
  animation: scanline 900ms linear 1;
}

/* 打字机容器 */
.typewriter { font-family: var(--serif); color: var(--text-bright); }
.typewriter .caret { color: var(--accent); }

/* 日志/终端区 */
.console {
  background: #0B0F13;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  font-size: 12px;
  max-height: 220px;
  overflow-y: auto;
}
.console .row { white-space: pre-wrap; word-break: break-all; }
.console .row.err { color: var(--blood); }
.console .row.ok { color: var(--accent); }
.console .row.warn { color: var(--amber); }
.console .row .t { color: var(--text-dim); }

.divider { height: 1px; background: var(--line); margin: 16px 0; }

.row-flex { display: flex; gap: 12px; align-items: center; }
.grow { flex: 1; }

/* 玩家列表 */
.player-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-dim);
  border-radius: var(--r);
  margin-bottom: 8px;
  background: var(--bg-raised);
}
.player-item .dot {
  width: 7px; height: 7px;
  background: var(--text-dim);
  border-radius: 50%;
}
.player-item.online .dot { background: var(--accent); }
.player-item.offline { opacity: 0.5; }
.player-item .pname { color: var(--text-bright); flex: 1; }