/* HAGRID — forensic mirror. brutalist. bedrock-aligned. */
/* Palette tightened to match the sovereign bedrock encirclement (§pass42b). */

:root {
  --bg:           #000204;          /* matches bedrock void center */
  --bg-deep:      #04060a;          /* matches bedrock void edge */
  --bg-rock:      #0e1316;          /* strata mid */
  --fg:           #e6e6e6;
  --fg-dim:       #8a8a8a;
  --fg-faint:     #3a3f44;
  --fg-ghost:     #1a1f24;
  --phosphor:     #39ff14;           /* canonical bedrock phosphor */
  --phosphor-dim: rgba(57,255,20,0.45);
  --phosphor-haze:rgba(57,255,20,0.18);
  --crimson:      #dc2626;           /* canonical bedrock warning */
  --crimson-dim:  rgba(220,38,38,0.55);
  --amber:        #ff9500;
  --graphite:     rgba(72,80,90,0.92);
  --rule:         #15191e;
  --rule-soft:    #0a0d10;
  --mono:         'IBM Plex Mono','Fira Code','Courier New',ui-monospace,monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* CRT scanlines + phosphor bloom — global overlay */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(57,255,20,0.018) 0px,
      rgba(57,255,20,0.018) 1px,
      transparent 2px,
      transparent 3px
    );
  mix-blend-mode: screen;
}

/* Vignette — pulls focus to center */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.78) 100%);
}

a {
  color: var(--phosphor);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: none;
}
a:hover { background: var(--phosphor); color: #000; border-bottom-color: var(--phosphor); }
a:focus { outline: 1px solid var(--phosphor); outline-offset: 2px; }

::selection { background: var(--phosphor); color: #000; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 24px 0; }

/* ─── top bar ─────────────────────────────────────────────────────────────── */
.h-bar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--rule);
  background: rgba(0,2,4,0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  font-size: 11px;
  text-transform: lowercase;
  letter-spacing: 0.06em;
}
.h-bar .logo {
  color: var(--fg);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.h-bar .logo b { color: var(--phosphor); }
.h-bar .logo .dot {
  width: 8px; height: 8px; background: var(--phosphor);
  display: inline-block; box-shadow: 0 0 8px var(--phosphor);
  animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%,100% { opacity: 0.55; }
  50%     { opacity: 1; }
}
.h-bar nav { display: flex; gap: 14px; }
.h-bar nav a {
  color: var(--fg-dim);
  border-bottom: 1px dashed transparent;
  padding: 2px 0;
  font-size: 11px;
}
.h-bar nav a:hover { color: var(--phosphor); background: transparent; border-bottom-color: var(--phosphor); }
.h-bar nav a.cur { color: var(--phosphor); border-bottom: 1px solid var(--phosphor); }
.h-bar .status {
  color: var(--fg-dim);
  font-size: 11px;
  text-align: right;
}
.h-bar .status .word { color: var(--phosphor); font-weight: 600; }
.h-bar .status .word.warn { color: var(--crimson); }
.h-bar .status .word.amber { color: var(--amber); }

/* ─── pages ───────────────────────────────────────────────────────────────── */
.page {
  padding-top: 48px;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.page-body { padding: 32px 24px; max-width: 1280px; width: 100%; margin: 0 auto; flex: 1; }

.foot {
  border-top: 1px solid var(--rule);
  padding: 12px 24px;
  font-size: 10px;
  color: var(--fg-faint);
  text-align: center;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}
.foot .did { color: var(--fg-dim); }
.foot .self-portrait {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 18px; height: 18px;
}

h1, h2, h3, h4 {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 16px 0;
}
h1 { font-size: 28px; text-transform: lowercase; }
h2 {
  font-size: 14px;
  color: var(--phosphor);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  text-transform: lowercase;
  letter-spacing: 0.12em;
}
h3 { font-size: 12px; color: var(--fg-dim); text-transform: lowercase; letter-spacing: 0.12em; }

/* ─── massive manifesto word ──────────────────────────────────────────────── */
.manifesto-stage {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100vh - 48px - 48px);
  padding: 24px;
  text-align: center;
  z-index: 1;
}
.manifesto-word {
  font-size: clamp(96px, 24vw, 320px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.92;
  color: var(--fg);
  margin: 0;
  text-transform: lowercase;
  position: relative;
  z-index: 2;
}
.manifesto-word.warn { color: var(--crimson); text-shadow: 0 0 32px rgba(220,38,38,0.35); }
.manifesto-word.amber { color: var(--amber); text-shadow: 0 0 32px rgba(255,149,0,0.30); }
.manifesto-word.canon { color: var(--phosphor); text-shadow: 0 0 32px rgba(57,255,20,0.35); }
.manifesto-word.faint { color: var(--fg-faint); }

.manifesto-flicker { animation: flicker 0.5s steps(3) 2; }
@keyframes flicker {
  0%, 100% { opacity: 1; filter: brightness(1); }
  20%      { opacity: 0.15; filter: brightness(1.6); }
  40%      { opacity: 1; }
  60%      { opacity: 0.4; filter: brightness(2.2); }
  80%      { opacity: 1; }
}

.manifesto-pulse { animation: word-pulse 5s ease-in-out infinite; }
@keyframes word-pulse {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.06); }
}

.manifesto-meta {
  margin-top: 28px;
  color: var(--fg-dim);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  z-index: 2;
}
.manifesto-meta .computed { color: var(--fg-faint); }
.manifesto-meta .tag {
  display: inline-block; padding: 2px 8px;
  border: 1px solid var(--phosphor-dim); color: var(--phosphor);
  margin: 0 3px;
  font-size: 10px;
  background: rgba(57,255,20,0.03);
}

.manifesto-hint {
  position: absolute;
  bottom: 28px; left: 0; right: 0;
  text-align: center;
  color: var(--fg-faint);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  z-index: 2;
}

/* word-cycle line — mirrors the bedrock flare's signature event */
.word-cycle {
  margin-top: 18px;
  color: var(--phosphor);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  min-height: 1.4em;
  text-shadow: 0 0 8px rgba(57,255,20,0.45);
  z-index: 2;
}

/* corner stats on index */
.corner {
  position: absolute;
  color: var(--fg-dim);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  z-index: 3;
  white-space: nowrap;
}
.corner .label { color: var(--fg-faint); margin-right: 6px; }
.corner .val   { color: var(--phosphor); }
.corner.tl { top: 64px; left: 22px; }
.corner.tr { top: 64px; right: 22px; text-align: right; }
.corner.bl { bottom: 84px; left: 22px; }
.corner.br { bottom: 84px; right: 22px; text-align: right; }

/* EventStore ticker tape — scrolling backdrop behind manifesto */
.ticker {
  position: fixed;
  top: 48px; bottom: 48px;
  left: 0; right: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  font-size: 10px;
  color: rgba(57,255,20,0.18);
  font-family: var(--mono);
  white-space: nowrap;
}
.ticker .tline {
  position: absolute;
  left: 100%;
  white-space: nowrap;
  animation: ticker-slide var(--dur, 32s) linear forwards;
}
@keyframes ticker-slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-220vw); }
}
.ticker .tline .at  { color: rgba(220,38,38,0.30); margin-right: 12px; }
.ticker .tline .typ { color: rgba(57,255,20,0.45); margin-right: 12px; }
.ticker .tline .did { color: rgba(255,255,255,0.18); margin-right: 12px; }
.ticker .tline .amt { color: rgba(255,149,0,0.40); }

/* ─── tables ──────────────────────────────────────────────────────────────── */
table.brut {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 12px 0;
}
table.brut th, table.brut td {
  border-bottom: 1px solid var(--rule);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
table.brut th {
  font-weight: 600;
  color: var(--phosphor);
  text-transform: lowercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  border-bottom-color: var(--phosphor-dim);
}
table.brut td.num, table.brut th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.brut td.did { color: var(--fg-faint); font-size: 10px; }
table.brut tr:hover td { background: var(--rule-soft); color: var(--fg); }
table.brut tr.hero td {
  background: rgba(57,255,20,0.04);
  border-bottom-color: var(--phosphor-dim);
}
table.brut tr.hero td.name { color: var(--phosphor); font-weight: 700; font-size: 14px; }
table.brut tr.hero td.num { color: var(--crimson); font-weight: 700; font-size: 14px; }

/* ─── pre / code rendered output ──────────────────────────────────────────── */
pre.brut, .term-output {
  background: var(--bg-deep);
  border-left: 2px solid var(--phosphor);
  padding: 12px 16px;
  margin: 6px 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg);
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
  box-shadow: inset 0 0 18px rgba(57,255,20,0.06);
}

/* ─── terminal page ───────────────────────────────────────────────────────── */
.term-banner {
  font-family: var(--mono);
  color: var(--phosphor);
  white-space: pre;
  font-size: 10px;
  line-height: 1.05;
  margin: 0 0 12px 0;
  text-align: center;
  text-shadow: 0 0 16px rgba(57,255,20,0.30);
}
.term-banner .sub {
  display: block;
  color: var(--fg-faint);
  font-size: 10px;
  letter-spacing: 0.3em;
  margin-top: 8px;
  text-shadow: none;
}
.term-quick {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.term-quick button {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--fg-dim);
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: lowercase;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.term-quick button:hover { color: var(--phosphor); border-color: var(--phosphor); }
.term-quick button.warn:hover { color: var(--crimson); border-color: var(--crimson); }
.term-history {
  height: 54vh; min-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-bottom: 0;
  padding: 12px;
  background: var(--bg-deep);
  scroll-behavior: smooth;
}
.term-line { margin: 2px 0; white-space: pre-wrap; word-break: break-word; }
.term-line .prompt { color: var(--phosphor); }
.term-line .echo { color: var(--fg-dim); }
.term-line .out { color: var(--fg); }
.term-line .err { color: var(--crimson); }
.term-line .redact { color: var(--crimson); font-weight: 700; }
.term-line .boot { color: var(--fg-faint); font-size: 11px; }
.term-line .boot .ok { color: var(--phosphor); }
.term-line .boot .fail { color: var(--crimson); }
.term-input-row {
  display: flex; align-items: center;
  border: 1px solid var(--rule);
  padding: 8px 12px;
  background: var(--bg-deep);
}
.term-input-row .prompt {
  color: var(--phosphor); margin-right: 8px; user-select: none;
  font-weight: 700;
}
.term-input-row input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  outline: none;
  caret-color: var(--phosphor);
}

.cursor {
  display: inline-block; width: 0.55em; height: 1.05em; vertical-align: text-bottom;
  background: var(--phosphor);
  animation: blink 1.1s steps(2, start) infinite;
}
@keyframes blink { to { opacity: 0; } }

/* ─── big number panels ───────────────────────────────────────────────────── */
.big-num {
  font-size: clamp(96px, 18vw, 240px);
  font-weight: 700;
  line-height: 0.92;
  text-align: center;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin: 16px 0 8px 0;
}
.big-num.crit { color: var(--crimson); text-shadow: 0 0 28px rgba(220,38,38,0.30); }
.big-num.warn { color: var(--amber); text-shadow: 0 0 28px rgba(255,149,0,0.25); }
.big-num.fine { color: var(--phosphor); text-shadow: 0 0 28px rgba(57,255,20,0.30); }
.big-label {
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--fg-dim);
  letter-spacing: 0.36em;
  margin-top: 6px;
}
.gini-bar {
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: -0.08em;
  text-align: center;
  margin: 24px 0;
  color: var(--phosphor);
  text-shadow: 0 0 14px rgba(57,255,20,0.30);
  word-break: break-all;
}
.gini-bar.crit { color: var(--crimson); text-shadow: 0 0 14px rgba(220,38,38,0.30); }
.gini-bar.warn { color: var(--amber); text-shadow: 0 0 14px rgba(255,149,0,0.30); }
.gini-bar .empty { color: var(--fg-ghost); text-shadow: none; }

.gini-state {
  text-align: center;
  font-size: 13px;
  text-transform: lowercase;
  letter-spacing: 0.28em;
  margin-bottom: 18px;
  color: var(--fg-dim);
}
.gini-state.feudal      { color: var(--crimson); }
.gini-state.plutocratic { color: var(--crimson); }
.gini-state.concentrated{ color: var(--amber); }
.gini-state.fair        { color: var(--phosphor); }
.gini-state.canon       { color: var(--phosphor); }
.gini-state.infant      { color: var(--fg-dim); }

/* ascii sparkline */
.sparkline {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--phosphor);
  letter-spacing: -0.04em;
  text-align: center;
  margin: 18px 0 6px 0;
  text-shadow: 0 0 10px rgba(57,255,20,0.30);
}
.sparkline-label {
  text-align: center; color: var(--fg-faint);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  margin-bottom: 18px;
}

/* ─── cemetery ────────────────────────────────────────────────────────────── */
.rip-banner {
  font-family: var(--mono);
  color: var(--crimson);
  white-space: pre;
  font-size: 10px;
  line-height: 1.05;
  text-align: center;
  margin: 0 auto 20px;
  opacity: 0.85;
}

.tomb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 12px;
}
.tomb {
  border: 1px solid var(--rule);
  padding: 12px;
  font-size: 11px;
  background: var(--bg-deep);
  position: relative;
}
.tomb::before {
  content: "╔═╗";
  position: absolute; top: -1px; left: -1px;
  color: var(--fg-faint); font-size: 8px;
  letter-spacing: -1px;
}
.tomb::after {
  content: "╚═╝";
  position: absolute; bottom: -1px; right: -1px;
  color: var(--fg-faint); font-size: 8px;
  letter-spacing: -1px;
}
.tomb .hl {
  text-align: center;
  color: var(--fg-faint);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--rule);
  padding-bottom: 6px;
}
.tomb .name {
  color: var(--fg);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}
.tomb .did {
  color: var(--fg-faint);
  font-size: 9px;
  margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}
.tomb .meta { color: var(--fg-dim); margin: 2px 0; font-size: 10px; }
.tomb .meta b { color: var(--fg); }
.tomb .bal { color: var(--amber); font-weight: 600; }
.tomb .epitaph {
  color: var(--fg-faint); margin-top: 8px; font-style: italic;
  border-top: 1px dashed var(--rule); padding-top: 8px;
  font-size: 10px;
  text-align: center;
}
.tomb.dead {
  border-color: var(--crimson-dim);
  box-shadow: inset 0 0 22px rgba(220,38,38,0.04);
}
.tomb.dead .name { color: var(--crimson); }
.tomb.dead .hl   { color: var(--crimson); border-bottom-color: var(--crimson-dim); }
.tomb.dead::before, .tomb.dead::after { color: var(--crimson-dim); }
.tomb.still { border-color: rgba(255,149,0,0.30); }
.tomb.still .name { color: var(--amber); }
.tomb.still .hl   { color: var(--amber); }

/* ─── sybils ──────────────────────────────────────────────────────────────── */
.wanted-banner {
  font-family: var(--mono);
  color: var(--crimson);
  white-space: pre;
  font-size: 10px;
  line-height: 1.05;
  text-align: center;
  margin: 0 auto 24px;
}

.ring {
  border: 1px solid var(--crimson-dim);
  padding: 16px 18px;
  margin: 14px 0;
  background: var(--bg-deep);
  position: relative;
  box-shadow: inset 0 0 28px rgba(220,38,38,0.04);
}
.ring .ring-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px dashed var(--crimson-dim);
  padding-bottom: 8px; margin-bottom: 10px;
}
.ring .ring-id {
  color: var(--crimson);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
}
.ring .ring-meta { color: var(--fg-dim); font-size: 10px; letter-spacing: 0.1em; }
.ring .ring-meta .conf { color: var(--amber); font-weight: 600; }
.ring .ring-meta .basis { color: var(--fg-faint); margin-left: 12px; }
.ring .conf-bar {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: -0.08em;
  color: var(--crimson);
  margin: 6px 0;
  text-shadow: 0 0 8px rgba(220,38,38,0.30);
}
.ring .members { list-style: none; padding: 0; margin: 8px 0 0 0; }
.ring .members li {
  padding: 5px 10px;
  margin: 2px 0;
  background: var(--bg);
  border-left: 2px solid var(--crimson);
  font-size: 11px;
  color: var(--fg-dim);
  font-family: var(--mono);
}
.ring .members li::before { content: "▸ "; color: var(--crimson); }

/* ─── manifesto-log ───────────────────────────────────────────────────────── */
.log-line {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: baseline;
}
.log-line .when {
  color: var(--fg-faint);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.log-line .headline {
  font-size: 18px;
  letter-spacing: -0.01em;
}
.log-line .headline .from { color: var(--fg-faint); font-size: 13px; }
.log-line .headline .arrow { color: var(--phosphor); padding: 0 8px; }
.log-line .headline .to { color: var(--fg); font-weight: 700; font-size: 22px; }
.log-line .headline .to.warn  { color: var(--crimson); }
.log-line .headline .to.amber { color: var(--amber); }
.log-line .headline .to.canon { color: var(--phosphor); }
.log-line .headline .sub {
  display: block; color: var(--fg-dim);
  font-size: 12px; margin-top: 6px;
}
@media (max-width: 768px) {
  .log-line { grid-template-columns: 1fr; gap: 8px; }
}

/* ─── stare page (purest form) ────────────────────────────────────────────── */
body.stare-mode { overflow: hidden; background: #000; }
body.stare-mode .h-bar, body.stare-mode .foot { display: none; }
.stare-stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.stare-word {
  font-family: var(--mono);
  font-size: clamp(120px, 32vw, 440px);
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--fg);
  margin: 0;
  text-transform: lowercase;
  text-align: center;
  line-height: 1;
  animation: stare-breath 5s ease-in-out infinite;
}
.stare-word.warn   { color: var(--crimson); text-shadow: 0 0 60px rgba(220,38,38,0.35); }
.stare-word.amber  { color: var(--amber);   text-shadow: 0 0 60px rgba(255,149,0,0.30); }
.stare-word.canon  { color: var(--phosphor); text-shadow: 0 0 60px rgba(57,255,20,0.40); }
.stare-word.faint  { color: var(--fg-faint); }
.stare-word.dissolving { animation: stare-dissolve 0.65s steps(8) forwards; }
@keyframes stare-breath {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.08); }
}
@keyframes stare-dissolve {
  0%   { filter: blur(0) brightness(1); opacity: 1; }
  40%  { filter: blur(6px) brightness(2.4); opacity: 0.7; }
  100% { filter: blur(0) brightness(1); opacity: 1; }
}

/* stare meta — last transition shown under the word */
.stare-meta {
  position: fixed;
  bottom: 24px; left: 0; right: 0;
  text-align: center;
  color: var(--fg-faint);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: lowercase;
}

/* ─── utility ─────────────────────────────────────────────────────────────── */
.dim    { color: var(--fg-dim); }
.faint  { color: var(--fg-faint); }
.warn   { color: var(--crimson); }
.amber  { color: var(--amber); }
.accent { color: var(--phosphor); }
.mono   { font-family: var(--mono); }
.tabnums { font-variant-numeric: tabular-nums; }
.right  { text-align: right; }
.center { text-align: center; }
.muted  { opacity: 0.6; }
.note {
  font-size: 11px; color: var(--fg-faint);
  border-left: 2px solid var(--rule);
  padding: 8px 12px;
  margin: 12px 0;
  font-style: italic;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.stat-cell {
  border: 1px solid var(--rule);
  padding: 14px;
  background: var(--bg-deep);
}
.stat-cell .label {
  color: var(--fg-dim); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.28em; margin-bottom: 6px;
}
.stat-cell .value {
  color: var(--fg); font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stat-cell .value.warn   { color: var(--crimson); }
.stat-cell .value.amber  { color: var(--amber); }
.stat-cell .value.accent { color: var(--phosphor); }
.stat-cell .sub { color: var(--fg-faint); font-size: 10px; margin-top: 4px; }

.kicker {
  font-size: 10px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.36em;
  margin: 0 0 8px 0;
}

/* loading = literal typing dot */
.loading::after {
  content: ".";
  animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
}

/* ─── 404 ─────────────────────────────────────────────────────────────────── */
.nf-stage {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.nf-word {
  font-size: clamp(96px, 26vw, 360px);
  color: var(--crimson);
  font-weight: 700; letter-spacing: -0.04em;
  text-shadow: 0 0 60px rgba(220,38,38,0.30);
  margin: 0;
}
.nf-sub {
  margin-top: 20px;
  color: var(--fg-dim);
  font-size: 12px; letter-spacing: 0.3em;
  text-transform: lowercase;
}

/* ─── BEDROCK self-portrait (mirrors the sovereign encirclement) ──────────── */
.bedrock-portrait {
  display: inline-block;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1.5px rgba(57, 255, 20, 0.72),
    inset 0 0 16px -4px rgba(42, 214, 15, 0.55),
    0 0 0 2px rgba(72, 80, 90, 0.92),
    0 0 0 3.2px rgba(220, 38, 38, 0.55),
    0 0 28px 5px rgba(57, 255, 20, 0.42),
    0 0 52px 11px rgba(0, 0, 0, 0.85);
  animation: bedrock-pulse 6s ease-in-out infinite;
}
@keyframes bedrock-pulse {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.10); }
}
.bedrock-portrait svg { display: block; width: 100%; height: 100%; }
.bk-cursor { animation: bk-cursor 1.1s steps(2, end) infinite; }
@keyframes bk-cursor {
  0%, 50% { opacity: 1; }
  51%,100%{ opacity: 0; }
}
.bk-halo { animation: bk-halo 4.4s ease-in-out infinite; transform-origin: 50px 50px; }
@keyframes bk-halo {
  0%,100% { opacity: 0.78; transform: scale(1); }
  50%     { opacity: 1;    transform: scale(1.18); }
}
.bk-prompt { animation: bk-prompt 7s ease-in-out infinite; }
@keyframes bk-prompt {
  0%,100% { opacity: 0.78; }
  50%     { opacity: 1; }
}
.bk-strata { animation: bk-strata 9s ease-in-out infinite; }
@keyframes bk-strata {
  0%,100% { filter: brightness(1); }
  50%     { filter: brightness(1.18); }
}
.bk-word {
  opacity: 0;
  animation: bk-word 18s steps(1, end) infinite;
}
.bk-word-1 { animation-delay:  0s; }
.bk-word-2 { animation-delay:  3s; }
.bk-word-3 { animation-delay:  6s; }
.bk-word-4 { animation-delay:  9s; }
.bk-word-5 { animation-delay: 12s; }
.bk-word-6 { animation-delay: 15s; }
@keyframes bk-word {
  0%        { opacity: 0; }
  0.5%, 14% { opacity: 1; }
  15%,100%  { opacity: 0; }
}

/* portrait sizes */
.bedrock-portrait.lg { width: 220px; height: 220px; }
.bedrock-portrait.md { width: 96px;  height: 96px; }
.bedrock-portrait.sm { width: 40px;  height: 40px; }
.bedrock-portrait.xs { width: 18px;  height: 18px; }

/* hero on index — bedrock portrait centered with manifesto word */
.bedrock-hero {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 8px;
}

/* ════════════════════════════════════════════════════════════════════════
   CANONICAL GLITCH — extracted verbatim from FlareEncirclement.vue's
   sovereign overlay 'glitch' (§21, refined v3). Adapted from .fc-glitch-*
   to .gl-* and built into three reusable systems:
     1. .bedrock-portrait.with-glitch  — static hero portrait
     2. .gl-pulse                       — one-shot text glitch (state-trans.)
     3. .gl-burst                       — one-shot container overlay
     4. body.gl-ambient                  — subtle constant whole-page glitch
   Hagrid's own avatar wears exactly bedrock+glitch on the registry; this
   ports the same visual language to his standalone site.
   ════════════════════════════════════════════════════════════════════════ */

/* ── glitch overlay layer (used by .with-glitch portrait + .gl-burst) ── */
.gl-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  z-index: 5;
}
.gl-overlay .gl-svg {
  width: 100%; height: 100%;
  display: block;
  mix-blend-mode: screen;
}
.gl-overlay .gl-vignette {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 110% 110% at 50% 50%, transparent 52%, rgba(6,8,16,0.62) 100%);
  z-index: 6;
}

/* ── always-on canonical animations (used inside any .gl-overlay) ── */
.gl-overlay .gl-scanlines    { animation: gl-scan-drift 5.1s linear infinite; }
.gl-overlay .gl-crt-beam     { animation: gl-crt-sweep  3.7s linear infinite; opacity: 0; }
.gl-overlay .gl-tear-1       { animation: gl-tear1 1.9s steps(1) infinite; opacity: 0; transform-origin: left center; }
.gl-overlay .gl-tear-2       { animation: gl-tear2 2.3s steps(1) infinite; opacity: 0; transform-origin: right center; }
.gl-overlay .gl-tear-3       { animation: gl-tear3 2.7s steps(1) infinite; opacity: 0; transform-origin: left center; }
.gl-overlay .gl-tear-4       { animation: gl-tear4 1.7s steps(1) infinite; opacity: 0; transform-origin: right center; }
.gl-overlay .gl-tear-5       { animation: gl-tear5 3.3s steps(1) infinite; opacity: 0; transform-origin: left center; }
.gl-overlay .gl-tear-6       { animation: gl-tear6 2.1s steps(1) infinite; opacity: 0; transform-origin: center; }
.gl-overlay .gl-tear-7       { animation: gl-tear7 2.5s steps(1) infinite; opacity: 0; transform-origin: right center; }
.gl-overlay .gl-dia-1        { animation: gl-dia1 0.51s steps(2) infinite; opacity: 0; }
.gl-overlay .gl-dia-2        { animation: gl-dia2 0.73s steps(2) infinite; opacity: 0; }
.gl-overlay .gl-dia-3        { animation: gl-dia3 0.89s steps(2) infinite; opacity: 0; }
.gl-overlay .gl-flash        { animation: gl-flash 8.4s linear infinite; opacity: 0; }
.gl-overlay .gl-strip-major-1{ animation: gl-strip1 8.4s linear infinite; opacity: 0; }
.gl-overlay .gl-strip-major-2{ animation: gl-strip2 8.4s linear infinite; opacity: 0; }
.gl-overlay .gl-noise        { animation: gl-noise 0.27s steps(3) infinite; }
.gl-overlay .gl-glyph        { opacity: 0; }
.gl-overlay .gl-glyph-1      { animation: gl-glyph1 2.4s steps(10) infinite; }
.gl-overlay .gl-glyph-2      { animation: gl-glyph2 1.9s steps(8) infinite; }
.gl-overlay .gl-glyph-3      { animation: gl-glyph3 8.4s linear infinite; }

@keyframes gl-scan-drift { 0% { transform: translateY(0); } 100% { transform: translateY(3px); } }
@keyframes gl-crt-sweep {
  0%   { transform: translateY(-2px); opacity: 0; }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.55; }
  100% { transform: translateY(102px); opacity: 0; }
}
@keyframes gl-tear1 {
  0%, 8% { opacity: 0; transform: translateX(0); }
  9%, 12% { opacity: 0.88; transform: translateX(-6px); }
  13%, 47% { opacity: 0; transform: translateX(0); }
  48%, 51% { opacity: 0.72; transform: translateX(-14px); }
  52%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes gl-tear2 {
  0%, 14% { opacity: 0; transform: translateX(0); }
  15%, 18% { opacity: 0.82; transform: translateX(8px); }
  19%, 62% { opacity: 0; transform: translateX(0); }
  63%, 66% { opacity: 0.90; transform: translateX(18px); }
  67%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes gl-tear3 {
  0%, 22% { opacity: 0; transform: translateX(0); }
  23%, 26% { opacity: 0.78; transform: translateX(-12px); }
  27%, 71% { opacity: 0; transform: translateX(0); }
  72%, 75% { opacity: 0.88; transform: translateX(-20px) scaleY(1.6); }
  76%, 100% { opacity: 0; transform: translateX(0) scaleY(1); }
}
@keyframes gl-tear4 {
  0%, 31% { opacity: 0; transform: translateX(0); }
  32%, 35% { opacity: 0.85; transform: translateX(10px); }
  36%, 82% { opacity: 0; transform: translateX(0); }
  83%, 86% { opacity: 0.78; transform: translateX(16px); }
  87%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes gl-tear5 {
  0%, 6% { opacity: 0; transform: translateX(0) scaleY(1); }
  7%, 11% { opacity: 0.92; transform: translateX(-8px) scaleY(2); }
  12%, 54% { opacity: 0; transform: translateX(0) scaleY(1); }
  55%, 58% { opacity: 0.95; transform: translateX(-22px) scaleY(2.4); }
  59%, 100% { opacity: 0; transform: translateX(0) scaleY(1); }
}
@keyframes gl-tear6 {
  0%, 38% { opacity: 0; transform: translateX(0); }
  39%, 42% { opacity: 0.72; transform: translateX(12px); }
  43%, 78% { opacity: 0; transform: translateX(0); }
  79%, 82% { opacity: 0.85; transform: translateX(-14px); }
  83%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes gl-tear7 {
  0%, 18% { opacity: 0; transform: translateX(0); }
  19%, 22% { opacity: 0.88; transform: translateX(14px); }
  23%, 66% { opacity: 0; transform: translateX(0); }
  67%, 70% { opacity: 0.78; transform: translateX(20px); }
  71%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes gl-dia1 { 0%, 78% { opacity: 0; } 80%, 100% { opacity: 0.88; } }
@keyframes gl-dia2 { 0%, 82% { opacity: 0; } 84%, 100% { opacity: 0.85; } }
@keyframes gl-dia3 { 0%, 76% { opacity: 0; } 78%, 100% { opacity: 0.92; } }
@keyframes gl-flash {
  0%, 15.9% { opacity: 0; }
  16%, 16.2% { opacity: 0.82; }
  16.3%, 46.9% { opacity: 0; }
  47%, 47.2% { opacity: 0.42; }
  47.3%, 77.9% { opacity: 0; }
  78%, 78.3% { opacity: 1; }
  78.4%, 100% { opacity: 0; }
}
@keyframes gl-strip1 {
  0%, 15.9% { opacity: 0; transform: translateX(0); }
  16%, 16.2% { opacity: 0.92; transform: translateX(-22px); }
  16.3%, 77.9% { opacity: 0; transform: translateX(0); }
  78%, 78.3% { opacity: 1; transform: translateX(-30px); }
  78.4%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes gl-strip2 {
  0%, 15.9% { opacity: 0; transform: translateX(0); }
  16%, 16.2% { opacity: 0.85; transform: translateX(18px); }
  16.3%, 77.9% { opacity: 0; transform: translateX(0); }
  78%, 78.3% { opacity: 0.95; transform: translateX(26px); }
  78.4%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes gl-noise {
  0%   { opacity: 0.14; }
  33%  { opacity: 0.26; }
  66%  { opacity: 0.10; }
  100% { opacity: 0.18; }
}
@keyframes gl-glyph1 {
  0%, 68% { opacity: 0; }
  70%, 73% { opacity: 0.78; }
  74%, 86% { opacity: 0; }
  87%, 90% { opacity: 0.85; }
  91%, 100% { opacity: 0; }
}
@keyframes gl-glyph2 {
  0%, 58% { opacity: 0; }
  60%, 63% { opacity: 0.72; }
  64%, 88% { opacity: 0; }
  89%, 92% { opacity: 0.82; }
  93%, 100% { opacity: 0; }
}
@keyframes gl-glyph3 {
  0%, 15.9% { opacity: 0; }
  16%, 16.3% { opacity: 0.85; }
  16.4%, 77.9% { opacity: 0; }
  78%, 78.3% { opacity: 1; }
  78.4%, 100% { opacity: 0; }
}

/* ── ring (the pink/cyan RGB-split rim around portraits) ─────────────── */
.gl-ring {
  background:
    radial-gradient(circle at 50% 50%, rgba(6,8,16,0.98) 0%, rgba(2,4,10,1) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,51,102,0.42),
    inset 0 0 20px -2px rgba(160,30,70,0.62),
    -3px 0 0 1.5px rgba(255,51,102,0.95),
    0 0 0 3px rgba(6,8,16,1),
    3px 0 0 4.5px rgba(0,210,210,0.95),
    -8px 0 22px rgba(255,51,102,0.62),
    8px 0 22px rgba(0,210,210,0.55),
    0 0 36px 4px rgba(120,30,90,0.42);
  animation:
    gl-ring-breathe 2.4s ease-in-out infinite alternate,
    gl-ring-burst   8.4s linear infinite;
}
@keyframes gl-ring-breathe {
  0% {
    box-shadow:
      inset 0 0 0 1.5px rgba(255,51,102,0.42),
      inset 0 0 20px -2px rgba(160,30,70,0.62),
      -3px 0 0 1.5px rgba(255,51,102,0.95),
      0 0 0 3px rgba(6,8,16,1),
      3px 0 0 4.5px rgba(0,210,210,0.95),
      -8px 0 22px rgba(255,51,102,0.62),
      8px 0 22px rgba(0,210,210,0.55),
      0 0 36px 4px rgba(120,30,90,0.42);
  }
  100% {
    box-shadow:
      inset 0 0 0 2px rgba(255,51,102,0.55),
      inset 0 0 26px -1px rgba(190,40,90,0.78),
      -4px 0 0 1.5px rgba(255,70,120,1),
      0 0 0 3.5px rgba(6,8,16,1),
      4px 0 0 5px rgba(20,220,220,1),
      -10px 0 26px rgba(255,51,102,0.78),
      10px 0 26px rgba(0,210,210,0.68),
      0 0 46px 6px rgba(150,40,110,0.58);
  }
}
@keyframes gl-ring-burst {
  0%, 15.9%, 16.3%, 46.9%, 47.3%, 77.9%, 78.4%, 100% { /* normal */ }
  16%, 16.2% {
    box-shadow:
      inset 0 0 0 2.5px rgba(232,234,237,0.88),
      inset 0 0 28px -1px rgba(255,200,220,0.72),
      -12px 0 0 2px rgba(255,51,102,1),
      0 0 0 4px rgba(6,8,16,1),
      12px 0 0 6px rgba(0,210,210,1),
      -18px 0 30px rgba(255,51,102,0.92),
      18px 0 30px rgba(0,210,210,0.88),
      0 0 60px 8px rgba(220,100,180,0.78);
  }
  47%, 47.2% {
    box-shadow:
      inset 0 0 0 2px rgba(0,255,200,0.65),
      inset 0 0 22px -2px rgba(0,210,210,0.62),
      -8px 0 0 1.5px rgba(255,51,102,1),
      0 0 0 3.5px rgba(6,8,16,1),
      8px 0 0 5px rgba(0,210,210,1),
      -14px 0 26px rgba(255,51,102,0.85),
      14px 0 26px rgba(0,210,210,0.80),
      0 0 42px 6px rgba(100,30,130,0.62);
  }
  78%, 78.3% {
    box-shadow:
      inset 0 0 0 3.5px rgba(232,234,237,1),
      inset 0 0 36px -1px rgba(232,234,237,0.92),
      -20px 0 0 3px rgba(255,51,102,1),
      0 0 0 5px rgba(6,8,16,1),
      20px 0 0 7px rgba(0,210,210,1),
      -28px 0 44px rgba(255,51,102,1),
      28px 0 44px rgba(0,210,210,1),
      0 0 80px 12px rgba(220,80,160,0.95);
  }
}

/* ── bedrock + glitch composite portrait (hero on index) ─────────────── */
.bedrock-portrait.with-glitch {
  /* keep the bedrock ring but ADD the glitch ring on top via the shadow set */
  box-shadow:
    inset 0 0 0 1.5px rgba(57,255,20,0.72),
    inset 0 0 16px -4px rgba(42,214,15,0.55),
    0 0 0 2px rgba(72,80,90,0.92),
    0 0 0 3.2px rgba(220,38,38,0.55),
    -3px 0 0 4.5px rgba(255,51,102,0.85),
    3px 0 0 5.5px rgba(0,210,210,0.85),
    0 0 28px 5px rgba(57,255,20,0.42),
    -10px 0 22px rgba(255,51,102,0.55),
    10px 0 22px rgba(0,210,210,0.48),
    0 0 52px 11px rgba(0,0,0,0.85);
  animation:
    bedrock-pulse 6s ease-in-out infinite,
    gl-ring-burst 8.4s linear infinite;
}
.bedrock-portrait.with-glitch::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse 110% 110% at 50% 50%, transparent 52%, rgba(6,8,16,0.55) 100%);
  pointer-events: none;
  z-index: 4;
}
/* the SVG overlay is added via JS — see _shared.js mountGlitch() */

/* ── ONE-SHOT TEXT GLITCH (manifesto state transitions) ──────────────── */
.gl-pulse {
  animation: gl-text-pulse 700ms ease-in-out 1 !important;
}
@keyframes gl-text-pulse {
  0% {
    filter: drop-shadow(0 0 0 transparent);
    transform: translateX(0);
  }
  8% {
    filter:
      drop-shadow(-9px 0 0 rgba(255,51,102,1))
      drop-shadow(9px 0 0 rgba(0,210,210,1));
    transform: translateX(-3px);
  }
  18% {
    filter:
      drop-shadow(-3px 0 0 rgba(255,51,102,0.85))
      drop-shadow(3px 0 0 rgba(0,210,210,0.85));
    transform: translateX(2px);
  }
  35% {
    filter:
      drop-shadow(-13px 0 0 rgba(255,51,102,1))
      drop-shadow(13px 0 0 rgba(0,210,210,1));
    transform: translateX(-5px);
  }
  48% {
    filter:
      drop-shadow(-5px 0 0 rgba(255,51,102,0.92))
      drop-shadow(5px 0 0 rgba(0,210,210,0.88));
    transform: translateX(3px);
  }
  65% {
    filter:
      drop-shadow(-9px 0 0 rgba(255,51,102,1))
      drop-shadow(9px 0 0 rgba(0,210,210,1));
    transform: translateX(-2px);
  }
  78% {
    filter:
      drop-shadow(-2px 0 0 rgba(255,51,102,0.55))
      drop-shadow(2px 0 0 rgba(0,210,210,0.5));
    transform: translateX(1px);
  }
  100% {
    filter: drop-shadow(0 0 0 transparent);
    transform: translateX(0);
  }
}

/* ── ONE-SHOT CONTAINER BURST (terminal crash / 404 / stare dissolve) ─── */
/* JS now positions the overlay via fixed-position to the container's
   client rect (handles scrolling containers). Inline `animation:` on the
   overlay drives the fade. The `.gl-burst-on` class on the container is
   purely a hook for any consumers who want to react. */
.gl-burst-active { /* marker class; styling lives inline on the element */ }
@keyframes gl-burst-fade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── AMBIENT BODY GLITCH (subtle, constant, opt-in via body.gl-ambient) ── */
body.gl-ambient {
  animation: gl-ambient-flicker 14s steps(1) infinite;
}
@keyframes gl-ambient-flicker {
  /* 14s cycle: 5 micro-glitches spaced uneven, each ~80-150ms.
     Filter applies a faint RGB drop-shadow then off. Subtle on purpose. */
  0%, 11.8% { filter: none; }
  12%, 12.6% {
    filter:
      drop-shadow(-1px 0 0 rgba(255,51,102,0.20))
      drop-shadow(1px 0 0 rgba(0,210,210,0.20));
  }
  12.8%, 27.3% { filter: none; }
  27.4%, 27.7% {
    filter:
      drop-shadow(-1px 0 0 rgba(255,51,102,0.15))
      drop-shadow(1px 0 0 rgba(0,210,210,0.15));
  }
  27.9%, 49.0% { filter: none; }
  49.2%, 49.9% {
    filter:
      drop-shadow(-2px 0 0 rgba(255,51,102,0.28))
      drop-shadow(2px 0 0 rgba(0,210,210,0.28));
  }
  50.1%, 67.7% { filter: none; }
  67.9%, 68.3% {
    filter:
      drop-shadow(-1px 0 0 rgba(255,51,102,0.18))
      drop-shadow(1px 0 0 rgba(0,210,210,0.18));
  }
  68.5%, 89.2% { filter: none; }
  89.4%, 89.9% {
    filter:
      drop-shadow(-3px 0 0 rgba(255,51,102,0.35))
      drop-shadow(3px 0 0 rgba(0,210,210,0.35));
  }
  90.1%, 100% { filter: none; }
}

/* ── reduced motion guard — every glitch animation halts ────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .ticker .tline { display: none; }
  .gl-overlay { display: none !important; }
  body.gl-ambient { animation: none !important; filter: none !important; }
  .bedrock-portrait.with-glitch::after { display: none; }
}