/* PLANT 666: the game's phosphor terminal (docs/UI.md), one dark theme on purpose.
   Fonts self-hosted (no requests to third parties: see /privacy/). */
@font-face { font-family: "VT323"; src: url("/assets/fonts/vt323-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
:root {
  color-scheme: dark;
  --void: #050807;
  --glass: #0b1510;
  --glass-select: #0d2116;
  --ink: #7dff9e;
  --ink-bright: #c9ffd8;
  --ink-dim: #62b37e;
  --warn: #ffb347;
  --line: #1f4a30;
  --display: "VT323", "IBM Plex Mono", ui-monospace, monospace;
  --body: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
}
* { box-sizing: border-box; }
html, body { background: var(--void); }
body {
  margin: 0;
  color: var(--ink);
  font: 15px/1.55 var(--body);
  padding-inline: 16px;
  padding-block: 32px 48px;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 30%, #0a1a10 0%, var(--void) 70%);
  background-attachment: fixed;
}
[hidden] { display: none !important; }
a { color: var(--ink-bright); }
a:hover { color: #fff; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--warn); outline-offset: 3px; }
.term { max-width: 680px; margin: 0 auto; display: grid; gap: 22px; }
.glow { text-shadow: 0 0 6px rgba(125,255,158,0.45); }
.from { font: 13px var(--body); color: var(--ink-dim); letter-spacing: .04em; word-break: break-word; }
h1 { margin: 0; font: 400 52px/0.95 var(--display); letter-spacing: .06em; color: var(--ink-bright); text-wrap: balance; }
h2 { margin: 0; font: 400 30px/1 var(--display); letter-spacing: .05em; color: var(--ink-bright); }
p { margin: 0; }
.panel { border: 2px solid var(--line); background: var(--glass); padding: 16px 18px; display: grid; gap: 12px; }
.buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-block; font: 26px/1 var(--display); letter-spacing: .08em; text-decoration: none;
  padding: 10px 14px; border: 2px solid var(--ink); color: var(--ink); background: transparent;
}
.btn:hover { background: var(--glass-select); color: var(--ink-bright); }
.btn.main { background: var(--warn); border-color: var(--warn); color: var(--void); }
.btn.main:hover { background: #ffc871; color: var(--void); }
footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-dim); border-top: 1px solid var(--line); padding-top: 14px; }
footer a { color: var(--ink-dim); }
footer img { display: block; height: 28px; width: auto; }
.cursor::after { content: "_"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor::after { animation: none; } }
@media (max-width: 420px) { h1 { font-size: 40px; } }
/* A button row whose links are all unset (site.js) takes no room. */
.buttons:not(:has(a:not([hidden]))) { display: none; }