/* Terminal page (web/terminal.html). Loaded after bt10x.css, which holds the
   fonts, palette vars and rules shared with the landing page and avatar creator. */
/* Marker class: elements with .no-prompt-focus are exempt from the
   click-to-refocus-prompt behavior in web/terminal/terminal.ts. */
:root {
  /* Per-terrain color scheme (one var per TerrainType). */
  --t-lightWoods: var(--c-green);
  --t-heavyWoods: var(--c-green);
  --tb-heavyWoods: var(--cb-dim);
  --t-rough: #cbb98a;
  --t-rubble: #a08a6a;
  --club: #e5c07b;
  --wreckage: #9a8f84;
  --t-pavement: #8a8a9a;
  --t-water1: #6aaae0;
  --t-water2: #5a9ad8;
  --t-water3: #4a8ac8;
  --t-lightBuilding: #d8b06a;
  --t-mediumBuilding: #c89a5a;
  --t-heavyBuilding: #b4885a;
  --t-hardenedBuilding: #a87a4a;
  /* Header height; taller on touch screens (see the pointer: coarse block). */
  --topbar-h: 36px;
}
/* Fixed header: a flex: none row above #term (body is a 100dvh column), so it
   never overlaps the log. Notch / rounded-corner insets need viewport-fit=cover. */
#topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(12px + env(safe-area-inset-right)) 0
    calc(12px + env(safe-area-inset-left));
  border-bottom: 1px solid var(--c-line);
}
#topbar-title {
  color: var(--c-green);
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#topbar-version {
  color: var(--c-dim);
  font-size: 11px;
  font-weight: normal;
}
/* Header buttons: MOTD, then the landing page link rightmost. */
#motd-open,
#home-link {
  display: flex;
  align-items: center;
  flex: none;
  height: calc(var(--topbar-h) - 10px);
  padding: 0 10px;
  font-size: 12px;
  font-weight: bold;
}
#motd-open {
  margin-left: auto;
  gap: 6px;
  cursor: pointer;
}
#home-link {
  white-space: nowrap;
}
/* Unread marker: MOTD changed since this browser last opened it. */
#motd-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--c-yellow);
}
#motd-dot[hidden] {
  display: none;
}
#legal {
  padding: 4px calc(12px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom))
    calc(12px + env(safe-area-inset-left));
}
/* MOTD: a modal <dialog> in the browser top layer, anchored under the header
   button. Only its body scrolls; the page itself never does. */
#motd {
  --motd-top: calc(env(safe-area-inset-top) + var(--topbar-h) + 8px);
  position: fixed;
  /* --motd-right lines the right edge up with the MOTD button, which sits
     left of #home-link; terminal.ts sets it on open. */
  inset: var(--motd-top) var(--motd-right, calc(12px + env(safe-area-inset-right))) auto auto;
  margin: 0;
  padding: 0;
  width: min(520px, calc(100vw - 24px));
  max-width: none;
  overflow: hidden;
  max-height: min(60vh, calc(100vh - var(--motd-top) - env(safe-area-inset-bottom) - 8px));
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  color: var(--c-text);
  font-size: 12px;
}
@supports (height: 100dvh) {
  #motd {
    max-height: min(60dvh, calc(100dvh - var(--motd-top) - env(safe-area-inset-bottom) - 8px));
  }
}
#motd[open] {
  display: flex;
  flex-direction: column;
}
#motd::backdrop {
  background: rgba(4, 6, 4, 0.55);
}
#motd-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 4px 10px;
  border-bottom: 1px solid var(--c-line);
}
#motd-title {
  color: var(--c-green);
  font-weight: bold;
}
#motd-close {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
#motd-close:hover {
  color: var(--c-white);
  border-color: var(--c-line);
}
#motd-close:focus-visible {
  outline: none;
  border-color: var(--c-yellow);
}
#motd-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#term {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
#out {
  flex: 1;
  overflow-y: auto;
  white-space: pre;
  padding: 6px;
}
#out .cmd {
  color: var(--c-white);
  border-top: 1px solid var(--c-line);
  padding-top: 6px;
  margin-top: 6px;
  font-weight: bold;
}
#out .err {
  color: var(--c-red);
}
#out .banner,
#motd-body .banner {
  color: var(--c-green);
  font-weight: bold;
}
/* 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: var(--c-green);
  user-select: none;
}
#out .collapsible > summary:hover {
  text-decoration: underline;
}
#out .collapsible-body {
  white-space: pre;
  margin-top: 0.2em;
  padding-left: 0.5em;
}
/* Game board output: dedicated font + line spacing, styled spans. */
#out .collapsible-body,
#out .board-legend,
#out .board,
#out .board-grid {
  font-family: var(--board-ff);
  font-size: var(--board-fs);
}
#out .board,
#out .board-grid {
  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;
}
#out .board-grid > span {
  display: block;
  width: 1ch;
}
/* Row renderer: ASCII runs as text, other glyphs boxed in fixed 1ch cells. */
#out .board-grid.board-rows {
  display: inline-block;
  white-space: pre;
}
#out .board-grid.board-rows > div {
  height: var(--board-lh);
}
#out .board-grid.board-rows .cell {
  display: inline-block;
  width: 1ch;
  height: var(--board-lh);
  vertical-align: top;
}
.t-lightWoods {
  color: var(--t-lightWoods);
}
.t-heavyWoods {
  color: var(--t-heavyWoods);
  background-color: var(--tb-heavyWoods);
  font-weight: bold;
}
.t-rough {
  color: var(--t-rough);
}
.t-rubble {
  color: var(--t-rubble);
}
.t-club {
  color: var(--club);
  font-weight: bold;
}
.t-wreckage {
  color: var(--wreckage);
  font-weight: bold;
}
.t-pavement {
  color: var(--t-pavement);
}
.t-water1 {
  color: var(--t-water1);
}
.t-water2 {
  color: var(--t-water2);
}
.t-water3 {
  color: var(--t-water3);
}
.t-lightBuilding {
  color: var(--t-lightBuilding);
}
.t-mediumBuilding {
  color: var(--t-mediumBuilding);
}
.t-heavyBuilding {
  color: var(--t-heavyBuilding);
}
.t-hardenedBuilding {
  color: var(--t-hardenedBuilding);
}
.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;
  flex-wrap: wrap;
  border-top: 1px solid var(--c-line);
  padding-top: 6px;
  margin-top: 6px;
}
/* After `clear` nothing sits above the prompt (or the echoed command that
   takes its place) to separate it from: drop the rule so it doesn't double
   the header's border. */
#out > .cmd:first-child,
#inrow:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
#prompt {
  white-space: pre;
  color: var(--c-green);
  padding-top: 1px;
}
#cmd {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font: inherit;
  caret-shape: block;
  caret-color: var(--c-green);
  min-width: 8ch;
}
#cmd:focus-visible {
  box-shadow: inset 0 -1px 0 var(--cb-green);
}
/* Touch screens: taller header, bigger MOTD close target, and a 16px prompt
   so iOS doesn't zoom in on focus. */
@media (pointer: coarse) {
  :root {
    --topbar-h: 44px;
  }
  #motd-close {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  #motd-head {
    padding: 0 0 0 12px;
  }
  #cmd {
    font-size: 16px;
  }
}
/* Narrow screens: wrap the log so the prompt never scrolls away; wide blocks scroll in place. */
@media (max-width: 480px) {
  /* Phone: the MOTD becomes a sheet from under the header to above the home bar. */
  #motd {
    inset: var(--motd-top) calc(8px + env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
    width: auto;
    height: auto;
    max-height: none;
    font-size: 13px;
  }
  #out {
    overflow-x: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  #out .board,
  #out .board-grid,
  #out .board-legend,
  #out .columns,
  #out .collapsible-body {
    overflow-x: auto;
    overflow-wrap: normal;
    white-space: pre;
  }
  #out .board-grid.board-rows {
    display: block;
    max-width: 100%;
  }
  #prompt {
    white-space: pre-wrap;
  }
}