:root {
  --bg: #070a08;
  --panel: #0d130f;
  --line: #1d3323;
  --ink: #d8ffe4;
  --dim: #6f9b7d;
  --acc: #7dffb2;
  --warn: #ffb454;
  --bad: #ff5f56;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Scene illustration palette. Two tones on purpose: buildings and props are
     dark structure, people are lighter, in this game the figures are the
     thing you must be able to see, from across a room, on a bad projector. */
  --sil: #2c5842;
  --fig: #67c091;
  --ground: #060a08;
  --glow: #cdffe0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body::after {
  /* faint scanlines, emergency broadcast feel, cheap and it reads well on a TV */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(125, 255, 178, 0.035) 0 1px,
    transparent 1px 3px
  );
  z-index: 999;
}

.eyebrow {
  color: var(--acc);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.75rem;
  opacity: 0.8;
}

.dim { color: var(--dim); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }
.acc { color: var(--acc); }

button {
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: 10px;
  transition: border-color .12s, background .12s, transform .06s;
}
button:active { transform: translateY(1px); }
button:hover:not(:disabled) { border-color: var(--acc); }
button:disabled { opacity: .35; cursor: not-allowed; }
button.sel { border-color: var(--acc); background: #12251a; }

input, textarea {
  font-family: inherit;
  background: #0a0f0b;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  outline: none;
}
input:focus, textarea:focus { border-color: var(--acc); }

.blink { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

.fade { animation: fade .25s ease-out; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }