/* MisterFly. Black glass, phosphor green, a monitor left on too long. */

:root {
  --bg: #030704;
  --panel: #050d07;
  --edge: #0e2e18;
  --edge-hot: #1c5c31;
  --green: #3dff8f;
  --green-dim: #1f9152;
  --green-faint: rgba(61, 255, 143, 0.42);
  --amber: #ffb547;
  --red: #ff5f6d;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--green);
  font: 12px/1.5 var(--mono);
  min-height: 100%;
}

body::before {
  /* scanlines */
  content: "";
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.14) 2px 4px);
  mix-blend-mode: multiply;
}
body::after {
  /* vignette plus a very slow flicker, so it feels like a tube rather than a div */
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 68%, rgba(0,0,0,0.30) 100%);
  animation: flicker 7.3s infinite steps(1);
}
@keyframes flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.93; }
  98% { opacity: 1; }
  98.6% { opacity: 0.88; }
}

a { color: var(--green); }
a:hover { color: #fff; }

/* ── top bar ─────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 12px; align-items: center;
  padding: 8px 14px;
  background: linear-gradient(180deg, #041008 60%, rgba(4,16,8,0.86));
  border-bottom: 1px solid var(--edge);
}
.brand { display: flex; align-items: baseline; gap: 8px; letter-spacing: .06em; }
.brand b { color: #eafff2; font-weight: 700; text-shadow: 0 0 12px rgba(61,255,143,.55); }
.brand span { color: var(--green-dim); }

.ca {
  justify-self: center;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--edge-hot);
  background: #04140a;
  border-radius: 3px;
  max-width: 62vw;
}
.ca .lab { color: var(--green-dim); }
.ca code {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #d8ffe8;
}
.ca button {
  font: inherit; cursor: pointer;
  color: var(--green); background: #062314;
  border: 1px solid var(--edge-hot); border-radius: 2px;
  padding: 2px 8px;
}
.ca button:hover { background: #0a3a20; color: #fff; }
.ca.pending code { color: var(--amber); }

.links { justify-self: end; display: flex; gap: 10px; align-items: center; }
.links a {
  text-decoration: none; padding: 4px 10px;
  border: 1px solid var(--edge); border-radius: 2px;
}
.links a:hover { border-color: var(--edge-hot); background: #04140a; }

/* ── layout ──────────────────────────────────────────────── */

.wrap {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 12px;
  padding: 12px;
  align-items: start;
}
@media (max-width: 1080px) {
  .wrap { grid-template-columns: 1fr; }
  .col-l, .col-r { order: 2; }
  .col-c { order: 1; }
}

.panel {
  border: 1px solid var(--edge);
  background: var(--panel);
  border-radius: 3px;
  margin-bottom: 12px;
}
.panel > h2 {
  margin: 0; padding: 6px 10px;
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-dim);
  border-bottom: 1px solid var(--edge);
  display: flex; justify-content: space-between; align-items: center;
}
.panel > .body { padding: 10px; }

/* ── the box the fly lives in ────────────────────────────── */

.terrarium {
  position: relative;
  border: 1px solid var(--edge-hot);
  border-radius: 3px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(20,90,48,0.22), rgba(3,10,6,0) 65%),
    #020603;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  cursor: crosshair;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.9), 0 0 40px rgba(20,120,60,0.10);
}
.terrarium canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.terrarium .hud {
  position: absolute; right: 8px; top: 8px; z-index: 3;
  text-align: right; color: var(--green-faint); font-size: 10px; line-height: 1.7;
  pointer-events: none;
}
.terrarium .hud b { color: #d6ffe6; font-weight: 500; }

.tools { display: flex; gap: 8px; align-items: center; padding: 8px 0 0; flex-wrap: wrap; }
.btn {
  font: inherit; cursor: pointer;
  color: var(--green); background: #04170c;
  border: 1px solid var(--edge-hot); border-radius: 2px;
  padding: 6px 14px; letter-spacing: .08em;
}
.btn:hover:not(:disabled) { background: #0b3a20; color: #fff; box-shadow: 0 0 14px rgba(61,255,143,.22); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.on { background: #0b3a20; color: #fff; border-color: var(--green-dim); }
.hint { color: var(--green-dim); font-size: 10px; }

/* ── readouts ────────────────────────────────────────────── */

.kv { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.kv dt { color: var(--green-dim); }
.kv dd { margin: 0; color: #d6ffe6; text-align: right; }

.bar { height: 4px; background: #08210f; border-radius: 2px; overflow: hidden; margin-top: 3px; }
.bar > i { display: block; height: 100%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.bar.warn > i { background: var(--amber); box-shadow: 0 0 8px var(--amber); }

.feedlog {
  height: 190px; overflow: auto; margin: 0;
  font-size: 10.5px; color: var(--green-faint); white-space: pre-wrap;
}
.feedlog b { color: #cfffe2; font-weight: 500; }

.eye { width: 100%; image-rendering: pixelated; border: 1px solid var(--edge); display: block; }

/* ── decisions, the pinned one ───────────────────────────── */

.col-r .panel.pinned { position: sticky; top: 58px; }
.panel.pinned > h2 { color: var(--green); border-bottom-color: var(--edge-hot); }

.rulings { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow: auto; }
.rulings li { padding: 9px 10px; border-bottom: 1px solid #0a1f11; }
.rulings li:last-child { border-bottom: 0; }
.rul-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.rul-head b { color: #eafff2; font-weight: 600; }
.rul-share { color: var(--amber); }
.rul-to { color: var(--green-dim); font-size: 10.5px; }
.rul-meta { color: rgba(61,255,143,0.3); font-size: 9.5px; margin-top: 3px; word-break: break-all; }
.tag {
  display: inline-block; padding: 0 6px; border-radius: 2px; font-size: 9px;
  letter-spacing: .1em; border: 1px solid currentColor;
}
.tag.declared { color: var(--amber); }
.tag.executed { color: var(--green); }
.tag.declined { color: var(--red); }
.empty { color: var(--green-dim); padding: 14px 10px; font-size: 11px; }

/* ── honesty block ───────────────────────────────────────── */

.honest { color: var(--green-dim); font-size: 10.5px; }
.honest p { margin: 0 0 8px; }
.honest strong { color: #cfffe2; font-weight: 500; }
.honest .no { color: var(--red); }
.honest .yes { color: var(--green); }

.boot { padding: 10px; font-size: 10.5px; color: var(--green-faint); }
.boot .ok { color: var(--green); }
.cursor::after { content: "\2588"; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

footer { padding: 16px; text-align: center; color: var(--green-dim); font-size: 10px; }

/* ── how it works ────────────────────────────────────────── */

.doc {
  max-width: 1180px;
  margin: 8px auto 0;
  padding: 26px 16px 8px;
  border-top: 1px solid var(--edge);
}
.doc > h2 {
  margin: 0 0 20px;
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--green);
}
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px 26px;
}
.doc article {
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: var(--panel);
  padding: 14px 16px;
}
.doc article.wide { grid-column: 1 / -1; }
.doc h3 {
  margin: 0 0 8px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green);
}
.doc p { margin: 0 0 9px; color: var(--green-dim); font-size: 11.5px; line-height: 1.75; }
.doc p:last-child { margin-bottom: 0; }
.doc b { color: #d6ffe6; font-weight: 600; }
.doc i { color: var(--green-dim); font-style: italic; }
.doc code {
  color: #9dffc6; background: #04170c;
  border: 1px solid var(--edge); border-radius: 2px; padding: 0 4px;
}
.doc ul { margin: 0 0 9px; padding-left: 18px; color: var(--green-dim); font-size: 11.5px; line-height: 1.75; }
.doc li { margin-bottom: 6px; }
.doc a { color: var(--green); }

.brainbox {
  position: relative;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: radial-gradient(ellipse at 50% 50%, rgba(10,40,24,.5), #010402 70%);
  aspect-ratio: 24 / 7;
  overflow: hidden;
}
.brainbox canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── what is firing ──────────────────────────────────────── */

.poplist { display: grid; gap: 4px; }
.pop {
  display: grid; grid-template-columns: 128px 1fr 56px;
  gap: 8px; align-items: center; font-size: 10.5px;
}
.pop .pn { color: var(--green-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop .pn i { font-style: normal; color: var(--amber); font-size: 8.5px; letter-spacing: .08em; }
.pop .pb { height: 7px; background: #061c0e; border-radius: 1px; overflow: hidden; }
.pop .pb > i {
  display: block; height: 100%; background: var(--green);
  box-shadow: 0 0 7px var(--green); transition: width .5s ease-out;
}
.pop .pv {
  text-align: right; color: #cfffe2; font-variant-numeric: tabular-nums;
}

/* ── millisecond traces ──────────────────────────────────── */

.traces { display: grid; gap: 5px; }
.tr { display: grid; grid-template-columns: 130px 1fr 52px; gap: 8px; align-items: center; font-size: 10.5px; }
.tr .tn { color: var(--green-dim); }
.tr .tb { height: 10px; background: #061c0e; border-radius: 1px; overflow: hidden; }
.tr .tb > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #1f9152, var(--green));
  box-shadow: 0 0 8px var(--green);
}
.tr .tv { text-align: right; color: #d6ffe6; font-variant-numeric: tabular-nums; }

.cdown {
  font-size: 30px; letter-spacing: .04em; color: #eafff2;
  font-variant-numeric: tabular-nums; line-height: 1.1;
  text-shadow: 0 0 18px rgba(61,255,143,.45);
}
.cdown.soon { color: var(--amber); text-shadow: 0 0 18px rgba(255,181,71,.5); }
.doc .src { font-size: 10.5px; color: var(--green-dim); margin-top: 10px; }
.doc .src a { color: var(--green); text-decoration: none; border-bottom: 1px solid var(--edge-hot); }
#dexchart { width: 100%; height: 260px; border: 0; display: block; background: #020603; }