* { box-sizing: border-box; margin: 0; }
body {
  background: #05070a;
  color: #bfe9c8;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  min-height: 100vh;
  padding: 14px;
}
a { color: #8fe3a1; }
h1 { color: #8fe3a1; font-size: 16px; letter-spacing: 3px; font-weight: 500; }
.bar {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid #1d3322; padding-bottom: 8px; margin-bottom: 10px; gap: 8px; flex-wrap: wrap;
}
.dim { color: #3f7a4d; font-size: 12px; letter-spacing: 1px; }
.warn { color: #e8d24a; font-size: 13px; }
button {
  background: transparent; color: #8fe3a1; border: 1px solid #2d5238; border-radius: 6px;
  font-family: inherit; font-size: 13px; padding: 8px 12px; cursor: pointer; display: block;
  width: 100%; text-align: left; margin-bottom: 6px;
}
button:hover { background: #0d1a10; }
button.primary { border-color: #5a3a1b; color: #e8933a; text-align: center; }
button:disabled { opacity: 0.4; cursor: default; }
select, input {
  background: #0a1410; color: #bfe9c8; border: 1px solid #2d5238; border-radius: 6px;
  font-family: inherit; font-size: 14px; padding: 8px;
}
svg { width: 100%; display: block; }
.panel { border: 1px solid #1d3322; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.log { font-size: 13px; line-height: 1.7; min-height: 80px; }
.log .enemy { color: #e88a4a; }
.log .down, .log .collision { color: #e84a4a; }
.log .telegraph, .log .environment { color: #e8d24a; }
.log .victory { color: #8fe3a1; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
td, th { padding: 3px 6px; text-align: left; color: #bfe9c8; }
th { color: #3f7a4d; font-weight: 400; }