:root {
  --bg: #0e0f13;
  --panel: #171922;
  --line: #262a37;
  --text: #e8eaf0;
  --dim: #8b91a3;
  --accent: #e85d9c;   /* gelato pink */
  --hex: #f7c948;      /* flavour colours: one per reward token, used everywhere that token appears */
  --solidx: #7fb2ff;
  --waffle-line: #2c2417;
  /* Waffle texture: two hatches at ±45°, low contrast, for section rules. */
  --waffle: repeating-linear-gradient(45deg, var(--waffle-line) 0 1px, transparent 1px 5px),
            repeating-linear-gradient(-45deg, var(--waffle-line) 0 1px, transparent 1px 5px), #d9a06622;
}

* { box-sizing: border-box; }

/* Instant tooltip, drawn at body level by tooltip.js so no container can clip it. */
.tip {
  position: fixed; z-index: 1000; pointer-events: none; max-width: min(360px, calc(100vw - 16px));
  padding: 5px 8px; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; font-size: 0.72rem; font-weight: 400; line-height: 1.35; text-align: left; text-transform: none; letter-spacing: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
[data-tip] { cursor: default; }
a[data-tip], button[data-tip] { cursor: pointer; } /* a tooltip must not take the hand off something clickable */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 1080px; margin: 0 auto; padding: 32px 20px 64px; }

.hero { text-align: center; margin: 12px 0 28px; }
.hero h1 { font-size: 2rem; margin: 0 0 6px; }
.tagline { color: var(--dim); margin: 0 0 20px; }
.mono, code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.stats.wide .stat { min-width: 180px; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 20px; min-width: 140px; text-align: center;
}
.stat .num { display: block; font-size: 1.4rem; font-weight: 700; }
.stat .lbl { display: block; color: var(--dim); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.stat .lbl .hint { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.reflection { color: var(--accent); font-size: 0.85rem; white-space: nowrap; }

.board { width: 100%; border-collapse: collapse; margin-top: 24px; }
.board th, .board td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.board th { color: var(--dim); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; text-align: left; }
.board th.num, .board td.num { text-align: right; font-variant-numeric: tabular-nums; }
.board td.rank, .board th.rank { color: var(--dim); width: 40px; }
.board tbody tr:hover { background: #1b1e28; }
.board td.dim { color: var(--dim); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a.addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sort { color: var(--dim); }
.sort.sorted { color: var(--text); }
.sort.sorted::after { content: " ↓"; color: var(--accent); }

.back { margin: 0 0 12px; }
.foot { color: var(--dim); font-size: 0.85rem; margin-top: 28px; text-align: center; }

/* Strategy panel */
.strategy { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin: 8px 0 20px; }
.strat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.strat-head h2 { font-size: 1.05rem; margin: 0; }
.strat-head .tax { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.split { display: flex; height: 44px; border-radius: 8px; overflow: hidden; margin: 14px 0 12px; gap: 2px; }
.seg { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; color: #0e0f13; overflow: hidden; padding: 0 4px; }
.seg-pct { font-weight: 700; font-size: 0.95rem; }
.seg-lbl { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0.85; white-space: nowrap; max-width: 100%; text-overflow: ellipsis; overflow: hidden; }
.seg-hex { background: #f7c948; }
.seg-solidx { background: var(--solidx); }
.seg-burn { background: #ef6f53; }
.seg-liq { background: #59c1a8; }
.seg-gen { background: #9b8cff; }
.strat-note { margin: 6px 0; font-size: 0.92rem; }
.strat-note .off { color: var(--dim); }
.strat-foot { margin: 6px 0 0; font-size: 0.8rem; color: var(--dim); }

/* Top bar + search */
.topbar { max-width: 1080px; margin: 0 auto; padding: 16px 20px 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar .brand { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.topbar .brand:hover { text-decoration: none; color: var(--accent); }
.search { display: flex; gap: 8px; margin-left: auto; flex: 1; max-width: 440px; }
.search input[type=text] {
  flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 8px 12px; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem;
}
.search input[type=text]:focus { outline: none; border-color: var(--accent); }
.search input[type=submit] {
  background: var(--accent); color: #0e0f13; border: 0; border-radius: 8px; padding: 8px 16px;
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.search input[type=submit]:hover { filter: brightness(1.08); }
.flash { max-width: 1080px; margin: 12px auto 0; padding: 10px 16px; background: #3a2330; border: 1px solid #6b3550; color: #f3c3d5; border-radius: 8px; font-size: 0.9rem; }

/* Tier badges + pending + sections */
.tier { margin-left: 6px; font-size: 0.95rem; cursor: default; }
.tier.big { font-size: 0.95rem; color: var(--dim); font-weight: 400; margin-left: 10px; }
.num.pending { color: #59c1a8; }
h2.section { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); margin: 26px 0 10px; padding-bottom: 10px; position: relative; }
h2.section::after, .strat-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--waffle); border-radius: 2px; }
.strat-head { position: relative; padding-bottom: 10px; }

.board-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Keep address + tier icon on one line */
.board td:nth-child(2) { white-space: nowrap; }

/* Dual-ranking toggle */
.ranking-toggle { display: flex; align-items: center; gap: 8px; margin: 4px 0 4px; }
.ranking-toggle .lbl { color: var(--dim); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.toggle { padding: 5px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--dim); font-size: 0.9rem; }
.toggle:hover { text-decoration: none; border-color: var(--accent); }
.toggle.active { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); font-weight: 600; }

.addr-line { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
.copy-btn { background: transparent; border: 1px solid var(--line); color: var(--dim);
  border-radius: 6px; padding: 3px 10px; font-size: 0.8rem; cursor: pointer; }
.copy-btn:hover, .copy-btn.copied { border-color: var(--accent); color: var(--accent); }

.pager { display: flex; align-items: center; gap: 16px; justify-content: center; margin-top: 16px; }
.pager-link { padding: 5px 12px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--dim); font-size: 0.9rem; }
.pager-link:hover { border-color: var(--accent); text-decoration: none; }
.pager-link.disabled { opacity: 0.35; pointer-events: none; }
.pager-at { color: var(--dim); font-size: 0.85rem; }

.sync-wrap { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.sync-wrap form { margin: 0; }
.sync-btn { cursor: pointer; background: transparent; font-family: inherit; }
.sync-btn:hover { border-color: var(--accent); color: var(--accent); }
.synced { color: var(--dim); font-size: 0.8rem; }

/* Transfer history */
h2.section .count { color: var(--dim); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.8rem; }
.flow { font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; }
.flow.in { background: #163a2e; color: #59c1a8; }
.flow.out { background: #3a2330; color: #e88; }

/* Cohort panel */
.cohorts { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin: 0 0 20px; }
.cohort-row { display: grid; grid-template-columns: 1fr 3fr auto; align-items: center; gap: 12px; margin: 8px 0; }
.cohort-label { font-size: 0.9rem; }
.cohort-bar { background: var(--bg); border-radius: 6px; height: 20px; overflow: hidden; }
.cohort-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #f7c948); border-radius: 6px; }
.cohort-pct { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 3.2em; text-align: right; }

.label-badge { margin-left: 5px; font-size: 0.85rem; cursor: default; }

/* Turbo marks a frame [busy] while it fetches — dim what's about to be replaced so a
   slow tab switch (the GEL tab's live tail is an RPC round-trip) reads as loading. */
turbo-frame[busy] .board-wrap, turbo-frame[busy] .pager { opacity: 0.35; transition: opacity 0.15s ease 0.1s; }
turbo-frame[busy] .toggle { pointer-events: none; }

/* Loading cone — a gelato cone spun on its vertical axis while the History frame fetches.
   Cone and scoop are two stacked SVGs animated as HTML elements (3D transforms on SVG
   children are unreliable); the scoop trails the cone a few degrees for a little life.
   Space is always reserved so the cone appearing never moves the layout. */
.cone-loader { position: relative; width: 26px; height: 32px; margin-left: 4px; visibility: hidden; perspective: 110px; }
turbo-frame[busy] .cone-loader { visibility: visible; opacity: 0; animation: cone-appear 0.15s ease 0.15s forwards; }
.cone-loader svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: cone-spin 1.1s linear infinite; }
.cone-loader .scoop { animation-delay: -0.07s; }
.cone-loader .cone polygon { fill: #d9a066; stroke: #9c6a33; stroke-width: 1; stroke-linejoin: round; }
.cone-loader .cone path { fill: none; stroke: #9c6a33; stroke-width: 0.9; stroke-linecap: round; }
.cone-loader .scoop circle, .cone-loader .scoop ellipse { fill: var(--accent); }
@keyframes cone-spin { from { transform: rotate(-8deg) rotateY(0deg); } to { transform: rotate(-8deg) rotateY(360deg); } }
@keyframes cone-appear { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cone-loader svg { animation: cone-pulse 1.4s ease-in-out infinite; transform: rotate(-8deg); }
  @keyframes cone-pulse { 50% { opacity: 0.35; } }
}

/* Live tail — lazy frame above the cached GEL table. Placeholder and result keep one
   row height so nothing below moves when the chain answers. */
.live-tail { display: block; }
.live-note { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 12px;
  color: var(--dim); font-size: 0.85rem; border-bottom: 1px solid var(--line); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #5ad39a; box-shadow: 0 0 0 3px rgba(90, 211, 154, 0.18); flex: none; }
.live-tail .board { margin-top: 0; }
.live-tail + .board-wrap .board { margin-top: 0; }
.cone-loader.on { visibility: visible; opacity: 1; }    /* placeholder cone spins from the first paint */
/* Fixed columns so the live rows and the cached rows line up exactly. */
.board.history.gel { table-layout: fixed; }
.board.history.gel .c-date { width: 24%; } .board.history.gel .c-flow { width: 8%; }
.board.history.gel .c-amt { width: 17%; } .board.history.gel .c-cp { width: 33%; } .board.history.gel .c-block { width: 18%; }

/* --- Gelato theme pieces --- */
/* Flavour colours */
.num.hex, .board th.hex .sort { color: var(--hex); }
.num.solidx, .board th.solidx .sort { color: var(--solidx); }
.board th.hex .sort, .board th.solidx .sort { opacity: 0.75; }
.board th .sort.sorted { opacity: 1; }
.tok { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: #0e0f13; }
.tok.hex { background: var(--hex); }
.tok.solidx { background: var(--solidx); }

/* Shared cone parts */
.glyph { vertical-align: middle; overflow: visible; }
.cone-waffle { fill: #d9a066; stroke: #9c6a33; stroke-width: 1; stroke-linejoin: round; }
.cone-hatch { fill: none; stroke: #9c6a33; stroke-width: 0.9; stroke-linecap: round; }
.split-cone .cone-waffle { stroke-width: 1.6; } .split-cone .cone-hatch { stroke-width: 1.4; }

/* Fee split cone: scoops take the segment colours */
.strat-body { display: flex; gap: 22px; align-items: flex-start; }
.strat-main { flex: 1; min-width: 0; }
.split-cone-wrap { flex: none; padding-top: 6px; }
.scoop-solidx { fill: var(--solidx); } .scoop-hex { fill: #f7c948; } .scoop-burn { fill: #ef6f53; } .scoop-liq { fill: #59c1a8; } .scoop-gen { fill: #9b8cff; }
.split-cone circle { stroke: #0e0f13; stroke-width: 1.5; }
@media (max-width: 560px) { .split-cone-wrap { display: none; } }

/* Burn as melt: a puddle the width of the burned share of total supply */
.melt-meter { display: block; position: relative; height: 8px; margin: 8px 6px 4px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.melt-fill { display: block; height: 100%; min-width: 3px; background: var(--accent); border-radius: 999px; box-shadow: 0 0 6px var(--accent); }

/* Freshness as a melting scoop: stage classes come from melt_stage */
.melt .melt-scoop { fill: var(--accent); transition: ry 0.3s; }
.melt .melt-drip { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; visibility: hidden; }
.melt .melt-puddle { fill: var(--accent); opacity: 0.85; }
.melt-1 .melt-drip { visibility: visible; }
.melt-2 .melt-drip { visibility: visible; stroke-width: 2.6; }
.melt-2 .melt-puddle { rx: 5; }
.melt-3 .melt-scoop { ry: 6.5; cy: 14; }
.melt-3 .melt-drip { visibility: visible; stroke-width: 3; d: path("M22 17c0 0 -1 8 0 16c0.6 4 2.4 6 2.4 8"); }
.melt-3 .melt-puddle { rx: 11; }
.synced { display: inline-flex; align-items: center; gap: 5px; }

/* Empty states: a cone with nothing on it */
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 0 22px; color: var(--dim); }
.empty p { margin: 0; font-size: 0.9rem; }
.empty.tight { padding: 0 0 8px; }
.ghost-scoop { fill: none; stroke: var(--dim); stroke-width: 0.9; stroke-dasharray: 2 2.2; opacity: 0.7; }

/* --- Backdrop --- */
/* Sits in the root stacking context with a negative z-index: above the body colour,
   below every piece of content, never catching a click. */
.bg-cone { position: fixed; right: -40px; bottom: 44px; width: 420px; z-index: -1; pointer-events: none;
  transform: rotate(14deg); opacity: 0.07; }
.bg-cone-svg { width: 100%; height: auto; display: block; overflow: visible; }
.bg-cone .cone-waffle { fill: url(#cone-g); stroke: #6e4620; stroke-width: 0.6; stroke-linejoin: round; }
.bg-cone .cone-hatch { stroke: #6e4620; stroke-width: 0.7; stroke-linecap: round; opacity: 0.8; }
.bg-scoop-b { fill: url(#straw); }
.bg-scoop-a { fill: url(#van); }
.bg-cone .bg-gloss { fill: #fff; filter: url(#softer); }
.bg-cone .bg-rim-shade { fill: #5c3a1a; opacity: 0.5; }
.bg-cone .bg-body { filter: url(#shadow); }
.bg-cone .bg-fire { filter: url(#glow); }
@media (max-width: 800px) { .bg-cone { display: none; } }

/* Board pager: compact form lives in the toggle row */
.pager.compact { margin: 0 0 0 8px; gap: 8px; }
.pager.compact .pager-link { padding: 4px 10px; font-size: 0.85rem; }
.pager.compact .pager-at { font-size: 0.8rem; }

/* Melted rewards: the hint under a hero stat, and the note on a burn address's page */
.hint.melted { color: var(--accent); opacity: 0.9; }
.melted-note { margin-top: 10px; }

/* --- Activity: the "right now" strip and the two feeds --- */
.activity { display: block; margin: 0 0 20px; }
.now-strip { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: center;
  padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font-size: 0.9rem; color: var(--dim); }
.now-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.now-item b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.now-item b.hex { color: var(--hex); }
.feeds { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
@media (max-width: 760px) { .feeds { grid-template-columns: 1fr; } }
.feed { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; overflow-x: auto; }
.feed h3 { margin: 0 0 4px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); }
.board.mini { margin-top: 0; font-size: 0.85rem; }
.board.mini td { padding: 6px 8px; white-space: nowrap; }
.board.mini td:first-child { width: 3.6em; text-align: right; }
.activity-foot { margin-top: 8px; font-size: 0.78rem; }

/* Contracts footer */
.contracts { max-width: 1080px; margin: 0 auto; padding: 8px 20px 40px; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; color: var(--dim); font-size: 0.8rem; }
.contract { display: inline-flex; align-items: center; gap: 8px; }
.contract .lbl { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }
.contract .mono { color: var(--text); font-size: 0.78rem; }

/* --- Deltas, sparkline, movers --- */
.hint.delta { color: #5ad39a; }
.spark { display: block; margin: 8px auto 0; overflow: visible; }
.spark .spark-line { fill: none; stroke: var(--hex); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark .spark-area { fill: var(--hex); opacity: 0.12; }
.spark .spark-end { fill: var(--hex); stroke: var(--panel); stroke-width: 1.5; }
.move { display: inline-block; margin-left: 5px; font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.move.up { color: #5ad39a; }
.move.down { color: #ef6f53; }
.movers { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin: 0 0 20px; }
.climbers { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.climbers li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; }
.climbers .move { font-size: 0.85rem; min-width: 3em; margin: 0; }

/* Official mark: the DexScreener logo, circle-cropped, beside the wordmark */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-logo { border-radius: 50%; }
.hero h1 { display: flex; align-items: center; justify-content: center; gap: 14px; }
.hero-logo { border-radius: 50%; box-shadow: 0 0 0 2px var(--line), 0 0 24px rgba(232, 93, 156, 0.25); }

/* Payout kind: scheduled sweep vs flush-on-transfer */
.kind { display: inline-block; padding: 0 7px; border-radius: 6px; font-size: 0.7rem; letter-spacing: 0.03em; text-transform: uppercase; border: 1px solid var(--line); color: var(--dim); cursor: default; }
.kind.sweep { color: #5ad39a; border-color: #2f5a47; }
.kind.flush { color: var(--dim); }

/* Contracts under the hero: chips with the short form; the footer keeps the full address */
.contracts .short { display: none; }
.hero-contracts { padding: 0 0 22px; margin-top: -8px; gap: 8px 12px; }
.hero-contracts .contract { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 12px; gap: 8px; }
.hero-contracts .full { display: none; }
.hero-contracts .short { display: inline; color: var(--text); font-size: 0.8rem; cursor: default; }
.hero-contracts .copy-btn { border-radius: 999px; padding: 2px 9px; font-size: 0.72rem; }

/* Trades and pools in the feeds */
.trade { display: inline-block; padding: 0 7px; border-radius: 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; margin-right: 4px; }
.trade.buy { background: #1f4d3a; color: #7fe0b1; }
.trade.sell { background: #4d2a24; color: #ffa494; }
.trade.swap { background: #2a2f44; color: #aeb8e6; }
.pool { color: var(--dim); white-space: nowrap; cursor: default; }

/* Next scheduled payout meter (holder page) */
.next-payout { max-width: 560px; margin: 14px auto 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 10px; }
.next-payout.ready { border-color: #2f5a47; box-shadow: 0 0 0 1px #2f5a47; }
.np-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.np-head .lbl { color: var(--dim); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.np-status { font-size: 0.9rem; }
.np-status b { color: var(--text); }
.ready .np-status { color: #5ad39a; font-weight: 600; }
.np-meter { position: relative; height: 10px; margin: 10px 0 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.np-fill { display: block; height: 100%; min-width: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--hex)); transition: width 0.4s ease; }
.ready .np-fill { background: #5ad39a; }
.np-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.82rem; color: var(--dim); font-variant-numeric: tabular-nums; }
.np-foot b { color: var(--text); }
.np-note { margin-top: 8px; font-size: 0.78rem; }
.contract-logo { border-radius: 50%; vertical-align: middle; }
.contract-glyph { font-size: 0.95rem; line-height: 1; }
.hero-contracts .contract { padding-left: 8px; }

/* Liquidity donut tile */
.stat-pools { min-width: 220px; }
.pools-frame { display: block; }
.donut-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto 4px; }
.donut-hole { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.donut-hole .num { font-size: 1.05rem; }
.donut { display: block; }
.donut circle { transition: stroke-dasharray 0.6s ease; }
.donut-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; text-align: left; font-size: 0.74rem; color: var(--dim); }
.donut-legend li { display: grid; grid-template-columns: 10px 1fr auto; gap: 7px; align-items: center; }
.donut-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.donut-legend .dl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.donut-legend .dl-pct { font-variant-numeric: tabular-nums; }

/* Hero layout: the four metrics in a 2×2 grid, the liquidity donut full height beside them */
.hero .stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 260px; grid-auto-rows: 1fr; gap: 10px; }
.hero .stat { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.hero .stat-pools { grid-column: 3; grid-row: 1 / span 2; }
.hero .spark { width: 200px; }
@media (max-width: 820px) {
  .hero .stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero .stat-pools { grid-column: 1 / -1; grid-row: auto; }
}
.num .zero, td .zero { color: var(--dim); opacity: 0.6; }
/* Donut placeholder: the cone spins at donut size until the pools frame loads */
.donut-loading { display: flex; align-items: center; justify-content: center; }
.cone-loader.big { width: 46px; height: 56px; margin: 0; }

/* --- The melt --- */
.melt-panel { position: relative; overflow: hidden; background: linear-gradient(180deg, #2b1523 0%, #1d1420 60%, var(--panel) 100%);
  border: 1px solid #5a2a45; border-radius: 14px; padding: 30px 22px 16px; margin: 0 0 12px; box-shadow: inset 0 1px 0 rgba(232, 93, 156, 0.25); }
.melt-fringe { position: absolute; left: 0; right: 0; top: -1px; width: 100%; height: 26px; display: block; fill: #e85d9c; opacity: 0.9; }
.melt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.melt-head .melt-side { margin-top: 6px; }
.melt-head .melt-hero { min-width: 0; }
@media (max-width: 820px) { .melt-head { flex-wrap: wrap; } }
.melt-hero { display: flex; align-items: center; gap: 14px; }
.melt-glyph { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 0 12px rgba(232, 93, 156, 0.45)); }
.melt-num { display: block; font-size: 2.4rem; font-weight: 800; line-height: 1; color: #ff9ccb; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.melt-lbl { display: block; margin-top: 4px; color: var(--dim); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.melt-side { display: flex; gap: 22px; flex: none; }
.melt-stat { text-align: right; }
.melt-stat .num { display: block; font-size: 1.2rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.melt-stat .lbl { color: var(--dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.melt-bar { display: flex; height: 36px; border-radius: 8px; overflow: hidden; gap: 2px; margin: 16px 0 8px; }
.melt-seg { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; color: #0e0f13; cursor: default; }
.melt-seg .seg-pct { font-weight: 700; font-size: 0.9rem; }
.melt-seg .seg-lbl { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.85; white-space: nowrap; }
.melt-seg.buyburn { background: linear-gradient(180deg, #ff8fc4, var(--accent)); }
.melt-seg.tax { background: #ef6f53; }
.melt-seg.reflection { background: #9b8cff; }
.melt-note { margin: 0; font-size: 0.85rem; color: var(--dim); }
.melt-note b { color: var(--text); font-weight: 600; }
.melt-note .src { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.melt-note .src.buyburn { background: var(--accent); } .melt-note .src.tax { background: #ef6f53; } .melt-note .src.reflection { background: #9b8cff; }
.melt-spark { text-align: center; margin-top: 10px; }
.spark.solidx .spark-line { stroke: var(--solidx); } .spark.solidx .spark-area { fill: var(--solidx); } .spark.solidx .spark-end { fill: var(--solidx); }
.spark.melt .spark-line { stroke: #ff9ccb; }
.spark.melt .spark-area { fill: var(--accent); opacity: 0.18; }
.spark.melt .spark-end { fill: #ff9ccb; }
.trade.melt { background: #4a1f36; color: #ff9ccb; }

/* Puddle meter spreads from zero on load */
@keyframes spread { from { width: 0; } }
.melt-fill { animation: spread 1.2s ease-out; }

/* Backdrop cone melts with the burn rate: the skirt over the rim stretches with the stage */
.bg-cone .bg-melt-body { fill: url(#straw); }
.bg-cone .bg-melt-shade { fill: #3a1a0a; opacity: 0.35; filter: url(#soft); }
.bg-cone .bg-melt-gloss { stroke: #fff; stroke-linecap: round; fill: none; opacity: 0.4; }
.bg-cone .bg-scoop-melt, .bg-cone .bg-scoop-cap { fill: url(#van); filter: url(#soft); }
.bg-cone .bg-scoop-crease { fill: none; stroke: #7a6a52; stroke-width: 0.8; opacity: 0.28; filter: url(#soft); }
/* both melts are sized per stage in the helper, not here: a transform would stretch their gradients off the scoops' */
@media (prefers-reduced-motion: reduce) { .melt-fill { animation: none; } }
a.addr.burn { font-family: inherit; color: #ff9ccb; }

/* Melt panel v3: goal ring, destinations, latest melts */
.melt-src { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--dim); }
.melt-src .item { white-space: nowrap; margin-right: 12px; }
.melt-src b { color: var(--text); font-weight: 600; }
.melt-src .src { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.melt-src .src.buyburn { background: var(--accent); } .melt-src .src.tax { background: #ef6f53; } .melt-src .src.reflection { background: #9b8cff; }
.melt-body { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; align-items: start; margin-top: 18px; }
@media (max-width: 820px) { .melt-body { grid-template-columns: 1fr; } }
.melt-ring { text-align: center; }
.melt-ring .lbl { display: block; margin-top: 6px; color: var(--dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.donut-wrap.ring { width: 150px; height: 150px; margin: 0 auto; }
.donut-wrap.ring .donut-hole { flex-direction: column; }
.donut-wrap.ring .num { font-size: 1.5rem; font-weight: 800; color: #ff9ccb; }
.donut-wrap.ring .of { font-size: 0.72rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; }
.melt-dest { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.melt-dest li { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 10px; align-items: baseline; font-size: 0.9rem; }
.melt-dest i { width: 10px; height: 10px; border-radius: 3px; display: block; align-self: center; }
.melt-dest .md-held, .melt-dest .md-in { font-variant-numeric: tabular-nums; white-space: nowrap; }
.melt-dest .md-in { color: var(--dim); min-width: 5.5em; text-align: right; }
.melt-dest .md-in.hot { color: #5ad39a; }
/* the melts list scrolls inside a fixed height so it never makes the panel taller than the ring beside it */
.melt-latest .melt-scroll { max-height: 184px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.melt-latest h3 { margin: 0 0 4px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--dim); }
.melt-latest .board.mini td { padding: 5px 6px; font-size: 0.82rem; }
.melt-latest .dest { font-weight: 600; }
.melt-meter.goal { background: linear-gradient(90deg, var(--bg) 0, var(--bg) 100%); }
.melt-meter.goal::after { content: ""; position: absolute; right: 0; top: -2px; bottom: -2px; width: 2px; background: var(--dim); }
/* the bar from v2 is gone */
.melt-bar { display: none; }
/* Cohorts and Movers share a row */
.two-up { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin: 0 0 20px; }
.two-up > section { margin: 0; min-width: 0; }
.two-up .cohort-row { grid-template-columns: 1fr 2fr auto; }
@media (max-width: 820px) { .two-up { grid-template-columns: 1fr; } }
.melt-title { margin-bottom: 14px; }
.melt-title h2 { font-size: 1.05rem; margin: 0; }
.melt-title .tax { color: #ff9ccb; }
.melt-title::after { background: repeating-linear-gradient(45deg, #5a2a45 0 1px, transparent 1px 5px), repeating-linear-gradient(-45deg, #5a2a45 0 1px, transparent 1px 5px), #e85d9c22; }
.melt-num { font-size: 2.1rem; }
.melt-mid { min-width: 0; }
.melt-mid .melt-spark { margin-top: 18px; }
.melt-mid .spark { max-width: 100%; height: auto; }

/* Hero tiles link to their sections */
/* scroll easing lives in jump_controller.js (a bezier), not here */
#board, #payouts, #moves, #melt, #now { scroll-margin-top: 16px; }
.hero a.stat { color: inherit; text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease; cursor: pointer; }
.hero a.stat:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }
.hero a.stat:hover .lbl { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .hero a.stat { transition: none; } .hero a.stat:hover { transform: none; } }

/* Navigation: Turbo's blue bar is replaced by the cone in the topbar (loading_controller) */
.turbo-progress-bar { display: none; }
.nav-cone { display: inline-flex; align-items: center; width: 26px; height: 32px; margin-left: 2px; opacity: 0; transition: opacity 0.15s ease; }
.nav-cone.on { opacity: 1; }
.nav-cone .cone-loader { width: 22px; height: 27px; margin: 0; }

/* The big backdrop cone: bright enough to be a thing, not an afterthought */
.bg-cone { opacity: 1; }
/* the cone comes forward as the burn rises; the fire ramps too, but from a higher floor: it dies faster than the cone when dimmed */
.bg-cone.melt-0 .bg-body { opacity: 0.45; } .bg-cone.melt-0 .bg-fire { opacity: 0.55; }
.bg-cone.melt-1 .bg-body { opacity: 0.6; }  .bg-cone.melt-1 .bg-fire { opacity: 0.75; }
.bg-cone.melt-2 .bg-body { opacity: 0.75; } .bg-cone.melt-2 .bg-fire { opacity: 0.9; }
.bg-cone.melt-3 .bg-body { opacity: 0.9; }
.ago { cursor: default; }

/* The goal date breathes — slow and soft, a thing to watch, not an alert */
.goal-eta .num.glow { color: #ff9ccb; animation: breathe 4s ease-in-out infinite; text-shadow: 0 0 10px rgba(232, 93, 156, 0.35); }
@keyframes breathe { 0%, 100% { text-shadow: 0 0 6px rgba(232, 93, 156, 0.25); } 50% { text-shadow: 0 0 18px rgba(232, 93, 156, 0.75), 0 0 34px rgba(232, 93, 156, 0.25); } }
@media (prefers-reduced-motion: reduce) { .goal-eta .num.glow { animation: none; } }

/* Holders tile: the league roll */
.league-roll { display: grid; grid-template-columns: repeat(8, 1fr); margin: 16px 8px 0; background: var(--bg); border-radius: 10px; }
.tier-count { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px 11px; cursor: default; line-height: 1; }
.tier-count::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 9px; width: 1px; background: var(--line); } /* rule stops short of the strip's padding */
.tier-count:first-child::before { display: none; }
.tier-count .tg { font-size: 1rem; }
.tier-count b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 0.74rem; }

/* Board: 30-day balance sparkline beside GEL held, only where the balance moved */
.board td.held { white-space: nowrap; }
.bspark { vertical-align: middle; margin-right: 8px; overflow: visible; cursor: default; }
.bspark polyline { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.bspark.up polyline, .bspark.up circle { stroke: #5ad39a; fill: #5ad39a; }
.bspark.up polyline { fill: none; }
.bspark.down polyline, .bspark.down circle { stroke: #ef6f53; fill: #ef6f53; }
.bspark.down polyline { fill: none; }

/* The fire under the backdrop cone: three tongues, out of phase, sized by the melt stage */
.flame { fill: url(#flame-g); opacity: 0.85; animation: lick 2.8s ease-in-out infinite; }
.flame-1 { animation-duration: 2.1s; animation-delay: -0.7s; }
.flame-2 { animation-duration: 3.4s; animation-delay: -1.9s; }
/* the keyframes multiply the stage's base scale, so a low fire stays low while it licks */
@keyframes lick {
  0%, 100% { transform: scale(1, var(--fh, 1)) skewX(0deg); }
  30%      { transform: scale(1, calc(var(--fh, 1) * 1.12)) skewX(-3deg); }
  55%      { transform: scale(1, calc(var(--fh, 1) * 0.94)) skewX(2deg); }
  80%      { transform: scale(1, calc(var(--fh, 1) * 1.06)) skewX(-1deg); }
}
.bg-cone.melt-0 .flame { --fh: 0.32; } .bg-cone.melt-1 .flame { --fh: 0.6; } .bg-cone.melt-2 .flame { --fh: 1; }
.bg-cone.melt-3 .flame { --fh: 1.15; }
.bg-cone.melt-0 .flame { transform: scaleY(0.32); animation-duration: 4.6s; }
.bg-cone.melt-0 .flame-1 { animation-duration: 3.4s; } .bg-cone.melt-0 .flame-2 { animation-duration: 5s; }
.bg-cone.melt-1 .flame { transform: scaleY(0.6); }
.bg-cone.melt-3 .flame { animation-duration: 1.6s; }
.bg-cone .flame { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .flame { animation: none; } }
.flame-core { fill: #ffe066; opacity: 0.9; }

/* --- /engine: the buy loop --- */
.engine-hero .stats { display: flex; flex-wrap: wrap; }
.engine-hero .stat { flex: 1 1 220px; }
.engine-hero .stat .num.low { color: var(--accent); }
.spark.fuel .spark-line { stroke: #59c1a8; } .spark.fuel .spark-area { fill: #59c1a8; } .spark.fuel .spark-end { fill: #59c1a8; }
.engine-panel .strat-foot code { font-size: 0.78rem; }
.engine-diagram { width: 100%; height: auto; display: block; margin: 14px 0 6px; font-family: inherit; overflow: visible; }
.engine-diagram .bed { fill: #0b0c10; stroke: var(--line); }
/* pipes: a dim body and a bright moving liquid; width and pace come from the flow */
.engine-diagram .pipe .body { fill: none; stroke-linecap: round; opacity: 0.35; }
.engine-diagram .pipe .liquid { fill: none; stroke-linecap: round; animation: pipeflow var(--d, 3s) linear infinite; filter: url(#pipe-glow); }
/* each pipe wears the colour of the tile it feeds */
.engine-diagram .pipe.fuel .body { stroke: #2b6e62; }     .engine-diagram .pipe.fuel .liquid { stroke: #7fe3cf; }
.engine-diagram .pipe.keeper .body { stroke: #3a4052; }   .engine-diagram .pipe.keeper .liquid { stroke: #b8bfd2; }
.engine-diagram .pipe.main .body { stroke: #7a2d55; }     .engine-diagram .pipe.main .liquid { stroke: #ff9ccb; }
.engine-diagram .pipe.prestige .body { stroke: #4a4285; } .engine-diagram .pipe.prestige .liquid { stroke: #c9c0ff; }
.engine-diagram .pipe.burn .body { stroke: #7a3a2a; }     .engine-diagram .pipe.burn .liquid { stroke: #ffa07a; }
.engine-diagram .pipe.hold .body { stroke: #3a4052; }     .engine-diagram .pipe.hold .liquid { stroke: #dfe3ee; }
@keyframes pipeflow { to { stroke-dashoffset: calc(-1 * var(--cycle, 28px)); } }
.engine-diagram.m-idle .pipe.loop-main, .engine-diagram.p-idle .pipe.loop-prestige { opacity: 0.35; }
.engine-diagram.m-idle .pipe.loop-main .liquid, .engine-diagram.p-idle .pipe.loop-prestige .liquid { animation-play-state: paused; }
.engine-diagram.m-idle .box.main .plate, .engine-diagram.p-idle .box.prestige .plate { stroke-dasharray: 6 4; }
/* boxes: plated, lit by their loop's colour */
.engine-diagram .box .plate { fill: url(#plate-g); stroke: var(--line); stroke-width: 1.5; }
.engine-diagram .box.fuel .plate { stroke: #59c1a8; filter: drop-shadow(0 0 10px rgba(89, 193, 168, 0.25)); }
.engine-diagram .box.main .plate { stroke: var(--accent); filter: drop-shadow(0 0 10px rgba(232, 93, 156, 0.3)); }
.engine-diagram .box.prestige .plate { stroke: #9b8cff; filter: drop-shadow(0 0 10px rgba(155, 140, 255, 0.3)); }
.engine-diagram .box.keeper .plate { stroke: #4a5066; }
.engine-diagram .box.burn .plate { stroke: #ef6f53; filter: drop-shadow(0 0 8px rgba(239, 111, 83, 0.3)); }
.engine-diagram .title { fill: var(--text); font-size: 15px; font-weight: 700; }
.engine-diagram .big { fill: var(--text); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.engine-diagram .sub { fill: var(--dim); font-size: 12px; }
.engine-diagram .gauge-track { fill: #262a37; }
.engine-diagram .box.main .gauge-fill { fill: var(--accent); }
.engine-diagram .box.prestige .gauge-fill { fill: #9b8cff; }
.engine-diagram .splitter { fill: #0e0f13; stroke: #59c1a8; stroke-width: 3; filter: drop-shadow(0 0 8px rgba(89, 193, 168, 0.5)); }
.engine-diagram .split-lbl { fill: var(--dim); font-size: 10px; text-anchor: middle; text-transform: uppercase; letter-spacing: 0.08em; }
.engine-diagram .badge rect { fill: #0e0f13; stroke: #2b6e62; stroke-width: 1; }
.engine-diagram .badge text { fill: #7fe3cf; font-size: 11px; font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
.engine-diagram .badge.keeper rect { stroke: #4a5066; }   .engine-diagram .badge.keeper text { fill: #c9cfe0; }
.engine-diagram .badge.main rect { stroke: #7a2d55; }     .engine-diagram .badge.main text { fill: #ff9ccb; }
.engine-diagram .badge.prestige rect { stroke: #4a4285; } .engine-diagram .badge.prestige text { fill: #c9c0ff; }
.engine-diagram .badge.burn rect { stroke: #7a3a2a; }     .engine-diagram .badge.burn text { fill: #ffa07a; }
.engine-diagram .badge.hold rect { stroke: #4a5066; }     .engine-diagram .badge.hold text { fill: #dfe3ee; }
.engine-diagram .lane { fill: var(--text); font-size: 13px; font-weight: 600; }
.engine-diagram .lane-note { fill: var(--dim); font-size: 12px; }
.engine-diagram .fire-lbl { fill: #ffd84a; font-size: 15px; font-weight: 800; text-anchor: middle; }
.engine-diagram .fire-sub { fill: var(--dim); font-size: 11px; text-anchor: middle; }
.engine-diagram .engine-fire { overflow: visible; }
.engine-diagram .engine-fire .bg-fire { filter: url(#glow); }
.engine-diagram .engine-fire .flame { fill: url(#flame-g); opacity: 0.95; }
.engine-diagram .idle-note { fill: var(--dim); font-size: 12px; text-anchor: middle; text-transform: uppercase; letter-spacing: 0.06em; }
.engine-diagram.idle .idle-note, .engine-diagram.m-idle .idle-note, .engine-diagram.p-idle .idle-note { fill: var(--accent); }
@media (prefers-reduced-motion: reduce) { .engine-diagram .pipe .liquid { animation: none; } }
.loop-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.loop-chip.main { background: #4a1f36; color: #ff9ccb; }
.loop-chip.prestige { background: #2a2650; color: #c9c0ff; }
.cycles-scroll { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cycles-spark { margin-top: 12px; text-align: center; }
.cycles-spark .lbl { display: block; color: var(--dim); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.engine-panel .board.mini th { font-size: 0.68rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; text-align: left; padding: 4px 6px; }
.engine-panel .board.mini th.num { text-align: right; }
.cycles-scroll .board.mini td:last-child { white-space: normal; }
/* The buy loop's tank beside the distribution panel: a week of runway fills it */
.strategy-row { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 12px; margin: 8px 0 20px; }
.strategy-row > .strategy { margin: 0; min-width: 0; }
a.tank-panel { display: block; color: inherit; text-decoration: none; transition: transform 0.15s ease, border-color 0.15s ease; }
a.tank-panel:hover { text-decoration: none; border-color: #59c1a8; transform: translateY(-2px); }
.tank-panel .strat-head .tax { font-size: 0.72rem; color: #59c1a8; font-weight: 600; }
.tank-panel .tank-body { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tank-panel .tank { width: 84px; height: auto; flex: none; }
/* Fuel tank, shared by the home page and the engine diagram: green with days in hand,
   amber around half, pink when it is nearly out. */
.tank .glass { fill: #0e0f13; stroke: var(--line); stroke-width: 2; }
.tank .cap { fill: var(--line); }
.tank .fuel { fill: #59c1a8; opacity: 0.85; }
.tank .meniscus { fill: none; stroke: #9fe3d2; stroke-width: 1.5; }
.tank.mid .fuel { fill: #f7c948; }        .tank.mid .meniscus { stroke: #ffe9a3; }
.tank.low .fuel { fill: var(--accent); }  .tank.low .meniscus { stroke: #ff9ccb; }
.tank .tick { stroke: var(--dim); stroke-width: 1; }
.tank .tick-lbl { fill: var(--dim); font-size: 9px; }
.tank-panel .tank-figures { display: flex; flex-direction: column; min-width: 0; }
.tank-panel .tank-figures .num { white-space: nowrap; font-size: 1.3rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tank-panel .tank-figures .num.runway { margin-top: 10px; color: #59c1a8; }
.tank-panel .tank-figures .num.runway.mid { color: #f7c948; }
.tank-panel .tank-figures .num.runway.low { color: var(--accent); }
.tank-panel .tank-figures .lbl { color: var(--dim); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
.tank-panel .tank-figures .lbl .hint { text-transform: none; letter-spacing: 0; }
@media (max-width: 820px) { .strategy-row { grid-template-columns: 1fr; } }
/* engine diagram: flow labels on the wires, and per-loop idling */
/* what the loop has done, all-time, under the diagram */
.engine-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.engine-totals > div { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.engine-totals .num { display: block; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.engine-totals .lbl { display: block; color: var(--dim); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.engine-totals .lbl .hint { text-transform: none; letter-spacing: 0; }
.engine-hero .stat.all-time .num { color: #59c1a8; }
.engine-diagram .mid { fill: var(--text); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* the engine page runs wide so the diagram has room */
body.wide main, body.wide .topbar { max-width: 1400px; }
body.wide .engine-hero .stat { flex-basis: 300px; }
.loop-chip.funding { background: #143a33; color: #7fe3cf; }
.loop-chip.keeper { background: #2a2e3d; color: #c9cfe0; }
.engine-diagram .badge rect { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }

/* the tank sloshes: the surface is a wave wider than the glass that slides sideways and bobs */
.tank .slosh { animation: slosh-x 3.2s ease-in-out infinite alternate; }
.tank .bob { animation: slosh-y 5.1s ease-in-out infinite alternate; }
@keyframes slosh-x { from { transform: translateX(-24px); } to { transform: translateX(0); } }
@keyframes slosh-y { from { transform: translateY(0.8px); } to { transform: translateY(-0.8px); } }
@media (prefers-reduced-motion: reduce) { .tank .slosh, .tank .bob { animation: none; } }
.engine-diagram .box.lane .plate { stroke: #4a4285; }
.engine-diagram .box.sale .plate { stroke: #7a3a2a; filter: drop-shadow(0 0 8px rgba(239, 111, 83, 0.3)); }
.engine-diagram .box.lane .plate { stroke: #4a4285; }
.engine-diagram .box.sale .plate { stroke: #7a3a2a; filter: drop-shadow(0 0 8px rgba(239, 111, 83, 0.3)); }
/* the fire's caption sits over a pipe, so it carries the bed colour as a halo */
.engine-diagram .fire-lbl, .engine-diagram .fire-sub { paint-order: stroke; stroke: #0b0c10; stroke-width: 4px; stroke-linejoin: round; }
/* more than a week in hand: the tank reads full and marks the scale as exceeded */
.tank .tick-lbl.over { fill: #7fe3cf; font-weight: 700; }
.tank .overflow { fill: none; stroke: #7fe3cf; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* a fresh top-up: the tile is flagged for a day, the amount stays as a caption for two */
.refill-flag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #143a33; color: #7fe3cf;
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; vertical-align: middle; }
.tank-panel .lbl.refill, .engine-hero .stat .lbl.refill, .lbl.refill {
  color: #7fe3cf; text-transform: none; letter-spacing: 0; margin-top: 6px; }
.tank-panel .lbl.refill { display: block; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 0.68rem; white-space: nowrap; }
.tank-panel .lbl.refill b { color: #a7f0df; }
.tank-panel.refilled, .stat.refilled { border-color: #59c1a8; box-shadow: 0 0 18px rgba(89, 193, 168, 0.15); }
.strategy-row > turbo-frame { display: block; min-width: 0; }
.engine-hero .stat.all-time .num { font-size: 2.1rem; }

/* Split history: every fee split the founder has set, newest first */
.split-log-panel { margin-top: 0; }
.split-log { list-style: none; margin: 10px 0 0; padding: 0; }
.split-log li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 200px; gap: 14px; align-items: center;
  padding: 8px 0; border-top: 1px solid var(--line); }
.split-log li:first-child { border-top: none; }
.split-log .when { font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.split-log .when .hint { display: block; color: var(--dim); font-size: 0.7rem; }
.split-log li.current .when { color: var(--accent); font-weight: 700; }
.split-log .mini-split { display: flex; height: 22px; border-radius: 6px; overflow: hidden; gap: 2px; min-width: 0; }
.split-log .mini-split i { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden;
  font-style: normal; font-size: 0.68rem; font-weight: 700; color: #0e0f13; }
.split-log .note { color: var(--dim); font-size: 0.78rem; text-align: right; }
@media (max-width: 700px) { .split-log li { grid-template-columns: 1fr; gap: 6px; } .split-log .note { text-align: left; } }

/* The strategy card has two faces: the split in force, and the log of every split before it.
   Both live in one grid cell, so the card is as tall as the taller face and neither is clipped. */
.flip-card { perspective: 1800px; min-width: 0; }
.flip-card.flippable { cursor: pointer; }
.flip-inner { display: grid; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face { grid-area: 1 / 1; backface-visibility: hidden; min-width: 0; }
.flip-face.back { transform: rotateY(180deg); }
.flip-face > .strategy { margin: 0; height: 100%; }
.flip-cue { margin-left: 12px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--dim); font: inherit; font-size: 0.7rem; cursor: pointer; }
.flip-card.flippable:hover .flip-cue { border-color: var(--accent); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .flip-inner { transition: none; } }
.split-log-panel .strat-foot { margin-top: 12px; }