/* 对齐原版 css/3gpp0.css 配色，整体样式不另起炉灶 */
:root {
  --bg: #daf5cf;
  --ink: #676060;
  --link: #080008;
  --visited: #b8bd5b;
  --line: #9bb894;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 180%;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  text-align: left;
}

body {
  padding: 8px 10px 20px;
  max-width: 480px;
  margin: 0 auto;
}

a, .link {
  color: var(--link);
  font-size: 110%;
  text-decoration: underline;
  cursor: pointer;
}
a:visited { color: var(--visited); }

.screen { display: none; }
.screen.active { display: block; }

h1 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: bold;
  color: var(--ink);
}

.muted {
  color: var(--ink);
  opacity: 0.85;
  font-size: 14px;
  margin: 0 0 10px;
}

.panel {
  margin: 8px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

label {
  display: block;
  margin-top: 6px;
}
input {
  width: 100%;
  max-width: 280px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: #333;
  font-size: 16px;
}

.row {
  margin: 8px 0;
  line-height: 200%;
}
.row .sep { margin: 0 4px; color: var(--ink); }

button, .btn {
  appearance: none;
  border: 1px solid #7a9a72;
  background: #eef8e8;
  color: var(--link);
  padding: 4px 10px;
  margin: 2px 4px 2px 0;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}
button.primary {
  background: #cfe9c4;
  font-weight: bold;
}

.hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 8px 0;
}

.footer {
  margin-top: 16px;
  font-size: 12px;
  color: var(--ink);
  opacity: 0.75;
}

.log div { margin: 0; }
.log .good { color: #2d6a2d; }
.log .bad { color: #8a3030; }

/* 战斗血条：对齐原版 10 格表情条 */
.faces {
  display: inline-block;
  line-height: 1;
  margin: 2px 0 4px;
  vertical-align: middle;
}
.faces i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 2px;
  border: 1px solid #7a9a72;
  vertical-align: middle;
}
.faces-enemy i.on { background: #c45c5c; border-color: #8a3030; }
.faces-enemy i.off { background: #e8d8d8; }
.faces-self i.on { background: #5a9e5a; border-color: #2d6a2d; }
.faces-self i.off { background: #d8e8d8; }
.faces-mp i.on { background: #5a7aae; border-color: #304878; }
.faces-mp i.off { background: #d8dee8; }

.home { text-align: center; }
.brand { margin-top: 12px; line-height: 1.2; }
.brand-cn { font-size: 42px; font-weight: bold; color: #3d5a36; letter-spacing: 4px; }
.brand-en { margin-left: 6px; font-size: 18px; color: #080008; font-weight: bold; }
.slogan { margin: 4px 0 12px; color: #676060; font-size: 14px; }
.sec-title { margin: 14px 0 8px; color: #3d5a36; font-size: 15px; }
.btn-row { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.btn-row.center { justify-content: center; }
.btn.flex { flex: 1; min-width: 40%; max-width: 48%; }
.last-zone { width: 80%; margin: 8px auto; padding: 10px 12px; font-size: 17px; display: block; }
.tiny { font-size: 12px; margin-top: 0; }
.zone-grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.zone-btn { width: 48%; margin: 0 0 8px; padding: 8px 4px; box-sizing: border-box; }
.zone-btn.neon { background: #cfe9c4; font-weight: bold; }
.zone-btn.disabled, .btn:disabled { opacity: 0.55; }
.err { color: #8a3030; margin-top: 8px; min-height: 1.2em; }