/* Responsive corrections owned by the React leaderboard island. The main
   stylesheet stays shared with the server-rendered fallback while the UI is
   migrated component by component. */
.stats .live span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.stats .live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cool);
  box-shadow: 0 0 10px rgba(69, 217, 181, .8);
  animation: livepulse 2.2s ease-in-out infinite;
}

.stats .live b { color: var(--cool); }

/* Embers are earned momentum, not a second currency. Their shape is smaller
   and lighter than paid Heat so the board keeps its commercial hierarchy. */
.ember-indicator {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(255, 179, 63, .18);
  background: rgba(255, 179, 63, .045);
  color: #8e8378;
  font: 600 9px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ember-indicator .ember-spark {
  color: var(--ember-hi);
  font-size: 12px;
  text-shadow: 0 0 9px rgba(255, 179, 63, .45);
}

.ember-indicator b { color: #f4eadf; font-size: 11px; letter-spacing: 0; }
.ember-indicator i {
  margin-left: 2px;
  padding-left: 6px;
  border-left: 1px solid rgba(255, 179, 63, .2);
  color: var(--ember-hi);
  font-style: normal;
  letter-spacing: 0;
}

.rank-power-breakdown {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, auto) 18px minmax(0, auto) 18px minmax(0, auto) 1fr;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 179, 63, .16);
  background: linear-gradient(90deg, rgba(240, 82, 45, .055), rgba(255, 179, 63, .025) 60%, transparent);
  font-family: var(--mono);
}

.rank-power-breakdown > span:not(.power-plus):not(.power-equals):not(.power-boost) {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 4px 7px;
}

.rank-power-breakdown b { color: #f4eadf; font-size: 14px; line-height: 1; }
.rank-power-breakdown small {
  grid-column: 1 / -1;
  color: #82786f;
  font: 600 9px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rank-power-breakdown .power-paid > i { font-style: normal; }
.rank-power-breakdown .power-earned > i { color: var(--ember-hi); font-style: normal; }
.rank-power-breakdown .power-plus,
.rank-power-breakdown .power-equals { color: #5f5750; font-size: 12px; text-align: center; }
.rank-power-breakdown .power-total b { color: var(--ember-hi); }
.rank-power-breakdown .power-boost {
  justify-self: end;
  color: #9e9286;
  font: 600 9px/1.2 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.market-board .runner > .ember-indicator {
  grid-area: ember;
  align-self: center;
}

.market-board .runner {
  grid-template-areas:
    'top top'
    'identity identity'
    'heat action'
    'ember action'
    'gap action'
    'proof proof';
}

.market-board .row-community .ember-indicator.compact { margin-left: 8px; padding-block: 3px; }

/* Motion is deliberately reserved for the three showcase cards. A long board
   can contain dozens of active projects; animating every row would turn a tiny
   signal into a permanent rendering cost. */
.market-board .runner > .ember-indicator,
.market-board .rank-power-breakdown { position: relative; }
.market-board .runner > .ember-indicator::before,
.market-board .runner > .ember-indicator::after,
.market-board .rank-power-breakdown::before,
.market-board .rank-power-breakdown::after {
  content: ''; position: absolute; z-index: 1; bottom: 3px;
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--ember-hi); pointer-events: none; opacity: 0;
  animation: emberDrift 4.6s ease-out infinite;
}
.market-board .runner > .ember-indicator::before { left: 22%; animation-delay: -1.2s; }
.market-board .runner > .ember-indicator::after { left: 72%; animation-delay: -3.4s; }
.market-board .rank-power-breakdown::before { left: 40%; animation-delay: -2.1s; }
.market-board .rank-power-breakdown::after { left: 47%; animation-delay: -4s; }
.market-board .runner > .ember-indicator .ember-spark,
.market-board .rank-power-breakdown .power-earned > i { animation: emberGlow 3.8s ease-in-out infinite; }
.market-board .rank-power-breakdown .power-paid > i {
  display: inline-block; transform-origin: 50% 90%; animation: flameBreathe 3.2s ease-in-out infinite;
}

@keyframes emberDrift {
  0%, 28% { transform: translate3d(0, 0, 0) scale(.65); opacity: 0; }
  42% { opacity: .55; }
  78% { opacity: .2; }
  100% { transform: translate3d(5px, -16px, 0) scale(.2); opacity: 0; }
}
@keyframes emberGlow {
  0%, 100% { opacity: .72; text-shadow: 0 0 5px rgba(255,179,63,.25); }
  52% { opacity: 1; text-shadow: 0 0 11px rgba(255,179,63,.58); }
}
@keyframes flameBreathe {
  0%, 100% { transform: scale(.96) rotate(-1deg); opacity: .82; }
  48% { transform: scale(1.06) rotate(1deg); opacity: 1; }
}

@media (max-width: 1060px) {
  .stats div.live { display: block; }
}

@media (max-width: 720px) {
  .stats div.live { display: block; }

  .market-board .row-proof {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
  }

  .market-board .row-proof > span {
    display: grid;
    align-content: start;
    gap: 3px;
  }

  .market-board .row-proof b,
  .market-board .row-proof i {
    display: block;
  }

  .market-board .row-proof i {
    font-size: 10px;
    letter-spacing: .04em;
  }

  .rank-power-breakdown {
    grid-template-columns: 1fr 12px 1fr 12px 1fr;
    gap: 5px;
    padding: 9px;
  }

  .rank-power-breakdown .power-boost { display: none; }
  .rank-power-breakdown > span:not(.power-plus):not(.power-equals):not(.power-boost) {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .rank-power-breakdown b { font-size: 13px; }

  .market-board .runner > .ember-indicator {
    align-self: start;
  }

  .market-board .row-community {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 0;
  }
  .market-board .row-community .ember-indicator.compact { margin-left: 0; }
}

@media (max-width: 390px) {
  .top .stats { display: flex; margin-left: auto; }
  .top .stats div:not(.live) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ember-indicator .ember-spark { text-shadow: none; }
  .market-board .runner > .ember-indicator::before,
  .market-board .runner > .ember-indicator::after,
  .market-board .rank-power-breakdown::before,
  .market-board .rank-power-breakdown::after { display: none; animation: none; }
  .market-board .runner > .ember-indicator .ember-spark,
  .market-board .rank-power-breakdown .power-earned > i,
  .market-board .rank-power-breakdown .power-paid > i { animation: none; }
}

/* Ember activity is deliberately distinct from paid Heat without becoming a
   second neon ticker. The words carry the meaning; color only identifies the
   earned-momentum lane. */
.tape-track .ember-event { color: #c9a9dc; }
.tape-track .ember-event b { color: #f1dcff; }
.ember-owner-period { color: #c9a9dc; }
.ember-owner-metrics .owner-metric b { color: #f1dcff; }

/* ------------------------------------------------------ Rank Power forge --
   One cinematic explanation, fed by the live leader. Repeating this much
   motion on every listing would be noisy and expensive; here it can make the
   Heat + Embers relationship visceral without weakening the data hierarchy. */
.power-forge {
  --forge-heat: .72;
  --forge-embers: .16;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 15px 0 4px;
  border: 1px solid rgba(255, 179, 63, .15);
  border-radius: 15px;
  background: #070607;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .045),
    inset 0 -28px 55px rgba(5, 4, 8, .95),
    0 20px 50px -36px rgba(255, 86, 48, .85);
}

.forge-scene {
  position: relative;
  height: 188px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 48%, rgba(147, 67, 230, calc(var(--forge-embers) * .22)), transparent 30%),
    radial-gradient(circle at 21% 65%, rgba(255, 75, 22, calc(var(--forge-heat) * .2)), transparent 34%),
    linear-gradient(180deg, #050507, #0a0709 72%, #120b0b);
}

.forge-scene::before,
.forge-scene::after {
  content: '';
  position: absolute;
  z-index: 0;
  bottom: 8px;
  width: 48%;
  height: 1px;
}
.forge-scene::before { left: 0; background: linear-gradient(90deg, transparent, rgba(255, 89, 33, .72)); }
.forge-scene::after { right: 0; background: linear-gradient(90deg, rgba(162, 80, 255, .66), transparent); }

.forge-halo {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 18px;
  width: 116px;
  height: 116px;
  translate: -50% 0;
  border: 1px solid rgba(255, 134, 61, .18);
  transform: rotate(45deg);
  box-shadow:
    0 0 0 9px rgba(255, 105, 45, .025),
    0 0 34px rgba(255, 91, 32, .08),
    0 0 70px rgba(113, 48, 177, .07);
  animation: forgeHalo 5.8s ease-in-out infinite;
}
.forge-halo::before,
.forge-halo::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 179, 63, .09);
}
.forge-halo::after { inset: 25px; border-color: rgba(157, 80, 230, .11); }

.forge-throne {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 10px;
  width: 112px;
  height: 145px;
  translate: -50% 0;
  filter: drop-shadow(0 9px 16px rgba(0, 0, 0, .8));
}
.throne-back {
  position: absolute;
  left: 18px;
  top: 18px;
  width: 76px;
  height: 109px;
  clip-path: polygon(50% 0, 92% 27%, 92% 100%, 8% 100%, 8% 27%);
  background: linear-gradient(145deg, rgba(255, 161, 80, .48), rgba(95, 44, 42, .18) 4%, #09080b 10%, #111016 88%);
  box-shadow: inset 0 0 24px rgba(255, 85, 32, .05);
}
.throne-back::before {
  content: '';
  position: absolute;
  inset: 3px;
  clip-path: inherit;
  background: linear-gradient(160deg, #16131a, #08070a 68%);
}
.throne-spire {
  position: absolute;
  z-index: -1;
  top: 42px;
  width: 28px;
  height: 86px;
  border: 1px solid rgba(255, 129, 58, .21);
  background: linear-gradient(180deg, rgba(255, 98, 37, .06), rgba(0, 0, 0, .2));
}
.throne-spire.left { left: 2px; border-right: 0; transform: skewY(-14deg); }
.throne-spire.right { right: 2px; border-left: 0; transform: skewY(14deg); }
.throne-seat {
  position: absolute;
  z-index: 2;
  left: 10px;
  bottom: 0;
  width: 92px;
  height: 42px;
  border: 1px solid rgba(255, 126, 52, .22);
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #18131a, #08070a 72%);
  box-shadow: inset 0 1px rgba(255, 179, 63, .08), 0 10px 20px #000;
}
.throne-seat::before,
.throne-seat::after {
  content: '';
  position: absolute;
  top: 24px;
  width: 9px;
  height: 25px;
  border: 1px solid rgba(255, 122, 53, .18);
  background: #09080b;
}
.throne-seat::before { left: -7px; }
.throne-seat::after { right: -7px; }
.forge-crown {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 51px;
  width: 42px;
  translate: -50% 0;
  overflow: visible;
  fill: rgba(255, 123, 48, .08);
  stroke: #f69746;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(255, 101, 34, .5));
  animation: crownCharge 4.4s ease-in-out infinite;
}

.forge-fire {
  position: absolute;
  z-index: 2;
  left: 6%;
  bottom: 3px;
  width: 108px;
  height: 151px;
  opacity: calc(.55 + var(--forge-heat) * .45);
  filter: drop-shadow(0 0 10px rgba(255, 70, 15, .72)) drop-shadow(0 0 24px rgba(255, 120, 20, .25));
}
.forge-fire svg { width: 100%; height: 100%; overflow: visible; }
.forge-fire .flame { transform-box: fill-box; transform-origin: 50% 100%; }
.forge-fire .flame-back {
  fill: url('#forgeFlameBack');
  opacity: .84;
  animation: forgeFlame 2.4s ease-in-out infinite alternate;
}
.forge-fire .flame-wisp {
  fill: none;
  stroke: #ff7b21;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .74;
  filter: drop-shadow(0 0 4px rgba(255, 70, 19, .75));
}
.forge-fire .flame-wisp-left { animation: forgeFlame 1.7s -.25s ease-in-out infinite alternate-reverse; }
.forge-fire .flame-wisp-right { animation: forgeFlame 2.05s -.9s ease-in-out infinite alternate; }
.forge-fire .flame-mid {
  fill: url('#forgeFlameMid');
  animation: forgeFlame 1.85s -.7s ease-in-out infinite alternate-reverse;
}
.forge-fire .flame-core {
  fill: url('#forgeFlameCore');
  filter: drop-shadow(0 0 7px rgba(255, 227, 120, .7));
  animation: forgeFlame 1.35s -.35s ease-in-out infinite alternate;
}

.forge-sparks {
  position: absolute;
  z-index: 2;
  inset: 20px 3% 8px 56%;
  opacity: calc(.48 + var(--forge-embers) * .52);
  background:
    radial-gradient(circle at 14% 17%, rgba(255, 121, 38, .9) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 26%, rgba(175, 89, 255, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 13%, rgba(255, 91, 52, .7) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 63%, rgba(176, 87, 255, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 71%, rgba(255, 163, 57, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 81%, rgba(234, 82, 196, .68) 0 1px, transparent 2px);
  filter: drop-shadow(0 0 5px rgba(178, 83, 255, .75));
}
.forge-sparks::before {
  content: '✦';
  position: absolute;
  left: 50%;
  top: 45%;
  color: #b86cff;
  font-size: 19px;
  text-shadow: 0 0 8px #8d42ea, 0 0 18px rgba(255, 78, 214, .56);
  animation: emberHeart 3.1s ease-in-out infinite;
}
.forge-sparks i {
  --x: 50%;
  --y: 75%;
  --dx: 8px;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ff9d3e;
  box-shadow: 0 0 7px #ff5a2e, 0 0 12px rgba(173, 72, 255, .8);
  opacity: 0;
  animation: forgeSpark 3.8s ease-out infinite;
}
.forge-sparks i:nth-child(1) { --x: 11%; --y: 77%; --dx: -5px; animation-delay: -1.2s; }
.forge-sparks i:nth-child(2) { --x: 27%; --y: 38%; --dx: 8px; animation-delay: -2.8s; width: 2px; height: 2px; }
.forge-sparks i:nth-child(3) { --x: 46%; --y: 67%; --dx: -7px; animation-delay: -.4s; }
.forge-sparks i:nth-child(4) { --x: 65%; --y: 29%; --dx: 3px; animation-delay: -3.3s; width: 2px; height: 2px; }
.forge-sparks i:nth-child(5) { --x: 79%; --y: 72%; --dx: 9px; animation-delay: -1.9s; }
.forge-sparks i:nth-child(6) { --x: 91%; --y: 43%; --dx: -4px; animation-delay: -.8s; width: 2px; height: 2px; }
.forge-sparks i:nth-child(7) { --x: 38%; --y: 91%; --dx: 6px; animation-delay: -2.3s; }
.forge-sparks i:nth-child(8) { --x: 72%; --y: 92%; --dx: -8px; animation-delay: -3.6s; }

.forge-equation {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: linear-gradient(90deg, rgba(255, 76, 30, .08), rgba(8, 7, 10, .94) 48%, rgba(142, 67, 218, .09));
}
.forge-source { min-width: 0; padding: 11px 13px 10px; }
.forge-source > span,
.forge-result > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #9b8e84;
  font: 650 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.forge-source > span i { font-style: normal; font-size: 12px; }
.forge-source-heat > span i { filter: drop-shadow(0 0 5px rgba(255, 86, 48, .65)); }
.forge-source-embers > span i { color: #c082ff; text-shadow: 0 0 8px rgba(173, 78, 255, .7); }
.forge-source b {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: #f4eadf;
  font: 650 20px/1 var(--mono);
  letter-spacing: -.05em;
  text-overflow: ellipsis;
}
.forge-source small {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #716860;
  font: 9px/1.2 var(--mono);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.forge-source-embers { text-align: right; }
.forge-source-embers > span { justify-content: flex-end; }
.forge-source-embers b { color: #d5adff; }
.forge-equation > strong {
  display: grid;
  place-items: center;
  color: #625952;
  font: 400 18px/1 var(--mono);
}
.forge-result {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 9px 13px 10px;
  border-top: 1px solid rgba(255, 179, 63, .18);
  background: linear-gradient(90deg, #100b0b, #100b13 55%, #0a080d);
  box-shadow: inset 0 1px rgba(255, 114, 43, .045);
}
.forge-result > span { color: #c59a78; }
.forge-result b {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--ember-hi);
  font: 700 25px/1 var(--mono);
  letter-spacing: -.06em;
  text-shadow: 0 0 18px rgba(255, 110, 40, .28);
}
.forge-result i {
  overflow: hidden;
  color: #746b64;
  font: 9px/1 var(--mono);
  font-style: normal;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.power-forge.ranking-paused .forge-result b { color: #c8bcb0; text-shadow: none; }

@keyframes forgeHalo {
  0%, 100% { opacity: .52; scale: .98; }
  50% { opacity: 1; scale: 1.035; }
}
@keyframes crownCharge {
  0%, 100% { opacity: .68; filter: drop-shadow(0 0 4px rgba(255, 101, 34, .3)); }
  52% { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 101, 34, .7)); }
}
@keyframes forgeFlame {
  0% { transform: scaleX(.94) scaleY(.98) skewX(-1deg); }
  55% { transform: scaleX(1.035) scaleY(1.025) skewX(1.5deg); }
  100% { transform: scaleX(.975) scaleY(1.055) skewX(-.7deg); }
}
@keyframes emberHeart {
  0%, 100% { opacity: .58; scale: .82; rotate: 0deg; }
  50% { opacity: 1; scale: 1.15; rotate: 45deg; }
}
@keyframes forgeSpark {
  0%, 16% { opacity: 0; transform: translate3d(0, 10px, 0) scale(.45); }
  28% { opacity: .95; }
  78% { opacity: .38; }
  100% { opacity: 0; transform: translate3d(var(--dx), -38px, 0) scale(.15); }
}

@media (max-width: 720px) {
  .power-forge { margin-top: 11px; border-radius: 12px; }
  .forge-scene { height: 142px; }
  .forge-halo { top: 13px; width: 86px; height: 86px; }
  .forge-throne { bottom: 4px; width: 86px; height: 112px; transform: scale(.78); transform-origin: 50% 100%; }
  .forge-fire { left: 3%; bottom: -3px; width: 78px; height: 113px; }
  .forge-sparks { inset: 12px 1% 4px 57%; }
  .forge-source { padding: 9px 10px 8px; }
  .forge-source b { font-size: 17px; }
  .forge-source small { font-size: 8px; }
  .forge-result { padding: 8px 10px 9px; }
  .forge-result b { font-size: 21px; }
}

@media (max-width: 390px) {
  .forge-scene { height: 128px; }
  .forge-fire { width: 70px; height: 103px; }
  .forge-equation { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); }
  .forge-source > span { letter-spacing: .08em; }
  .forge-source small { max-width: 115px; }
  .forge-source-embers small { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .forge-halo,
  .forge-crown,
  .forge-fire .flame,
  .forge-sparks::before,
  .forge-sparks i { animation: none; }
  .forge-sparks i { opacity: .45; }
}

/* ================================== THE FORGE, AT THE INTENSITY IT IS FOR ===

   The fire and the embers are the two halves of the equation under them, and
   they were not carrying equal weight: the fire was a moderate orange shape,
   and the embers were 1px gradient dots plus eight 3px ones - specks, next to
   a flame. Whichever side of "HEAT + EMBERS" a visitor is being asked to
   understand, the picture has to show two comparable forces.

   Nothing structural changes here. Same SVG flame, same eight spark elements,
   same equation markup, same animations and the same reduced-motion stop. What
   changes is size, count, and brightness. */

.power-forge { --forge-heat: .82; --forge-embers: .34; }

/* ------------------------------------------------------------------ fire */

/* Bigger, and lit from inside. The old glow was a single soft shadow, which
   spreads light without making anything look hot; three stacked shadows with a
   tight bright one at the centre do. */
.forge-fire {
  width: 128px; height: 176px;
  opacity: calc(.72 + var(--forge-heat) * .28);
  filter:
    drop-shadow(0 0 6px rgba(255, 214, 120, .55))
    drop-shadow(0 0 18px rgba(255, 88, 20, .8))
    drop-shadow(0 0 44px rgba(255, 120, 20, .42));
}
.forge-fire .flame-back { opacity: .95; }
.forge-fire .flame-wisp {
  stroke: #ffa53d; stroke-width: 2.8; opacity: .92;
  filter: drop-shadow(0 0 6px rgba(255, 140, 40, .9));
}
.forge-fire .flame-core {
  filter: drop-shadow(0 0 10px rgba(255, 236, 160, .95)) drop-shadow(0 0 20px rgba(255, 190, 80, .6));
}

/* The bloom the fire sits in, so the light appears to come off it rather than
   stopping at its edge. */
.forge-fire::after {
  content: ''; position: absolute; z-index: -1; inset: -26% -34% -14%;
  background: radial-gradient(50% 46% at 50% 62%,
    rgba(255, 130, 32, .34), rgba(255, 80, 20, .12) 52%, transparent 74%);
  pointer-events: none;
}

/* ---------------------------------------------------------------- embers */

/* Sparkles, not dust: bigger, brighter, and far more of them. The field is
   layered stars at three sizes rather than 1px radial dots, and it reaches
   further up and across so the ember half has the same visual footprint as
   the fire. */
.forge-sparks {
  inset: 6px 2% 6px 50%;
  opacity: calc(.66 + var(--forge-embers) * .34);
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23fff%22%20d=%22M12%20.6c1.35%207.85%202.2%208.7%2010.05%2010.05-7.85%201.35-8.7%202.2-10.05%2010.05C10.65%2012.85%209.8%2012%201.95%2010.659.8%209.3%2010.65%208.45%2012%20.6z%22/%3E%3C/svg%3E") 12% 16%/13px 13px no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23fff%22%20d=%22M12%20.6c1.35%207.85%202.2%208.7%2010.05%2010.05-7.85%201.35-8.7%202.2-10.05%2010.05C10.65%2012.85%209.8%2012%201.95%2010.659.8%209.3%2010.65%208.45%2012%20.6z%22/%3E%3C/svg%3E") 76% 9%/10px 10px no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23fff%22%20d=%22M12%20.6c1.35%207.85%202.2%208.7%2010.05%2010.05-7.85%201.35-8.7%202.2-10.05%2010.05C10.65%2012.85%209.8%2012%201.95%2010.659.8%209.3%2010.65%208.45%2012%20.6z%22/%3E%3C/svg%3E") 41% 30%/8px 8px no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23fff%22%20d=%22M12%20.6c1.35%207.85%202.2%208.7%2010.05%2010.05-7.85%201.35-8.7%202.2-10.05%2010.05C10.65%2012.85%209.8%2012%201.95%2010.659.8%209.3%2010.65%208.45%2012%20.6z%22/%3E%3C/svg%3E") 88% 40%/12px 12px no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23fff%22%20d=%22M12%20.6c1.35%207.85%202.2%208.7%2010.05%2010.05-7.85%201.35-8.7%202.2-10.05%2010.05C10.65%2012.85%209.8%2012%201.95%2010.659.8%209.3%2010.65%208.45%2012%20.6z%22/%3E%3C/svg%3E") 20% 52%/9px 9px no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23fff%22%20d=%22M12%20.6c1.35%207.85%202.2%208.7%2010.05%2010.05-7.85%201.35-8.7%202.2-10.05%2010.05C10.65%2012.85%209.8%2012%201.95%2010.659.8%209.3%2010.65%208.45%2012%20.6z%22/%3E%3C/svg%3E") 62% 62%/11px 11px no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23fff%22%20d=%22M12%20.6c1.35%207.85%202.2%208.7%2010.05%2010.05-7.85%201.35-8.7%202.2-10.05%2010.05C10.65%2012.85%209.8%2012%201.95%2010.659.8%209.3%2010.65%208.45%2012%20.6z%22/%3E%3C/svg%3E") 33% 82%/8px 8px no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23fff%22%20d=%22M12%20.6c1.35%207.85%202.2%208.7%2010.05%2010.05-7.85%201.35-8.7%202.2-10.05%2010.05C10.65%2012.85%209.8%2012%201.95%2010.659.8%209.3%2010.65%208.45%2012%20.6z%22/%3E%3C/svg%3E") 92% 76%/7px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23fff%22%20d=%22M12%20.6c1.35%207.85%202.2%208.7%2010.05%2010.05-7.85%201.35-8.7%202.2-10.05%2010.05C10.65%2012.85%209.8%2012%201.95%2010.659.8%209.3%2010.65%208.45%2012%20.6z%22/%3E%3C/svg%3E") 55% 92%/9px 9px no-repeat,
    radial-gradient(circle at 6% 34%, rgba(216, 180, 254, .95) 0 1.8px, transparent 3px),
    radial-gradient(circle at 30% 8%, rgba(192, 132, 252, .9) 0 1.6px, transparent 3px),
    radial-gradient(circle at 52% 20%, rgba(233, 213, 255, .85) 0 1.4px, transparent 3px),
    radial-gradient(circle at 70% 44%, rgba(168, 85, 247, .95) 0 2px, transparent 3.4px),
    radial-gradient(circle at 15% 70%, rgba(216, 180, 254, .8) 0 1.5px, transparent 3px),
    radial-gradient(circle at 46% 56%, rgba(192, 132, 252, .85) 0 1.7px, transparent 3px),
    radial-gradient(circle at 84% 24%, rgba(233, 213, 255, .8) 0 1.3px, transparent 2.6px),
    radial-gradient(circle at 25% 94%, rgba(168, 85, 247, .8) 0 1.5px, transparent 3px),
    radial-gradient(circle at 74% 88%, rgba(216, 180, 254, .75) 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 97% 58%, rgba(192, 132, 252, .8) 0 1.6px, transparent 3px);
  filter: drop-shadow(0 0 6px rgba(178, 83, 255, .9)) drop-shadow(0 0 16px rgba(147, 51, 234, .5));
}

/* The bloom on the ember side, matching the one behind the fire so neither
   half looks pasted on. */
.forge-sparks::after {
  content: ''; position: absolute; z-index: -1; inset: -10% -12%;
  background: radial-gradient(46% 44% at 56% 46%,
    rgba(168, 85, 247, .3), rgba(147, 51, 234, .1) 54%, transparent 76%);
  pointer-events: none;
}

/* The heart of the cluster, which was a 19px text glyph. */
.forge-sparks::before {
  content: ''; left: 46%; top: 38%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20fill=%22%23fff%22%20d=%22M12%20.6c1.35%207.85%202.2%208.7%2010.05%2010.05-7.85%201.35-8.7%202.2-10.05%2010.05C10.65%2012.85%209.8%2012%201.95%2010.659.8%209.3%2010.65%208.45%2012%20.6z%22/%3E%3C/svg%3E") center/contain no-repeat;
  text-shadow: none;
  filter: drop-shadow(0 0 8px #b86cff) drop-shadow(0 0 22px rgba(233, 213, 255, .75));
}

/* The eight drifting ones: violet rather than orange, because they are the
   earned currency and the fire beside them is the bought one. */
.forge-sparks i {
  width: 5px; height: 5px;
  background: #f3e8ff;
  box-shadow: 0 0 8px #c084fc, 0 0 18px rgba(168, 85, 247, .95);
}
.forge-sparks i:nth-child(2n) { width: 3.5px; height: 3.5px; background: #d8b4fe; }

/* ------------------------------------------------------------- the sides */

/* The edge gradients that frame the scene, matched to the two currencies. */
.forge-scene::before { background: linear-gradient(90deg, transparent, rgba(255, 110, 40, .85)); }
.forge-scene::after { background: linear-gradient(90deg, rgba(168, 85, 247, .8), transparent); }

/* Nothing added here animates, so the existing reduced-motion block still
   covers the forge. Worth noting what that leaves: the drifting sparks stop
   and dim, but the field behind them is a static background, so the ember half
   is still visibly there for somebody who asked for no motion. It used to be
   eight stopped dots and almost nothing else. */

/* ========================================= THE BOARD'S OWN FIRE AND EMBERS ==

   The forge at the top of the page says HEAT + EMBERS = RANK POWER. The board
   underneath it said neither. Heat was a plain figure with a hairline under
   it, and the ember half rendered nothing at all - on a column headed RANK
   POWER, which is a composite promising two things and showing one.

   Heat gets the flame the rest of the site uses. Embers get the violet they
   get everywhere else, including at zero on the podium, because a currency
   nobody can see is a currency nobody earns. */

.mark-heat {
  display: inline-block; flex: none; width: 11px; height: 14px;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2030%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22f%22%20x1=%220%22%20y1=%221%22%20x2=%220%22%20y2=%220%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23ff2d0f%22/%3E%3Cstop%20offset=%22.45%22%20stop-color=%22%23ff6a1f%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23ffb33f%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id=%22c%22%20x1=%220%22%20y1=%221%22%20x2=%220%22%20y2=%220%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23ffb33f%22/%3E%3Cstop%20offset=%22.6%22%20stop-color=%22%23ffe08a%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23fffdf5%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20fill=%22url%28%23f%29%22%20d=%22M13.4.6c.5%204.2%203%206%205%208.6%202.4%203%203.3%205.7%203.3%208.6%200%205.6-4.3%209.9-9.7%209.9S2.3%2023.4%202.3%2017.8c0-3.4%201.3-5.9%203.3-8.2.5%201.9%201.5%203%202.6%203.3-.6-4.7.9-9%205.2-12.3z%22/%3E%3Cpath%20fill=%22url%28%23c%29%22%20d=%22M12.6%2012.1c.4%202.5%201.7%203.6%202.9%205.2%201.1%201.5%201.5%202.8%201.5%204.2%200%202.9-2.1%205-4.9%205s-4.9-2.1-4.9-5c0-1.9.8-3.3%202-4.6.2%201%20.6%201.6%201.2%201.8-.2-2.4.7-4.6%202.2-6.6z%22/%3E%3C/svg%3E");
  vertical-align: -.14em;
  filter: drop-shadow(0 0 4px rgba(255, 106, 31, .8));
}

/* --------------------------------------------------------------- the rows */

/* The heat column reads as heat: the figure runs hot, and the bar behind the
   row is a real gradient with a bright leading edge rather than a flat wash,
   so a row's share of the board's heat is legible at a glance. */
.market-board .row .heat {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  color: #ffd9a8;
}
.market-board .row .mark-heat { align-self: center; }
.market-board .row.throne .heat { color: #fff1d8; text-shadow: 0 0 18px rgba(255, 106, 31, .45); }

.market-board .row .fill {
  background: linear-gradient(90deg,
    rgba(255, 86, 48, .04) 0%, rgba(255, 86, 48, .16) 62%, rgba(255, 138, 61, .3) 100%);
  box-shadow: inset -1px 0 0 rgba(255, 160, 80, .45);
}
.market-board .row.throne .fill {
  background: linear-gradient(90deg,
    rgba(255, 86, 48, .07) 0%, rgba(255, 96, 40, .26) 58%, rgba(255, 150, 70, .44) 100%);
  box-shadow: inset -2px 0 0 rgba(255, 190, 110, .7);
}

/* The Ember contribution, in the column that is named after the sum. */
/* The answer to "why is this project above that one when it has less Heat?".
   Small, beside the number it is added to, and unmistakably an Ember rather
   than more Heat - which is the whole reason the two have different colours. */
.heat-embers {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  color: var(--spark-hi, #d8b4fe); font: 650 11px/1 var(--mono);
  letter-spacing: .02em; white-space: nowrap;
  text-shadow: 0 0 8px rgba(168, 85, 247, .5);
}
.heat-embers .ember-spark { width: 10px; height: 10px; }

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

.crown-heat > span, .runner-heat > span { display: inline-flex; align-items: center; gap: 6px; }
.crown-heat .mark-heat { width: 13px; height: 17px; }

/* The throne's own heat, lit. It is the one number on the page that is
   supposed to look like it is burning down. */
.market-board .crown-heat > b {
  color: #fff3e2; text-shadow: 0 0 26px rgba(255, 106, 31, .5);
}
.market-board .live-heat-track {
  overflow: hidden; border-radius: 3px; background: rgba(255, 120, 40, .12);
}
.market-board .live-heat-track > i {
  background: linear-gradient(90deg, #ff2d0f, #ff6a1f 55%, #ffb33f);
  box-shadow: 0 0 12px rgba(255, 106, 31, .75);
}

/* --------------------------------------------------------------- embers */

/* Violet, and legible at zero. The empty state is deliberately not hidden:
   the board is where somebody decides whether Embers are worth chasing, and
   an absent number answers that question with "there is no such thing". */
.ember-indicator {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 5px 9px; border: 1px solid rgba(168, 85, 247, .3); border-radius: 7px;
  background: rgba(168, 85, 247, .07);
  font: 650 11px/1 var(--mono); color: #c9b6e4; white-space: nowrap;
}
.ember-indicator .ember-spark {
  display: inline-block; flex: none; width: 13px; height: 13px; font-size: 0;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cdefs%3E%3CradialGradient%20id=%22s%22%20cx=%2250%25%22%20cy=%2242%25%22%20r=%2255%25%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23fff%22/%3E%3Cstop%20offset=%22.35%22%20stop-color=%22%23f3e8ff%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23a855f7%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath%20fill=%22url%28%23s%29%22%20d=%22M12%20.8c1.3%207.7%202.2%208.6%209.9%209.9-7.7%201.3-8.6%202.2-9.9%209.9-1.3-7.7-2.2-8.6-9.9-9.9C9.8%209.4%2010.7%208.5%2012%20.8z%22/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 5px rgba(168, 85, 247, .7));
}
.ember-indicator > b { color: #f3e8ff; font-weight: 700; }
.ember-indicator > i {
  font-style: normal; color: var(--spark-hi, #d8b4fe);
  padding-left: 7px; margin-left: 1px; border-left: 1px solid rgba(168, 85, 247, .3);
}
.ember-indicator.contributing {
  border-color: rgba(168, 85, 247, .5);
  box-shadow: 0 0 18px rgba(168, 85, 247, .18);
}

/* Nothing earned yet. Still shown, still violet, just quiet about it. */
.ember-indicator.empty {
  border-color: rgba(168, 85, 247, .16); background: rgba(168, 85, 247, .03); color: #8a7ea0;
}
.ember-indicator.empty > b { color: #b9a8d4; }
.ember-indicator.empty .ember-spark { opacity: .6; filter: none; }

.ember-indicator.compact {
  padding: 0; border: 0; background: none; gap: 5px; box-shadow: none;
}
.ember-indicator.compact > span:not(.ember-spark) { display: none; }

/* On the cards it is a row of its own under the heat, so it reads as the
   second half of a sum rather than a footnote. */
.crown > .ember-indicator, .runner > .ember-indicator {
  display: inline-flex; margin-top: 10px;
}

/* The rank-power breakdown, when there is one, in the two colours. */
.rank-power-breakdown .power-paid > b { color: #ffd9a8; }
.rank-power-breakdown .power-earned > b { color: #f3e8ff; }
.rank-power-breakdown .power-boost { color: var(--spark-hi, #d8b4fe); }

@media (max-width: 720px) {
  .market-board .row .heat { gap: 4px; }
  .heat-embers { font-size: 10.5px; }
}