/* THRONETAX — thermal leaderboard.
   The visual language is heat: rank 1 glows and flickers, the rest cool toward
   cyan as they fade. Nothing here is decorative for its own sake — every ember
   on the page is showing you a number that is going down. */

:root {
  --bg: #080706;
  --panel: #11100f;
  --panel-hi: #171411;
  --line: #2b2723;
  --line-soft: rgba(255,255,255,.075);
  --text: #f4f0e8;
  --dim: #958d83;
  --ember: #ff5630;
  --ember-hi: #ffb33f;
  --cool: #45d9b5;
  --bad: #ff5574;
  /* Numbers, tickers, ranks, wallet addresses.
     Geist Mono is first but is not currently served from anywhere, so what
     actually renders is the fallback - and it has to be a real list. Windows
     Chrome does not resolve `ui-monospace`, and Firefox maps generic
     `monospace` to Courier New, which is thin and poor at 11px. */
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
          "JetBrains Mono", Menlo, monospace;

  /* Main UI, buttons, project names, body copy */
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* The hidden attribute has to win. A class that sets display (.pane, .locked,
   .row) has the same specificity as the browser's [hidden] rule and, being an
   author style, quietly beats it — which left panes on screen that JavaScript
   believed were hidden. */
[hidden] { display: none !important; }


body {
  margin: 0;
  background:
    radial-gradient(75vw 52vh at 10% -8%, rgba(255,86,48,.16), transparent 68%),
    radial-gradient(60vw 50vh at 94% 12%, rgba(255,179,63,.075), transparent 70%),
    var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 80px;
}

/* Faint film grain so the black doesn't read as flat CSS black. */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3,
.loop, .how p, .sub, .terms, .boosting, .examples-banner, .finality,
.empty, .keybox span, footer {
  font-family: var(--sans);
}
.loop, .how p, .sub, .terms li, .boosting, .examples-banner { letter-spacing: .005em; }

/* Every interactive control has to show where the keyboard is. The board, the
   tags, the drawer and the copy chips are all buttons; none of them said so. */
:focus-visible {
  outline: 2px solid var(--ember-hi);
  outline-offset: 2px;
}
input:focus-visible, select:focus-visible { outline-offset: 0; }

/* The page behind an open drawer must not scroll under it. */
body.drawer-open { overflow: hidden; }

/* ------------------------------------------------------------------- header */

.top {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 18px 24px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
  background: rgba(6,6,10,.82); backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.brand-logo {
  display: block; width: 132px; height: 44px; object-fit: contain;
  object-position: left center;
}
.mark { color: var(--ember); font-size: 18px; animation: pulse 3.5s infinite; }
.wordmark { letter-spacing: .22em; font-size: 15px; }
.wordmark b { color: var(--ember); font-weight: 700; }
.tag {
  font-size: 11px; letter-spacing: .16em; padding: 3px 7px; border-radius: 4px;
  background: #3a1f00; color: var(--ember-hi); border: 1px solid #5a3200;
}
.stats { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.stats div { text-align: right; }
.stats span { display: block; font-size: 11px; letter-spacing: .14em; color: var(--dim); }
.stats b { font-size: 15px; font-weight: 500; }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* Listing a project is a real path, but not the one the page is selling. */
.ghost {
  background: none; border: 1px solid var(--line); border-radius: 9px;
  color: var(--dim); padding: 10px 14px; font: 12px/1 var(--mono);
  letter-spacing: .08em; cursor: pointer; white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.ghost:hover { border-color: var(--ember); color: var(--ember-hi); }

/* --------------------------------------------------------------- intro copy */

.explain { max-width: 780px; margin: 40px auto 24px; padding: 0 24px; }
.explain p { color: var(--dim); font-size: 14px; }
.explain b { color: var(--text); font-weight: 500; }
.explain .val { color: var(--ember-hi); font-family: var(--mono); }

/* The loop, in three beats. This is the first thing under the headline and the
   last thing anyone should have to work out for themselves: what buys rank,
   why it drains, and what happens after losing it. */
.loop {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  counter-reset: beat;
}
.loop li { counter-increment: beat; position: relative; padding-left: 28px; }
.loop li::before {
  content: counter(beat);
  position: absolute; left: 0; top: 2px;
  width: 19px; height: 19px; border-radius: 6px;
  display: grid; place-items: center;
  background: rgba(255,90,31,.12); border: 1px solid #4a2a12;
  color: var(--ember-hi); font: 600 11px/1 var(--mono);
}
.loop > li > b {
  display: block; margin-bottom: 3px;
  color: var(--text); font-size: 14px; font-weight: 600;
}
.loop > li > span { display: block; font-size: 13px; line-height: 1.6; color: var(--dim); }
.loop span b { color: var(--text); font-weight: 600; }

/* The mechanic drawn from the real numbers: a 12% lead at this config's rates
   is overtaken after about five hours. Two curves crossing says that faster
   than any sentence does. */
.crossover { margin: 16px 0 14px; }
.crossover svg { width: 100%; max-width: 430px; height: auto; display: block; overflow: visible; }
.crossover .axis { stroke: var(--line); stroke-width: 1; }
.crossover .curve { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.crossover .curve.throne { stroke: var(--ember); }
.crossover .curve.runner { stroke: var(--cool); }
.crossover .swap { fill: var(--ember-hi); }
.crossover .mark { fill: var(--dim); font: 11px var(--mono); }
.crossover figcaption {
  display: flex; gap: 16px; margin-top: 8px; font: 11px var(--mono); color: var(--dim);
}
.crossover .key.lead { color: var(--ember); }
.crossover .key.chaser { color: var(--cool); }

.how { margin-top: 16px; }
.how summary {
  cursor: pointer; display: inline-block; color: var(--ember-hi);
  font: 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px;
}
.how summary:hover { border-color: var(--ember); }
.how[open] summary { margin-bottom: 12px; }
.how p { margin: 0 0 10px; }

/* -------------------------------------------------------------- ticker tape */

.tape {
  overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: #08080e; padding: 9px 0; margin-bottom: 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tape-track { display: flex; gap: 42px; width: max-content; animation: slide 42s linear infinite; }
.tape:hover .tape-track { animation-play-state: paused; }
.tape-track span { font-size: 12px; color: var(--dim); white-space: nowrap; }
.tape-track b { color: var(--text); font-weight: 500; }
.tape-track .hot { color: var(--ember); }
@keyframes slide { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ------------------------------------------------------------------- board  */

main { max-width: 980px; margin: 0 auto; padding: 0 24px; }

.board-head, .row {
  display: grid;
  grid-template-columns: 54px 1fr 108px 96px 96px;
  gap: 14px; align-items: center;
}
.board-head {
  font-size: 11px; letter-spacing: .16em; color: var(--dim);
  padding: 0 16px 10px;
}
.r { text-align: right; }

.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.row {
  position: relative; overflow: hidden;
  padding: 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel);
  transition: transform .45s cubic-bezier(.2,.9,.2,1), border-color .3s;
}
.row:hover { border-color: #33374d; }

/* The heat bar sits behind the row: the fill is the project's share of the
   board's total heat, so the leaderboard reads as one burning strip. */
.row .fill {
  position: absolute; inset: 0 auto 0 0; z-index: 0;
  background: linear-gradient(90deg, rgba(255,90,31,.20), rgba(255,90,31,.02));
  transition: width .8s cubic-bezier(.2,.9,.2,1);
}
.row > * { position: relative; z-index: 1; }

.rank { font-size: 20px; color: var(--dim); font-variant-numeric: tabular-nums; }
.proj { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 10px; background: #14161f; border: 1px solid var(--line); font-size: 18px;
  overflow: hidden; text-transform: uppercase; letter-spacing: .02em;
}
.logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meta { min-width: 0; }
.meta a { color: var(--text); text-decoration: none; font-size: 15px; }
.meta a:hover { color: var(--ember-hi); }
.meta small { display: block; color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tick { color: var(--dim); font-size: 12px; margin-left: 6px; }

.heat { font-size: 17px; font-variant-numeric: tabular-nums; }
.burn { color: var(--cool); font-size: 12px; font-variant-numeric: tabular-nums; }
.pass { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.pass b { color: var(--ember-hi); font-weight: 500; }
.pass .lbl { display: block; }

/* Rank 1: the throne. Brighter, flickering, and wearing its own countdown. */
.row.throne { border-color: #5a2f0a; background: linear-gradient(180deg, #16100c, var(--panel)); }
.row.throne .fill { background: linear-gradient(90deg, rgba(255,140,20,.30), rgba(255,90,31,.03)); }
.row.throne .rank { color: var(--ember-hi); text-shadow: 0 0 14px rgba(255,120,20,.55); animation: flicker 4s infinite; }
.row.throne .heat { color: var(--ember-hi); }
@keyframes flicker {
  0%,100% { opacity: 1 } 42% { opacity: .82 } 46% { opacity: 1 } 72% { opacity: .74 } 76% { opacity: 1 }
}

.eta {
  grid-column: 2 / -1; margin-top: 6px; font-size: 12px; color: var(--dim);
}
.eta b { color: var(--ember); font-weight: 500; }

.row.jump { animation: jump .7s ease; }
@keyframes jump {
  0% { box-shadow: 0 0 0 0 rgba(255,90,31,.55) } 100% { box-shadow: 0 0 0 22px rgba(255,90,31,0) }
}

.empty { text-align: center; color: var(--dim); padding: 60px 0; }

footer {
  max-width: 980px; margin: 60px auto 0; padding: 22px 24px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--dim); font-size: 12px;
}

/* Directory badges. The artwork is a white pill, so it is held slightly back
   on a dark footer and comes up to full on hover. Sized in CSS as well as in
   the attributes: the attributes stop the footer reflowing when the file
   arrives, the CSS decides how big it actually sits. */
.badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badges a {
  display: inline-flex; line-height: 0; border-radius: 10px;
  opacity: .82; transition: opacity .2s;
}
.badges a:hover { opacity: 1; }
.badges a:focus-visible { opacity: 1; }
.badges img { display: block; height: 44px; width: auto; }

@media (max-width: 720px) {
  .badges { width: 100%; justify-content: flex-start; }
  .badges img { height: 38px; }
}

/* ------------------------------------------------------------------ buttons */

.cta {
  border: 0; border-radius: 9px; padding: 11px 18px; cursor: pointer;
  font: 600 12px/1 var(--mono); letter-spacing: .14em; color: #170800;
  background: linear-gradient(135deg, var(--ember-hi), var(--ember));
  box-shadow: 0 6px 26px rgba(255,90,31,.28);
  transition: transform .15s, box-shadow .25s;
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 8px 32px rgba(255,90,31,.45); }
.cta:active { transform: translateY(0); }
.cta.wide { width: 100%; padding: 15px; margin-top: 6px; }
/* The share CTA is a link, not a button: it has to be told to fill its row. */
a.cta { display: inline-block; text-decoration: none; text-align: center; }
a.cta.wide { display: block; }
.cta[disabled] { opacity: .5; cursor: wait; }

/* ------------------------------------------------------------------- drawer */

.scrim { position: fixed; inset: 0; background: rgba(3,3,6,.72); backdrop-filter: blur(3px); z-index: 40; }
.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 50; width: min(440px, 100%);
  background: #0a0b11; border-left: 1px solid var(--line);
  padding: 26px 26px 60px; overflow-y: auto;
  animation: slidein .3s cubic-bezier(.2,.9,.2,1);
}
@keyframes slidein { from { transform: translateX(30px); opacity: 0 } to { transform: none; opacity: 1 } }

.x {
  position: absolute; top: 18px; right: 20px; background: none; border: 0;
  color: var(--dim); font-size: 16px; cursor: pointer;
}
.drawer h2 { font-size: 18px; font-weight: 500; margin: 4px 0 18px; letter-spacing: .04em; }
.sub { color: var(--dim); font-size: 12px; margin: -8px 0 16px; }
.sub b { color: var(--text); font-weight: 500; }
/* Unstyled, these came out as browser-default blue and underlined, which reads
   as a mistake against everything around them. */
.sub a { color: var(--ember-hi); text-decoration: none; }
.sub a:hover { text-decoration: underline; }

.pane { display: flex; flex-wrap: wrap; gap: 14px; }
.pane > * { width: 100%; }

/* Grouping, not a wizard: the two decisions that are always required are
   named and up front, and everything optional is folded away, so the button
   that ends the funnel is reachable without a long scroll. */
.steplabel {
  margin: 6px 0 -6px; font: 11px/1 var(--mono); letter-spacing: .18em;
  text-transform: uppercase; color: var(--ember-hi); opacity: .75;
}
.step { display: flex; flex-wrap: wrap; gap: 14px; }
.step > * { width: 100%; }
.more { width: 100%; }
.more summary {
  cursor: pointer; color: var(--dim); font: 12px/1 var(--mono);
  padding: 10px 0; letter-spacing: .04em;
}
.more summary:hover { color: var(--ember-hi); }
.more[open] summary { margin-bottom: 4px; }

.field span { display: block; font-size: 11px; letter-spacing: .14em; color: var(--dim); margin-bottom: 6px; }
.field i { font-style: normal; opacity: .6; }
.field.half { width: calc(50% - 7px); }
input, select {
  width: 100%; background: #101119; color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px;
  font: 14px var(--mono); outline: none;
}
input:focus, select:focus { border-color: var(--ember); }

.amount { display: flex; align-items: center; gap: 8px; }
.amount i { font-style: normal; color: var(--dim); }
.amount em { font-style: normal; color: var(--cool); font-size: 12px; white-space: nowrap; }

.quick { display: flex; gap: 8px; }
.quick button {
  flex: 1; background: #101119; border: 1px solid var(--line); border-radius: 8px;
  color: var(--dim); padding: 9px 0; font: 12px var(--mono); cursor: pointer;
}
.quick button:hover { border-color: var(--ember); color: var(--ember-hi); }

.preview {
  border: 1px dashed #2a2d40; border-radius: 10px; padding: 14px; font-size: 12px;
  color: var(--dim); line-height: 1.7; min-height: 66px;
}
.preview b { color: var(--ember-hi); font-weight: 500; }
.preview .big { display: block; font-size: 20px; color: var(--text); margin-bottom: 2px; }

.err { color: var(--bad); font-size: 12px; }
.status { font-size: 12px; color: var(--dim); min-height: 18px; }
.status.ok { color: var(--cool); }
.status.bad { color: var(--bad); }

.addr { display: flex; gap: 8px; }
.addr code {
  flex: 1; background: #101119; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; font-size: 12px; word-break: break-all; color: var(--ember-hi);
}
.addr button {
  background: #101119; border: 1px solid var(--line); border-radius: 8px; color: var(--dim);
  padding: 0 14px; font: 11px var(--mono); letter-spacing: .1em; cursor: pointer;
}
.addr button:hover { border-color: var(--ember); color: var(--ember-hi); }

/* ========================================================== THE PODIUM ==== */

/* The top three are the shop window. A visitor who does not care about
   leaderboards should still be able to tell, in one glance and without reading
   a number, that the first card is somewhere worth being — that is the whole
   job of this section, and it is the reason anyone posts about the site. */

.podium { margin: 0 0 26px; }

/* ------------------------------------------------------------- the throne */

.crown {
  position: relative; overflow: hidden;
  /* Identity on the left, the number on the right, everything else across the
     full width. The heat is the loudest thing on the page and it belongs
     beside the project it is describing, not stranded under it. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: 24px; row-gap: 0;
  border: 1px solid #6b3a0d; border-radius: 16px;
  padding: 20px 22px 22px;
  background:
    radial-gradient(120% 140% at 50% -30%, rgba(255,140,20,.22), transparent 62%),
    linear-gradient(180deg, #1a1109 0%, #100c0d 55%, var(--panel) 100%);
  box-shadow: 0 0 0 1px rgba(255,140,20,.08), 0 18px 60px -24px rgba(255,90,31,.55);
}

/* Embers rising behind the card. Slow, low-contrast, and entirely decorative —
   it is the one place on the site where that is the point. */
.crown::before {
  content: ''; position: absolute; inset: -40% -10% auto -10%; height: 180%;
  background:
    radial-gradient(2px 2px at 12% 80%, rgba(255,170,60,.55), transparent 60%),
    radial-gradient(2px 2px at 32% 92%, rgba(255,120,30,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 86%, rgba(255,200,90,.5), transparent 60%),
    radial-gradient(2px 2px at 78% 94%, rgba(255,140,40,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 78%, rgba(255,180,70,.45), transparent 60%);
  animation: rise 9s linear infinite;
  pointer-events: none;
}
@keyframes rise {
  from { transform: translateY(0); opacity: 0 }
  15%  { opacity: 1 }
  85%  { opacity: 1 }
  to   { transform: translateY(-55%); opacity: 0 }
}
.crown > * { position: relative; z-index: 1; }

.crown-top {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.crown-label {
  font: 600 12px/1 var(--mono); letter-spacing: .22em; color: var(--ember-hi);
  text-shadow: 0 0 18px rgba(255,150,40,.6);
}
.crown-top .reign {
  font-family: var(--sans); font-size: 12px; color: var(--dim);
}
.crown-top .reign b { color: var(--text); font-weight: 600; }

/* The identity block is shared with the runners so #1 is recognisably the same
   object, only louder. */
.ident { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ident .logo { width: 56px; height: 56px; font-size: 28px; border-radius: 14px; }
.ident .who { min-width: 0; }
.ident .who a { color: var(--text); text-decoration: none; font-size: 21px; }
.ident .who a:hover { color: var(--ember-hi); }
.ident .tags { margin: 6px 0 0 0; display: flex; }
.ident .who small {
  display: block; color: var(--dim); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.crown-heat { text-align: right; }
.crown-heat b {
  display: block; font-size: 42px; font-weight: 500; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--ember-hi);
  text-shadow: 0 0 34px rgba(255,140,30,.45);
  animation: flicker 4s infinite;
}
.crown-heat i {
  font-style: normal; display: block; margin-top: 4px;
  font-size: 12px; color: var(--dim); font-family: var(--sans);
}

.crown-eta {
  grid-column: 1 / -1;
  margin: 16px 0 0; padding: 10px 12px; border-radius: 9px;
  background: rgba(255,90,31,.07); border: 1px solid #4a2a12;
  font-family: var(--sans); font-size: 12.5px; color: var(--dim);
}
.crown-eta b { color: var(--ember); font-weight: 600; }

.crown .cta.wide { grid-column: 1 / -1; margin-top: 16px; }

/* ---------------------------------------------------------- second, third */

/* Cooling as they descend: the same gradient the rows used, now with room to
   actually read as a temperature drop. */
.runners { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }

/* Second and third place. Generic enough a name that anything else wearing it
   inherits a whole card - the crossover legend did exactly that. */
.runner {
  border: 1px solid var(--line); border-radius: 13px; padding: 15px 16px;
  background: linear-gradient(180deg, #121017, var(--panel));
  display: flex; flex-direction: column; gap: 12px;
}
.runner.rank-2 { border-color: #45301c; background: linear-gradient(180deg, #16110d, var(--panel)); }
.runner.rank-3 { border-color: #33283a; background: linear-gradient(180deg, #120f16, var(--panel)); }

.runner-top { display: flex; align-items: center; gap: 10px; }
.runner .place { font-size: 28px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.runner.rank-2 .place { color: #d59a5e; }
.runner.rank-3 .place { color: #9c7fa8; }

.runner .ident .logo { width: 40px; height: 40px; font-size: 20px; border-radius: 11px; }
.runner .ident .who a { font-size: 16px; }

.runner-heat b {
  font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums;
  display: block;
}
.runner-heat i {
  font-style: normal; font-size: 11.5px; color: var(--cool);
  font-variant-numeric: tabular-nums;
}

.cta.take {
  margin-top: auto; padding: 10px; font-size: 12px; letter-spacing: .08em;
  background: none; border: 1px solid var(--line); color: var(--dim);
  box-shadow: none; border-radius: 9px;
}
.cta.take:hover {
  transform: none; box-shadow: none;
  border-color: var(--ember); color: var(--ember-hi); background: none;
}

/* --------------------------------------------------------------- sharing */

/* One click from wherever the listing is. It used to be behind the rank
   number, which nobody clicks. */
.share-chip {
  margin-left: auto; white-space: nowrap; text-decoration: none;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 7px;
  color: var(--dim); padding: 5px 10px; font: 11px/1 var(--mono); letter-spacing: .06em;
  cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.share-chip:hover { border-color: var(--ember); color: var(--ember-hi); background: rgba(255,90,31,.08); }
.crown .share-chip { border-color: #6b3a0d; color: var(--ember-hi); }

/* On an ordinary row it sits beside "+ heat" and only needs the arrow. */
.share-chip.small { margin: 0 0 0 6px; padding: 4px 8px; font-size: 12px; }

@media (max-width: 720px) {
  .podium { margin-bottom: 18px; }
  /* No room for two columns; the number goes back under the project. */
  .crown { padding: 16px 15px 18px; border-radius: 14px; grid-template-columns: minmax(0, 1fr); }
  .crown-heat { text-align: left; margin-top: 14px; }
  .crown-label { font-size: 11px; letter-spacing: .16em; }
  .ident .logo { width: 46px; height: 46px; font-size: 23px; }
  .ident .who a { font-size: 18px; }
  .crown-heat b { font-size: 34px; }
  /* Two cards side by side at 375px leaves nothing legible in either, so they
     stack - and stacked they were spending 569px before rank 4 appeared. The
     same two-column trick the crown uses on desktop gets that back. */
  .runners { grid-template-columns: 1fr; gap: 10px; }
  .runner {
    padding: 13px 14px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: 14px; row-gap: 10px;
  }
  .runner-top { grid-column: 1 / -1; }
  .runner .tags { display: none; }          /* the filters are in the toolbar */
  .runner-heat { text-align: right; }
  .runner-heat b { font-size: 21px; }
  .runner .cta.take { grid-column: 1 / -1; margin-top: 0; }
}

/* ------------------------------------------------------ the how-it-works page */

/* The link out of the hero, which is the only thing left where four stacked
   explanations used to be. */
.mechanic-more { margin: 14px 0 0; font-family: var(--sans); font-size: 13px; }
.mechanic-more a { color: var(--ember-hi); text-decoration: none; }
.mechanic-more a:hover { text-decoration: underline; }

.guide { max-width: 680px; }
.guide h1 { font-size: 30px; font-weight: 600; margin: 0 0 10px; }
.guide-lede {
  font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--dim);
  margin: 0 0 6px;
}
.guide section { margin-top: 34px; }
.guide h2 {
  font-size: 17px; font-weight: 600; margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.guide p { font-family: var(--sans); font-size: 14px; line-height: 1.7; color: var(--dim); }
.guide p b { color: var(--text); font-weight: 600; }
.guide em { color: var(--text); font-style: italic; }

/* Nothing is folded away here: this is the page you came to for the detail. */
.guide-loop { grid-template-columns: 1fr; gap: 14px; margin-top: 0; }
.guide-loop > li > b { display: block; font-size: 14px; margin-bottom: 3px; }
.guide-loop > li > span { display: block; font-size: 13.5px; }

.guide .decay-demo { margin: 0 0 14px; }

/* The same payment, burning at the throne's rate against everyone else's. */
.worked { width: 100%; border-collapse: collapse; margin: 4px 0 12px; font-size: 13px; }
.worked th, .worked td {
  padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left;
}
.worked th {
  font: 600 11px/1 var(--mono); letter-spacing: .1em; color: var(--dim);
  text-transform: uppercase;
}
.worked td { font-family: var(--sans); color: var(--dim); }
.worked .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.worked tbody tr:first-child td { color: var(--text); }
.worked tbody td.num:first-of-type { color: var(--ember-hi); }

/* Prose links on the guides. Without this they render browser-default blue and
   underlined, which on this palette reads as a broken page rather than a link.
   Scoped to running text: `.cta` is a child of `.guide` and is not a link here. */
.guide p a, .guide li a, .guide dd a, .guide dt a {
  color: var(--ember-hi); text-decoration: none;
  border-bottom: 1px solid rgba(255, 179, 63, .32);
}
.guide p a:hover, .guide li a:hover, .guide dd a:hover, .guide dt a:hover {
  border-bottom-color: var(--ember-hi);
}

.guide-note { font-size: 13px; }
.guide-warn {
  border: 1px solid #4a2a12; background: #140d07; border-radius: 10px;
  padding: 13px 14px; font-size: 13px;
}
.guide-warn b { display: block; color: var(--ember-hi); margin-bottom: 4px; }

/* Who may do what. `.worked` puts its ember on the first numeric column, which
   marks the expensive one on the burn table and would mark nothing here - every
   cell is a yes or a no. The colour goes on the answer instead. */
/* Specificity is deliberate: `.worked tbody tr:first-child td` and
   `.worked tbody td.num:first-of-type` both out-rank a plain `.rights td`, so
   the first row and the first column would keep the burn table's colours. */
.worked.rights tbody tr td { color: var(--dim); }
.worked.rights tbody tr td.num { font-family: var(--sans); }
.worked.rights tbody tr td.yes { color: var(--ember-hi); }

.guide-list { margin: 4px 0 0; padding-left: 18px; }
.guide-list li { font-size: 13px; line-height: 1.65; color: var(--dim); margin-bottom: 9px; }
.guide-list li b { color: var(--text); font-weight: 600; }

/* The questions somebody arriving from a search actually typed. */
.faq { margin: 4px 0 0; }
.faq dt {
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--text);
  margin-top: 16px;
}
.faq dd {
  margin: 5px 0 0; font-family: var(--sans); font-size: 13px; line-height: 1.65;
  color: var(--dim);
}

.guide-note.center { text-align: center; margin-top: 16px; }

/* -------------------------------------------------------- heat calculator */

/* The answer is what the page is for, so it gets the full width and the input
   sits above it as one compact row. Side by side put a single number field in
   46% of a 640px column and squeezed the result into 280px - the wrong way
   round for a page whose entire job is the answer. */
.calc {
  margin: 22px 0 18px; padding: 22px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
}
.calc-input {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 14px;
  padding-bottom: 17px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.calc-field { flex: 0 0 auto; width: 158px; }
.calc-presets { flex: 1 1 240px; margin-top: 0 !important; }
.calc-input label {
  display: block; font: 600 11px/1 var(--mono); letter-spacing: .15em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 9px;
}
.calc-field {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #0c0d12;
}
.calc-field span { font: 700 22px/1 var(--mono); color: var(--dim); }
.calc-field input {
  width: 100%; border: 0; background: none; outline: none; padding: 0;
  font: 700 26px/1.1 var(--mono); color: var(--ember-hi);
}
/* The spinners are noise next to a value people type or tap a preset for. */
.calc-field input::-webkit-outer-spin-button,
.calc-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-field input { -moz-appearance: textfield; appearance: textfield; }

.calc-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.calc-input label { flex: 1 0 100%; }
.calc-presets button {
  flex: 1 1 auto; padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: none;
  font: 12px/1 var(--mono); color: var(--dim); transition: border-color .2s, color .2s;
}
.calc-presets button:hover { border-color: var(--ember); color: var(--ember-hi); }
.calc-presets button.on { border-color: var(--ember); color: var(--ember-hi); background: rgba(255,90,31,.1); }

.calc-out { min-width: 0; }
.calc-rank { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.calc-rank span {
  font: 600 11px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--dim);
  width: 100%;
}
.calc-rank > b { font: 700 42px/1 var(--mono); color: var(--ember-hi); }
.calc-rank i { font-family: var(--sans); font-size: 12.5px; font-style: normal; color: var(--dim); }
.calc-rank i b { color: var(--text); }

.calc-holds { margin-top: 16px; }
.calc-none { margin: 14px 0 0; font-family: var(--sans); font-size: 13px; color: var(--dim); }

/* Three across when there is room, two when there is not. Fixed thirds put
   "TO HOLD THAT SPOT" on three lines inside a 370px column, which is most of a
   real desktop once the input column is taken out. */
.calc-costs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 10px; margin-top: 16px;
}
.calc-costs div { border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; }
.calc-costs span {
  display: block; font: 600 11px/1.3 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 7px;
}
.calc-costs b { display: block; font: 700 19px/1 var(--mono); color: var(--text); }
.calc-costs small { display: block; margin-top: 5px; font-family: var(--sans); font-size: 12px; color: var(--dim); }

@media (max-width: 720px) {
  .calc { padding: 18px; }
  .calc-field { width: 100%; }
  .calc-rank > b { font-size: 36px; }
}

/* A way out of the drawer to the page that explains it, without turning the
   first thing in the form into a paragraph. */
.pane-link { margin: -4px 0 14px; font-size: 12px; }

/* --------------------------------------------- what your payment just did */

/* The moment the whole community phase is built around. It gets the loudest
   treatment on the page, and three of them, because "you moved it three
   places" and "you are still #6" are different news and must not look alike. */
.moved {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 16px 14px; margin-bottom: 14px; text-align: center;
}
.moved.up { border-color: #4a3a12; background: linear-gradient(180deg, #16110a, #0d0b08); }
.moved.throne { border-color: var(--ember); background: linear-gradient(180deg, #1d1207, #0e0a06); }
.moved.held { background: #0c0d12; }

.moved-kind {
  display: block; font: 600 11px/1 var(--mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 7px;
}
.moved.throne .moved-kind, .moved.up .moved-kind { color: var(--ember-hi); }
.moved > b {
  display: block; font-family: var(--sans); font-size: 16px; color: var(--text);
  line-height: 1.3;
}

.moved-ranks {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 12px 0 4px; font-family: var(--mono);
}
.moved-ranks .was { font-size: 20px; color: var(--dim); text-decoration: line-through; }
.moved-ranks .arrow { color: var(--dim); font-size: 14px; }
.moved-ranks .now { font-size: 30px; font-weight: 700; color: var(--ember-hi); }
.moved.throne .moved-ranks .now { color: var(--ember-hi); text-shadow: 0 0 22px rgba(255,120,30,.5); }

.moved-line {
  margin: 10px 0 0; font-family: var(--sans); font-size: 12.5px; color: var(--dim);
}
.moved .ghost.wide { margin-top: 12px; }

/* ------------------------------------------------------------- community */

/* Who backed a listing, on its own page. Lifetime money, which is a different
   figure from the heat above it and is labelled so - see community.js. */
.backers { margin-top: 22px; }
.backer-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0;
}
.backer-split div {
  border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px;
}
.backer-split span {
  display: block; font: 600 11px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 6px;
}
.backer-split b { font-family: var(--mono); font-size: 17px; color: var(--text); }
.backer-split .community b { color: var(--ember-hi); }

/* The headline claim. It is a percentage of ATTRIBUTED money only, and it is
   absent rather than zero when there is nothing to attribute. */
.backed-bar {
  height: 6px; border-radius: 3px; background: #1b1d26; overflow: hidden; margin: 4px 0 8px;
}
.backed-bar i { display: block; height: 100%; background: var(--ember); }
.backed-note { font-family: var(--sans); font-size: 12px; color: var(--dim); margin: 0; }
.backed-note b { color: var(--text); font-weight: 600; }

/* On a row: one more small number, and it goes last so the phone layout drops
   it off the end rather than pushing the rank around. */
/* The whole card opens the listing's page. The rank, logo and name inside it
   are still real links, so this is an affordance for the dead space between
   them - which on a phone is most of the card. */
.card-link { cursor: pointer; }

.row-community {
  display: block; font-family: var(--mono); font-size: 12px; color: var(--dim);
  margin-top: 4px;
}
.row-community:empty { display: none; }

/* The compact market line on a board row. Quiet on purpose: heat is what this
   board sells and what it is sorted by, so price sits at label weight beside
   it rather than competing with the number in the heat column. Movement is a
   restrained green/red on the text only - no fills, no badges. */
.row-market {
  display: flex; flex-wrap: wrap; align-items: center; width: fit-content; max-width: 100%;
  gap: 4px 11px; margin-top: 7px; padding: 5px 9px 5px 10px;
  border-left: 2px solid #5f7188; background: rgba(101,121,148,.055);
  font-family: var(--mono); font-size: 12px; color: #b0aaa3;
}
.row-market::before { content: "MKT"; color: #68778a; font: 700 11px/1 var(--mono); letter-spacing: .1em; }
.row-market > span { display: inline-flex; align-items: baseline; gap: 5px; }
.row-market i { font-style: normal; color: #625c57; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.row-market i:empty { display: none; }
.row-market .market-change.up { color: var(--cool); }
.row-market .market-change.down { color: #e2685f; }
.row-market .market-change.flat { color: #837c75; }
/* A delayed price is still the last true price we saw; it is dimmed and
   labelled rather than hidden, because hiding it would read as "no market". */
.row-market.is-stale { opacity: .62; }
.row-market.is-stale::after {
  content: 'delayed'; color: #625c57; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.row .next-up { font-family: var(--mono); font-size: 12px; color: var(--ember-hi); }

@media (max-width: 720px) {
  .moved > b { font-size: 15px; }
  .moved-ranks .now { font-size: 26px; }
  .backer-split { grid-template-columns: 1fr; }
  /* Priority on a phone is rank, heat, the gap, then the backers - so this
     line stays and the wider columns are what fold away. */
  .row-community { margin-top: 5px; }
}


.guide .cta.wide { margin-top: 34px; }

@media (max-width: 720px) {
  .guide h1 { font-size: 23px; }
  .guide-lede { font-size: 14px; }
  .guide section { margin-top: 26px; }
  .guide h2 { font-size: 16px; }
  .worked { font-size: 12px; }
  .worked th, .worked td { padding: 8px 6px; }
}

/* -------------------------------------------------------- sharing a spot */

/* Each listing has its own page, and the rank is the way in. */
a.rank { text-decoration: none; color: var(--dim); display: block; }
a.rank:hover { color: var(--ember-hi); }
.row.throne a.rank:hover { color: #fff; }

/* Offered the moment a payment lands. A payer wants to tell people then and
   not five minutes later, and their followers are an audience the board has no
   other way to reach. */
.paid-share {
  border: 1px solid #4a2a12; background: #150e07; border-radius: 10px;
  padding: 14px; width: 100%;
}
.paid-share > b {
  display: block; font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--ember-hi); margin-bottom: 4px;
}
.paid-share .sub { margin: 0 0 12px; }
.paid-share .cta.wide { margin-top: 0; }

.ghost.wide {
  width: 100%; margin-top: 8px; padding: 11px; text-align: center;
}

/* The listing's own page. Deliberately one column and short: it exists to be
   unfurled, indexed, and clicked through. */
.one { max-width: 640px; margin: 34px auto 60px; padding: 0 24px; }
.one h1 { font-size: 24px; font-weight: 500; margin: 0 0 12px; }
.one .board { margin-bottom: 18px; }
.one-listing .top .brand { text-decoration: none; color: inherit; }
.one-listing .ghost { margin-left: auto; text-decoration: none; line-height: 1; }
.one .cta.wide { margin-top: 18px; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.fact {
  border: 1px solid var(--line); border-radius: 10px; background: #0b0c11; padding: 12px 14px;
}
.fact span { display: block; font-size: 11px; letter-spacing: .13em; color: var(--dim); margin-bottom: 5px; }
.fact b { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fact.hot b { color: var(--ember-hi); }
.fact i { font-style: normal; display: block; font-size: 11px; color: #5f6379; margin-top: 4px; }

/* The row is the whole page here: it drops the burn and cost columns (they are
   facts below instead), so the project gets that width back and nothing on it
   needs truncating. */
.one .row { grid-template-columns: 54px 1fr auto; }
.one .meta small { white-space: normal; overflow: visible; word-break: break-word; }
/* Every footer, not just the standalone pages: the board page grew a link too
   and it was rendering as a default blue anchor on a near-black background. */
footer a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }
footer a:hover { color: var(--ember-hi); }
.badges a, .badges a:hover { text-decoration: none; }

.one-note {
  font-family: var(--sans); font-size: 13px; line-height: 1.7; color: var(--dim);
  margin: 18px 0 0;
}

.share {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
}
.share-label { font-size: 11px; letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.share-x, .share-copy {
  background: #101119; border: 1px solid var(--line); border-radius: 8px; color: var(--text);
  padding: 9px 14px; font: 12px/1 var(--mono); letter-spacing: .06em; cursor: pointer;
  text-decoration: none;
}
.share-x:hover, .share-copy:hover { border-color: var(--ember); color: var(--ember-hi); }

/* ------------------------------------------------------------ wallet pay */

/* The one-click path sits above the address, and the address stays: it is the
   fallback for every chain a browser wallet cannot sign for. */
.wallet { width: 100%; }
.wallet .cta.wide { margin-top: 0; }
.wallet-note { margin: 10px 0 0; }
.wallet .status { margin-top: 6px; }

.picker { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.picker button {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: #101119; border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); padding: 10px 12px; font: 13px var(--mono); cursor: pointer;
}
.picker button:hover { border-color: var(--ember); color: var(--ember-hi); }
.picker img { width: 20px; height: 20px; border-radius: 5px; }

.orline {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 4px; color: var(--dim); font-size: 12px; font-family: var(--sans);
}
.orline::before, .orline::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.keybox {
  border: 1px solid #5a3200; background: #1a1005; border-radius: 10px; padding: 12px;
}
.keybox span { display: block; font-size: 12px; color: var(--ember-hi); margin-bottom: 6px; }
.keybox code { font-size: 13px; word-break: break-all; }

/* ------------------------------------------------------------------ mobile  */

/* On a phone the header, the hero and the tape were spending 790px before the
   first listing - the product itself - appeared. Everything below is about
   getting the board onto the first screen. */
@media (max-width: 720px) {
  .top { flex-wrap: nowrap; gap: 10px; padding: 11px 14px; }
  .brand { min-width: 0; }
  .brand-logo { width: 108px; height: 36px; }
  .wordmark { font-size: 13px; letter-spacing: .16em; }
  /* One number, on one line, so the header stays a single row. The full
     label does not fit beside the wordmark and the CTA, and wrapping it is
     what made the header three rows tall in the first place. */
  .stats { width: auto; margin-left: auto; gap: 0; flex-wrap: nowrap; }
  .stats div:not(.key) { display: none; }
  .stats div.key { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
  .stats div.key::before {
    content: 'HEAT'; font-size: 11px; letter-spacing: .1em; color: var(--dim);
  }
  .stats span { display: none; }
  .stats b { font-size: 13px; }
  .ghost { display: none; }                 /* listing is still reachable in the drawer */
  /* ...except on the pages whose only way back is that link. Hiding it there
     left a listing page and the guide with no route to the board on a phone. */
  .one-listing .ghost { display: inline-block; }
  .top .cta { padding: 10px 12px; letter-spacing: .06em; white-space: nowrap; }

  .drawer { padding: 20px 18px 48px; }
  .pane, .step { gap: 11px; }
  .explain { margin: 14px auto 12px; padding: 0 16px; }
  /* The label runs into its sentence rather than sitting on a line of its own:
     three spare line-heights is most of the difference between a hero that
     teaches the mechanic and one that buries the board under it. */
  .loop { grid-template-columns: 1fr; gap: 7px; margin-top: 12px; }
  .loop li { padding-left: 24px; }
  .loop > li > b { display: inline; font-size: 12.5px; }
  .loop > li > b::after { content: ' — '; color: var(--dim); font-weight: 400; }
  .loop > li > span { display: inline; font-size: 12.5px; line-height: 1.5; }
  .loop li::before { top: 0; }

  .how { margin-top: 12px; }
  /* A bordered chip is a button's worth of height for a disclosure. */
  .how summary { border: 0; padding: 2px 0; text-decoration: underline; }
  .tape { margin-bottom: 12px; padding: 7px 0; }
  main { padding: 0 16px; }

  .board-head { display: none; }
  /* Tight gaps here are not cosmetic: every pixel spent between the columns
     comes straight off the project name and the contract address. */
  .row { grid-template-columns: 34px 1fr auto; row-gap: 4px; column-gap: 10px; padding: 12px; }
  .proj { gap: 10px; }
  .rank { font-size: 17px; }
  .logo { width: 34px; height: 34px; font-size: 16px; }
  .meta a { font-size: 14px; }
  /* Burn and cost each get their own full-width line under the project. Put
     them in the right-hand column instead and that column sizes to the widest
     of them, which leaves the project name about 90px and truncates it. */
  .burn { grid-column: 2 / -1; text-align: left; white-space: nowrap; font-size: 11px; }
  .burn .mult { display: none; }             /* the podium colouring already says this */
  /* Category and network are filters, and the filters are in the toolbar. */
  #board .tags, #exampleBoard .tags { display: none; }
  .pass { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; }
  .pass .lbl { display: none; }
  .pass .boost { margin-left: auto; }
  .heat::before { content: 'HEAT '; }
  .burn::before { content: 'BURN '; }
  .pass::before { content: 'TAKE IT '; }
  .heat::before, .burn::before, .pass::before {
    font-size: 11px; letter-spacing: .12em; color: var(--dim);
  }
  .heat { font-size: 15px; }
}

/* Below this the wordmark, the metric and the CTA stop fitting on one line,
   and the CTA is the one that has to survive. */
@media (max-width: 370px) {
  .stats { display: none; }
  .brand-logo { width: 98px; height: 33px; }
  .wordmark { font-size: 12px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ====================================================== project profile */

/* `/p/TICKER` is a product profile, not a leaderboard row stretched to fill a
   page. The hierarchy is identity -> live market position -> measured proof ->
   community and actions. Kept in the same signal-orange market language as
   the board, but with enough breathing room to feel like a destination. */
.one-listing {
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 22% 8%, rgba(240,82,45,.075), transparent 66%),
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 56px 56px, 56px 56px, auto;
}
.one-listing .top { border-bottom-color: rgba(255,255,255,.07); background: rgba(8,8,8,.9); }
.project-page { max-width: 1180px; margin: 38px auto 72px; padding: 0 30px; }

.project-profile {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid #302b27; background: rgba(15,13,12,.94);
  box-shadow: 0 36px 110px -72px rgba(240,82,45,.8);
}
.project-profile::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background:
    radial-gradient(65% 120% at 4% 8%, rgba(240,82,45,.105), transparent 64%),
    radial-gradient(42% 90% at 100% 10%, rgba(255,179,63,.055), transparent 72%);
  pointer-events: none;
}
.project-profile::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--signal), var(--ember-hi) 52%, transparent 90%);
}
.project-profile.is-throne { border-color: rgba(255,179,63,.34); }
.project-profile-grid { display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(330px, .72fr); }
.project-identity { min-width: 0; padding: 38px 42px 35px; }
.project-eyebrow {
  display: flex; align-items: center; gap: 8px; margin: 0 0 26px;
  color: #90877f; font: 650 11px/1 var(--mono); letter-spacing: .16em;
}
.project-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 14px var(--signal); }
.project-eyebrow span { color: #504b47; }
.project-title-row { display: flex; align-items: center; gap: 22px; min-width: 0; }
.project-avatar.logo {
  width: 86px; height: 86px; border-radius: 0; border-color: #51463e;
  background: #171310; color: var(--ember-hi); font-size: 38px;
  box-shadow: 12px 12px 0 rgba(240,82,45,.07); transition: border-color .2s, transform .2s;
}
.project-avatar.logo:hover { border-color: var(--ember-hi); transform: translate(-2px,-2px); }
.project-avatar.logo img { width: 100%; height: 100%; object-fit: cover; }
.project-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 19px; margin-bottom: 7px; }
.project-badges .badge { margin: 0; border-radius: 0; padding: 3px 6px; font: 600 11px/1 var(--mono); }
.project-title-row h1 {
  margin: 0; color: #f7eee4; font: 760 clamp(34px, 4.4vw, 54px)/.98 var(--sans);
  letter-spacing: -.045em; overflow-wrap: anywhere;
}
.project-symbol { margin: 10px 0 0; color: var(--signal); font: 650 12px/1 var(--mono); letter-spacing: .07em; }
.project-symbol span { margin: 0 5px; color: #625a53; }
.project-blurb {
  max-width: 650px; margin: 24px 0 0; color: #b3aaa1;
  font: 400 16px/1.65 var(--sans);
}
.project-contract {
  display: flex; align-items: center; gap: 10px; min-width: 0; margin: 17px 0 0;
  color: #756e67; font: 600 11px/1 var(--mono); letter-spacing: .12em;
}
.project-contract code {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #aaa097;
  font: 11px/1 var(--mono); letter-spacing: 0; white-space: nowrap;
}
.project-primary-actions { display: flex; align-items: stretch; gap: 10px; margin-top: 29px; }
.project-primary-actions a { display: grid; place-items: center; min-height: 46px; text-decoration: none; }
.project-primary-actions .visit-main {
  min-width: 190px; border-radius: 0; color: #170b06; background: var(--signal); box-shadow: none;
}
.project-primary-actions .visit-main:hover { background: var(--ember-hi); box-shadow: none; transform: none; }
.project-primary-actions .project-back {
  padding: 0 18px; border: 1px solid #3b3530; border-radius: 0;
  color: #c9bfb4; background: rgba(255,255,255,.018); font-size: 12px;
}
.project-primary-actions .project-back:hover { border-color: #7a4b32; color: var(--ember-hi); }

.project-rank-card {
  display: flex; flex-direction: column; justify-content: center; min-width: 0;
  padding: 34px 34px 31px; border-left: 1px solid rgba(255,179,63,.14);
  background: rgba(0,0,0,.19);
}
.project-rank-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-rank-top span, .project-rank-top i {
  color: #837a72; font: 650 11px/1 var(--mono); letter-spacing: .15em; font-style: normal;
}
.project-rank-top i { color: var(--signal); }
.project-rank-number { display: flex; align-items: flex-start; margin-top: 20px; color: #f6ede4; }
.project-rank-number span { margin: 10px 4px 0 0; color: #827970; font: 500 21px/1 var(--mono); }
.project-rank-number b { font: 760 clamp(72px, 8.4vw, 108px)/.78 var(--sans); letter-spacing: -.09em; }
.project-rank-card > p { margin: 22px 0 0; color: #aaa098; font: 12px/1.5 var(--mono); }
.project-rank-rule { height: 6px; margin-top: 18px; background: #25211e; }
.project-rank-rule i { display: block; width: 78%; height: 100%; background: linear-gradient(90deg, var(--signal), var(--ember-hi)); }
.project-rank-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 22px; }
.project-rank-metrics span { display: block; color: #716a64; font: 650 11px/1.15 var(--mono); letter-spacing: .1em; }
.project-rank-metrics b { display: block; margin-top: 7px; color: #eee4d9; font: 650 15px/1 var(--mono); white-space: nowrap; }

.project-proof {
  display: grid; grid-template-columns: 1.35fr repeat(4, 1fr);
  border-top: 1px solid #302b27; background: #0c0b0a;
}
.project-proof > div { min-width: 0; padding: 17px 20px; }
.project-proof > div + div { border-left: 1px solid #292522; }
.project-proof-label { display: flex; flex-direction: column; justify-content: center; }
.project-proof-label span { color: var(--signal); font: 650 11px/1 var(--mono); letter-spacing: .15em; }
.project-proof-label b { margin-top: 6px; color: #716a64; font: 600 11px/1 var(--mono); letter-spacing: .12em; }
.project-proof-stat b { display: block; color: #eee5db; font: 670 22px/1 var(--mono); letter-spacing: -.04em; }
.project-proof-stat span { display: block; margin-top: 6px; color: #716a64; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.project-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .72fr); gap: 18px; margin-top: 18px; align-items: start; }
.project-main-column, .project-side-column { display: grid; gap: 18px; }
.project-section, .project-side-card { border: 1px solid #302b27; background: rgba(14,13,12,.88); }
.project-section { padding: 25px 27px 27px; }
.project-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.project-section-head span, .project-side-kicker { color: #7f7770; font: 650 11px/1 var(--mono); letter-spacing: .15em; }
.project-section-head h2, .project-side-card h2 { margin: 7px 0 0; color: #f1e8de; font: 680 21px/1.1 var(--sans); letter-spacing: -.02em; }
.project-section-head > b {
  padding: 5px 7px; border: 1px solid rgba(98,218,179,.25);
  color: var(--cool); background: rgba(98,218,179,.04); font: 650 11px/1 var(--mono); letter-spacing: .08em;
}
.market-position .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid #2d2926; background: #2d2926; }
.market-position .fact { min-width: 0; border: 0; border-radius: 0; padding: 16px 14px; background: #0b0a09; }
.market-position .fact span { color: #746d67; font: 650 11px/1 var(--mono); }
.market-position .fact b { color: #ede4da; font: 650 17px/1 var(--mono); }
.market-position .fact.hot b { color: var(--ember-hi); }
.market-position .fact i { color: #625c57; font: 12px/1.35 var(--mono); white-space: normal; }
.project-explainer { margin: 18px 0 0; color: #837c75; font: 12.5px/1.65 var(--sans); }

/* --- unlisted token discovery --------------------------------------------
   Cooler and quieter than a listed project: it has market context, but no
   earned ThroneTax identity yet. */
main.token-page { max-width: 1080px; margin-top: 34px; }
.token-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px; align-items: end; padding: 38px 40px; overflow: hidden;
  border: 1px solid #353234; background:
    radial-gradient(500px 220px at 4% 0%, rgba(99,118,145,.16), transparent 70%),
    linear-gradient(130deg, #121215, #0b0b0c);
}
.token-hero::after {
  content: ""; position: absolute; width: 280px; height: 280px; right: -165px; top: -190px;
  border: 1px solid rgba(117,137,166,.12); transform: rotate(45deg); pointer-events: none;
}
.token-status { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: #8c969f; font: 700 11px/1 var(--mono); letter-spacing: .15em; }
.token-status i { width: 7px; height: 7px; border: 1px solid #728198; transform: rotate(45deg); }
.token-hero h1 { margin: 0; color: #f0ece7; font: 730 clamp(42px, 7vw, 72px)/.9 var(--sans); letter-spacing: -.055em; }
.token-network { display: flex; align-items: center; gap: 12px; max-width: 680px; margin: 20px 0 0; color: #aaa39d; font: 650 12px/1.45 var(--mono); text-transform: uppercase; }
.token-network span { min-width: 0; overflow: hidden; color: #686d73; font-weight: 500; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.token-action { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 13px; }
.token-action > span { color: #6f6a67; font: 11px/1.3 var(--mono); }
.token-action .cta { min-width: 210px; text-align: center; }
.token-boundary {
  margin: 14px 0 24px; padding: 13px 16px; border-left: 2px solid #62738b;
  background: rgba(95,114,141,.055); color: #837e79; font: 12px/1.55 var(--sans);
}
.token-boundary b { color: #c4c0bb; }
.token-page .market-card { margin-top: 0; }
.token-empty { padding: 46px 38px; border: 1px solid #302d2e; background: #0d0d0f; text-align: center; }
.token-empty > span { color: #7a8695; font: 700 11px/1 var(--mono); letter-spacing: .15em; }
.token-empty h2 { margin: 13px 0 9px; color: #ddd8d2; font: 650 24px/1.15 var(--sans); }
.token-empty p { max-width: 610px; margin: auto; color: #827d78; font: 13px/1.6 var(--sans); }
.token-listing-callout {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr) auto;
  gap: 28px; align-items: center; margin-top: 18px; padding: 26px 30px;
  border: 1px solid #3a302c; background: linear-gradient(110deg, rgba(255,85,48,.07), #0d0d0e 46%);
}
.token-listing-callout span { color: var(--ember); font: 700 11px/1 var(--mono); letter-spacing: .14em; }
.token-listing-callout h2 { margin: 8px 0 0; color: #e8e2dc; font: 650 21px/1.15 var(--sans); }
.token-listing-callout p { margin: 0; color: #8d8781; font: 12px/1.55 var(--sans); }
.token-listing-callout > a { color: var(--ember-hi); font: 700 12px/1 var(--mono); text-decoration: none; white-space: nowrap; }

@media (max-width: 1060px) {
  body.token-shell .site-nav { display: flex; margin-left: auto; }
  body.token-shell .site-nav .ghost { display: none; }
}

@media (max-width: 720px) {
  main.token-page { margin-top: 18px; padding-inline: 14px; }
  .token-hero { grid-template-columns: 1fr; gap: 28px; padding: 30px 22px 24px; }
  .token-action { align-items: stretch; }
  .token-action .cta { width: 100%; }
  .token-network { display: block; }
  .token-network span { display: block; margin-top: 8px; }
  .token-listing-callout { grid-template-columns: 1fr; gap: 16px; padding: 23px 20px; }
  .token-listing-callout > a { padding-top: 15px; border-top: 1px solid #322b28; }
}

/* --- /markets ---------------------------------------------------------------
   A trading table, not another gamified panel: the market columns are quiet
   and monospaced, and only the THRONETAX columns (heat, embers, throne) carry
   colour. If price data ever starts out-shouting heat here, the page is
   telling a visitor that price is what ranks a listing, which is the one thing
   this table must not imply.
   Movement is restrained green/red and never a background fill. */
main.markets { max-width: 1240px; margin-top: 0; }
.markets-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(380px, .75fr);
  gap: 48px; align-items: end; margin-inline: -24px; padding: 56px 40px 38px;
  overflow: hidden; border-bottom: 1px solid #302b2a;
  background:
    radial-gradient(580px 240px at 8% 0%, rgba(255,85,48,.13), transparent 68%),
    linear-gradient(120deg, rgba(19,15,13,.96), rgba(9,9,10,.82));
}
.markets-hero::after {
  content: ""; position: absolute; width: 340px; height: 340px; right: -160px; top: -210px;
  border: 1px solid rgba(121,140,166,.1); transform: rotate(45deg); pointer-events: none;
}
.markets-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; color: #8d857e; font: 650 11px/1 var(--mono); letter-spacing: .17em; }
.markets-eyebrow i { width: 7px; height: 7px; background: var(--ember); transform: rotate(45deg); box-shadow: 0 0 14px rgba(255,86,48,.45); }
.one.markets h1 { margin: 0; color: #f3ede5; font: 740 clamp(42px, 6vw, 72px)/.9 var(--sans); letter-spacing: -.065em; text-transform: uppercase; }
.markets-hero-copy > p:last-child { max-width: 650px; margin: 20px 0 0; color: #aaa29a; font: 15px/1.65 var(--sans); }
.markets-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid #34302e; }
.markets-hero-stats > div { min-width: 0; padding: 3px 0 3px 19px; }
.markets-hero-stats span { display: block; color: #77716c; font: 650 11px/1 var(--mono); letter-spacing: .13em; }
.markets-hero-stats b { display: block; margin-top: 10px; color: #e9e3dc; font: 680 27px/1 var(--mono); letter-spacing: -.04em; }
.markets-hero-stats i { display: block; margin-top: 6px; color: #68635f; font: 11px/1.25 var(--sans); font-style: normal; }

.markets-signal-key {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 24px;
  border: 1px solid #302d2b; background: #302d2b;
}
.markets-signal-key > div { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; padding: 15px 18px; background: #0d0d0e; }
.markets-signal-key i { grid-row: 1 / 3; align-self: center; width: 6px; height: 26px; }
.markets-signal-key .market-dot { background: #64768e; }
.markets-signal-key .attention-dot { background: linear-gradient(var(--ember-hi), var(--ember)); }
.markets-signal-key span { color: #7d7772; font: 650 11px/1 var(--mono); letter-spacing: .13em; }
.markets-signal-key b { color: #b5aea7; font: 500 12px/1.35 var(--sans); }
.markets-warn { margin: 14px 0 0; padding: 11px 15px; border-left: 2px solid #5a5049; background: rgba(255,255,255,.018); color: #817b75; font-size: 12px; }
.markets-warn b { display: inline; margin: 0; color: #c9c2ba; }
.markets-warn em { font-style: normal; color: #c9bdb0; }

.markets-controls {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  margin: 24px 0 14px; padding: 14px; border: 1px solid #302d2b;
  background: linear-gradient(90deg, rgba(16,15,15,.96), rgba(12,12,13,.96));
}
.markets-controls label { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.markets-controls label > span {
  color: #7f7770; font: 650 11px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase;
}
.markets-controls input, .markets-controls select {
  min-width: 0; min-height: 40px; padding: 10px 12px; border: 1px solid #393637; background: #09090a;
  color: #e5e0da; font: 12px/1.2 var(--mono);
}
.markets-controls input:focus, .markets-controls select:focus { outline: 2px solid var(--ember-hi); outline-offset: 1px; }
.markets-search { flex: 1 1 260px; }
/* The column headings are the sort control on a wide screen; this select is
   the same control for the phone layout, which hides them. */
.markets-sort { display: none; }
.markets-network { flex: 0 1 190px; }
.markets-controls button {
  min-height: 40px; padding: 10px 20px; border: 1px solid var(--ember); background: var(--ember);
  color: #180c08; font: 700 12px/1 var(--mono); letter-spacing: .1em; cursor: pointer;
}
.markets-controls button:hover { border-color: var(--ember-hi); background: var(--ember-hi); }
.markets-clear { align-self: center; color: #837c75; font: 12px/1 var(--sans); }
.markets-discovery-hint { margin: -4px 0 14px; color: #666d76; font: 650 11px/1.35 var(--mono); letter-spacing: .08em; }
.market-discovery-results { margin: 0 0 16px; padding: 20px; border: 1px solid #35404d; background: linear-gradient(145deg, rgba(91,111,139,.075), #0c0c0e 45%); }
.market-discovery-results-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 16px; }
.market-discovery-results-head span { color: #778aa3; font: 700 11px/1 var(--mono); letter-spacing: .14em; }
.market-discovery-results-head h2 { margin: 7px 0 0; color: #e5e1dc; font: 660 21px/1.1 var(--sans); }
.market-discovery-results-head p { max-width: 430px; margin: 0; color: #7d7c7b; font: 12px/1.5 var(--sans); text-align: right; }
.market-discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.market-discovery-card { position: relative; min-width: 0; padding: 15px; border: 1px solid #2d3239; background: #0e0f11; color: inherit; text-decoration: none; transition: border-color .18s, transform .18s; }
.market-discovery-card:hover { border-color: #687d99; transform: translateY(-1px); }
.market-discovery-card.is-listed { border-color: rgba(255,122,62,.26); background: linear-gradient(145deg, rgba(255,91,48,.045), #0e0f11 60%); }
.market-discovery-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.market-discovery-card-head span { color: #737b85; font: 700 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.market-discovery-card-head b { color: #8b949f; font: 700 11px/1 var(--mono); letter-spacing: .06em; }
.market-discovery-card.is-listed .market-discovery-card-head b { color: var(--ember-hi); }
.market-discovery-card h3 { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 14px 0 8px; color: #ece8e3; font: 700 19px/1 var(--mono); }
.market-discovery-card h3 span { min-width: 0; overflow: hidden; color: #8d8883; font: 500 12px/1 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.market-discovery-card code { display: block; overflow: hidden; color: #626a74; font: 11px/1.3 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.market-discovery-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 14px; border: 1px solid #292d32; background: #292d32; }
.market-discovery-metrics > div { min-width: 0; padding: 9px 8px; background: #0b0c0e; }
.market-discovery-metrics span { display: block; margin-bottom: 5px; color: #626a74; font: 700 11px/1 var(--mono); letter-spacing: .07em; }
.market-discovery-metrics b { color: #c9c5c0; font: 650 12px/1 var(--mono); white-space: nowrap; }
.market-discovery-metrics .market-change { display: block; font-size: 12px; }
.market-discovery-card > em { display: block; margin-top: 13px; color: #8799b1; font: 700 11px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-align: right; }
.market-discovery-card.is-listed > em { color: var(--ember-hi); }
.market-discovery-message { margin: 0 0 16px; padding: 14px 16px; border-left: 2px solid #70839c; background: rgba(97,116,143,.07); color: #888681; font: 12px/1.55 var(--sans); }
.market-discovery-message b { color: #d0cbc5; }
.market-discovery-message.is-delayed { border-left-color: var(--ember-hi); }

.markets-frame { border: 1px solid #302d2b; background: #0c0c0d; }
.markets-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 43px; padding: 0 14px; border-bottom: 1px solid #302d2b;
  color: #77716c; font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.markets-meta > span b { color: #d1cbc4; font-size: 13px; }
.markets-delayed {
  padding: 5px 8px; border: 1px solid rgba(255,179,63,.26);
  color: var(--ember-hi); background: rgba(255,179,63,.05); font: 650 11px/1 var(--mono); letter-spacing: .1em;
}
.markets-current { display: inline-flex; align-items: center; gap: 6px; color: #69c7ac; font: 650 11px/1 var(--mono); letter-spacing: .1em; }
.markets-current::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* The table scrolls inside its own box; the page body never scrolls sideways. */
.markets-scroll { overflow-x: auto; background: rgba(12,12,13,.96); }
.markets-table { width: 100%; border-collapse: collapse; min-width: 980px; }
.markets-table th, .markets-table td { padding: 15px 13px; text-align: left; white-space: nowrap; }
.markets-table thead th {
  position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid #302d2b; background: #121112;
  color: #77716c; font: 650 11px/1 var(--mono); letter-spacing: .12em;
}
.markets-table thead th.num, .markets-table td.num { text-align: right; }
.markets-table thead th a { display: inline-flex; gap: 4px; align-items: center; color: inherit; text-decoration: none; }
.markets-table thead th a:hover { color: var(--ember-hi); }
.markets-table thead th.on a { color: #d9d3cc; }
.markets-table thead th i { font-style: normal; font-size: 12px; }
.markets-table tbody tr { border-top: 1px solid #242223; transition: background .16s ease; }
.markets-table tbody tr:hover { background: rgba(111,129,153,.045); }
.markets-table tbody tr.is-throne { background: linear-gradient(90deg, rgba(255,86,48,.07), rgba(255,179,63,.018) 55%, transparent); }
.markets-table tbody tr.is-throne td:first-child { box-shadow: inset 2px 0 var(--ember); }

.markets-table td.tok { white-space: normal; min-width: 210px; }
.markets-table td.tok a { display: block; color: inherit; text-decoration: none; }
.markets-table td.tok b { color: #eee9e3; font: 680 14px/1.2 var(--mono); }
.markets-table td.tok span { display: block; max-width: 220px; margin-top: 4px; overflow: hidden; color: #918b85; font: 12px/1.3 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.markets-table td.tok a:hover b { color: var(--ember-hi); }
/* The reason a row is bare, not a label like the network beside it: dimmer,
   and it wraps to its own line so it never crowds the chain name. */
.markets-table td.tok em.market-gap {
  display: block; margin-top: 4px; color: #6d5f4e; letter-spacing: .06em;
}

.markets-table td.tok em {
  display: inline-block; margin-top: 6px; color: #625c57;
  font: 650 11px/1 var(--mono); letter-spacing: .1em; font-style: normal; text-transform: uppercase;
}
.markets-table td span { color: #d0cbc5; font: 13px/1 var(--mono); }
.markets-table th.attention-start, .markets-table td.attention-start { border-left: 1px solid #38312d; }
.markets-table td.heat span { color: var(--ember-hi); font-size: 14px; font-weight: 700; }
.markets-table td.heat span::before { content: "🔥"; margin-right: 6px; font-size: 12px; }
.markets-table td.emb span { color: #b79cf5; font-weight: 650; }
.markets-table td.rk a { display: inline-grid; place-items: center; min-width: 38px; min-height: 29px; border: 1px solid #363335; color: #ede4da; font: 700 13px/1 var(--mono); text-decoration: none; }
.markets-table tr.is-throne td.rk a { border-color: rgba(255,179,63,.36); color: var(--ember-hi); background: rgba(255,179,63,.04); }
.markets-table td.rk a:hover { color: var(--ember-hi); }
.markets-empty td { padding: 34px 16px; color: #837c75; font: 13px/1.6 var(--sans); text-align: center; }
.markets-empty a { color: var(--ember-hi); }

/* Phones: the headings go, so every cell has to say its own name. Narrowing is
   done here rather than by sending fewer columns - the words in this table are
   what the page is found by. */
@media (max-width: 860px) {
  main.markets { padding-inline: 14px; }
  .markets-hero { grid-template-columns: 1fr; gap: 30px; margin-inline: -14px; padding: 38px 20px 28px; }
  .markets-hero-stats { border-left: 0; border-top: 1px solid #34302e; padding-top: 19px; }
  .markets-hero-stats > div { padding-left: 0; }
  .markets-signal-key { grid-template-columns: 1fr; }
  .markets-controls { padding: 13px; }
  .market-discovery-results { padding: 16px; }
  .market-discovery-results-head { align-items: start; }
  .market-discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .markets-frame { border: 0; background: none; }
  .markets-meta { margin-bottom: 10px; border: 1px solid #302d2b; background: #0c0c0d; }
  .markets-scroll { border: 0; background: none; overflow-x: visible; }
  .markets-table { min-width: 0; }
  /* Keep the headings in the HTML for semantics/SEO, but remove their table
     sizing influence once every mobile cell carries its own data-label. */
  .markets-table thead { display: none; }
  .markets-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "token token rank"
      "price change change"
      "volume liquidity mcap"
      "heat heat emb";
    gap: 0; margin-bottom: 12px; padding: 15px 16px;
    border: 1px solid #302d2b; background: linear-gradient(145deg, #111011, #0b0b0c);
  }
  .markets-table tbody tr.is-throne { border-color: rgba(255,179,63,.3); }
  .markets-table td, .markets-table th { padding: 10px 8px; }
  .markets-table td.tok { grid-area: token; min-width: 0; padding: 4px 8px 14px 0; border-bottom: 1px solid #292627; }
  .markets-table td.tok span { max-width: 100%; }
  .markets-table td.num { text-align: left; }
  .markets-table td.num::before {
    content: attr(data-label); display: block; margin-bottom: 5px;
    color: #746d67; font: 650 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  }
  .markets-table td.price { grid-area: price; padding-left: 0; }
  .markets-table td.chg { grid-area: change; }
  .markets-table td.volume { grid-area: volume; padding-left: 0; border-top: 1px solid #242223; }
  .markets-table td.liquidity { grid-area: liquidity; border-top: 1px solid #242223; }
  .markets-table td.mcap { grid-area: mcap; border-top: 1px solid #242223; }
  .markets-table td.heat { grid-area: heat; padding-left: 0; border-top: 1px solid #38312d; border-left: 0; }
  .markets-table td.emb { grid-area: emb; border-top: 1px solid #38312d; }
  .markets-table td.rk { grid-area: rank; align-self: start; justify-self: end; padding: 0 0 12px; border-bottom: 1px solid #292627; }
  .markets-table td.rk::before { display: none; }
  .markets-empty td { grid-column: 1 / -1; }
  .markets-sort { display: flex; flex: 1 1 160px; }
}

@media (max-width: 520px) {
  .markets-signal-key b { font-size: 11px; }
  .markets-controls label { flex-basis: 100%; }
  .markets-controls button { flex: 1; }
  .market-discovery-results-head { display: block; }
  .market-discovery-results-head p { margin-top: 10px; text-align: left; }
  .market-discovery-grid { grid-template-columns: 1fr; }
  .markets-table tbody tr { grid-template-areas: "token token rank" "price change change" "volume liquidity mcap" "heat heat heat" "emb emb emb"; }
  .markets-table td.num::before { font-size: 11px; letter-spacing: .07em; }
}

/* --- market data on a listing page -----------------------------------------
   Deliberately cooler than the heat sections above it. Heat is the product and
   wears the ember palette; market data is context and must not compete with it
   visually, or the page starts to read as though price is what ranks a listing.
   A missing figure gets `.market-unknown` and stays grey - it is never styled
   like a value, because it is not one. 12px floor throughout: these are values
   and sentences, not tracked capitals. */
.market-card {
  position: relative; overflow: hidden; isolation: isolate;
  border-color: #302f31;
  background:
    linear-gradient(145deg, rgba(21,22,24,.97), rgba(10,10,11,.98) 58%),
    #0d0d0e;
}
.market-card::before {
  content: ""; position: absolute; z-index: -1; inset: 0 auto auto 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, #6c819d, rgba(108,129,157,.2) 45%, transparent 82%);
}
.market-card-sheen {
  position: absolute; z-index: -1; width: 340px; height: 250px; right: -120px; top: -150px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(101,125,157,.11), transparent 68%);
}
.market-card .project-section-head { position: relative; margin-bottom: 28px; }
.market-card .project-section-head > b {
  display: inline-flex; align-items: center; gap: 6px;
  border-color: rgba(100,220,184,.24); color: #75d9bc; background: rgba(100,220,184,.055);
}
.market-card .project-section-head > b::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 9px currentColor;
}
.market-card.is-stale .project-section-head > b {
  border-color: rgba(255,179,63,.26); color: var(--ember-hi); background: rgba(255,179,63,.05);
}
.market-price-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: 24px; margin-bottom: 24px;
}
.market-price > span,
.market-change-set span,
.market-stat span,
.market-flow-head span {
  color: #76777b; font: 650 11px/1 var(--mono); letter-spacing: .14em;
}
.market-price > span { display: block; margin-bottom: 10px; }
.market-price > b {
  display: block; overflow-wrap: anywhere; color: #f1eee9;
  font: 680 clamp(31px, 5vw, 46px)/.94 var(--mono); letter-spacing: -.055em;
}
.market-price-move { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.market-price-move > span { color: #747579; font: 12px/1 var(--sans); }
.market-price-move .market-change { font-size: 14px; }
.market-change-set {
  display: grid; grid-template-columns: repeat(3, minmax(72px, 1fr));
  min-width: 252px; border: 1px solid #303135; background: rgba(7,7,8,.68);
}
.market-change-set > div { padding: 12px 14px; text-align: right; }
.market-change-set > div + div { border-left: 1px solid #292a2d; }
.market-change-set span { display: block; margin-bottom: 7px; }
.market-change { font: 650 13px/1 var(--mono); }
.market-change.up { color: #58cfab; }
.market-change.down { color: #e2685f; }
.market-change.flat, .market-unknown { color: #696a6d; }

.market-chart {
  margin: 0 0 24px; padding: 16px 16px 12px; overflow: hidden;
  border: 1px solid #2c3035; background: rgba(6,7,8,.62);
}
.market-chart-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.market-chart-head > div { display: flex; align-items: baseline; gap: 9px; }
.market-chart-head > div:last-child { justify-content: flex-end; }
.market-chart-head-right { align-items: center !important; gap: 16px !important; }
.market-chart-head-right > div { display: flex; align-items: baseline; gap: 9px; }
.market-chart-head span,
.market-chart-axis { color: #6f747b; font: 650 11px/1 var(--mono); letter-spacing: .12em; }
.market-chart-head b { color: #b8c6d8; font: 650 12px/1 var(--mono); }
.market-chart.is-up .market-chart-head > div:first-child b { color: #58cfab; }
.market-chart.is-down .market-chart-head > div:first-child b { color: #e2685f; }
.market-chart svg { display: block; width: 100%; height: 150px; margin-top: 14px; overflow: visible; }
.market-chart-grid { fill: none; stroke: rgba(118,132,150,.11); stroke-width: 1; vector-effect: non-scaling-stroke; }
.market-chart-line { fill: none; stroke: #7c93b1; stroke-width: 2; vector-effect: non-scaling-stroke; }
.market-chart-area { fill: url(#market-chart-fill); }
.market-chart stop:first-child { stop-color: #7890ae; stop-opacity: .22; }
.market-chart stop:last-child { stop-color: #7890ae; stop-opacity: 0; }
.market-chart.is-up .market-chart-line { stroke: #58bfa2; }
.market-chart.is-down .market-chart-line { stroke: #cb6862; }
.market-chart-axis { display: flex; justify-content: space-between; margin-top: 5px; }
.market-chart-ranges { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #2d333a; background: #090a0c; }
.market-chart-ranges a {
  display: inline-grid; min-width: 40px; min-height: 27px; place-items: center; padding: 0 7px;
  color: #767d87; font: 700 11px/1 var(--mono); text-decoration: none;
}
.market-chart-ranges a:hover { color: #d5dbe3; background: #15191e; }
.market-chart-ranges a.is-active { color: #d7e0eb; background: #202731; box-shadow: inset 0 -1px #8096b3; }
.market-chart.is-building { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 22px; padding-block: 18px; }
.market-chart.is-building span { display: block; margin-bottom: 7px; color: #747a82; font: 650 11px/1 var(--mono); letter-spacing: .12em; }
.market-chart.is-building b { color: #c4c5c5; font: 650 13px/1.3 var(--sans); }
.market-chart.is-building p { max-width: 470px; margin: 0; color: #747579; font: 12px/1.5 var(--sans); }
.market-chart.is-building .market-chart-ranges { grid-column: 2; grid-row: 1 / 3; align-self: center; }

.market-primary-grid,
.market-secondary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.market-primary-grid { border-block: 1px solid #303135; }
.market-stat { min-width: 0; padding: 18px 16px; }
.market-stat + .market-stat { border-left: 1px solid #292a2d; }
.market-stat span { display: block; margin-bottom: 9px; }
.market-stat b { color: #e7e5e0; font: 650 17px/1 var(--mono); }
.market-stat i { display: block; margin-top: 6px; color: #66676a; font: 12px/1.35 var(--mono); }
.market-primary-grid .market-stat:first-child { padding-left: 0; }
.market-primary-grid .market-stat:last-child { padding-right: 0; }

.market-flow { padding: 21px 0; border-bottom: 1px solid #292a2d; }
.market-flow-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.market-flow-head > div:first-child > span { display: block; margin-bottom: 8px; }
.market-flow-head > div:first-child > b { color: #d8d6d1; font: 650 14px/1 var(--mono); }
.market-flow-legend { display: flex; gap: 15px; }
.market-flow-legend span { letter-spacing: .02em; text-transform: none; }
.market-flow-legend .buy { color: #58cfab; }
.market-flow-legend .sell { color: #e2685f; }
.market-flow-bar { position: relative; height: 4px; margin-top: 13px; overflow: hidden; background: #6d302e; }
.market-flow-bar i { display: block; height: 100%; background: #3eaa8a; }
.market-flow-bar.is-unknown { background: #2b2c2f; }

.market-secondary-grid .market-stat { padding-block: 17px 0; }
.market-secondary-grid .market-stat:first-child { padding-left: 0; }
.market-secondary-grid .market-stat:last-child { padding-right: 0; }
.market-secondary-grid .market-stat b { font-size: 14px; color: #c8c6c1; }
.market-note {
  display: flex; justify-content: space-between; gap: 18px; margin: 24px 0 0;
  padding-top: 14px; border-top: 1px solid #242529; color: #747579; font: 11.5px/1.5 var(--sans);
}
.market-note span:last-child { max-width: 55%; text-align: right; }
.market-note b { color: #999ca2; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
/* The one actionable line under an empty market panel. Deliberately NOT
   `.market-note`: that is an 11.5px two-column footnote row, and this is a
   sentence with a link in it - which wants the 12px sentence floor and the
   site's own link styling. An unstyled anchor renders default browser blue,
   which is how the guides looked before somebody noticed. */
.market-empty-fix { margin: 16px 0 0; color: #8d8b86; font: 13px/1.6 var(--sans); }
.market-empty-fix a {
  color: var(--ember-hi); text-decoration: none;
  border-bottom: 1px solid rgba(255, 179, 63, .32);
}
.market-empty-fix a:hover { border-bottom-color: var(--ember-hi); }

.market-empty-state { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border: 1px dashed #343539; background: rgba(8,8,9,.42); }
.market-empty-state > span { color: #71829a; font: 24px/1 var(--mono); }
.market-empty-state b { display: block; color: #d5d3ce; font: 650 14px/1.25 var(--sans); }
.market-empty-state p { margin: 7px 0 0; color: #7e7f82; font: 12.5px/1.6 var(--sans); }

@media (max-width: 720px) {
  .market-card .project-section-head { margin-bottom: 22px; }
  .market-price-row { grid-template-columns: 1fr; gap: 20px; }
  .market-price > b { font-size: clamp(29px, 9vw, 38px); }
  .market-change-set { min-width: 0; width: 100%; }
  .market-change-set > div { padding: 11px 9px; text-align: left; }
  .market-chart { margin-inline: -2px; padding-inline: 12px; }
  .market-chart-head { align-items: flex-start; }
  .market-chart-head-right { display: grid !important; justify-items: end; gap: 10px !important; }
  .market-chart-head-right > div { display: grid; grid-template-columns: auto auto; gap: 6px 8px; text-align: right; }
  .market-chart svg { height: 122px; }
  .market-chart.is-building { display: block; }
  .market-chart.is-building p { margin-top: 9px; text-align: left; }
  .market-chart.is-building .market-chart-ranges { margin-top: 13px; }
  .market-primary-grid { grid-template-columns: 1fr 1fr; }
  .market-primary-grid .market-stat { padding: 16px 12px; }
  .market-primary-grid .market-stat:first-child { padding-left: 0; }
  .market-primary-grid .market-stat:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid #292a2d; }
  .market-flow-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .market-secondary-grid { grid-template-columns: 1fr 1fr; }
  .market-secondary-grid .market-stat { padding: 15px 10px 0; }
  .market-secondary-grid .market-stat:first-child { padding-left: 0; }
  .market-secondary-grid .market-stat:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .market-note { flex-direction: column; gap: 7px; }
  .market-note span:last-child { max-width: none; text-align: left; }
  .market-empty-state { padding: 18px 16px; }
}

.community-card .backed-note { color: #8c847d; font-size: 13px; line-height: 1.65; }
.community-card .backed-bar { height: 7px; margin: 16px 0 10px; border-radius: 0; background: #24201d; }
.community-card .backed-bar i { background: linear-gradient(90deg, var(--signal), var(--ember-hi)); }
.community-card .backer-split { gap: 1px; margin: 17px 0; border: 1px solid #2d2926; background: #2d2926; }
.community-card .backer-split div { border: 0; border-radius: 0; background: #0b0a09; padding: 15px; }
.project-text-action { display: inline-flex; margin-top: 18px; color: var(--ember-hi); font: 650 12px/1 var(--mono); letter-spacing: .1em; text-decoration: none; }
.project-text-action:hover { color: #fff1d1; }

.project-side-card { padding: 23px; }

/* The badge a project pastes into its own site. The preview is the real
   endpoint rather than a mock-up, so what they see here is exactly what their
   visitors get - including the empty state if the listing ever leaves. */
.project-embed-card .embed-preview {
  display: block; width: 100%; height: auto; max-width: 360px;
  margin: 15px 0 13px; border-radius: 10px;
}
/* The snippet WRAPS rather than scrolling.
   One unbreakable line is allowed to push its container wider than the
   viewport, and `overflow-x: auto` does not stop it - `min-width` defaults to
   auto on a grid or flex item, so the whole column grows and the document gets
   a horizontal scrollbar. Constraining the ancestor chain fixed the desktop
   layout and not the phone, which reaches the card through different parents.
   Removing the unbreakable content fixes both, at every width, with no chain to
   keep correct. It is also what the rest of the page already does with contract
   addresses. */
.project-embed-card { min-width: 0; }
.embed-snippet {
  margin: 0 0 12px; padding: 11px 12px; max-width: 100%; min-width: 0;
  border: 1px solid #302b27; border-radius: 9px; background: rgba(6,6,7,.72);
}
.embed-snippet code {
  display: block; font: 12px/1.6 var(--mono); color: #b6ada4;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.share-copy.wide { display: block; width: 100%; text-align: center; }
.project-side-card > p { margin: 13px 0 0; color: #8d857e; font: 12.5px/1.65 var(--sans); }
.project-side-card p b { color: #e8ddd2; font-weight: 600; }
.project-side-card .cta.wide { margin-top: 19px; border-radius: 0; box-shadow: none; }
.project-side-card .cta.wide:hover { box-shadow: none; }
.claim-note.project-side-card { margin: 0; border-color: #5b3720; background: #15100c; }
.claim-note.project-side-card h2 { color: var(--ember-hi); }
.project-side-card .claim-how { color: #746b63; }
.compete-card { border-top: 3px solid var(--signal); }
.project-defend { display: block; margin-top: 16px; color: #aba198; font: 11px/1.45 var(--mono); text-decoration: none; }
.project-defend:hover { color: var(--ember-hi); }
.project-share-card .share { gap: 8px; margin-top: 18px; padding: 0; border: 0; }
.project-share-card .share-x, .project-share-card .share-copy { flex: 1; border-radius: 0; padding-inline: 10px; text-align: center; font-size: 12px; }
.project-mobile-actions { display: none; }

@media (max-width: 920px) {
  .project-profile-grid { grid-template-columns: 1fr; }
  .project-rank-card { border-top: 1px solid rgba(255,179,63,.14); border-left: 0; }
  .project-rank-number b { font-size: 82px; }
  .project-layout { grid-template-columns: 1fr; }
  .project-side-column { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .project-side-column > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .one-listing { padding-bottom: 82px; background-size: auto, 40px 40px, 40px 40px, auto; }
  .project-page { margin: 18px auto 40px; padding: 0 14px; }
  .project-identity { padding: 24px 20px 23px; }
  .project-eyebrow { margin-bottom: 19px; font-size: 11px; letter-spacing: .13em; }
  .project-title-row { align-items: flex-start; gap: 14px; }
  .project-avatar.logo { width: 64px; height: 64px; font-size: 28px; box-shadow: 7px 7px 0 rgba(240,82,45,.07); }
  .project-badges { margin-bottom: 5px; }
  .project-badges .badge { font-size: 11px; }
  .project-title-row h1 { font-size: clamp(28px, 9vw, 38px); }
  .project-symbol { margin-top: 8px; font-size: 11px; line-height: 1.4; }
  .project-blurb { margin-top: 20px; font-size: 14px; line-height: 1.55; }
  .project-contract { align-items: flex-start; flex-direction: column; gap: 7px; }
  .project-contract code { width: 100%; }
  .project-primary-actions { display: grid; grid-template-columns: 1fr; margin-top: 23px; }
  .project-primary-actions .visit-main { min-width: 0; }
  .project-rank-card { padding: 24px 20px; }
  .project-rank-number { margin-top: 17px; }
  .project-rank-number b { font-size: 72px; }
  .project-rank-metrics { gap: 8px; }
  .project-rank-metrics b { font-size: 13px; }
  .project-proof { grid-template-columns: 1fr 1fr; }
  .project-proof > div { padding: 14px 16px; }
  .project-proof > div + div { border-left: 0; border-top: 1px solid #292522; }
  .project-proof > div:nth-child(even) { border-left: 1px solid #292522; }
  .project-proof-label { grid-column: 1 / -1; border-left: 0 !important; }
  .project-proof-stat b { font-size: 20px; }
  .project-layout { margin-top: 12px; gap: 12px; }
  .project-main-column, .project-side-column { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .project-side-column > :last-child:nth-child(odd) { grid-column: auto; }
  .project-section, .project-side-card { padding: 20px 18px; }
  .project-section-head { margin-bottom: 18px; }
  .project-section-head h2, .project-side-card h2 { font-size: 19px; }
  .market-position .facts { grid-template-columns: 1fr 1fr; }
  .market-position .fact { padding: 14px 12px; }
  .community-card .backer-split { grid-template-columns: 1fr 1fr; }
  .project-mobile-actions {
    position: fixed; z-index: 35; display: grid; grid-template-columns: .82fr 1.18fr;
    left: 0; right: 0; bottom: 0; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #39312b; background: rgba(8,8,8,.95); backdrop-filter: blur(12px);
  }
  .project-mobile-actions a { display: grid; place-items: center; min-height: 44px; border-radius: 0; text-decoration: none; }
  .project-mobile-actions .ghost { border: 1px solid #3c3530; color: #d1c6bb; font: 650 12px/1 var(--mono); letter-spacing: .1em; }
  .project-mobile-actions .cta { color: #170b06; background: var(--signal); box-shadow: none; }
}

/* ------------------------------------------------------------------ toolbar */

.toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 18px;
}

.search { position: relative; flex: 1 1 240px; }
.search .glass {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--dim); font-size: 15px; pointer-events: none;
}
.search input { padding-left: 32px; }
.search input::-webkit-search-cancel-button { filter: invert(.6); }

.toolbar select {
  width: auto; min-width: 150px; color: var(--dim);
  background-image: none;
}
.toolbar select:focus { color: var(--text); }

.clear {
  background: none; border: 0; color: var(--ember); cursor: pointer;
  font: 11px/1 var(--mono); letter-spacing: .1em; padding: 8px;
}
.clear:hover { color: var(--ember-hi); }

.count { color: var(--dim); font-size: 11px; letter-spacing: .1em; margin-left: auto; }

/* `display: contents` makes the panel disappear as a box on a wide screen, so
   the selects sit in the toolbar's own flex row exactly as they always did. It
   becomes a real container only on a phone, where it folds. */
.filters { display: contents; }
.filters-toggle { display: none; }

/* ---------------------------------------------------------------- pagination */

.pager {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 26px; color: var(--dim); font-size: 12px;
}
.pager button {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); padding: 9px 16px; font: 12px var(--mono); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.pager button:hover:not([disabled]) { border-color: var(--ember); color: var(--ember-hi); }
.pager button[disabled] { opacity: .35; cursor: default; }

/* Category tags sit under the project name, quiet enough not to compete. */
.tags { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
/* Both, because the live board renders these as buttons (they filter) and the
   crawlable copy renders them as spans (there is nothing to click yet). */
.tags > * {
  font: 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); background: none;
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}
.tags button { cursor: pointer; }
.tags button:hover { border-color: var(--ember); color: var(--ember-hi); }

@media (max-width: 720px) {
  /* One row of chrome instead of three. The filters are secondary on a board
     this size - browsing is the job - so they fold behind a control that says
     how many are on. */
  .toolbar { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  /* A small basis, so the count keeps its place on the row instead of being
     pushed onto one of its own by a search field that grew to fill it. */
  .search { flex: 1 1 100px; min-width: 0; }
  .count { margin-left: 0; flex: none; font-size: 11px; }

  .filters-toggle {
    display: block; flex: none; white-space: nowrap;
    background: #101119; border: 1px solid var(--line); border-radius: 8px;
    color: var(--dim); padding: 11px 13px; font: 11px/1 var(--mono); letter-spacing: .08em;
    cursor: pointer;
  }
  .filters-toggle.on { border-color: var(--ember); color: var(--ember-hi); }

  /* Last in the row wherever it lands, so opening it does not push the count
     onto a line of its own. */
  .filters { display: none; flex-basis: 100%; gap: 8px; order: 1; }
  .filters.open { display: flex; flex-wrap: wrap; }
  .toolbar select { flex: 1 1 40%; min-width: 0; }
}

/* ------------------------------------------------------------ verification */

/* A badge means the listing proved control of the domain it points at. */
.badge {
  color: var(--cool); font-size: 11px; margin-left: 6px;
  border: 1px solid rgba(46,230,197,.35); border-radius: 4px; padding: 0 4px;
}

.ownline { margin: 4px 0 0; text-align: center; width: 100%; }
.ownline button {
  background: none; border: 0; color: var(--dim); cursor: pointer;
  font: 11px var(--mono); letter-spacing: .06em; padding: 6px;
}
.ownline button:hover { color: var(--ember-hi); }

/* ------------------------------------------------------------------- terms */

/* Stated where the money decision is made, not only in the footer. */
.terms {
  border: 1px solid #4a2a12; border-radius: 10px; background: #140d07;
  padding: 14px; font-size: 12px; color: var(--dim); line-height: 1.7;
}
.terms b { display: block; color: var(--ember-hi); font-weight: 500; margin-bottom: 6px; letter-spacing: .04em; }
.terms ul { margin: 0; padding-left: 16px; }
.terms li { margin-bottom: 3px; }

.finality {
  margin: -4px 0 0; font-size: 12px; color: var(--dim); text-align: center; width: 100%;
}

footer b { color: var(--ember-hi); font-weight: 500; }

/* Arriving to beat a listing, not to fund it. The wrong one of these costs the
   payer money and hands it to their rival, so it is stated, not implied. */
.taking {
  margin: 0; padding: 12px; border-radius: 10px; font-size: 12px; line-height: 1.7;
  font-family: var(--sans);
  background: #1a1005; border: 1px solid #5a3200; color: var(--dim);
}
.taking b { color: var(--ember-hi); font-weight: 500; }

.one-alt {
  font-family: var(--sans); font-size: 12px; color: var(--dim);
  margin: 10px 0 0; text-align: center; line-height: 1.7;
}
.one-alt b { color: var(--text); font-weight: 500; }
.one-alt a { color: var(--ember-hi); }

/* A note, not a warning: boosting somebody else's listing is a feature. */
.boosting {
  margin: 0; padding: 12px; border-radius: 10px; font-size: 12px; line-height: 1.7;
  background: #0e1519; border: 1px solid #1c3239; color: var(--dim);
}
.boosting b { color: var(--cool); font-weight: 500; }

/* --------------------------------------------------------------------- hero */

/* The page has to say what it is to someone who arrived from a search result
   and has never heard of any of this. */
.explain h1 {
  font-size: 26px; font-weight: 500; line-height: 1.35; margin: 0 0 14px;
  letter-spacing: -.01em; color: var(--text);
}
.explain .chains { font-size: 12px; color: #5f6379; margin-top: 12px; }

@media (max-width: 720px) {
  /* A quarter of the screen spent on the pitch buries the leaderboard, which
     is the thing that actually explains the product. The headline still says
     what the site is; the rest is one tap away under HOW IT WORKS. */
  .explain h1 { font-size: 18px; line-height: 1.28; margin-bottom: 8px; }
  /* The second clause of each beat: worth reading, not worth two lines of a
     phone screen. Hidden by CSS rather than dropped, so it stays in the
     document for a crawler and for anyone on a wider screen. */
  .beat-more { display: none; }
  .how { margin-top: 10px; }
  .how summary { padding: 6px 10px; font-size: 11px; }
}

/* ------------------------------------------------------------ disclosure */

/* Comped heat. The board's whole claim is that ranking was paid for, so a
   listing that did not pay has to say so on its face. */
/* A listing that paid AND was given extra. Not the same claim as `featured`,
   so not the same colour: cyan reads as a credit rather than a caveat. */
/* Listing something is not being it. An unverified listing says so, in the
   same place a verified one says the opposite. */
/* The contract is the identity, so a contract already on the board is not a
   validation error - it is a different listing, and the useful answer is a way
   to reach it. */
.already {
  margin: 0; padding: 11px 12px; border-radius: 9px;
  background: rgba(46,230,197,.06); border: 1px solid rgba(46,230,197,.28);
  font-family: var(--sans); font-size: 12px; line-height: 1.6; color: var(--dim);
}
.already b { color: var(--cool); font-weight: 600; }
.already a { color: var(--cool); }
.already button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ember-hi); font: inherit; text-decoration: underline;
}

.badge.unclaimed {
  color: #9a9186;
  border-color: rgba(154,145,134,.3);
  text-transform: uppercase; letter-spacing: .08em;
}

/* The claim that has no automatic answer. Not an error - the request landed,
   it is simply decided by a person. */
.claim-pending {
  border: 1px solid #4a3a12; background: #141107; border-radius: 10px;
  padding: 13px 14px; width: 100%;
}
.claim-pending b { display: block; color: var(--ember-hi); font-family: var(--sans); margin-bottom: 5px; }
.claim-pending p { margin: 0; font-family: var(--sans); font-size: 12px; line-height: 1.6; color: var(--dim); }
.claim-ref { margin-top: 8px !important; }
.claim-more { margin-top: 14px; border-top: 1px solid #3a2e10; padding-top: 12px; }
.claim-more .field { margin-top: 10px; }
.claim-more textarea {
  width: 100%; resize: vertical; font-family: var(--sans); font-size: 12px;
  line-height: 1.5; padding: 10px 12px;
}
.claim-lookup { margin-top: 14px; }
.claim-lookup summary {
  cursor: pointer; font-family: var(--sans); font-size: 12px; color: var(--dim);
}
.claim-lookup summary:hover { color: var(--text); }
.claim-lookup .field { margin-top: 10px; }
.claim-ref code { color: var(--text); }

.claim-note {
  border: 1px solid var(--line); border-radius: 12px; background: #0b0c11;
  padding: 16px; margin-top: 18px;
}
.claim-note p { font-family: var(--sans); font-size: 13px; line-height: 1.65; color: var(--dim); margin: 0; }
.claim-note p b { color: var(--text); font-weight: 600; }
.claim-note .cta.wide { margin-top: 14px; }
.claim-how { margin-top: 12px !important; font-size: 12px !important; }

.badge.promo {
  color: var(--cool);
  border-color: rgba(46,230,197,.35);
}

.badge.featured {
  color: var(--ember-hi);
  border-color: rgba(255,194,71,.35);
}

/* Simulated rows. Everything here is deliberately unlike a real row: struck
   through the middle, dimmed, and impossible to mistake for the board. */
.examples {
  margin-top: 34px; padding: 16px; border-radius: 12px;
  border: 1px dashed #3a3d52; background: repeating-linear-gradient(
    135deg, transparent, transparent 12px, rgba(255,255,255,.012) 12px, rgba(255,255,255,.012) 24px);
}
.examples-banner {
  margin: 0 0 14px; font-size: 12px; line-height: 1.7; color: var(--dim);
}
.examples-banner b { color: var(--text); font-weight: 500; }
.examples .row { opacity: .55; background: #0b0c11; }
.examples .row .fill { display: none; }
.examples .rank { color: #4a4d61; }
.examples .row .meta a { pointer-events: none; color: var(--dim); }

.sim {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #8a8ea6; border: 1px solid #3a3d52; border-radius: 4px; padding: 1px 5px; margin-left: 6px;
}

/* ------------------------------------------------------------------ operator */

/* The console is deliberately plainer than the board: it is a place to do
   work, and every button here spends real money or removes somebody's listing. */

.console { max-width: 860px; margin: 34px auto 80px; padding: 0 24px; display: grid; gap: 18px; }

.card {
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  padding: 22px; display: block;
}
.card h2 { margin-top: 0; }
.card .count { float: right; font-size: 11px; color: var(--dim); letter-spacing: .1em; }

/* Comping is occasional work, so it is folded away under the daily work:
   payments to review, then the numbers, then the listings. */
.card > details > summary { cursor: pointer; }
.card > details > summary h2 { display: inline; }
.card > details[open] > summary { margin-bottom: 14px; }

.locked { max-width: 460px; margin: 60px auto; display: block; }
.locked h2 { margin-top: 0; }

.row-2 { display: flex; gap: 14px; }
.row-2 .field { flex: 1; min-width: 0; }
.new-only { border-left: 2px solid var(--line); padding-left: 14px; margin: 4px 0 14px; }

.filter { margin-bottom: 0; flex: 1 1 220px; }

/* Keeping a comped board warm is a recurring job, so the control for it lives
   next to the listings rather than inside the comp form. */
.listing-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.listing-tools button {
  background: #101119; border: 1px solid var(--line); border-radius: 8px; color: var(--dim);
  padding: 11px 14px; font: 11px/1 var(--mono); letter-spacing: .08em; cursor: pointer;
  white-space: nowrap;
}
.listing-tools button:hover { border-color: var(--ember); color: var(--ember-hi); }
.listing-tools button[disabled] { opacity: .4; cursor: wait; }

.admin-row {
  display: flex; align-items: center; gap: 8px; padding: 12px 0;
  border-top: 1px solid var(--line);
}
.admin-row .grow { flex: 1; min-width: 0; font-size: 13px; }
.admin-row small { display: block; color: var(--dim); font-size: 11px; margin-top: 3px; }
.admin-row small.hash { word-break: break-all; color: #5f6379; }
.admin-row button {
  background: #101119; border: 1px solid var(--line); border-radius: 8px; color: var(--dim);
  padding: 7px 12px; font: 11px var(--mono); cursor: pointer; white-space: nowrap;
}
.admin-row button:hover { border-color: var(--ember); color: var(--ember-hi); }
.admin-row button.go:hover { border-color: var(--cool); color: var(--cool); }
.admin-row button.danger:hover { border-color: var(--bad); color: var(--bad); }
.admin-row button[disabled] { opacity: .4; cursor: wait; }

/* A claim waiting on a person. The things the claimant TOLD us are set apart
   from the things we know, because a reviewer acting on the first as though it
   were the second is the whole failure this queue exists to prevent. */
.admin-row.claim.open { border-left: 2px solid var(--ember); }
.admin-row.claim.done { opacity: .62; }
.claim-said {
  font-size: 12px !important; color: var(--dim) !important;
  border-left: 2px solid #2a2f3d; padding-left: 8px; margin-top: 5px !important;
}
.claim-said b { color: var(--text); font-weight: 500; }
.claim-said i { color: #6a6f80; }
.field.actor { max-width: 320px; margin-bottom: 14px; }
.stats .urgent b { color: var(--ember-hi); }


.badge.bad { color: var(--bad); border-color: rgba(255,77,109,.35); }
.none { padding: 14px 0 0; }

@media (max-width: 720px) {
  .row-2 { flex-direction: column; gap: 0; }
  .admin-row { flex-wrap: wrap; }
  .admin-row .grow { flex-basis: 100%; margin-bottom: 8px; }
}

/* An edit form belongs under the row it edits, not in a modal over it. */
.edit-form {
  flex-basis: 100%; margin: 12px 0 4px; padding: 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #0b0c11;
}
.edit-form .field { margin-bottom: 10px; }
.edit-form button { margin-top: 4px; }

/* Numbers, laid out to be read in one pass rather than studied. */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #0b0c11; }
.stat span { display: block; font-size: 11px; letter-spacing: .13em; color: var(--dim); margin-bottom: 5px; }
.stat b { font-size: 19px; font-weight: 500; }
.stat i { font-style: normal; font-size: 11px; color: var(--dim); display: block; margin-top: 3px; }
.stat.good b { color: var(--cool); }
.stat.warn b { color: var(--ember-hi); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.split h3 { font-size: 12px; letter-spacing: .12em; color: var(--dim); font-weight: 500; margin: 0 0 4px; }
.bar { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 5px 0; }
.bar span:first-child { width: 74px; color: var(--dim); }
.bar .track { flex: 1; height: 6px; background: #14161f; border-radius: 3px; overflow: hidden; }
.bar .track i { display: block; height: 100%; background: var(--ember); }
.bar .num { width: 62px; text-align: right; color: var(--dim); font-size: 11px; }

@media (max-width: 720px) { .split { grid-template-columns: 1fr; } }

/* Buying heat for somebody else's listing is a first-class action, so it sits
   on their row rather than behind a form you have to know a ticker to use. */
.boost {
  display: block; margin: 6px 0 0 auto;
  background: #14161f; border: 1px solid var(--line); border-radius: 6px;
  color: var(--dim); padding: 4px 9px; font: 11px/1 var(--mono); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.boost:hover { border-color: var(--ember); color: var(--ember-hi); }
.row.throne .boost { border-color: #5a2f0a; }

@media (max-width: 720px) {
  .boost { margin: 0; padding: 5px 9px; }
}

/* -------------------------------------------------------------- the podium */

/* The top three are what a visitor reads first, so they are built to be read
   first: taller, brighter, and numbered in a size you can see from the tape. */
.row.podium { padding: 20px 16px; }
.row.podium .rank { font-size: 30px; font-weight: 500; }
.row.podium .logo { width: 46px; height: 46px; font-size: 22px; }
.row.podium .meta a { font-size: 17px; }
.row.podium .heat { font-size: 20px; }

/* #1 already flickers. #2 and #3 cool off toward the rest of the board, which
   is the mechanic made visible: the further down, the slower you burn. */
.row.rank-2 {
  border-color: #45301c;
  background: linear-gradient(180deg, #121017, var(--panel));
}
.row.rank-2 .rank { color: #d59a5e; }
.row.rank-3 {
  border-color: #33283a;
  background: linear-gradient(180deg, #100f16, var(--panel));
}
.row.rank-3 .rank { color: #9c7fa8; }

/* ------------------------------------------------------------------ the CA */

/* The contract address is what somebody copies to go and buy the thing. */
.ca {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 5px;
  background: #101119; border: 1px solid var(--line); border-radius: 6px;
  color: #5f6379; padding: 3px 7px; font: 11px/1.4 var(--mono); cursor: pointer;
}
.ca span { color: var(--dim); letter-spacing: .02em; }
/* Already ellipsised to fit; wrapping it would break an address in half. */
.ca { font-size: 11px; white-space: nowrap; }
.ca:hover { border-color: var(--cool); color: var(--cool); }
.ca:hover span { color: var(--cool); }

@media (max-width: 720px) {
  .row.podium { padding: 14px 12px; }
  .row.podium .rank { font-size: 24px; }
  .row.podium .logo { width: 36px; height: 36px; font-size: 18px; }
  .row.podium .meta a { font-size: 15px; }
  .row.podium .heat { font-size: 17px; }
}

/* ===================================================== ARENA REDESIGN =====
   The leaderboard is the product, not a table under a landing page. This pass
   gives it the visual grammar of a live market: an editorial masthead, a clear
   mechanic, a dominant throne and a quieter ladder underneath. */

html { scroll-behavior: smooth; }

body:not(.admin)::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
          mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.top {
  min-height: 66px; padding: 12px 28px; gap: 24px; flex-wrap: nowrap;
  border-color: var(--line-soft);
  background: rgba(8,7,6,.82);
  box-shadow: 0 1px 0 rgba(255,255,255,.025);
}
.brand { flex: none; }
.mark { filter: drop-shadow(0 0 8px rgba(255,86,48,.55)); }
.wordmark { font-family: var(--mono); font-weight: 600; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a {
  color: var(--dim); text-decoration: none; font: 11px/1 var(--mono);
  letter-spacing: .09em; text-transform: uppercase; transition: color .2s;
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: #eee8e1; }
.site-nav a[aria-current="page"]::after {
  content: ''; display: block; width: 100%; height: 1px; margin-top: 7px;
  background: linear-gradient(90deg, var(--ember), var(--ember-hi));
  box-shadow: 0 0 9px rgba(255,86,48,.35);
}
.one-listing .site-nav,
.token-shell .site-nav,
.markets-shell .site-nav { margin-left: auto; }
.one-listing .site-nav + .ghost,
.token-shell .site-nav + .ghost,
.markets-shell .site-nav + .ghost { display: none; margin-left: 0; }
.stats { gap: 20px; }
.stats span { font-family: var(--mono); font-size: 11px; }
.stats b { font-family: var(--mono); }
.top .cta, .top .ghost { min-height: 40px; }

.cta {
  position: relative; overflow: hidden; border-radius: 10px;
  background: linear-gradient(120deg, #ffd062 0%, var(--ember-hi) 38%, var(--ember) 100%);
  box-shadow: 0 8px 30px rgba(255,86,48,.22), inset 0 1px rgba(255,255,255,.38);
}
.cta::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.3) 45%, transparent 65%);
  transform: translateX(-130%); transition: transform .55s ease;
}
.cta:hover::after { transform: translateX(130%); }
.ghost { border-color: var(--line-soft); background: rgba(255,255,255,.018); }

/* ---------------------------------------------------------------- masthead */

.explain {
  max-width: 1180px; margin: 0 auto; padding: 68px 32px 50px;
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  align-items: center; gap: clamp(36px, 6vw, 78px);
}
.hero-copy { min-width: 0; }
.eyebrow {
  display: flex; align-items: center; gap: 9px; margin: 0 0 18px;
  color: var(--dim); font: 600 11px/1 var(--mono); letter-spacing: .18em;
  text-transform: uppercase;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--ember); box-shadow: 0 0 0 5px rgba(255,86,48,.1), 0 0 18px var(--ember);
  animation: livepulse 2.2s ease-in-out infinite;
}
@keyframes livepulse { 50% { opacity: .42; box-shadow: 0 0 0 2px rgba(255,86,48,.08) } }

.explain h1 {
  margin: 0; max-width: 760px; color: var(--text);
  font: 800 clamp(54px, 6.2vw, 88px)/.93 var(--sans);
  letter-spacing: -.062em;
}
.explain h1 span {
  color: transparent;
  background: linear-gradient(110deg, var(--ember-hi), var(--ember) 68%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 10px 28px rgba(255,86,48,.14));
}
.hero-lede {
  max-width: 630px; margin: 26px 0 0 !important;
  color: #b2aaa0 !important; font-size: 17px !important; line-height: 1.72;
}
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.hero-actions .cta, .hero-actions .ghost { min-height: 46px; padding-inline: 20px; }
.accepted {
  display: flex; align-items: center; gap: 9px; margin: 20px 0 0 !important;
  color: var(--cool) !important; font: 11px/1 var(--mono) !important; letter-spacing: .08em;
}
.accepted span { color: var(--dim); font-size: 11px; letter-spacing: .16em; }

.mechanic-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-soft); border-radius: 22px; padding: 22px;
  background:
    radial-gradient(100% 70% at 100% 0, rgba(255,86,48,.115), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    rgba(17,16,15,.9);
  box-shadow: 0 26px 80px -46px rgba(255,86,48,.7), inset 0 1px rgba(255,255,255,.045);
}
.mechanic-card::before {
  content: ''; position: absolute; width: 140px; height: 140px; right: -70px; top: -70px;
  border: 1px solid rgba(255,179,63,.15); border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255,179,63,.025), 0 0 0 58px rgba(255,179,63,.018);
}
.mechanic-card > * { position: relative; }
.mechanic-head {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.mechanic-head span { color: var(--ember-hi); font: 600 11px/1 var(--mono); letter-spacing: .18em; }
.mechanic-head b { color: var(--dim); font: 500 12px/1 var(--sans); }

.mechanic-card .loop {
  display: flex; flex-direction: column; gap: 0; margin: 4px 0 0; padding: 0;
  counter-reset: mechanic;
}
.mechanic-card .loop li {
  display: grid; grid-template-columns: 30px 1fr;
  align-items: start; gap: 14px; padding: 15px 0;
  border-bottom: 1px solid var(--line-soft); counter-increment: mechanic;
}
.mechanic-card .loop li::before {
  content: '0' counter(mechanic); display: grid; place-items: center;
  width: 30px; height: 30px; border: 1px solid rgba(255,179,63,.22); border-radius: 9px;
  color: var(--ember-hi); background: rgba(255,179,63,.055);
  font: 600 11px/1 var(--mono); letter-spacing: .08em;
  grid-column: 1; grid-row: 1 / span 2;
}
.beat-no {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 1px solid rgba(255,179,63,.22); border-radius: 9px;
  color: var(--ember-hi); background: rgba(255,179,63,.055);
  font: 600 11px/1 var(--mono); letter-spacing: .08em;
}
.mechanic-card .loop li > div { min-width: 0; }
.mechanic-card .loop li b {
  display: block; margin: 0 0 2px; color: var(--text);
  font: 600 13px/1.35 var(--sans);
  grid-column: 2;
}
.mechanic-card .loop li > span {
  display: block; color: var(--dim); font: 12px/1.45 var(--sans);
  grid-column: 2;
}
.mechanic-card .loop li > span b { display: inline; color: inherit; font: inherit; }
.mechanic-card .beat-more { display: none; }
.mechanic-card .loop strong { color: var(--ember-hi); font-family: var(--mono); font-weight: 500; }

.decay-demo { display: grid; gap: 8px; margin-top: 17px; }
.decay-row { display: grid; grid-template-columns: 30px 1fr 38px; align-items: center; gap: 9px; }
.decay-row span, .decay-row b { color: var(--dim); font: 11px/1 var(--mono); letter-spacing: .08em; }
.decay-row b { text-align: right; font-weight: 500; }
.decay-row i { display: block; height: 4px; border-radius: 999px; background: #28231f; overflow: hidden; }
.decay-row i::after { content: ''; display: block; height: 100%; border-radius: inherit; }
.decay-row.hot i::after { width: 44%; background: linear-gradient(90deg, var(--ember-hi), var(--ember)); }
.decay-row.warm i::after { width: 66%; background: #bf764a; }
.decay-row.cool i::after { width: 82%; background: var(--cool); }
.mechanic-card .how { margin-top: 18px; }
.mechanic-card .how summary {
  border: 0; padding: 0; color: var(--dim); text-transform: none;
  font-size: 11px; letter-spacing: .05em;
}
.mechanic-card .how summary:hover { color: var(--ember-hi); }
.mechanic-card .how p { margin: 12px 0 0; font-size: 12.5px; line-height: 1.65; }

/* -------------------------------------------------------------- live strip */

.tape {
  margin: 0 0 42px; padding: 10px 0;
  border-color: var(--line-soft); background: rgba(11,10,9,.78);
}
.tape-track span { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; }

/* ------------------------------------------------------------ leaderboard */

main { max-width: 1180px; padding: 0 32px; }
.board-title {
  display: flex; justify-content: space-between; align-items: end; gap: 24px;
  margin: 0 0 18px;
}
.board-title .eyebrow { margin-bottom: 8px; }
.board-title h2 {
  margin: 0; color: var(--text); font: 750 clamp(28px, 3.3vw, 42px)/1 var(--sans);
  letter-spacing: -.035em;
}
.board-title > p { margin: 0 0 3px; color: var(--dim); font: 11px/1.4 var(--mono); }

.toolbar {
  gap: 8px; margin-bottom: 16px; padding: 9px;
  border: 1px solid var(--line-soft); border-radius: 15px;
  background: rgba(17,16,15,.72); box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.toolbar input, .toolbar select {
  min-height: 42px; border-color: transparent; background-color: rgba(255,255,255,.035);
}
.toolbar input:hover, .toolbar select:hover { border-color: var(--line-soft); }
.toolbar .count { padding-inline: 8px; font-family: var(--mono); }

.podium { margin-bottom: 30px; }
.crown {
  border-radius: 24px; padding: 27px 28px 28px; column-gap: 36px;
  border-color: rgba(255,160,48,.42);
  background:
    radial-gradient(75% 155% at 0 0, rgba(255,179,63,.19), transparent 63%),
    radial-gradient(80% 140% at 100% 0, rgba(255,86,48,.11), transparent 70%),
    linear-gradient(155deg, #19120d 0%, #110e0c 56%, #0e0d0c 100%);
  box-shadow: 0 28px 100px -52px rgba(255,86,48,.95), inset 0 1px rgba(255,255,255,.055);
}
.crown-top { margin-bottom: 23px; }
.crown-label { font-size: 11px; }
.ident .logo {
  width: 64px; height: 64px; border-radius: 17px;
  border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.045);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.22);
}
.ident .who a { font-size: 23px; font-weight: 650; letter-spacing: -.02em; }
.ident .who small { margin-top: 3px; color: #a69e94; font-family: var(--sans); }
.crown-heat > span {
  display: block; margin-bottom: 4px; color: var(--dim);
  font: 600 11px/1 var(--mono); letter-spacing: .16em;
}
.crown-heat b { font-size: clamp(42px, 5vw, 60px); letter-spacing: -.055em; }
.crown-heat i { color: #a69e94; }
.crown-race {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px; margin-top: 24px; padding: 14px 15px;
  border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(0,0,0,.16);
}
.race-copy { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.race-copy span, .race-pressure { color: var(--dim); font: 12px/1.4 var(--mono); letter-spacing: .06em; }
.race-copy b { color: var(--text); font: 500 13px/1 var(--mono); }
.race-track { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.06); }
.race-track i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #9b6450, var(--ember-hi));
  box-shadow: 0 0 18px rgba(255,179,63,.3);
}
.race-pressure { text-align: right; }
.crown-eta { margin-top: 10px; border-color: rgba(255,86,48,.18); }
.crown .cta.wide { min-height: 48px; margin-top: 12px; }

.runners { gap: 14px; margin-top: 14px; }
.runner {
  border-radius: 17px; padding: 18px; gap: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.026), transparent), var(--panel);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  transition: transform .22s, border-color .22s, background .22s;
}
.runner:hover { transform: translateY(-2px); border-color: rgba(255,179,63,.28); background-color: var(--panel-hi); }
.runner .place { font-size: 22px; font-family: var(--mono); }
.runner-heat { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.runner-heat b { font-size: 27px; letter-spacing: -.035em; }
.cta.take { min-height: 39px; display: grid; place-items: center; }

.section-rule {
  display: flex; align-items: center; gap: 14px; margin: 0 0 14px;
  color: var(--dim); font: 600 11px/1 var(--mono); letter-spacing: .18em;
}
.section-rule i { flex: 1; height: 1px; background: var(--line-soft); }

.board-head, .row { grid-template-columns: 58px 1fr 118px 116px 132px; }
.board-head { padding-inline: 18px; font-family: var(--mono); font-size: 11px; }
.board { gap: 9px; }
.row {
  min-height: 76px; padding: 15px 18px; border-radius: 14px;
  border-color: var(--line-soft); background: rgba(17,16,15,.82);
  box-shadow: inset 0 1px rgba(255,255,255,.018);
  transition: transform .22s ease, border-color .22s, background .22s;
}
.row:hover { transform: translateX(3px); border-color: rgba(255,179,63,.24); background: var(--panel-hi); }
.row .fill {
  inset: auto auto 0 0; height: 2px;
  background: linear-gradient(90deg, var(--ember), rgba(255,179,63,.18));
}
.rank, .heat, .burn, .pass, .tick, .ca, .tags > * { font-family: var(--mono); }
.rank { font-size: 18px; font-weight: 500; }
.meta a { font-family: var(--sans); font-weight: 650; letter-spacing: -.01em; }
.meta small { margin-top: 2px; font-family: var(--sans); }
.heat { font-size: 18px; font-weight: 550; text-align: right; }
.burn, .pass { text-align: right; }
.pass .boost, .pass .share-chip { display: inline-flex; }
.boost { border-color: var(--line-soft); background: rgba(255,255,255,.025); }

/* -------------------------------------------------------- first-page stage */

.podium {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, .85fr);
  align-items: stretch; gap: 12px;
}
.crown {
  min-height: 248px; isolation: isolate;
  padding: 22px 24px 23px; column-gap: 28px;
  border-color: rgba(255,184,74,.5);
  background:
    radial-gradient(55% 110% at 4% 0, rgba(255,192,83,.2), transparent 67%),
    radial-gradient(44% 100% at 96% 8%, rgba(255,78,44,.16), transparent 72%),
    linear-gradient(115deg, rgba(255,255,255,.035), transparent 35%),
    linear-gradient(155deg, #1b130c 0%, #110d0b 58%, #0c0c0b 100%);
  box-shadow:
    0 32px 100px -48px rgba(255,76,39,.95),
    0 0 0 1px rgba(255,184,74,.055),
    inset 0 1px rgba(255,255,255,.075);
}
.crown::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(255,255,255,.025) 50%, transparent 50.1%),
    linear-gradient(0deg, transparent 49.9%, rgba(255,255,255,.018) 50%, transparent 50.1%);
  background-size: 70px 70px; mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.crown-watermark {
  position: absolute; z-index: 0; right: 19px; top: 20px;
  color: rgba(255,192,82,.04); font: 800 clamp(92px, 11vw, 132px)/.8 var(--sans);
  letter-spacing: -.12em; pointer-events: none; user-select: none;
}
.crown-top {
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,188,75,.13);
}
.crown-label { display: inline-flex; align-items: center; gap: 8px; }
.crown-label > i {
  display: inline-block; width: 9px; height: 9px; transform: rotate(45deg);
  border: 1px solid var(--ember-hi); background: rgba(255,179,63,.16);
  box-shadow: 0 0 18px rgba(255,179,63,.7);
}
.live-seat {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px;
  border: 1px solid rgba(98,218,179,.18); border-radius: 999px;
  color: var(--cool); background: rgba(98,218,179,.045);
  font: 600 11px/1 var(--mono); letter-spacing: .13em;
}
.live-seat i { width: 5px; height: 5px; border-radius: 50%; background: var(--cool); box-shadow: 0 0 9px var(--cool); }
.crown .ident { align-self: center; }
.crown .ident .logo {
  width: 62px; height: 62px; border-radius: 17px; font-size: 29px;
  border-color: rgba(255,188,75,.24);
  background: linear-gradient(145deg, rgba(255,195,90,.14), rgba(255,255,255,.025));
  box-shadow: 0 18px 45px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.09), 0 0 35px rgba(255,131,45,.08);
}
.crown .ident .who a { font-size: clamp(23px, 2.5vw, 31px); font-weight: 720; }
.crown .ident .tick { color: var(--ember-hi); }
.crown .ident .who small { max-width: 500px; font-size: 13px; }
.crown-heat {
  min-width: 190px; padding: 13px 15px; border-radius: 14px;
  border: 1px solid rgba(255,188,75,.13); background: rgba(0,0,0,.16);
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.crown-heat b { font-size: clamp(43px, 4.4vw, 54px); }
.crown-race {
  margin-top: 14px; padding: 10px 12px;
  background: rgba(6,6,5,.34); border-color: rgba(255,188,75,.12);
}
.crown-eta { margin-top: 8px; padding-block: 8px; }
.crown .cta.wide {
  min-height: 44px; margin-top: 9px; border-color: rgba(255,207,106,.72);
  background: linear-gradient(110deg, #ffc85b, #ff9c43 52%, #ff5937);
  color: #1a0d05; box-shadow: 0 13px 38px -18px rgba(255,91,47,.9), inset 0 1px rgba(255,255,255,.38);
}

.runners {
  grid-template-columns: 1fr; grid-template-rows: 1fr 1fr;
  gap: 12px; margin: 0;
}
.runner {
  position: relative; overflow: hidden; min-height: 0; padding: 14px 15px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'top top' 'identity heat' 'gap action' 'proof proof';
  align-items: center; gap: 8px 12px;
  border-radius: 16px; isolation: isolate;
  box-shadow: 0 18px 55px -42px rgba(0,0,0,.9), inset 0 1px rgba(255,255,255,.045);
}
.runner::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 85% at 100% 0, var(--runner-glow), transparent 72%);
}
.runner.rank-2 { --runner-glow: rgba(214,154,94,.18); border-color: rgba(214,154,94,.34); }
.runner.rank-3 { --runner-glow: rgba(170,112,87,.15); border-color: rgba(170,112,87,.28); }
.runner-top { grid-area: top; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.055); }
.runner-top > div { display: flex; align-items: baseline; gap: 10px; }
.runner .place { font-size: 24px; font-weight: 650; letter-spacing: -.06em; }
.runner-kicker { color: var(--dim); font: 600 11px/1 var(--mono); letter-spacing: .15em; }
.runner .ident { grid-area: identity; margin-top: 0; }
.runner .ident .logo { width: 40px; height: 40px; border-radius: 11px; }
.runner .ident .who a { font-size: 16px; font-weight: 680; }
.runner .ident .who small, .runner .ident .tags, .runner .ident .ca { display: none; }
.runner-heat {
  grid-area: heat; display: block; margin: 0; padding: 0; border: 0; text-align: right;
}
.runner-heat > span { display: block; margin-bottom: 3px; color: var(--dim); font: 600 11px/1 var(--mono); letter-spacing: .14em; }
.runner-heat b { font-size: 24px; line-height: 1; letter-spacing: -.05em; }
.runner-heat i { text-align: right; }
.runner-gap { grid-area: gap; display: flex; justify-content: flex-start; align-items: center; gap: 8px; }
.runner-gap span { color: var(--dim); font: 600 11px/1 var(--mono); letter-spacing: .13em; }
.runner-gap b { color: #bcb1a5; font: 500 12px/1 var(--mono); }
.runner .cta.take {
  grid-area: action; min-height: 34px; margin: 0; padding: 8px 10px;
  border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.025); font-size: 11px;
}
.runner.rank-2 .cta.take:hover { border-color: #d69a5e; color: #efba82; background: rgba(214,154,94,.06); }
.runner.rank-3 .cta.take:hover { border-color: #aa7057; color: #d29a80; background: rgba(170,112,87,.06); }

.row.first-page {
  position: relative; overflow: hidden; min-height: 78px; padding-block: 13px;
  border-color: rgba(255,255,255,.065);
  background:
    radial-gradient(45% 170% at 100% 0, rgba(255,255,255,.026), transparent 72%),
    linear-gradient(100deg, rgba(255,255,255,.018), transparent 42%),
    rgba(17,16,15,.88);
  box-shadow: inset 0 1px rgba(255,255,255,.028), 0 13px 45px -42px rgba(0,0,0,.9);
}
.row.first-page::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--zone, #655c54); box-shadow: 0 0 18px var(--zone, #655c54);
}
.row.first-page.hot-zone { --zone: #ff7447; background-color: rgba(28,18,13,.9); }
.row.first-page.contender-zone { --zone: #b67a50; }
.row.first-page.field-zone { --zone: #5d7771; }
.row.first-page:hover { transform: translateX(5px); border-color: color-mix(in srgb, var(--zone) 42%, transparent); }
.row.first-page .rank {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.075); border-radius: 10px;
  color: #d0c6bb; background: rgba(255,255,255,.025); font-size: 18px;
}
.row.first-page .rank::after {
  content: 'RANK'; position: absolute; bottom: -14px;
  color: #655d56; font: 600 11px/1 var(--mono); letter-spacing: .13em;
}
.row.first-page .proj .logo { width: 44px; height: 44px; border-radius: 12px; font-size: 21px; }
.row.first-page .meta a { font-size: 16px; }
.row.first-page .heat { color: #f2e9df; font-size: 20px; letter-spacing: -.035em; }
.row.first-page .burn { color: #76bca8; }
.row.first-page .pass b { font-size: 14px; }
.rank-status {
  display: inline-flex; margin: 6px 0 0 7px; padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--zone) 34%, transparent); border-radius: 999px;
  color: var(--zone); background: color-mix(in srgb, var(--zone) 6%, transparent);
  font: 600 11px/1 var(--mono); letter-spacing: .1em; vertical-align: top;
}

.mobile-actions { display: none; }
footer { max-width: 1180px; border-color: var(--line-soft); }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1380px) {
  /* Five live metrics plus global navigation are more valuable here than a
     duplicate secondary action; listing remains inside the primary flow. */
  #openList { display: none; }
  .stats { gap: 14px; }
}

@media (max-width: 1180px) {
  .site-nav { display: none; }
  .one-listing .site-nav + .ghost,
  .token-shell .site-nav + .ghost,
  .markets-shell .site-nav + .ghost { display: inline-block; margin-left: auto; }
}

@media (max-width: 1060px) {
  .site-nav { display: none; }
  .one-listing .site-nav + .ghost,
  .token-shell .site-nav + .ghost,
  .markets-shell .site-nav + .ghost { display: inline-block; margin-left: auto; }
  .stats div:first-child, .stats div:last-child { display: none; }
  .explain { gap: 34px; }
}

@media (max-width: 820px) {
  .explain { grid-template-columns: 1fr; padding-top: 48px; }
  .hero-copy { max-width: 700px; }
  .mechanic-card { max-width: 700px; }
  .podium { grid-template-columns: 1fr; }
  .runners { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .board-head, .row { grid-template-columns: 46px 1fr 100px 98px 116px; gap: 10px; }
}

@media (max-width: 720px) {
  body { padding-bottom: 112px; }
  body.drawer-open .mobile-actions { display: none; }

  .top { min-height: 56px; padding: 10px 15px; }
  /* The board's header buttons fold away on a phone - the drawer carries them.
     A standalone page has no drawer, so its back link is the only route to the
     board and has to survive this. */
  .top .ghost, .top .cta { display: none; }
  .one-listing .top .ghost { display: inline-block; }
  .token-shell .top .ghost, .markets-shell .top .ghost { display: inline-block; }
  .stats { display: flex; }
  .stats div.key { display: flex; }
  .stats div:not(.key) { display: none; }

  .explain {
    display: grid; margin: 0; padding: 27px 16px 18px; gap: 16px;
  }
  .eyebrow { margin-bottom: 11px; font-size: 11px; }
  .explain h1 { font-size: clamp(34px, 10vw, 40px); line-height: .98; letter-spacing: -.052em; }
  .hero-lede { margin-top: 14px !important; font-size: 13px !important; line-height: 1.5; }
  .hero-actions { margin-top: 17px; }
  .hero-actions .cta, .hero-actions .ghost { min-height: 44px; }
  .hero-actions .hero-list { display: none; }
  .hero-actions .hero-cta { width: 100%; }
  .accepted { margin-top: 12px !important; font-size: 11px !important; }

  .mechanic-card { padding: 13px 14px; border-radius: 15px; }
  .mechanic-head { padding-bottom: 10px; }
  .mechanic-head b { font-size: 12px; }
  /* The loop used to be hidden here in favour of a one-line restatement. The
     restatement is gone and the depth moved to /how-it-works, so the beats
     themselves are what a phone gets - they are the answer to the questions a
     first-time visitor arrives with. `.decay-demo` must not be hidden either:
     it lives on the guide page now, where it is the point.

     Compacted rather than shown at desktop scale: the badge comes out of the
     grid so the label and its sentence run together on one line instead of
     two, which is 83px a beat down to about 30. */
  .mechanic-card .loop li {
    display: block; position: relative;
    padding: 9px 0 9px 30px;
  }
  .mechanic-card .loop li::before {
    position: absolute; left: 0; top: 8px;
    width: 22px; height: 22px; border-radius: 7px; font-size: 11px;
  }
  .mechanic-card .loop li b {
    display: inline; margin: 0; font-size: 12.5px;
  }
  .mechanic-card .loop li b::after { content: ' — '; color: var(--dim); font-weight: 400; }
  .mechanic-card .loop li > span { display: inline; font-size: 12.5px; }
  .tape { margin-bottom: 25px; }
  main { padding: 0 14px; }
  .board-title { align-items: end; margin-bottom: 13px; }
  .board-title h2 { font-size: 30px; }
  .board-title > p { max-width: 120px; text-align: right; font-size: 11px; }
  .toolbar { padding: 7px; border-radius: 13px; }
  .toolbar input { min-height: 40px; }

  .podium { display: grid; grid-template-columns: 1fr; gap: 9px; }
  .crown {
    min-height: 0; padding: 17px 15px 15px; border-radius: 17px;
    grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
  }
  .crown-watermark { right: 12px; top: 16px; font-size: 72px; }
  .crown-top { margin-bottom: 16px; }
  .crown-top .reign { order: initial; width: auto; }
  .live-seat { padding: 4px 7px; }
  .crown .ident .logo { width: 49px; height: 49px; border-radius: 13px; }
  .crown .ident .who a { font-size: 19px; }
  .crown .ident .who small, .crown .ident .tags, .crown .ident .ca { display: none; }
  .crown-heat { min-width: 0; margin: 0; padding: 0; border: 0; background: none; text-align: right; box-shadow: none; }
  .crown-heat b { font-size: 34px; }
  .crown-heat i { max-width: 150px; font-size: 12px; }
  .crown-race { grid-template-columns: 1fr auto; gap: 8px 12px; margin-top: 18px; padding: 11px; }
  .race-track { grid-column: 1 / -1; grid-row: 2; }
  .race-pressure { display: none; }
  .crown-eta { line-height: 1.55; }

  .runners { grid-template-columns: 1fr; grid-template-rows: none; gap: 8px; margin: 0; }
  .runner {
    min-height: 0; padding: 12px 13px; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'top top' 'identity heat' 'gap action' 'proof proof';
    gap: 8px 10px; border-radius: 14px;
  }
  .runner-top { padding-bottom: 10px; }
  .runner .place { font-size: 23px; }
  .runner-kicker { font-size: 11px; }
  .runner .ident .logo { width: 38px; height: 38px; }
  .runner .ident .who a { font-size: 15px; }
  .runner-heat { display: block; text-align: right; }
  .runner-heat > span { display: block; margin-bottom: 4px; }
  .runner-heat b { font-size: 21px; }
  .runner-gap { grid-column: auto; padding: 0; border: 0; }
  .runner .cta.take { grid-column: auto; min-height: 34px; }

  .section-rule { margin-top: 22px; }
  .row {
    min-height: 0; padding: 13px 12px; border-radius: 13px;
    grid-template-columns: 30px minmax(0, 1fr) auto; gap: 5px 9px;
  }
  .row.first-page { min-height: 0; padding: 14px 12px 14px 14px; }
  .row.first-page .rank { width: 30px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 17px; }
  .row.first-page .rank::after, .rank-status { display: none; }
  .row.first-page .proj .logo { width: 40px; height: 40px; border-radius: 11px; font-size: 19px; }
  .row.first-page .meta a { font-size: 15px; }
  .row.first-page .heat { font-size: 17px; }
  .row:hover { transform: none; }
  .row .proj { grid-column: 2; }
  .row .heat { grid-column: 3; }
  .row .burn { grid-column: 2 / -1; text-align: left; }
  .row .pass { grid-column: 2 / -1; text-align: left; }
  .row .pass .boost { margin-left: auto; }
  .row .meta small { max-width: 210px; }

  .mobile-actions {
    position: fixed; display: grid; grid-template-columns: .72fr 1.28fr; gap: 8px;
    left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 14px max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-soft);
    background: linear-gradient(to top, #080706 72%, rgba(8,7,6,.9));
    backdrop-filter: blur(18px);
  }
  .mobile-actions button { width: 100%; min-height: 44px; }
  .mobile-actions .ghost { display: block; }
}

@media (max-width: 390px) {
  .stats { display: none; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .cta, .hero-actions .ghost { width: 100%; }
  .board-title > p { display: none; }
}

/* ================================================= EDITORIAL SCOREBOARD ==== */

.market-board {
  --paper: #15110e; --ink: #f4eadf; --signal: #f0522d;
  --copper: #d59a5e; --plum: #9c7fa8;
}
.market-board .board-title {
  align-items: center; margin-bottom: 13px; padding-bottom: 15px;
  border-bottom: 1px solid #36302b;
}
.market-board .board-title h2 {
  text-transform: uppercase; font-weight: 820; letter-spacing: -.055em;
}
.market-board .board-title > p { text-transform: uppercase; letter-spacing: .08em; }
.market-board .toolbar {
  border-width: 0 0 1px; border-radius: 0; padding: 0 0 13px;
  background: transparent; box-shadow: none;
}
.market-board .toolbar input, .market-board .toolbar select,
.market-board .filters-toggle {
  border-radius: 0; border-color: #342e29; background: #100f0d;
}

.market-board .podium { gap: 2px; padding: 2px; background: #352b23; }
.market-board .crown, .market-board .runner {
  border: 0; border-radius: 0; box-shadow: none;
}
.market-board .crown {
  color: var(--ink); background: var(--paper); border-top: 6px solid var(--signal);
}
.market-board .crown::before { display: none; }
.market-board .crown::after {
  background: linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 54px 100%; mask-image: linear-gradient(90deg, transparent 25%, #000);
}
.market-board .crown-watermark { color: rgba(255,179,63,.055); }
.market-board .crown-top { border-color: rgba(255,179,63,.16); }
.market-board .crown-label { color: var(--ink); text-shadow: none; }
.market-board .crown-label > i {
  border-color: var(--signal); background: var(--signal); box-shadow: none;
}
.market-board .live-seat {
  color: #245d46; border-color: rgba(36,93,70,.24); background: rgba(36,93,70,.06);
}
.market-board .live-seat i { background: #2f7d5d; box-shadow: none; }
.market-board .crown-top .reign, .market-board .crown-top .reign b { color: #9f958a; }
.market-board .crown-top .reign b { color: var(--ink); }
.market-board .crown .share-chip {
  color: #c9b8a5; border-color: rgba(255,179,63,.25); background: transparent; border-radius: 0;
}
.market-board .crown .share-chip:hover { color: #170c07; border-color: var(--ember-hi); background: var(--ember-hi); }
.market-board .crown .ident .logo {
  color: var(--ember-hi); border: 1px solid rgba(255,179,63,.2); border-radius: 0; background: #21160f; box-shadow: none;
}
.market-board .crown .ident .who a { color: var(--ink); }
.market-board .crown .ident .who a:hover, .market-board .crown .ident .tick { color: var(--signal); }
.market-board .crown .ident .who small { color: #a69a8d; }
.market-board .crown .tags > *, .market-board .crown .ca {
  color: #9f9387; border-color: rgba(255,255,255,.1); background: transparent; border-radius: 0;
}
.market-board .crown-heat {
  border: 0; border-left: 1px solid rgba(255,179,63,.18); border-radius: 0;
  background: transparent; box-shadow: none;
}
.market-board .crown-heat > span, .market-board .crown-heat i { color: #a79b8f; }
.market-board .crown-heat b { color: var(--ink); text-shadow: none; animation: none; }
.market-board .crown-race {
  border-color: rgba(255,179,63,.14); border-radius: 0; background: rgba(0,0,0,.18);
}
.market-board .race-copy span, .market-board .race-pressure { color: #968a7d; }
.market-board .race-copy b { color: var(--ink); }
.market-board .race-track { height: 7px; border-radius: 0; background: rgba(255,255,255,.09); }
.market-board .race-track i { border-radius: 0; background: var(--signal); box-shadow: none; }
.market-board .crown-eta {
  color: #b5a89a; border: 0; border-radius: 0; background: rgba(240,82,45,.085);
}
.market-board .crown-eta b { color: #ff7651; }
.market-board .crown .cta.wide {
  color: #170b06; border: 0; border-radius: 0; background: var(--signal); box-shadow: none;
}
.market-board .crown .cta.wide:hover { color: #170b06; background: var(--ember-hi); box-shadow: none; transform: none; }

.market-board .runner { color: var(--ink); }
.market-board .runner::before { display: none; }
.market-board .runner.rank-2 { border-left: 4px solid var(--copper); background: #201812; }
.market-board .runner.rank-3 { border-left: 4px solid var(--plum); background: #19151b; }
.market-board .runner-top { border-color: rgba(255,255,255,.09); }
.market-board .runner .place, .market-board .runner-kicker,
.market-board .runner .ident .who a, .market-board .runner-heat b,
.market-board .runner-gap b { color: var(--ink); }
.market-board .runner.rank-2 .place { color: var(--copper); }
.market-board .runner.rank-3 .place { color: var(--plum); }
.market-board .runner-kicker, .market-board .runner-heat > span,
.market-board .runner-heat i, .market-board .runner-gap span { color: rgba(244,234,223,.56); }
.market-board .runner .ident .logo {
  color: #fff; border: 1px solid rgba(255,255,255,.1); border-radius: 0; background: #100e0c; box-shadow: none;
}
.market-board .runner .share-chip {
  color: #b8aa9d; border-color: rgba(255,255,255,.13); border-radius: 0; background: transparent;
}
.market-board .runner .cta.take {
  color: var(--ink); border: 1px solid rgba(255,255,255,.12); border-radius: 0; background: rgba(255,255,255,.045);
}
.market-board .runner .cta.take:hover { color: #170b06; border-color: var(--ember-hi); background: var(--ember-hi); }

.market-board .section-rule { margin-top: 27px; color: #9d9286; }
.market-board .section-rule i { background: #39332e; }
.market-board .board-head { padding-bottom: 9px; border-bottom: 1px solid #39332e; }
.market-board .board { gap: 0; border-top: 1px solid rgba(255,255,255,.035); }
.market-board .row.first-page {
  min-height: 74px; border: 0; border-bottom: 1px solid #2d2925; border-radius: 0;
  background: transparent; box-shadow: none;
}
.market-board .row.first-page::after { width: 2px; box-shadow: none; }
.market-board .row.first-page.hot-zone { --zone: var(--signal); background: rgba(240,82,45,.025); }
.market-board .row.first-page.contender-zone { --zone: #c7a45b; }
.market-board .row.first-page.field-zone { --zone: #607e77; }
.market-board .row.first-page:hover { transform: none; border-color: #4b433d; background-color: #151310; }
.market-board .row.first-page .rank {
  border: 0; border-radius: 0; background: transparent;
  color: #e8ded2; font-size: 24px; font-weight: 720;
}
.market-board .row.first-page .rank::after { color: #6b625a; }
.market-board .row.first-page .proj .logo { border-radius: 0; border-color: #39332e; background: #171512; }
.market-board .row.first-page .heat { color: #f4eadf; }
.market-board .rank-status {
  border: 0; border-radius: 0; padding-inline: 0; background: transparent; color: var(--zone);
}
.market-board .boost, .market-board .row .share-chip {
  border-radius: 0; background: transparent;
}

@media (max-width: 720px) {
  .market-board .podium { padding: 1px; gap: 1px; }
  .market-board .crown { border-top-width: 5px; }
  .market-board .crown-heat { border-left: 0; }
  .market-board .crown-top { padding-bottom: 10px; }
  .market-board .crown-race { padding: 8px; }
  .market-board .runner { border-radius: 0; }
  .market-board .row.first-page { padding-block: 12px; }
  .market-board .toolbar { padding-bottom: 10px; }
}

/* ------------------------------------------------------- attention proof */

.attention-proof {
  color: var(--dim); font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.attention-proof > span { min-width: 0; }
.attention-proof b { color: inherit; font-weight: 650; font-style: normal; }
.attention-proof i { color: inherit; font-style: normal; text-transform: uppercase; letter-spacing: .08em; }
.crown-proof {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 8px; border: 1px solid rgba(255,179,63,.13); border-width: 1px 0;
}
.crown-proof > span { display: flex; align-items: baseline; gap: 6px; padding: 9px 11px; }
.crown-proof > span + span { border-left: 1px solid rgba(255,179,63,.1); }
.crown-proof b { color: var(--text); font-size: 13px; }
.crown-proof i { font-size: 11px; }
.runner-proof {
  grid-area: proof; display: grid; grid-template-columns: repeat(4, 1fr);
  padding-top: 7px; border-top: 1px solid rgba(255,255,255,.075);
}
.runner-proof > span { display: flex; gap: 4px; align-items: baseline; }
.runner-proof b { color: var(--text); font-size: 11px; }
.runner-proof i { font-size: 11px; }
.row-proof {
  display: inline-flex; align-items: baseline; gap: 9px; margin: 5px 0 0 8px;
  vertical-align: top;
}
.row-proof > span { display: inline-flex; gap: 3px; align-items: baseline; }
.row-proof b { color: #c8beb3; font-size: 11px; }
.row-proof i { font-size: 11px; }

/* Outbound traffic is the product, so the destination is an action rather
   than a name that only happens to be linked. The logo, name and explicit
   label all use the same measured redirect. */
.project-logo { color: inherit; text-decoration: none; cursor: pointer; }
.project-logo:hover { border-color: var(--signal); transform: translateY(-1px); }
.meta .visit-project, .ident .who .visit-project {
  display: inline-flex; align-items: center; width: max-content; margin-top: 5px;
  color: var(--ember-hi); font: 650 11px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none;
}
.meta .visit-project:hover, .ident .who .visit-project:hover { color: #fff0cf; }
.market-board .crown .ident .who .visit-project,
.market-board .runner .ident .who .visit-project { color: var(--ember-hi); }
.market-board .crown .ident .who .visit-project { margin-top: 8px; font-size: 12px; }
.runner .ident .who .visit-project { font-size: 12px; }

/* ----------------------------------------------------- owner analytics */

.analytics-unlock { display: grid; gap: 12px; }
.owner-report {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
}
.owner-report-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.owner-report-head span, .owner-period {
  color: var(--dim); font: 600 11px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase;
}
.owner-report-head h3 { margin: 7px 0 0; color: var(--text); font: 650 21px/1.15 var(--sans); }
.owner-report-head h3 i { color: var(--ember-hi); font: 500 11px/1 var(--mono); }
.owner-report-head > b {
  flex: none; padding: 7px 8px; border: 1px solid rgba(98,218,179,.28);
  color: var(--cool); background: rgba(98,218,179,.05); font: 650 11px/1 var(--mono); letter-spacing: .09em;
}
.owner-period { margin: 22px 0 8px; }
.owner-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.owner-metric { min-width: 0; padding: 13px; background: #0d0e13; }
.owner-metric span { display: block; color: var(--dim); font: 600 11px/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.owner-metric b { display: block; margin-top: 7px; color: var(--text); font: 600 20px/1 var(--mono); letter-spacing: -.045em; }
.owner-metric i { display: block; margin-top: 5px; color: #716b64; font: 11px/1.2 var(--mono); }
.owner-metrics.primary .owner-metric b { color: var(--ember-hi); font-size: 24px; }

.live-heat-track {
  position: relative; display: block; overflow: hidden; width: 100%; height: 4px;
  margin-top: 9px; background: rgba(255,255,255,.08);
}
.live-heat-track > i {
  position: relative; display: block; overflow: hidden; width: 100%; height: 100%;
  margin: 0; background: var(--signal); transition: width 1s linear;
}
.live-heat-track > i::after {
  content: ''; position: absolute; inset: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  animation: heatGlide 3.6s linear infinite;
}
.market-board .crown::before {
  display: block; inset: 0; height: auto; transform: none;
  background: radial-gradient(55% 95% at 18% 30%, rgba(240,82,45,.105), transparent 72%);
  animation: throneBreath 4.8s ease-in-out infinite; opacity: .45;
}
.market-board .row .fill { transition: width 1s linear; }
.market-board .row.jump { animation: rankFlash .8s ease-out; }

@keyframes throneBreath {
  0%, 100% { opacity: .28 }
  48% { opacity: .62 }
  55% { opacity: .44 }
  62% { opacity: .68 }
}
@keyframes heatGlide {
  from { transform: translateX(-120%) }
  to { transform: translateX(440%) }
}
@keyframes rankFlash {
  0% { background-color: rgba(255,179,63,.2) }
  100% { background-color: transparent }
}

@media (max-width: 720px) {
  .crown-proof { margin-top: 7px; }
  .crown-proof > span { display: block; padding: 7px 6px; }
  .crown-proof b, .crown-proof i { display: block; }
  .crown-proof b { font-size: 14px; }
  .crown-proof i { margin-top: 2px; font-size: 11px; }
  .runner-proof > span:nth-child(4), .row-proof > span:nth-child(4) { display: none; }
  .runner-proof { grid-template-columns: repeat(3, 1fr); }
  .row-proof { display: flex; margin-left: 0; gap: 7px; }
  .runner-proof b { font-size: 11px; }
  .row-proof b { font-size: 11px; }
  .meta .visit-project { margin-top: 6px; font-size: 12px; }
  .market-board .crown .ident .who .visit-project { margin-top: 6px; font-size: 12px; }
  .owner-metric { padding: 12px 10px; }
  .owner-metric b { font-size: 18px; }
  .owner-metrics.primary .owner-metric b { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .live-dot { animation: none; }
  .cta::after { display: none; }
  .market-board .crown::before, .live-heat-track > i::after, .market-board .row.jump { animation: none; }
}

/* ========================================== LEADERBOARD REFINEMENT PASS ====
   Identity, status, category and performance used to share one inline flow.
   That made a long name or a second badge capable of painting through a pill,
   especially inside the narrow runner cards. This final, scoped layer gives
   every leaderboard object a predictable slot and keeps the editorial visual
   language while removing the fragile cascade between earlier iterations. */

.market-board .identity-heading {
  display: flex; align-items: center; flex-wrap: wrap;
  min-width: 0; max-width: 100%; gap: 5px 8px;
}
.market-board .project-name {
  display: inline-flex; align-items: baseline; min-width: 0; max-width: 100%;
  color: var(--ink); line-height: 1.15; text-decoration: none;
}
.market-board .project-title-text {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.market-board .project-name .tick {
  flex: none; margin-left: 7px; line-height: 1; white-space: nowrap;
}
.market-board .identity-badges {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px;
  min-width: 0;
}
.market-board .identity-badges:empty { display: none; }
.market-board .identity-badges .badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 21px; margin: 0; padding: 3px 6px;
  border-radius: 2px; font: 650 11px/1 var(--mono);
  letter-spacing: .045em; white-space: nowrap;
}
.market-board .identity-badges .unclaimed { letter-spacing: .075em; }
.market-board .ident .who { flex: 1; min-width: 0; }

/* The top rail is a grid, so a reign or share control cannot sit over one of
   the two live-state pills when the copy changes length. */
.market-board .crown-top {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center; gap: 10px 12px;
}
.market-board .crown-label { grid-column: 1; white-space: nowrap; }
.market-board .live-seat { grid-column: 2; min-height: 25px; white-space: nowrap; }
.market-board .crown-top .reign {
  grid-column: 3; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.market-board .crown-top .share-chip { grid-column: 4; margin-left: 0; justify-self: end; }

/* Crown identity and numbers retain their scale, but the copy owns only the
   space it really has. This makes a long project name fail gracefully. */
.market-board .crown .ident { min-width: 0; }
.market-board .crown .identity-heading { align-items: baseline; }
.market-board .crown .project-name { font-size: clamp(24px, 2.5vw, 31px); }
.market-board .crown .identity-badges { flex-basis: 100%; }
.market-board .crown-heat { min-width: 190px; }

/* #2 and #3 are compact summaries. Their identity now receives a full row;
   heat and action sit together underneath instead of competing with badges. */
.market-board .runner {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'top top'
    'identity identity'
    'heat action'
    'gap action'
    'proof proof';
  align-content: center;
}
.market-board .runner .ident { min-width: 0; }
.market-board .runner .ident { align-items: flex-start; overflow: hidden; }
.market-board .runner .who { overflow: hidden; }
.market-board .runner .identity-heading {
  display: grid; grid-template-columns: minmax(0, 1fr);
  width: 100%; gap: 6px;
}
.market-board .runner .project-name {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline; width: 100%; max-width: none; gap: 7px;
  overflow: hidden; font-size: 16px;
}
.market-board .runner .project-name .tick { margin-left: 0; }
.market-board .runner .identity-badges {
  display: flex; grid-row: 2; width: 100%; overflow: hidden;
}
.market-board .runner .identity-badges .badge { min-height: 19px; padding: 2px 5px; }
.market-board .runner-heat { align-self: end; min-width: 0; text-align: left; }
.market-board .runner-heat i { text-align: left; }
.market-board .runner-gap { align-self: start; }
.market-board .runner .cta.take {
  align-self: stretch; min-width: 116px; padding-inline: 12px;
  font-size: 12px; line-height: 1.25;
}

/* Metrics are values with labels, not prose. Stacking the label below the
   number keeps all four columns readable even when a count reaches 5 digits. */
.market-board .crown-proof,
.market-board .runner-proof { font-variant-numeric: tabular-nums; }
.market-board .crown-proof > span,
.market-board .runner-proof > span {
  display: grid; align-content: center; gap: 4px; min-width: 0;
}
.market-board .crown-proof b { font-size: 15px; line-height: 1; }
.market-board .runner-proof b { font-size: 13px; line-height: 1; }
.market-board .crown-proof i,
.market-board .runner-proof i { line-height: 1.15; white-space: nowrap; }

/* Standard rows use three deliberate metadata bands: identity, project
   signals, then attention. Nothing floats beside a block-level supporter
   label anymore, which was the other source of apparent pill collisions. */
.market-board .board-head,
.market-board .row {
  grid-template-columns: 56px minmax(0, 1fr) 112px 108px 144px;
  column-gap: 16px;
}
.market-board .row { overflow: hidden; }
.market-board .row .proj,
.market-board .row .meta { min-width: 0; width: 100%; }
.market-board .row .identity-heading { gap: 4px 7px; }
.market-board .row .project-name { font-size: 16px; }
.market-board .row .meta > small {
  max-width: min(100%, 620px); margin-top: 4px; line-height: 1.35;
}
.market-board .row-meta-line {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px;
  min-width: 0; margin-top: 7px;
}
.market-board .row-meta-line .tags {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px;
  margin: 0;
}
.market-board .row-meta-line .tags > * {
  display: inline-flex; align-items: center; min-height: 22px;
  padding: 3px 6px; border-radius: 2px; line-height: 1;
  white-space: nowrap;
}
.market-board .row-community {
  display: inline-flex; align-items: center; min-height: 22px;
  margin: 0; color: #a79d93; line-height: 1.25;
}
.market-board .rank-status {
  display: inline-flex; align-items: center; min-height: 22px;
  margin: 0; line-height: 1; white-space: nowrap;
}
.market-board .row-proof {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px;
  margin: 7px 0 0;
}
.market-board .row-proof > span {
  display: inline-flex; align-items: baseline; gap: 4px; min-width: 0;
}
.market-board .row-proof > span + span::before {
  content: ''; align-self: center; width: 1px; height: 10px;
  margin-right: 7px; background: rgba(255,255,255,.1);
}
.market-board .row-proof b,
.market-board .row-proof i { line-height: 1.15; white-space: nowrap; }

.market-board .pass {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  min-width: 0;
}
.market-board .pass-value { display: block; min-width: 0; text-align: right; }
.market-board .pass-value b,
.market-board .pass-value .lbl { display: block; line-height: 1.15; white-space: nowrap; }
.market-board .pass-actions { display: inline-flex; align-items: center; flex: none; gap: 5px; }
.market-board .pass-actions .boost,
.market-board .pass-actions .share-chip { margin: 0; min-height: 28px; }

@media (max-width: 900px) and (min-width: 721px) {
  .market-board .board-head,
  .market-board .row {
    grid-template-columns: 46px minmax(0, 1fr) 96px 90px 132px;
    column-gap: 10px;
  }
  .market-board .row-meta-line .tags { display: none; }
  .market-board .row-proof { gap: 5px 8px; }
  .market-board .row-proof > span + span::before { margin-right: 4px; }
}

@media (max-width: 720px) {
  .market-board .crown-top {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
  }
  .market-board .crown-label { grid-column: 1; }
  .market-board .live-seat { grid-column: 2; }
  .market-board .crown-top .share-chip { grid-column: 3; }
  .market-board .crown-top .reign {
    grid-column: 1 / -1; grid-row: 2; overflow: visible; white-space: normal;
  }
  .market-board .crown .identity-heading { display: grid; gap: 7px; }
  .market-board .crown .identity-badges { flex-basis: auto; }
  .market-board .crown-heat { min-width: 0; }

  .market-board .runner {
    grid-template-areas:
      'top top'
      'identity identity'
      'heat action'
      'gap action'
      'proof proof';
  }
  .market-board .runner .identity-heading { gap: 6px; }
  .market-board .runner .cta.take { min-width: 126px; }

  .market-board .board-head { display: none; }
  .market-board .row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 7px 10px; padding: 14px 12px 13px 14px;
    overflow: hidden;
  }
  .market-board .row .identity-heading { display: grid; gap: 6px; }
  .market-board .row .identity-badges { width: 100%; }
  .market-board .row .meta > small { max-width: 100%; }
  .market-board .row-meta-line { margin-top: 6px; }
  .market-board .row-meta-line .tags,
  .market-board .row-meta-line .rank-status { display: none; }
  .market-board .row-community { min-height: 0; }
  .market-board .row-proof {
    display: grid; grid-template-columns: repeat(3, minmax(0, auto));
    justify-content: start; gap: 7px 12px;
  }
  .market-board .row-proof > span + span::before { display: none; }
  .market-board .row .burn {
    grid-column: 2 / -1; margin-top: 3px; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.07); text-align: left;
  }
  .market-board .row .pass {
    grid-column: 2 / -1; justify-content: space-between;
    margin-top: -2px; text-align: left;
  }
  .market-board .pass-value { display: flex; align-items: baseline; gap: 6px; text-align: left; }
  .market-board .pass-value b,
  .market-board .pass-value .lbl { display: inline; }
  .market-board .pass-actions .boost,
  .market-board .pass-actions .share-chip { min-height: 32px; }
}

@media (max-width: 420px) {
  .market-board .live-seat { display: none; }
  .market-board .crown-top { grid-template-columns: minmax(0, 1fr) auto; }
  .market-board .crown-top .share-chip { grid-column: 2; }
  .market-board .runner .cta.take { min-width: 112px; padding-inline: 8px; }
  .market-board .row-proof { gap-inline: 9px; }
}