/* ELS-NODE 7 — retro green-phosphor terminal (the public cover / night-line game).
 * Tidy, centered CRT "card": header · scrollback · game widgets · input, all in one framed box. */
:root {
  --bg:      #05080a;
  --panel:   #070d10;
  --edge:    rgba(51, 255, 158, 0.22);
  --edge-lo: rgba(51, 255, 158, 0.10);
  --ink:     #33ff9e;
  --ink-dim: #1f9c62;
  --ink-far: #14603d;
  --ink-warn:#ffd166;
  --ink-err: #ff6b6b;
  --ink-hot: #7dffc4;
  --glow:    0 0 6px rgba(51, 255, 158, 0.45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(120% 120% at 50% 40%, #0a1014 0%, var(--bg) 60%, #020405 100%);
  color: var(--ink);
  font: 15px/1.5 "Cascadia Mono", "Consolas", "SFMono-Regular", ui-monospace, monospace;
  text-shadow: var(--glow);
}

/* Center the terminal card in the viewport. */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 3vh, 2rem);
}

/* Faint scanlines + vignette over everything, purely decorative. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.16) 3px);
  z-index: 9;
}

/* The card. */
#crt {
  width: min(760px, 94vw);
  height: min(620px, 88vh);
  background: linear-gradient(180deg, var(--panel), #04090b);
  border: 1px solid var(--edge);
  border-radius: 10px;
  box-shadow: 0 0 0 1px #000 inset, 0 0 40px rgba(51,255,158,0.06),
              0 24px 60px rgba(0,0,0,0.6);
  padding: 0.9rem 1rem 0.8rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header. */
#head {
  flex: none;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--edge-lo);
  padding-bottom: 0.6rem;
  margin-bottom: 0.5rem;
}
#banner {
  margin: 0;
  color: var(--ink-far);
  white-space: pre;
  font-size: 11px;
  line-height: 1.15;
}
#title { font-size: 13px; color: var(--ink-dim); letter-spacing: 1px; }
#title b { color: var(--ink); letter-spacing: 3px; }
#title .sub { color: var(--ink-far); }
#sig { margin-left: auto; text-align: right; font-size: 11px; color: var(--ink-far); }
#sig .bar { color: var(--ink-dim); letter-spacing: 1px; }

/* Scrollback. */
#log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  padding-right: 0.3rem;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-far) transparent;
}
#log::-webkit-scrollbar { width: 8px; }
#log::-webkit-scrollbar-thumb { background: var(--ink-far); border-radius: 4px; }

.row { margin: 0.04rem 0; }
.row.you  { color: var(--ink); }
.row.sys  { color: var(--ink-dim); }
.row.elsa { color: var(--ink); }
.row.warn { color: var(--ink-warn); }
.row.err  { color: var(--ink-err); }
.row.good { color: var(--ink-hot); }
.row .who { color: var(--ink-dim); }

/* The "scope" — per-session pattern is drawn here as pixels (not DOM text). */
#stage { flex: none; margin: 0.35rem 0 0.15rem; }
#stage[hidden] { display: none; }
#scopewrap {
  border: 1px solid var(--edge-lo);
  border-radius: 6px;
  background: #030607;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
#scope { width: 100%; height: 92px; display: block; object-fit: contain; background: #030607; image-rendering: pixelated; border-radius: 3px; }
#scopelabel { font-size: 11px; color: var(--ink-dim); text-align: center; }

/* The knock beat-bar + strike zone. */
#beatwrap { display: none; flex-direction: column; gap: 0.45rem; }
#beatwrap.on { display: flex; }
#beat {
  position: relative;
  height: 30px;
  border: 1px solid var(--edge-lo);
  border-radius: 4px;
  background: #030607;
  overflow: hidden;
}
#zone {
  position: absolute; top: 0; bottom: 0;
  left: 50%; width: 15%; transform: translateX(-50%);
  background: rgba(51,255,158,0.10);
  border-left: 1px solid var(--edge);
  border-right: 1px solid var(--edge);
}
#zone.lit { background: rgba(125,255,196,0.28); }
#carrier {
  position: absolute; top: 3px; bottom: 3px; width: 3px;
  background: var(--ink-hot); box-shadow: 0 0 8px var(--ink-hot);
  left: 0;
}
#pips { display: flex; gap: 0.4rem; justify-content: center; font-size: 20px; line-height: 1; }
#pips .pip { color: var(--ink-far); transition: color 0.08s; }
#pips .pip.in   { color: var(--ink); }
#pips .pip.hit  { color: var(--ink-hot); }
#pips .pip.miss { color: var(--ink-err); }
#pips .pip.now  { text-shadow: 0 0 10px var(--ink); color: var(--ink); }

/* On-screen arrow keypad (mobile + accessibility). */
#pad { display: flex; gap: 0.4rem; justify-content: center; }
#pad button {
  font: inherit; font-size: 18px;
  width: 2.4rem; height: 2.1rem;
  background: #05100c; color: var(--ink);
  border: 1px solid var(--edge); border-radius: 5px;
  text-shadow: var(--glow); cursor: pointer;
}
#pad button:active { background: rgba(51,255,158,0.18); }
#pad button:focus-visible { outline: 1px solid var(--ink); }
#pad button[data-stop] { color: var(--ink-far); border-color: var(--edge-lo); margin-left: 0.4rem; }
#pad button[data-stop]:hover { color: var(--ink-err); border-color: var(--ink-err); }

/* Input line, anchored inside the card. */
#line {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 0.5ch;
  margin-top: 0.5rem;
  border-top: 1px solid var(--edge-lo);
  padding-top: 0.55rem;
}
#prompt { color: var(--ink-dim); flex: none; }
#cmd {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: var(--ink); font: inherit;
  text-shadow: var(--glow); caret-color: var(--ink);
}
#line::after {
  content: "\2588"; color: var(--ink);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  #line::after { animation: none; }
  #carrier { transition: none; }
}

@media (max-width: 520px) {
  html, body { font-size: 13.5px; }
  #banner { display: none; }
  #crt { height: 92vh; padding: 0.7rem 0.7rem 0.6rem; }
}