/* Marker class: elements with .no-prompt-focus are exempt from the
   click-to-refocus-prompt behavior in web/main.ts. */
:root {
  color-scheme: dark;
  /* Board rendering knobs (edit to restyle game boards only). */
  --board-ff: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --board-lh: 1;
  --board-fs: 0.9em;
  /* Per-terrain color scheme (one var per TerrainType). */
  --t-lightWoods: var(--c-green);
  --t-heavyWoods: var(--c-green);
  --tb-heavyWoods: var(--cb-dim);
  --c-red: #e07a6a;
  --c-green: #8fd08f;
  --c-yellow: #d8c26a;
  --c-blue: #7aa7d8;
  --c-magenta: #c88fd0;
  --c-cyan: #6ac9c0;
  --c-white: #d7e4d7;
  --c-dim: #5a6a5a;
  --cb-red: #3a1712;
  --cb-green: #16301b;
  --cb-yellow: #383012;
  --cb-blue: #152838;
  --cb-magenta: #2e1a33;
  --cb-cyan: #12302e;
  --cb-white: #243024;
  --cb-dim: #161d16;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #0c0f0c;
  color: #b8c9b8;
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.35;
}
#term {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 8px 12px;
}
#out {
  flex: 1;
  overflow-y: auto;
  white-space: pre;
}
#out .cmd {
  color: #d7e4d7;
  border-top: 1px solid #233023;
  padding-top: 6px;
  margin-top: 6px;
  font-weight: bold;
}
#out .err {
  color: #e07a6a;
}
#out .banner {
  color: #8fd08f;
  font-weight: bold;
}
#out .hint {
  color: #b9c9b0;
  font-style: italic;
}
/* Side-by-side column groups (record sheet, crit chart rows). */
#out .columns {
  display: flex;
}
#out .column {
  white-space: pre;
  flex-shrink: 0;
}
/* Collapsible critical-slot chart (info mech / sheet). */
#out .collapsible {
  margin-top: 0.4em;
}
#out .collapsible > summary {
  cursor: pointer;
  color: #8fd08f;
  user-select: none;
}
#out .collapsible > summary:hover {
  text-decoration: underline;
}
#out .collapsible-body {
  white-space: pre;
  margin-top: 0.2em;
  padding-left: 0.5em;
  font-family: var(--board-ff);
  font-size: var(--board-fs);
  color: #b8c9b8;
}
/* Game board output: dedicated font + line spacing, styled spans. */
#out .board-legend {
  font-family: var(--board-ff);
  font-size: var(--board-fs);
  margin-bottom: 0.2em;
}
#out .board {
  font-family: var(--board-ff);
  font-size: var(--board-fs);
  line-height: var(--board-lh);
}
/* Per-character CSS Grid: isolates bold to single cells. */
#out .board-grid {
  display: inline-grid;
  grid-auto-flow: row dense;
  line-height: 1;
  font-family: var(--board-ff);
  font-size: var(--board-fs);
}
#out .board-grid > span {
  display: block;
  width: 1ch;
}
.t-lightWoods {
  color: var(--t-lightWoods);
}
.t-heavyWoods {
  color: var(--t-heavyWoods);
  background-color: var(--tb-heavyWoods);
  font-weight: bold;
}
.f-red {
  color: var(--c-red);
}
.f-green {
  color: var(--c-green);
}
.f-yellow {
  color: var(--c-yellow);
}
.f-blue {
  color: var(--c-blue);
}
.f-magenta {
  color: var(--c-magenta);
}
.f-cyan {
  color: var(--c-cyan);
}
.f-white {
  color: var(--c-white);
}
.f-dim {
  color: var(--c-dim);
}
.bg-red {
  background-color: var(--cb-red);
}
.bg-green {
  background-color: var(--cb-green);
}
.bg-yellow {
  background-color: var(--cb-yellow);
}
.bg-blue {
  background-color: var(--cb-blue);
}
.bg-magenta {
  background-color: var(--cb-magenta);
}
.bg-cyan {
  background-color: var(--cb-cyan);
}
.bg-white {
  background-color: var(--cb-white);
}
.bg-dim {
  background-color: var(--cb-dim);
}
.b {
  font-weight: bold;
}
.i {
  font-style: italic;
}
#inrow {
  display: flex;
  border-top: 1px solid #233023;
  padding-top: 6px;
  margin-top: 6px;
}
#prompt {
  white-space: pre;
  color: #8fd08f;
}
#cmd {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font: inherit;
  caret-shape: bar;
}