/* The terminal on the glass: output, the "new output" pill and the input line.
   docs/ui-spec.md § Visuals: Terminal, Input line. Text is placed with textContent only. */
.terminal {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  color: var(--phosphor);
  font: var(--terminal-size) / var(--terminal-leading) var(--font-mono);
  text-shadow: 0 0 5px var(--phosphor-glow);
}

/* 2 px scan lines over everything on the glass, never intercepting the pointer. */
.terminal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 2px);
}

.terminal-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
}

/* The output always shows a vertical scrollbar (owner ruling 2026-09-30), with its track drawn, so
   it stays visible where the system uses overlay scrollbars that hide (macOS): WebKit and Blink draw
   a classic scrollbar for an element with ::-webkit-scrollbar styles; Firefox gets the standard
   properties instead (Blink ignores ::-webkit-scrollbar once scrollbar-color is set, so they are
   only for engines without it). */
.terminal-output {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 10px 14px 6px;
  overscroll-behavior: contain;
}

.terminal-output::-webkit-scrollbar {
  width: 10px;
}

.terminal-output::-webkit-scrollbar-track {
  border-left: 1px solid rgba(156, 255, 156, 0.18);
  background: rgba(156, 255, 156, 0.07);
}

.terminal-output::-webkit-scrollbar-thumb {
  border: 2px solid rgba(11, 15, 10, 0.9);
  border-radius: 5px;
  background: rgba(156, 255, 156, 0.45);
  box-shadow: 0 0 6px var(--phosphor-glow);
}

.terminal-output::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 255, 156, 0.65);
}

@supports not selector(::-webkit-scrollbar) {
  .terminal-output {
    scrollbar-color: rgba(156, 255, 156, 0.45) rgba(156, 255, 156, 0.07);
    scrollbar-width: thin;
  }
}

.ln {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* One div.ln.ln-<k> per line, k = out | echo | agent | system. System and agent lines are dimmer and
   italic; echo (what was typed) is a brighter tint; game output (out) is the plain phosphor. */
.ln-system,
.ln-agent {
  color: var(--phosphor-dim);
  font-style: italic;
  text-shadow: none;
}

.ln-echo {
  color: var(--phosphor-echo);
}

/* Appears when the user has scrolled up and new output has arrived. */
.new-output {
  position: absolute;
  right: 16px;
  bottom: 10px;
  z-index: 2;
  padding: 4px 12px;
  border: 1px solid var(--phosphor-rule);
  border-radius: 999px;
  background: rgba(11, 15, 10, 0.92);
  color: var(--phosphor);
  font: inherit;
  font-size: 12px;
  text-shadow: none;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(156, 255, 156, 0.25);
}

.new-output:hover {
  background: rgba(30, 50, 25, 0.95);
}

/* Pinned to the bottom of the terminal, separated from the output by a 1 px rule. A long line wraps
   and the input grows (owner ruling 2026-09-30): the terminal is a flex column, so the output above
   gives up exactly the room the input takes and the screen's height never changes. */
.input-line {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 14px 9px;
  border-top: 1px solid var(--phosphor-rule);
  background: rgba(0, 0, 0, 0.28);
}

/* Not attached: the script adds this for 300 ms and the rule flashes red. */
.input-line.is-refused {
  animation: refused 300ms ease-out;
}

@keyframes refused {
  0%,
  70% {
    border-top-color: var(--led-red);
    box-shadow: 0 -1px 0 var(--led-red);
  }
  100% {
    border-top-color: var(--phosphor-rule);
    box-shadow: none;
  }
}

.prompt {
  flex: none;
  user-select: none;
}

.input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  /* The block cursor is never drawn outside the input (above it, over the output). */
  overflow: hidden;
}

.console-input {
  display: block;
  /* One character narrower than its wrapper: a caret at the end of a full row has a spare cell
     there for the block cursor. */
  width: calc(100% - 1ch);
  height: auto; /* set from script to whole rows (input-line.js: inputHeight) */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--phosphor-echo);
  font: inherit;
  line-height: inherit;
  text-shadow: inherit;
  /* A long line wraps character by character, so each row holds exactly as many characters as fit
     and the cursor's cell is plain arithmetic (cursor.js: caretCell). */
  white-space: break-spaces;
  word-break: break-all;
  overflow-wrap: anywhere;
  /* word-break alone still keeps punctuation off a row's start ("survivors:" moves the "s" down);
     line-break: anywhere allows a break after every character. */
  line-break: anywhere;
  resize: none;
  /* Past its cap (a phone) the input scrolls, without a scrollbar taking a column. */
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  /* The block cursor below stands in for the native caret. */
  caret-color: transparent;
}

.console-input::-webkit-scrollbar {
  display: none;
}

/* Block cursor: one character wide, placed on the caret's cell, which the script writes as
   --caret-col (characters) and --caret-row (visual rows, minus any scrolled out of view). Blinks at
   1.06 s; solid under reduced motion; hidden with the [hidden] attribute when keystrokes are not
   going here. */
.cursor {
  position: absolute;
  top: calc(var(--caret-row, 0) * var(--terminal-leading) * 1em + (var(--terminal-leading) - 1.15) * 0.5em);
  left: calc(var(--caret-col, 0) * 1ch);
  width: 1ch;
  height: 1.15em;
  background: var(--phosphor);
  box-shadow: 0 0 6px var(--phosphor-glow);
  opacity: 0.9;
  pointer-events: none;
  animation: cursor-blink var(--cursor-period) steps(1, end) infinite;
}

@keyframes cursor-blink {
  0%,
  50% {
    opacity: 0.9;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor {
    animation: none;
  }
}