:root {
  --bg: #0c100e;
  --panel: #131916;
  --line: #26302b;
  --bone: #e9e0c9;
  --muted: #8c917f;
  --ember: #e2783a;
  --moss: #6f9a6a;
  --berry: #c8553d;
  --stone: #9aa0a6;
  --frost: #8fb3c7;
  --display: "IM Fell English SC", Georgia, serif;
  --body: "Spectral", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--bone); font-family: var(--body); }
body { display: grid; grid-template-rows: auto 1fr; overflow: hidden; }

button {
  font: 500 12px var(--mono); color: var(--bone); background: transparent;
  border: 1px solid var(--line); padding: 6px 10px; cursor: pointer; letter-spacing: .02em;
}
button:hover { border-color: var(--muted); }
button.on { background: var(--bone); color: var(--bg); border-color: var(--bone); }
button.ember { border-color: var(--ember); color: var(--ember); }
button.ember:hover { background: var(--ember); color: var(--bg); }

.bar {
  display: flex; align-items: center; gap: 28px; padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #151c18, var(--bg));
}
.brand { display: flex; align-items: baseline; gap: 14px; margin-right: auto; }
.brand h1 { font: 400 28px var(--display); margin: 0; letter-spacing: .06em; }
.brand .sub { font: 12px var(--mono); color: var(--muted); }
.stages { display: flex; align-items: center; }
.stages .stage {
  font: 500 11px var(--mono);
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 6px 10px;
  letter-spacing: .03em;
}
.stages .stage + .stage { border-left: none; }
.stages .stage.reached { color: var(--frost); }
.stages .stage.on { background: var(--bone); color: var(--bg); border-color: var(--bone); }
.stages .autonomy {
  margin-left: 9px;
  font: 500 9px var(--mono);
  letter-spacing: .12em;
  color: var(--moss);
  border: 1px solid rgba(111,154,106,.45);
  padding: 5px 7px;
}
.controls { display: flex; align-items: center; gap: 12px; font: 12px var(--mono); color: var(--muted); }
.controls .tick b { color: var(--bone); font-weight: 500; display: inline-block; min-width: 5ch; }
.controls #play { display: grid; place-items: center; padding: 5px 7px; }
.speed { display: flex; align-items: center; gap: 6px; }
.speed input { accent-color: var(--ember); width: 80px; }

main { display: grid; grid-template-columns: 1fr 380px; min-height: 0; }

.stage-wrap { position: relative; display: grid; grid-template-rows: 1fr auto 150px; min-height: 0; border-right: 1px solid var(--line); }
.map-box { position: relative; min-height: 0; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.legend {
  display: flex; gap: 18px; padding: 8px 16px; font: 11px var(--mono); color: var(--muted);
  border-top: 1px solid var(--line);
}
.legend .hint { margin-left: auto; font-style: italic; font-family: var(--body); font-size: 13px; }
.lg { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 1px; }
.lg.lumber { background: var(--moss); }
.lg.food { background: var(--berry); border-radius: 50%; }
.lg.stone { background: var(--stone); transform: rotate(45deg); }
.lg.fire { background: var(--ember); border-radius: 50%; box-shadow: 0 0 6px var(--ember); }

.log {
  list-style: none; margin: 0; padding: 8px 16px; overflow: hidden;
  border-top: 1px solid var(--line); font: 12px/1.7 var(--mono); color: var(--muted);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.log li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log li b { color: var(--bone); font-weight: 500; }
.log li .act { color: var(--ember); }
.log li.world { color: var(--frost); }
.log li:first-child { animation: in .5s ease-out; }
@keyframes in { from { opacity: 0; transform: translateY(-6px); } }

.panel { overflow-y: auto; padding: 18px 20px 30px; background: var(--panel); }
.who { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--bone); flex: none; }
.who h2 { font: 400 26px var(--display); margin: 0; line-height: 1; }
.action { font: 500 11px var(--mono); color: var(--ember); letter-spacing: .08em; }

.panel h3 {
  font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  margin: 20px 0 8px; padding-top: 12px; border-top: 1px solid var(--line);
}
.panel h3 small { text-transform: none; letter-spacing: 0; font-family: var(--body); font-style: italic; font-size: 12px; margin-left: 6px; }
blockquote { margin: 0; font-style: italic; font-size: 16px; line-height: 1.5; color: var(--bone); }
.said { margin: 8px 0 0; font: 13px var(--mono); color: var(--frost); min-height: 1em; }

.bars { display: grid; grid-template-columns: 110px 1fr 58px; gap: 6px 10px; align-items: center; font: 12px var(--mono); }
.bars .lbl { color: var(--muted); }
.bars .track { height: 6px; background: #1f2723; position: relative; }
.bars .fill { position: absolute; inset: 0 auto 0 0; background: var(--bone); transition: width .6s ease; }
.bars .val { text-align: right; color: var(--bone); }
.bars .val .up { color: var(--moss); }
.bars .val .down { color: var(--berry); }
.inv { font: 12px var(--mono); color: var(--muted); margin: 10px 0 0; }

.memories { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 1.45; }
.memories li { display: grid; grid-template-columns: 1fr 34px; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.memories li span { font: 11px var(--mono); color: var(--muted); text-align: right; }
.memories li.hot span { color: var(--ember); }

details { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
summary { font: 11px var(--mono); color: var(--muted); cursor: pointer; }
pre { font: 11px/1.5 var(--mono); color: var(--frost); white-space: pre-wrap; word-break: break-word; }

button:disabled, input:disabled { opacity: .5; cursor: default; }