/* ── terminal shell ──────────────────────────────────────────────────── */
#terminal {
  position: relative;
  z-index: 10;

  /* Sit in the right-hand column; the ASCII Goku owns the left. */
  margin-left: calc(var(--ascii-w) - 6vw);
  height: 100vh;
  height: 100dvh;
  /* visualViewport keeps the prompt above the mobile keyboard. */
  height: var(--vv-height, 100dvh);

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: calc(var(--pad) + 2.6em) var(--pad) var(--pad);

  color: var(--phosphor);
  text-shadow: var(--glow);
}

#scrollback {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--phosphor-dim) transparent;
  padding-right: .5em;
}
#scrollback::-webkit-scrollbar { width: 6px; }
#scrollback::-webkit-scrollbar-track { background: transparent; }
#scrollback::-webkit-scrollbar-thumb {
  background: var(--phosphor-dim);
  border-radius: 3px;
}

/* ── lines ───────────────────────────────────────────────────────────── */
.line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 1.6em;
  user-select: text;
  -webkit-user-select: text;
}

.line a {
  color: var(--phosphor-hot);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgb(var(--phosphor-rgb) / .5);
  pointer-events: auto;
  cursor: pointer;
}
.line a:hover,
.line a:focus-visible {
  background: rgb(var(--phosphor-rgb) / .18);
  text-decoration-color: currentColor;
  outline: none;
}

/* Semantic line classes — the whole visual vocabulary of the shell. */
.l-dim    { color: var(--phosphor-dim); text-shadow: none; }
.l-hot    { color: var(--phosphor-hot); }
.l-quote  { color: var(--phosphor-hot); font-style: italic; }
.l-err    { color: #ff5a5a; text-shadow: 0 0 8px rgb(255 90 90 / .45); }
.l-warn   { color: #ffcc55; text-shadow: 0 0 8px rgb(255 204 85 / .35); }
.l-echo   { color: var(--phosphor-dim); text-shadow: none; }
.l-head   { color: var(--phosphor-hot); font-weight: 600; letter-spacing: .06em; }
.l-req    { color: var(--phosphor-hot); }          /* > GET /goku/            */
.l-res    { color: var(--phosphor); }              /* < HTTP/1.1 403 Forbidden */
.l-blank  { min-height: .9em; }

.copy-ok  { color: var(--phosphor-hot); }

/* ── prompt line ─────────────────────────────────────────────────────── */
.prompt-line {
  position: relative;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: .5em;
  padding-top: .2em;
  min-height: 1.6em;
}
.prompt-line.hidden { visibility: hidden; }

.prompt {
  color: var(--phosphor-hot);
  white-space: pre;
  flex: 0 0 auto;
}
.prompt::after { content: " "; }

.echo {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 0;
}

.caret {
  display: inline-block;
  width: .62em;
  height: 1.05em;
  margin-left: 1px;
  transform: translateY(.18em);
  background: var(--phosphor);
  box-shadow: 0 0 8px rgb(var(--phosphor-rgb) / .8);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Caret goes solid while the shell is busy printing. */
.prompt-line.busy .caret { animation: none; opacity: .35; }

/* The hidden input overlays the prompt line at opacity 0.
   NOT display:none (kills focusability) and NOT left:-9999px (iOS scroll-jump). */
.hidden-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  border: 0;
  outline: none;
  background: transparent;
  caret-color: transparent;
  font-family: var(--mono);
}

/* Never outline:none with nothing to replace it. */
.prompt-line:focus-within {
  outline: 1px solid rgb(var(--phosphor-rgb) / .28);
  outline-offset: 4px;
  border-radius: 3px;
}

.tap-hint {
  display: none;
  margin-left: .8em;
  color: var(--phosphor-dim);
  text-shadow: none;
  font-size: .85em;
  letter-spacing: .12em;
  text-transform: uppercase;
  animation: blink 1.6s steps(1) infinite;
}
/* Coarse pointers only: we do NOT autofocus on load, so tell them to tap. */
@media (pointer: coarse) {
  .prompt-line:not(.touched) .tap-hint { display: inline; }
}

/* ── in-place progress bars (kamehameha, rm -rf) ─────────────────────── */
.bar { color: var(--phosphor-hot); white-space: pre; }

/* ── matrix rain ─────────────────────────────────────────────────────── */
#matrix {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #000;
  color: var(--phosphor);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  white-space: pre;
  overflow: hidden;
  cursor: pointer;
  text-shadow: 0 0 6px rgb(var(--phosphor-rgb) / .6);
}

/* ── kamehameha shake ────────────────────────────────────────────────── */
#screen.shake { animation: shake 480ms cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 1px, 0); }
  20%, 80% { transform: translate3d(4px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-7px, 2px, 0); }
  40%, 60% { transform: translate3d(7px, -1px, 0); }
}

/* ── mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  #terminal {
    margin-left: 0;
    padding: calc(var(--pad) + 3.2em) 14px 14px;
  }
  :root { --fs: 13px; }
}