/* ECX look for the mempool explorer (2026-10-27, TEMPORARY with the fork-watch pages).
   NZ nginx links this before </head> on mempool.ecpool.tech. Mempool's colours are CSS variables, so most
   of the work is overriding them with the ecpool.tech palette (bg #0d0d0e, surface #171615, border #2e2a24,
   accent #f7941d, accent-2 #ffb347). html:root beats mempool's :root and its optional theme sheets. */

/* Five skins, the pool site's own palettes (frontend/src/skins.css, dark blocks; 2026-11-05). Default = no attribute.
   fw-bar.js holds the picker; an inline script in the page's head sets the attribute before first paint. */
html:root {
  --ecx-accent-rgb: 247, 148, 29; --ecx-bg: #0d0d0e; --ecx-elevated: #171615; --ecx-card: #121110; --ecx-hover: #1c1a18; --ecx-border: #2e2a24;
  --ecx-accent: #f7941d; --ecx-accent-dim: #8a5514; --ecx-accent-2: #ffb347; --ecx-on-accent: #1a1000;
  --ecx-side: #2a2520; --ecx-side-dark: #120f0c; --ecx-alt: #9a3412; --ecx-alert: #2b2412; --ecx-skeleton: #4b453c;
  --ecx-glow: rgba(247, 148, 29, 0.10); --ecx-fade-rgb: 23, 22, 21; --ecx-fee: #fff1d6;

  --bg: var(--ecx-bg);
  --active-bg: #000000;
  --hover-bg: var(--ecx-hover);
  --nav-bg: var(--ecx-bg);
  --navbar-bg: var(--ecx-elevated);
  --title-fg: var(--ecx-accent);
  --primary: var(--ecx-accent);
  --secondary: var(--ecx-side);
  --tertiary: var(--ecx-accent-dim);
  --info: var(--ecx-accent-2);
  --link-color: var(--ecx-accent-2);
  --link-hover-color: var(--ecx-accent);
  --box-bg: var(--ecx-elevated);
  --stat-box-bg: var(--ecx-card);
  --skeleton-bg: var(--ecx-border);
  --skeleton-bg-light: var(--ecx-skeleton);
  --alert-bg: var(--ecx-alert);
  --fade-out-box-bg-start: rgba(var(--ecx-fade-rgb), 0);
  --fade-out-box-bg-end: rgba(var(--ecx-fade-rgb), 1);
  --mainnet-alt: var(--ecx-alt);   /* 2nd colour of the mined-block gradient (with --primary) */
  --search-button: var(--ecx-accent);
  --search-button-border: var(--ecx-accent-dim);
  --search-button-focus: var(--ecx-accent-2);
  --search-button-shadow: rgba(var(--ecx-accent-rgb), .5);
}
html:root[data-ecx-skin="retro"] {
  --ecx-accent-rgb: 255, 176, 0; --ecx-bg: #120c06; --ecx-elevated: #1e1409; --ecx-card: #180f06; --ecx-hover: #2a1c0c; --ecx-border: #4a3313;
  --ecx-accent: #ffb000; --ecx-accent-dim: #7a5210; --ecx-accent-2: #ffd166; --ecx-on-accent: #1a0f00;
  --ecx-side: #33230f; --ecx-side-dark: #150e06; --ecx-alt: #8a5a00; --ecx-alert: #2a1d06; --ecx-skeleton: #5a4120;
  --ecx-glow: rgba(255, 176, 0, 0.10); --ecx-fade-rgb: 30, 20, 9; --ecx-fee: #fff4d6;
  --fg: #f5c97a; --transparent-fg: #f5c97abb; --ecx-font: "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
html:root[data-ecx-skin="scifi"] {
  --ecx-accent-rgb: 63, 216, 240; --ecx-bg: #060a14; --ecx-elevated: #0d1524; --ecx-card: #0a1120; --ecx-hover: #13203a; --ecx-border: #1d3350;
  --ecx-accent: #3fd8f0; --ecx-accent-dim: #1a6f80; --ecx-accent-2: #7ef0ff; --ecx-on-accent: #01131a;
  --ecx-side: #13233a; --ecx-side-dark: #070e1a; --ecx-alt: #0e5a6a; --ecx-alert: #0d2230; --ecx-skeleton: #2c4a6e;
  --ecx-glow: rgba(63, 216, 240, 0.10); --ecx-fade-rgb: 13, 21, 36; --ecx-fee: #e6fbff;
  --fg: #e6f4ff; --transparent-fg: #e6f4ffbb;
}
html:root[data-ecx-skin="matrix"] {
  --ecx-accent-rgb: 0, 255, 65; --ecx-bg: #000000; --ecx-elevated: #071a0e; --ecx-card: #04120a; --ecx-hover: #0c2615; --ecx-border: #0f4a26;
  --ecx-accent: #00ff41; --ecx-accent-dim: #0a7a2c; --ecx-accent-2: #7dff9e; --ecx-on-accent: #001a06;
  --ecx-side: #0a2a15; --ecx-side-dark: #03100a; --ecx-alt: #0a5c20; --ecx-alert: #16200a; --ecx-skeleton: #17643a;
  --ecx-glow: rgba(0, 255, 65, 0.08); --ecx-fade-rgb: 7, 26, 14; --ecx-fee: #eaffef;
  --fg: #b7f7c4; --transparent-fg: #b7f7c4bb; --ecx-font: "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
}
html:root[data-ecx-skin="black-rose"] {
  --ecx-accent-rgb: 239, 58, 80; --ecx-bg: #0b0708; --ecx-elevated: #1a0e11; --ecx-card: #140b0d; --ecx-hover: #261418; --ecx-border: #5a1f29;
  --ecx-accent: #ef3a50; --ecx-accent-dim: #7a1f2b; --ecx-accent-2: #ff7d8c; --ecx-on-accent: #170306;
  --ecx-side: #2a1319; --ecx-side-dark: #12080a; --ecx-alt: #7a1f2b; --ecx-alert: #2a1d0c; --ecx-skeleton: #6b2a35;
  --ecx-glow: rgba(239, 58, 80, 0.10); --ecx-fade-rgb: 26, 14, 17; --ecx-fee: #fff0f2;
  --fg: #f3e9e6; --transparent-fg: #f3e9e6bb;
}
html[data-ecx-skin="retro"] body, html[data-ecx-skin="matrix"] body { font-family: var(--ecx-font) !important; }
/* The picker that replaces the stock theme list; it copies the stock list's classes, so it looks the same. */
.ecx-skin-select { width: auto; }
/* Retro's scanlines: same 3 px pitch as the pool site. */
html[data-ecx-skin="retro"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147482000; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .10) 0, rgba(0, 0, 0, .10) 1px, transparent 1px, transparent 3px);
}

body {
  background:
    radial-gradient(1400px 600px at 50% -250px, var(--ecx-glow), transparent 70%),
    var(--ecx-bg) !important;
}

/* top bar: dark, thin accent line under it */
.navbar, nav.navbar {
  background: var(--ecx-card) !important;
  border-bottom: 1px solid var(--ecx-accent-dim);
}

/* block cubes: their face colours come from mempool itself (partly from --primary above); only the
   cube sides get the skin's dark tones */
.bitcoin-block::after {
  background-color: var(--ecx-side) !important;
}
.bitcoin-block::before {
  background-color: var(--ecx-side-dark) !important;
}
/* the fee-range line in each block is yellow by default — unreadable on the accent colour */
.bitcoin-block .fee-span {
  color: var(--ecx-fee) !important;
}

/* Matrix: neon green under white text is hard to read (operator 2026-11-05), so the mined blocks fade to a deeper
   green. Set on the block only: the buttons, links and bars keep the neon. */
html[data-ecx-skin="matrix"] .bitcoin-block {
  --primary: #008a24;
  --mainnet-alt: #06481a;
}

/* Blocks waiting to be confirmed, and the transaction fees bar, take a colour of their own per skin (operator
   2026-11-05). Their colours come from the fee level and are set inline, so a hue turn moves them all together and the
   fee levels still look different from each other. Green stays on Default. White text is unaffected. */
html[data-ecx-skin="retro"] { --ecx-wait: hue-rotate(-135deg); --ecx-wait-back: hue-rotate(135deg); }
html[data-ecx-skin="scifi"] { --ecx-wait: hue-rotate(115deg); --ecx-wait-back: hue-rotate(-115deg); }
html[data-ecx-skin="matrix"] { --ecx-wait: hue-rotate(25deg); --ecx-wait-back: hue-rotate(-25deg); }
html[data-ecx-skin="black-rose"] { --ecx-wait: hue-rotate(160deg); --ecx-wait-back: hue-rotate(-160deg); }
html[data-ecx-skin] .bitcoin-block.mempool-block,
html[data-ecx-skin] .fee-progress-bar {
  filter: var(--ecx-wait);
}
/* The cube's sides are drawn inside the block, so turn them back: they keep the skin's own dark tones. */
html[data-ecx-skin] .bitcoin-block.mempool-block::before,
html[data-ecx-skin] .bitcoin-block.mempool-block::after {
  filter: var(--ecx-wait-back);
}

/* Difficulty bar: 288 small squares, 72 x 4 (build-www.py sets the grid). The ratio keeps them square at any width;
   the mask cuts a 1 px gap around each one. */
.epoch-progress { height: auto !important; }
.epoch-blocks {
  height: auto !important;
  aspect-ratio: 18 / 1;
  background: var(--ecx-side) !important;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1px), transparent calc(100% - 1px)), linear-gradient(to bottom, #000 calc(100% - 1px), transparent calc(100% - 1px));
  mask-image: linear-gradient(to right, #000 calc(100% - 1px), transparent calc(100% - 1px)), linear-gradient(to bottom, #000 calc(100% - 1px), transparent calc(100% - 1px));
  -webkit-mask-size: calc(100% / 72) 100%, 100% 25%;
  mask-size: calc(100% / 72) 100%, 100% 25%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* boxes: rounded, a hairline */
.box, .card {
  border: 1px solid var(--ecx-border) !important;
  border-radius: 10px !important;
}

/* search button + primary buttons in the accent colour, dark text */
.btn-purple, .btn-primary {
  background-color: var(--ecx-accent) !important;
  border-color: var(--ecx-accent-dim) !important;
  color: var(--ecx-on-accent) !important;
}

/* the ECX fork block (operator 10-27 eve: "nice and flashy, maybe even electric lightnings through"): a cyan
   neon glow that flickers like a live wire, and bolts crackling across its face (SVG added by fw-bar.js).
   mempool gives every mined cube id="bitcoin-block-<height>". Cyan = the fork icon on ecpool.tech, and it
   stands out from the orange cubes. drop-shadow, not box-shadow: it follows the cube's 3D top and side. */
#bitcoin-block-973728 {
  filter: drop-shadow(0 0 6px #22e4ff) drop-shadow(0 0 16px rgba(34, 228, 255, 0.75));
  animation: fw-forkglow 3.2s linear infinite;
}
@keyframes fw-forkglow {
  0%, 100% { filter: drop-shadow(0 0 6px #22e4ff) drop-shadow(0 0 16px rgba(34, 228, 255, 0.75)); }
  46%      { filter: drop-shadow(0 0 9px #22e4ff) drop-shadow(0 0 26px rgba(34, 228, 255, 0.95)); }
  48%      { filter: drop-shadow(0 0 3px #e0fbff) drop-shadow(0 0 40px rgba(120, 240, 255, 1)) brightness(1.35); }
  50%      { filter: drop-shadow(0 0 8px #22e4ff) drop-shadow(0 0 20px rgba(34, 228, 255, 0.8)); }
  52%      { filter: drop-shadow(0 0 3px #e0fbff) drop-shadow(0 0 34px rgba(120, 240, 255, 1)) brightness(1.25); }
  56%      { filter: drop-shadow(0 0 9px #22e4ff) drop-shadow(0 0 26px rgba(34, 228, 255, 0.95)); }
}
#bitcoin-block-973728 .fw-bolts {
  position: absolute; top: 0; left: 0; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 2;
}
#bitcoin-block-973728 .fw-bolt {
  fill: none; stroke: #e8fdff; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 2px #22e4ff) drop-shadow(0 0 5px #22e4ff);
  opacity: 0;
  animation: fw-bolt 1.9s steps(1, end) infinite;
}
#bitcoin-block-973728 .fw-bolt-1 { animation-duration: 2.3s; animation-delay: 0.7s; }
#bitcoin-block-973728 .fw-bolt-2 { animation-duration: 2.9s; animation-delay: 1.3s; }
/* a strike = two or three quick flashes, then dark */
@keyframes fw-bolt {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  13%  { opacity: 0.15; }
  16%  { opacity: 0.95; }
  21%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #bitcoin-block-973728, #bitcoin-block-973728 .fw-bolt { animation: none; }
  #bitcoin-block-973728 .fw-bolt { opacity: 0.6; }
}