:root {
  --bg: #000;
  --phos: #9cf59a;          /* phosphor green */
  --phos-dim: #5fae63;
  --phos-faint: rgba(156, 245, 154, 0.22);
  --glow: 0 0 6px rgba(156, 245, 154, 0.55), 0 0 18px rgba(120, 230, 120, 0.18);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --crt: "VT323", ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--phos); }
body { font: 400 12px/1.45 var(--mono); overflow: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--phos); outline-offset: 3px; }

#specimen { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- HUD layout ---------- */
.hud {
  position: fixed; inset: 0; padding: clamp(14px, 2.4vw, 32px);
  display: grid; gap: 14px; pointer-events: none;
  grid-template-columns: minmax(220px, 300px) 1fr minmax(220px, 300px);
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas:
    "title  .        growth"
    "id     .        growth"
    "map    .        feed"
    "gauge  .        transmission"
    "foot   foot     foot";
}
.hud a { pointer-events: auto; }
.title { grid-area: title; }
.id-card { grid-area: id; }
.growth { grid-area: growth; align-self: start; }
.feed { grid-area: feed; align-self: center; max-height: 34vh; overflow: hidden; }
.gauge { grid-area: gauge; }
.map { grid-area: map; align-self: center; }
.transmission { grid-area: transmission; }
.foot { grid-area: foot; display: flex; gap: 12px; justify-content: center; letter-spacing: .12em; }
.foot a { text-decoration: none; padding: 4px 2px; text-shadow: var(--glow); }
.foot a:hover { color: #fff; }
.caption { margin-top: 10px; font: 20px/1.1 var(--crt); letter-spacing: .04em; text-shadow: var(--glow); }

/* ---------- Type ---------- */
.wordmark { font: 400 clamp(64px, 9vw, 128px)/.85 var(--crt); letter-spacing: .08em; text-shadow: var(--glow); }
.role { margin-top: 6px; font: 20px var(--crt); letter-spacing: .3em; color: var(--phos-dim); }

/* ---------- Panels ---------- */
.panel {
  border: 1px solid var(--phos-faint); background: rgba(0, 0, 0, 0.55);
  padding: 8px 10px 10px; position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), 0 0 14px rgba(120, 230, 120, .06);
}
.panel::before, .panel::after { content: ""; position: absolute; width: 8px; height: 8px; border-color: var(--phos); border-style: solid; opacity: .8; }
.panel::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.panel::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.panel h2 { font: 19px/1 var(--crt); letter-spacing: .08em; padding-bottom: 6px; margin-bottom: 7px; border-bottom: 1px solid var(--phos-faint); display: flex; justify-content: space-between; text-shadow: var(--glow); font-weight: 400; }
.panel h2 span { color: var(--phos-dim); }
dl div { display: flex; gap: 8px; }
dt { color: var(--phos-dim); min-width: 64px; }
dt::after { content: " ........"; color: rgba(95, 174, 99, .5); }
table { width: 100%; border-collapse: collapse; font: 18px/1.25 var(--crt); }
th { text-align: left; font-weight: 400; color: var(--phos-dim); }
td { text-align: right; padding-left: 10px; text-shadow: var(--glow); }
td:last-child { color: var(--phos-dim); width: 34px; }
#feed { list-style: none; font: 15px/1.3 var(--crt); color: var(--phos-dim); }
#feed li:last-child { color: var(--phos); text-shadow: var(--glow); }
.gauge canvas { width: 100%; height: 130px; display: block; }
.map canvas { width: 100%; height: 130px; display: block; image-rendering: pixelated; }
.transmission canvas { width: 100%; height: 92px; display: block; }
.soon { margin-top: 8px; font: 30px/1 var(--crt); letter-spacing: .3em; text-shadow: var(--glow); }
.blink { animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- Reticle, grain, scanlines ---------- */
.reticle { position: fixed; width: 54px; height: 54px; margin: -27px 0 0 -27px; pointer-events: none; opacity: 0; transition: opacity .3s; border: 1px solid rgba(156, 245, 154, .7); }
.reticle::before, .reticle::after { content: ""; position: absolute; background: rgba(156, 245, 154, .7); }
.reticle::before { left: 50%; top: -10px; bottom: -10px; width: 1px; }
.reticle::after { top: 50%; left: -10px; right: -10px; height: 1px; }
.reticle span { position: absolute; left: 62px; top: -4px; white-space: nowrap; font: 15px var(--crt); text-shadow: var(--glow); }
.reticle.on { opacity: 1; }

.grain {
  position: fixed; inset: -50%; pointer-events: none; opacity: .13; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }
.scanlines { position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .75)); }

/* ---------- Phones: the specimen in the middle, the key panels around it ---------- */
@media (max-width: 860px) {
  .hud {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "title  title"
      "id     growth"
      ".      ."
      "transmission transmission"
      "foot   foot";
    gap: 10px;
  }
  .feed, .gauge, .map { display: none; }
  .wordmark { font-size: clamp(56px, 18vw, 88px); }
  .role { font-size: 17px; }
  .panel { padding: 6px 8px 8px; }
  .panel h2 { font-size: 16px; }
  dl { font-size: 10px; }
  dt { min-width: 0; }
  dt::after { content: ""; }
  dl div { flex-direction: column; gap: 0; margin-bottom: 4px; }
  table { font-size: 15px; }
  .transmission canvas { height: 56px; }
  .soon { font-size: 24px; }
  .caption { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .blink { animation: none; }
}