/* BITCOIN MOI explorer + pool theme.
   Dark obsidian background, Bitcoin orange (#f7931a) brand mark, gold (#ffd84a) text accents,
   red neon for the genesis banner, CRT scanlines, mainframe panels with corner brackets.
   Fonts are served by the app from /static/fonts/ (same woff2 files as bitcoin.moi/assets/fonts/,
   which is the fallback source and allowed by the CSP font-src).
   Every animation is switched off under prefers-reduced-motion (bottom of the file). */

@font-face {
  font-family: 'Orbitron';
  src: url('/static/fonts/orbitron-latin.woff2') format('woff2'),
       url('https://bitcoin.moi/assets/fonts/orbitron-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Share Tech Mono';
  src: url('/static/fonts/sharetechmono-latin.woff2') format('woff2'),
       url('https://bitcoin.moi/assets/fonts/sharetechmono-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'VT323';
  src: url('/static/fonts/vt323-latin.woff2') format('woff2'),
       url('https://bitcoin.moi/assets/fonts/vt323-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #020101;
  --bg2: #0a0705;
  --panel: rgba(255, 216, 74, 0.03);
  --panel2: rgba(247, 147, 26, 0.05);
  --gold: #ffd84a;
  --gold-hi: #fff2b3;
  --orange: #f7931a;
  --orange-dim: #a85f0c;
  --red: #ff5a4e;
  --ok: #8df08d;
  --ink: #ece9df;
  --dim: #a8a49a;
  --dim2: #7a766c;
  --line: rgba(255, 216, 74, 0.22);
  --line2: rgba(255, 216, 74, 0.45);
  --line-o: rgba(247, 147, 26, 0.45);
  --glow-gold: 0 0 10px rgba(255, 216, 74, 0.45);
  --glow-o: 0 0 10px rgba(247, 147, 26, 0.55), 0 0 28px rgba(247, 147, 26, 0.25);
  --mono: 'Share Tech Mono', 'Courier New', monospace;
  --hud: 'Orbitron', 'Segoe UI', sans-serif;
  --crt: 'VT323', 'Courier New', monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(247, 147, 26, 0.10), transparent 60%),
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(255, 216, 74, 0.05), transparent 60%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 18px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* subtle CRT scanlines + vignette, fixed and non-interactive */
body::before {
  content: "";
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.18) 3px 4px);
}
body::after {
  content: "";
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 14px 70px;
  animation: page-in 0.5s var(--ease) both;
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- header */
header.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 18px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line-o);
  background: rgba(2, 1, 1, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(247, 147, 26, 0.15), 0 8px 30px rgba(0, 0, 0, 0.6);
}
.brandrow { display: flex; align-items: center; gap: 12px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
  color: var(--gold);
}
.brand:hover { color: var(--gold-hi); text-shadow: var(--glow-gold); }
.coin {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 6px rgba(247, 147, 26, 0.55));
  transition: transform 0.9s var(--ease);
  animation: coin-glow 4s ease-in-out infinite;
}
.brand:hover .coin { transform: rotateY(360deg); }
@keyframes coin-glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(247, 147, 26, 0.45)); }
  50%      { filter: drop-shadow(0 0 12px rgba(247, 147, 26, 0.85)); }
}
.wordmark {
  font-family: var(--hud);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.08em;
  line-height: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wordmark small {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--orange);
}
/* HOME = first nav item, orange like the coin */
.navlink.homebtn { border-color: var(--line-o); color: var(--orange); background: rgba(247, 147, 26, 0.06); }
.navlink.homebtn span { font-size: 17px; line-height: 1; }
.navlink.homebtn:hover { background: var(--orange); color: #130800; box-shadow: var(--glow-o); border-color: var(--orange); }

.navrow { display: flex; flex-wrap: wrap; gap: 6px; }
.navlink {
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px 13px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  letter-spacing: 0.14em;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.navlink:hover { border-color: var(--gold); color: var(--gold); background: rgba(255, 216, 74, 0.05); text-shadow: none; }
.navlink.active { border-color: var(--orange); color: var(--orange); background: rgba(247, 147, 26, 0.08); }
.navlink.ext::after { content: "↗"; font-size: 11px; color: var(--dim2); }
.navlink.ext:hover::after { color: inherit; }

.search { display: flex; gap: 6px; flex: 1 1 260px; max-width: 440px; }
.search input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  background: #000;
  border: 1px solid var(--line2);
  border-radius: 3px;
  color: var(--gold);
  font: inherit;
  font-size: 16px;
  padding: 6px 12px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.search input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.18); }
.search button {
  min-height: 40px;
  padding: 6px 16px;
  background: var(--gold);
  color: #000;
  border: 1px solid var(--gold);
  border-radius: 3px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.search button:hover { background: var(--gold-hi); box-shadow: var(--glow-gold); }

/* ---------------------------------------------------------------- panels */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel2), var(--panel) 40%);
  border: 1px solid var(--line);
  border-radius: 4px;
  margin: 18px 0;
  padding: 16px 18px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.panel:hover { border-color: rgba(255, 216, 74, 0.36); }
.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
}
.panel::before { top: -1px; left: -1px; border-top: 2px solid var(--orange); border-left: 2px solid var(--orange); }
.panel::after  { bottom: -1px; right: -1px; border-bottom: 2px solid var(--orange); border-right: 2px solid var(--orange); }
.panel.err { border-color: var(--red); color: var(--red); text-align: center; padding: 26px 18px; }
.panel.err h1 { color: var(--red); }
.panel.err::before, .panel.err::after { border-color: var(--red); }

/* a panel that just received new data from the live poll */
.panel.swapped { animation: swap-flash 1.2s var(--ease); }
@keyframes swap-flash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 216, 74, 0), inset 0 0 0 0 rgba(255, 216, 74, 0); }
  25%  { box-shadow: 0 0 22px 0 rgba(255, 216, 74, 0.25), inset 0 0 30px 0 rgba(255, 216, 74, 0.06); }
  100% { box-shadow: 0 0 0 0 rgba(255, 216, 74, 0), inset 0 0 0 0 rgba(255, 216, 74, 0); }
}

.panelrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.panelrow .panel { margin-top: 0; }

h1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-family: var(--hud);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  text-shadow: 0 0 10px rgba(255, 216, 74, 0.30);
}
h1 .dim { font-size: 14px; }
.h1tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--orange);
  border: 1px solid var(--line-o);
  border-radius: 2px;
  padding: 2px 8px;
  text-shadow: none;
  text-transform: uppercase;
}

/* the pulsing live dot */
.dot {
  position: relative;
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px rgba(141, 240, 141, 0.9);
  vertical-align: middle;
  margin-right: 2px;
}
.dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(141, 240, 141, 0.8);
  animation: dot-ring 1.8s ease-out infinite;
}
@keyframes dot-ring {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.0); opacity: 0; }
}
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); }
.upd { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--dim2); text-transform: none; text-shadow: none; }
h1 .upd { margin-left: auto; }

a { color: var(--gold); text-decoration: none; transition: color 0.15s, text-shadow 0.15s; }
a:hover { color: var(--gold-hi); text-shadow: var(--glow-gold); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.gold { color: var(--gold); }
.dim { color: var(--dim2); }
.mono { font-family: var(--mono); }
.hx { word-break: break-all; font-size: 14px; color: var(--dim); }
.num { font-variant-numeric: tabular-nums; }
code.inl {
  font-family: var(--mono);
  color: var(--gold);
  background: rgba(255, 216, 74, 0.08);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 5px;
  font-size: 0.92em;
  word-break: break-all;
}

/* ---------------------------------------------------------------- GENESIS NIGHT banner */
.genesis {
  margin: 18px 0;
  padding: 22px 14px;
  text-align: center;
  border: 2px solid var(--red);
  border-radius: 4px;
  color: var(--red);
  font-family: var(--crt);
  font-size: 46px;
  letter-spacing: 0.14em;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 90, 78, 0.8), 0 0 40px rgba(255, 90, 78, 0.4);
  background: rgba(255, 90, 78, 0.07);
  animation: gen-blink 1.6s steps(2, start) infinite;
}
.genesis span {
  display: block;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.3em;
  color: var(--gold);
  margin-top: 8px;
  text-shadow: 0 0 8px rgba(255, 216, 74, 0.5);
}
@keyframes gen-blink { 50% { opacity: 0.6; } }

/* ---------------------------------------------------------------- hero (empty chain) */
.hero {
  margin: 18px 0;
  padding: 26px 22px;
  text-align: center;
  border: 1px solid var(--line-o);
  border-radius: 4px;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, rgba(247, 147, 26, 0.14), transparent 70%),
    rgba(0, 0, 0, 0.35);
}
.hero-title {
  font-family: var(--hud);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 0.12em;
  color: var(--orange);
  text-shadow: var(--glow-o);
  animation: hero-breathe 2.6s ease-in-out infinite;
}
@keyframes hero-breathe { 50% { text-shadow: 0 0 16px rgba(247, 147, 26, 0.85), 0 0 48px rgba(247, 147, 26, 0.4); } }
.hero p { max-width: 720px; margin: 10px auto 0; color: var(--dim); font-size: 16px; }
.cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 16px;
  padding: 8px 22px;
  border-radius: 3px;
  background: var(--orange);
  color: #130800;
  font-weight: 700;
  letter-spacing: 0.14em;
  box-shadow: var(--glow-o);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.cta:hover { color: #000; transform: translateY(-1px); box-shadow: 0 0 18px rgba(247, 147, 26, 0.8); text-shadow: none; }

/* ---------------------------------------------------------------- stat grid */
.statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.stat {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s var(--ease);
}
.stat::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--orange), transparent);
  opacity: 0.7;
}
.stat:hover { border-color: var(--line2); transform: translateY(-1px); }
.stat label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim2);
  margin-bottom: 4px;
}
.stat strong {
  display: block;
  font-size: 21px;
  font-weight: 400;
  color: var(--gold);
  word-break: break-word;
  line-height: 1.25;
}
.stat strong .dim, .stat strong span.dim { font-size: 13px; }
.stat .hx { display: block; font-size: 13px; }
.stat .v { display: inline; }
.stat .v.ticking { color: var(--gold-hi); text-shadow: var(--glow-gold); }

/* ---------------------------------------------------------------- tables */
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 6px 0; }
th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim2);
  font-weight: 400;
  border-bottom: 1px solid var(--line2);
  padding: 8px 10px;
  white-space: nowrap;
}
td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 216, 74, 0.10);
  vertical-align: top;
}
tbody tr { transition: background 0.2s; }
tbody tr:hover td { background: rgba(255, 216, 74, 0.045); }
a.hgt {
  display: inline-block;
  font-family: var(--hud);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--orange);
}
a.hgt:hover { color: var(--gold-hi); }

/* new rows (added by the live poll, or the top rows on first paint) slide in */
table.blocks tbody tr, table.poolblocks tbody tr { animation: row-in 0.6s var(--ease) both; }
table.blocks tbody tr:nth-child(1) { animation-delay: 0.05s; }
table.blocks tbody tr:nth-child(2) { animation-delay: 0.10s; }
table.blocks tbody tr:nth-child(3) { animation-delay: 0.15s; }
table.blocks tbody tr:nth-child(4) { animation-delay: 0.20s; }
table.blocks tbody tr:nth-child(5) { animation-delay: 0.25s; }
tbody tr.new { animation: row-new 1.6s var(--ease) both; }
tbody tr.new td { background: rgba(247, 147, 26, 0.10); }
@keyframes row-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes row-new {
  0%   { opacity: 0; transform: translateY(-14px); box-shadow: inset 4px 0 0 var(--orange); }
  30%  { opacity: 1; transform: none; }
  100% { box-shadow: inset 4px 0 0 transparent; }
}

table.kv th { width: 1%; }
table.kv td { word-break: break-all; }

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line2);
  border-radius: 3px;
  color: var(--gold);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.btn:hover { color: var(--gold-hi); border-color: var(--orange); background: rgba(247, 147, 26, 0.08); text-shadow: none; }

/* ---------------------------------------------------------------- notes, badges, empty states */
.note {
  border-left: 3px solid var(--orange);
  border-radius: 0 3px 3px 0;
  background: rgba(247, 147, 26, 0.06);
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 15px;
}
.badge {
  display: inline-block;
  border: 1px solid var(--red);
  border-radius: 2px;
  color: var(--red);
  padding: 2px 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 1px 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.ok { color: var(--ok); }
.bad { color: var(--red); }
.warn { color: var(--gold); }
.pill.dim { color: var(--dim2); }

.empty {
  margin: 6px 0;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 3px;
  color: var(--dim);
  font-size: 15px;
  text-align: center;
}
.empty.small { padding: 8px 10px; font-size: 13px; }
.empty.big { padding: 26px 18px; }
.empty-title {
  font-family: var(--hud);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.12em;
  color: var(--orange);
  text-shadow: var(--glow-o);
  margin-bottom: 6px;
  animation: hero-breathe 2.6s ease-in-out infinite;
}
.empty p { margin: 4px 0 0; }
.lead { margin: 0 0 14px; color: var(--dim); font-size: 16px; }

.opret {
  display: inline-block;
  max-width: 100%;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px 10px;
  font-size: 14px;
  word-break: break-all;
  vertical-align: top;
}

.txlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 6px;
}
.txlist li {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.35);
  word-break: break-all;
  font-size: 14px;
  animation: row-in 0.5s var(--ease) both;
}

/* ---------------------------------------------------------------- sparklines (inline SVG) */
.sparkbox { margin-top: 14px; }
.sparkhead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim2);
  margin-bottom: 6px;
}
.spark {
  display: block;
  width: 100%;
  height: 110px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2));
}
.spark.bars { height: 96px; }
.spark .bar { fill: var(--gold); opacity: 0.85; transform-origin: 50% 100%; transition: opacity 0.2s; }
.spark .bar:hover { opacity: 1; fill: var(--gold-hi); }
.spark .bar.slow { fill: var(--orange); }
.spark .bar.fast { fill: var(--ok); opacity: 0.7; }
.spark .target { stroke: rgba(255, 216, 74, 0.5); stroke-width: 1; stroke-dasharray: 4 4; }
.spark .line { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: draw 1.6s var(--ease) forwards; }
.spark .area { opacity: 0; animation: fade 1.2s 0.6s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* worker share bars in the pool leaderboard */
td.pct { white-space: nowrap; }
.pctbar { display: inline-block; width: 70px; height: 6px; margin-right: 8px; vertical-align: middle;
          border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: rgba(0, 0, 0, 0.4); }
.pctbar svg { display: block; width: 100%; height: 100%; }
.pctbar rect { fill: var(--orange); }

/* ---------------------------------------------------------------- pool: connect card */
.panel.connect {
  border-color: var(--line-o);
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(247, 147, 26, 0.12), transparent 60%),
    linear-gradient(180deg, var(--panel2), var(--panel) 40%);
}
.connectgrid { display: grid; gap: 8px; }
.crow {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  grid-template-areas: "label value copy" "hint hint hint";
  align-items: center;
  gap: 6px 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.4);
}
.clabel { grid-area: label; font-size: 12px; letter-spacing: 0.18em; color: var(--dim2); text-transform: uppercase; }
.cval {
  grid-area: value;
  font-family: var(--mono);
  font-size: 17px;
  color: var(--gold-hi);
  word-break: break-all;
  text-shadow: 0 0 6px rgba(255, 216, 74, 0.25);
}
.chint { grid-area: hint; font-size: 13px; color: var(--dim); }
.copy {
  grid-area: copy;
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--line-o);
  border-radius: 3px;
  background: rgba(247, 147, 26, 0.08);
  color: var(--orange);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.copy:hover { background: var(--orange); color: #130800; }
.copy.done { background: var(--ok); border-color: var(--ok); color: #031a03; }
.connectfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 14px 0 8px;
  font-size: 14px;
  color: var(--dim);
  letter-spacing: 0.06em;
}
.connectfacts strong { font-size: 18px; margin-right: 4px; }

/* "how block 1 is mined" */
.steps { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: 16px; }
.steps li { padding-left: 4px; }
.steps li::marker { color: var(--orange); font-family: var(--hud); font-weight: 700; }
.panel.b1.done { border-color: rgba(141, 240, 141, 0.45); }
.panel.b1.done::before, .panel.b1.done::after { border-color: var(--ok); }
.b1line { margin: 0; font-size: 17px; word-break: break-word; }

/* the hash shimmer on the pool hashrate panel */
.panel.mining { overflow: hidden; }
.panel.mining::before, .panel.mining::after { z-index: 2; }
.panel.mining .statgrid { position: relative; }
.panel.mining .statgrid::after {
  content: "";
  position: absolute;
  inset: -40px 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, transparent 40%,
              rgba(255, 216, 74, 0.07) 48%, rgba(247, 147, 26, 0.12) 50%, rgba(255, 216, 74, 0.07) 52%,
              transparent 60%, transparent 100%);
  background-size: 250% 100%;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
.h1tag.shimmer {
  background: linear-gradient(90deg, var(--orange) 0%, var(--gold-hi) 50%, var(--orange) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 2.8s linear infinite;
}

/* while a live swap is in progress only genuinely new rows animate */
.swapped table tbody tr:not(.new), .swapped .txlist li { animation: none; }
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* ---------------------------------------------------------------- footer */
footer.foot {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  padding: 18px 14px 28px;
  border-top: 1px solid var(--line-o);
  color: var(--dim2);
  font-size: 13px;
  text-align: center;
}
.footrow { display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; margin-bottom: 6px; }
.footrow.links a { letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; }
.remember {
  margin: 14px 0 8px;
  font-family: var(--crt);
  font-size: 22px;
  letter-spacing: 0.16em;
  color: var(--orange);
  text-shadow: var(--glow-o);
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .panelrow { grid-template-columns: 1fr; }
  .panelrow .panel { margin-top: 18px; }
}
@media (max-width: 760px) {
  header.top { flex-direction: column; align-items: stretch; }
  .brandrow { justify-content: space-between; }
  .navrow { justify-content: center; }
  .search { flex: 0 0 auto; max-width: none; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  table { font-size: 14px; }
  th { font-size: 11px; }
  td, th { padding: 7px 8px; }
  .genesis { font-size: 32px; }
  .hero-title { font-size: 22px; }
  .stat strong { font-size: 18px; }
  .statgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .txlist { grid-template-columns: 1fr; }
  .crow { grid-template-columns: 1fr auto; grid-template-areas: "label label" "value copy" "hint hint"; }
  .cval { font-size: 15px; }
  .wordmark { font-size: 16px; }
  .navlink { padding: 8px 10px; font-size: 13px; }
  .pctbar { width: 44px; }
  .remember { font-size: 18px; }
}

/* ---------------------------------------------------------------- the new-block bell, worker online state */
button.navlink.bell { background: transparent; font-family: var(--mono); cursor: pointer; text-transform: none; }
button.navlink.bell.on { border-color: var(--gold); color: var(--gold); background: rgba(255, 216, 74, 0.06); }
.future { border-bottom: 1px dotted var(--dim2); cursor: help; }   /* a block stamped ahead of the clock */
.wstate { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dim2);
          margin-right: 7px; vertical-align: middle; }
.wstate.on { background: var(--ok); box-shadow: 0 0 6px rgba(141, 240, 141, 0.8); }

/* ---------------------------------------------------------------- difficulty page: charts and links */
.statlink { display: block; color: inherit; text-decoration: none; }
.statlink:hover { color: inherit; text-shadow: none; }
.statlink:hover .stat { border-color: var(--orange); }
p.small { font-size: 14px; }
.chartwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 10px; }
.dchart { display: block; width: 100%; min-width: 560px; height: auto; border: 1px solid var(--line); border-radius: 3px;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2)); }
.dchart text { font-family: var(--mono); font-size: 12px; fill: var(--dim2); }
.dchart .dk-axis { font-size: 11px; letter-spacing: 0.08em; }
.dchart .dk-tick.now { fill: var(--gold); }
.dchart .dk-ltext { fill: var(--ok); font-size: 11px; }
.dk-grid { stroke: rgba(255, 216, 74, 0.08); stroke-width: 1; }
.dk-band { fill: rgba(141, 240, 141, 0.06); }
.dk-level { stroke: rgba(141, 240, 141, 0.55); stroke-width: 1; stroke-dasharray: 5 5; }
.dk-base { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: 0.75; }
.dk-req { fill: none; stroke: var(--orange); stroke-width: 2; }
.dk-dot { fill: var(--gold-hi); stroke: #000; stroke-width: 1; }
.dk-cur { fill: var(--orange); stroke: var(--gold-hi); stroke-width: 1.5; }
.dk-now { stroke: rgba(255, 216, 74, 0.4); stroke-dasharray: 2 4; }
.dk-target { stroke: rgba(255, 216, 74, 0.6); stroke-dasharray: 4 4; }
.dk-bar { fill: var(--gold); opacity: 0.85; }
.dk-bar.slow { fill: var(--orange); }
.dk-bar.fast { fill: var(--ok); opacity: 0.7; }
.dlegend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 14px; font-size: 13px; color: var(--dim); }
.dlegend .lg { display: inline-block; width: 18px; height: 10px; margin-right: 6px; vertical-align: middle; }
.dlegend .lg.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-hi); }
.dlegend .lg.base { height: 0; border-top: 2px solid var(--gold); }
.dlegend .lg.req { height: 0; border-top: 2px solid var(--orange); }
.dlegend .lg.band { background: rgba(141, 240, 141, 0.15); border-top: 1px dashed rgba(141, 240, 141, 0.6);
                    border-bottom: 1px dashed rgba(141, 240, 141, 0.6); }

/* ---------------------------------------------------------------- small screens: no CRT effects
   A phone pays for every full-screen layer and every animated shadow on each scroll
   frame, so the scanlines, the glows and the shimmer are switched off below 760 px.
   The text and the colours stay; only the decoration goes. */
@media (max-width: 760px) {
  body { background-attachment: scroll; }
  body::before { display: none; }
  header.top { position: relative; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }   /* not sticky: it is a quarter of a phone screen */
  .coin { animation: none; filter: none; }
  h1, .genesis, .genesis span, .hero-title, .empty-title, .cval, .remember, .stat .v.ticking { text-shadow: none; }
  .genesis, .hero-title, .empty-title { animation: none; }
  .cta, .cta:hover { box-shadow: none; }
  .panel.swapped { animation: none; }
  .panel.mining .statgrid::after { display: none; animation: none; }
  .h1tag.shimmer { animation: none; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--orange); }
  .dot::after { animation: none; display: none; }
}

/* ---------------------------------------------------------------- reduced motion: everything still */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .genesis, .coin, .dot::after, .hero-title, .empty-title, .panel.mining .statgrid::after,
  .h1tag.shimmer, .spark .line, .spark .area, table.blocks tbody tr, table.poolblocks tbody tr,
  tbody tr.new, .txlist li, .wrap, .panel.swapped { animation: none !important; }
  .spark .line { stroke-dashoffset: 0; }
  .spark .area { opacity: 1; }
  .dot::after { display: none; }
  .brand:hover .coin { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}