/* Parallax Array — browser shell. Terminal aesthetic, phone-first. */

:root {
  --bg: #070a08;
  --green: #8fdc9b;
  --green-bright: #c4f4cd;
  --green-dim: #5f9a6a;
  --amber: #e6b455;
  --amber-dim: #a5813b;
  --rule: #1c2a1f;
  --danger: #d98a6a;
  --font: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, "Menlo",
    "Consolas", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
}

body {
  font-family: var(--font);
  color: var(--green);
  font-size: 15px;
  line-height: 1.5;
  /* dvh keeps the layout viewport correct when the mobile keyboard opens */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* Subtle CRT wash — kept faint so text stays crisp on a phone. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(
      120% 90% at 50% 0%,
      rgba(143, 220, 155, 0.05),
      rgba(0, 0, 0, 0) 60%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.16) 3px
    );
}

.screen {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 16px 8px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.screen-inner {
  max-width: 760px;
  margin: 0 auto;
}

.line {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin: 0 0 2px;
}

.line.output {
  color: var(--green);
  margin-bottom: 12px;
}

/* Arrival teletype (app.js). The pending tail holds layout so the revealing
   boundary never reflows the block; visibility:hidden keeps it out of the
   accessibility tree and text selection while it waits. */
.tt-pending {
  visibility: hidden;
}

/* Faint phosphor bloom while a mission/banner block prints, decaying to normal
   once it settles — the CRT "arrival" touch. Element-agnostic: the whole
   arrival block (.line) or a single arriving banner line (.ln) can carry it. */
.arriving {
  text-shadow: 0 0 6px rgba(143, 220, 155, 0.5);
}

.settled {
  animation: phosphor-settle 700ms ease-out;
}

@keyframes phosphor-settle {
  from {
    text-shadow: 0 0 9px rgba(143, 220, 155, 0.8);
  }
  to {
    text-shadow: 0 0 0 rgba(143, 220, 155, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arriving,
  .settled {
    text-shadow: none;
    animation: none;
  }
}

/* --- Semantic output lines -------------------------------------------------
   game.js emits plain text; app.js classifies each line and wraps it in these
   spans/blocks. Each line is its own block so vertical breathing is a spacing
   concern here, never an engine whitespace change (the golden stays intact). */
.ln {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.ln.blank {
  height: 0.55em;
}

/* Room / time banner: the header of a render. Bold and brighter, with a little
   air above it so a fresh render reads as a new beat. */
.ln.pa-banner {
  font-weight: 700;
  color: var(--green-bright);
  margin-top: 6px;
}
.line.output > .ln.pa-banner:first-child {
  margin-top: 0;
}

/* Section headers — case file groups and "New observations:". Institutional. */
.ln.pa-section {
  font-weight: 700;
  color: var(--amber);
  letter-spacing: 0.05em;
  margin-top: 8px;
}

/* Field rows: "Exits: …", "Crew here: …", etc. Bold the label, not the value. */
.pa-field-label {
  font-weight: 700;
  color: var(--green);
}

/* Crew speech — the one place a person is talking. Name bold amber, words
   italic, so dialogue is unmistakable against system readouts. */
.pa-speaker {
  font-weight: 700;
  color: var(--amber);
}
.pa-say {
  font-style: italic;
}

/* Goal title and any leading crew name in narration. */
.pa-goal-title,
.pa-name {
  font-weight: 700;
  color: var(--amber);
}
.pa-name {
  color: var(--green-bright);
}

.pa-title {
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--green-bright);
}
.pa-tagline {
  color: var(--green-dim);
  font-style: italic;
}

/* The station clock advancing — quiet, systemic. */
.ln.pa-system {
  color: var(--green-dim);
}

/* Valid-command soft failures (not here, can't reach, no grounded read): dim,
   not alarming. Parser misses / refusals (block-level .pa-warn): warning-toned. */
.ln.pa-soft,
.pa-dim {
  color: var(--green-dim);
}
.ln.pa-warn {
  color: var(--danger);
}

/* Case-file entries: dim the "(inference, confidence 0.64)" metadata. */
.pa-meta {
  color: var(--green-dim);
  opacity: 0.72;
}

/* Outcomes — the shift's verdict. */
.ln.pa-win {
  font-weight: 700;
  color: var(--amber);
  margin-top: 8px;
}
.ln.pa-loss {
  font-weight: 700;
  color: var(--danger);
  margin-top: 8px;
}

.line.echo {
  color: var(--amber);
  margin-top: 10px;
}

.line.echo::before {
  content: "> ";
  color: var(--amber-dim);
}

.line.system {
  color: var(--green-dim);
}

.line.refuse {
  color: var(--danger);
  margin-bottom: 12px;
}

/* Memo block */
.memo {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 0 0 18px;
  background: rgba(143, 220, 155, 0.03);
}

.memo h1 {
  font-size: 15px;
  letter-spacing: 0.18em;
  color: var(--amber);
  margin: 0 0 12px;
  text-transform: uppercase;
}

.memo p {
  margin: 0 0 10px;
  white-space: pre-wrap;
}

.memo p:last-child {
  margin-bottom: 0;
}

.memo hr {
  border: none;
  border-top: 1px dashed var(--rule);
  margin: 12px 0;
}

.memo code {
  color: var(--amber);
  background: rgba(230, 180, 85, 0.08);
  padding: 0 3px;
  border-radius: 3px;
}

.divider {
  color: var(--green-dim);
  margin: 10px 0 14px;
  opacity: 0.7;
}

/* Composer — pinned bottom, above the mobile keyboard. */
.composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--rule);
  background: var(--bg);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 10;
}

.composer-inner {
  max-width: 760px;
  margin: 0 auto;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.chip {
  font-family: var(--font);
  font-size: 13px;
  color: var(--green);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.chip:active,
.chip:hover {
  border-color: var(--green-dim);
  background: rgba(143, 220, 155, 0.08);
}

.chip.util {
  color: var(--amber);
  border-color: var(--amber-dim);
}

/* Context chips: this room's inspectables, offered after a render. Dashed and
   dimmer so they read as ephemeral suggestions, not fixed controls. Empty row
   collapses to nothing. */
.ctx-row:empty {
  display: none;
}
.chip.ctx {
  color: var(--green-dim);
  border-style: dashed;
}
.chip.ctx::before {
  content: "⌕ ";
  opacity: 0.7;
}

/* Push the utility chips (beeps, copy) to the right edge of the row; only the
   first needs the auto margin, the flex gap spaces the rest. */
#beep-btn {
  margin-left: auto;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prompt-glyph {
  color: var(--amber);
  flex: 0 0 auto;
  user-select: none;
}

#command {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font);
  font-size: 16px; /* >=16px stops iOS zoom-on-focus */
  color: var(--green);
  background: transparent;
  border: none;
  outline: none;
  padding: 8px 0;
  caret-color: var(--amber);
}

#command::placeholder {
  color: var(--green-dim);
  opacity: 0.6;
}

.copied-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  background: var(--rule);
  color: var(--green);
  border: 1px solid var(--green-dim);
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 13px;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.copied-toast.show {
  opacity: 1;
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  .screen {
    padding: 12px 12px 4px;
  }
}

/* The PRESS ANY KEY gate: period-correct blink, killed by reduced motion. */
.press-any-key { animation: pak-blink 1.1s steps(1) infinite; }
@keyframes pak-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .press-any-key { animation: none; } }