/* ============================================================================
   JDX MARKETS · THE STANDINGS  (assets/css/board.css)
   ---------------------------------------------------------------------------
   Loaded only by leaderboard.php, after style.css, whose tokens it inherits.

   THE IDEA
   This is an exchange record board, not a game podium. A trading leaderboard
   earns belief from the same things a settlement report does: figures that line
   up in a monospace column, proportional volume behind every row, month-on-month
   movement, an exact period, and a note saying where the numbers came from.
   So the data IS the decoration. There are no trophy emoji, no confetti, no
   three-column podium and no centred hero, because those read as a toy and this
   has R10 000 attached to it.

   The one thing to remember: every row carries a volume bar showing its share of
   the month's lots, so the shape of the competition is visible before a single
   number is read.
============================================================================ */

/* ---------------------------------------------------------------------------
   1. Page frame
--------------------------------------------------------------------------- */
.board-page {
  --board-gutter: clamp(18px, 4vw, 64px);
  --board-max: 1240px;
  --row-h: 66px;
  position: relative;
}

/* A single champagne bloom, upper right, matching the marketing pages. */
.board-page::before {
  content: "";
  position: fixed;
  top: -18vh;
  right: -12vw;
  width: 60vw;
  height: 60vh;
  background: radial-gradient(circle at 60% 40%, rgba(233, 196, 106, 0.13), transparent 62%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.board-wrap {
  position: relative;
  z-index: 1;
  max-width: var(--board-max);
  margin: 0 auto;
  padding: 0 var(--board-gutter);
}

/* ---------------------------------------------------------------------------
   2. Masthead , left-aligned and editorial, never centred
--------------------------------------------------------------------------- */
.board-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  padding: clamp(70px, 11vw, 130px) 0 34px;
  border-bottom: 1px solid var(--line);
}

.board-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.board-kicker .pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
  animation: board-pulse 2.6s var(--ease-out) infinite;
}
@keyframes board-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.board-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.9rem, 8.5vw, 6.6rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 16px 0 0;
  text-wrap: balance;
}
.board-title em {
  font-style: italic;
  background: linear-gradient(102deg, var(--gold-bright), var(--gold-deep) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.board-sub {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.72;
  max-width: 56ch;
  margin: 20px 0 0;
}
.board-sub strong { color: var(--text-soft); font-weight: 500; }

/* ---------------------------------------------------------------------------
   3. Countdown , mono digits in hairline cells, like a settlement clock
--------------------------------------------------------------------------- */
.board-clock {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(8, 8, 10, 0.7);
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.board-clock__label {
  display: grid;
  place-items: center;
  padding: 0 16px;
  border-right: 1px solid var(--line);
  background: rgba(233, 196, 106, 0.05);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  max-width: 90px;
  text-align: center;
  line-height: 1.5;
}
.board-clock__cells { display: flex; }
.board-clock__cell {
  min-width: 62px;
  padding: 13px 10px 11px;
  text-align: center;
}
.board-clock__cell + .board-clock__cell { border-left: 1px solid var(--line); }
.board-clock__n {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.42rem;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}
.board-clock__u {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* Reads "closed" once the month is over, rather than counting into negatives. */
.board-clock.is-done .board-clock__n { color: var(--text-faint); }

/* ---------------------------------------------------------------------------
   4. Prize plaque , engraved, deliberately overlapping the board above it
--------------------------------------------------------------------------- */
.board-prize {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 38px);
  margin: 44px 0 -18px;
  padding: 26px clamp(22px, 3vw, 34px);
  border: 1px solid var(--line-gold);
  border-radius: 18px;
  background:
    linear-gradient(140deg, rgba(233, 196, 106, 0.1), rgba(8, 8, 10, 0.9) 52%);
  overflow: hidden;
  z-index: 2;
}
/* Guilloche: the fine engraved lines of a banknote or a share certificate.
   Two crossing gradients at low opacity, no image required. */
.board-prize::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(58deg, rgba(233, 196, 106, 0.075) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-58deg, rgba(233, 196, 106, 0.055) 0 1px, transparent 1px 9px);
  mask-image: radial-gradient(120% 100% at 0% 50%, #000 12%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 100% at 0% 50%, #000 12%, transparent 72%);
  pointer-events: none;
}
.board-prize > * { position: relative; }

.board-prize__amount {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.4vw, 3.5rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.03em;
  background: linear-gradient(96deg, #fff4d6, var(--gold) 42%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  white-space: nowrap;
}
.board-prize__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.board-prize__copy {
  color: var(--text-soft);
  font-size: 0.93rem;
  line-height: 1.68;
  max-width: 52ch;
}
.board-prize__copy b { color: var(--text); font-weight: 600; }
.board-prize__rule {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}
.board-prize__rule span { display: inline-flex; align-items: center; gap: 7px; }
.board-prize__rule i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-deep); flex: none;
}

/* ---------------------------------------------------------------------------
   5. The board
   A real <table> for semantics and screen readers, with the layout driven by a
   shared column template so the header, the leader row and every other row stay
   in exact vertical alignment.
--------------------------------------------------------------------------- */
.board {
  --cols: 78px minmax(0, 1fr) 168px 130px 132px 82px;
  position: relative;
  margin-top: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: rgba(8, 8, 10, 0.62);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.board table { width: 100%; border-collapse: collapse; }

/* Default cell alignment, wrapped in :where() so it carries ZERO specificity.
 *
 * This was the bug behind the whole table looking crooked. Written plainly as
 * `.board tbody td { text-align: left }` it has specificity (0,1,2), which beats
 * `.board__num { text-align: right }` at (0,1,0). Every figure and every Move
 * chip was therefore left-aligned inside its cell while its header stayed
 * right-aligned, so the columns lined up perfectly and the CONTENT did not.
 *
 * :where() means a component class always wins, which is what a base default
 * should do. */
.board :where(thead th, tbody td) { text-align: left; } 

.board__hrow,
.board__row {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
}

/* Header: small caps, mono, quiet. It labels the data, it is not a feature. */
.board__hrow {
  padding: 0 clamp(16px, 2.2vw, 26px);
  height: 52px;
  border-bottom: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.018);
}
.board__hrow th {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
/* Padding must MATCH the body cells or the label sits 16px off the column it
   labels, which is the sort of near-miss that makes a table look untended. */
.board__hrow .num { text-align: right; padding-right: 16px; }
.board__hrow th:nth-child(5) { padding-right: 6px; }   /* tokens, matches --tokens */
.board__hrow .mid { text-align: center; }

/* ---- Rows ---- */
.board__row {
  position: relative;
  padding: 0 clamp(16px, 2.2vw, 26px);
  min-height: var(--row-h);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-2, 0.28s) ease;
}
.board__row:last-child { border-bottom: none; }
.board__row:hover { background: rgba(233, 196, 106, 0.035); }

/* THE signature element: a proportional volume bar behind each row showing that
   trader's share of the month. The competition is legible before a single figure
   is read. Width comes from real data via the --bar custom property.

   Drawn as a PSEUDO-ELEMENT, not a <td>.
   It was a <td> and that was a bug: `.board__row > * { position: relative }`
   below has the same specificity as `.board__bar { position: absolute }` and
   came later in the file, so it won. The bar stopped being absolutely positioned,
   became a real grid item in column 1, and shoved every cell one column to the
   right, wrapping the sixth onto a second line. A pseudo-element cannot be
   selected by `> *`, so the failure is impossible by construction, and a purely
   decorative table cell was questionable markup anyway. */
.board__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--bar, 0%);
  /* A soft wash that fades to nothing, with NO hard right edge. The previous
     version had a 1px border down the middle of every row, which read as a
     mis-rendered panel rather than as data. */
  background: linear-gradient(90deg, rgba(233, 196, 106, 0.085), rgba(233, 196, 106, 0) 92%);
  pointer-events: none;
  transform-origin: left center;
  animation: board-bar-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--bar-delay, 0s);
}
/* The measurable part: a 2px rule along the bottom edge, the same width as the
   wash. This is the bit the eye actually reads as a bar chart. */
.board__row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: var(--bar, 0%);
  background: linear-gradient(90deg, var(--gold-deep), rgba(233, 196, 106, 0.35));
  pointer-events: none;
  transform-origin: left center;
  animation: board-bar-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--bar-delay, 0s);
}
.board__row--open::before,
.board__row--open::after { display: none; }
@keyframes board-bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Lift the real cells above the bar. Safe now: a pseudo-element is not a child,
   so this can never claw the bar back into the grid. */
.board__row > * { position: relative; }

/* ---- Rank ---- */
.board__rank { display: flex; align-items: center; gap: 10px; }
.board__plate {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* Top three are engraved rather than badged. No medals, no emoji. */
.board__row--1 .board__plate,
.board__row--2 .board__plate,
.board__row--3 .board__plate {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
}
.board__row--1 .board__plate {
  border-color: rgba(233, 196, 106, 0.55);
  background: linear-gradient(150deg, rgba(244, 213, 133, 0.24), rgba(199, 154, 58, 0.09));
  color: #ffe9b0;
  box-shadow: 0 0 20px rgba(233, 196, 106, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.board__row--2 .board__plate {
  border-color: rgba(226, 232, 240, 0.32);
  background: linear-gradient(150deg, rgba(226, 232, 240, 0.12), rgba(148, 163, 184, 0.05));
  color: #e8eef2;
}
.board__row--3 .board__plate {
  border-color: rgba(205, 127, 50, 0.36);
  background: linear-gradient(150deg, rgba(205, 127, 50, 0.14), rgba(120, 72, 28, 0.05));
  color: #e8b98a;
}

/* ---- Trader ---- */
.board__who { min-width: 0; padding-right: 18px; }
.board__name {
  display: block;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board__tagline {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.61rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 4px;
}

/* The leader is given room to breathe and a gold edge, instead of a podium. */
.board__row--1 { min-height: 96px; background: rgba(233, 196, 106, 0.045); }
/* The leader's gold left edge. Drawn with an inset box-shadow rather than a
   pseudo-element, because ::before and ::after are both already spoken for by
   the volume bar. */
.board__row--1 { box-shadow: inset 2px 0 0 0 var(--gold); }
.board__row--1 .board__name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.52rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ---- Account reference ---- */
.board__acct {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 14px;
}

/* ---- Figures ---- */
.board__num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-right: 16px;
}
.board__num--tokens { padding-right: 6px; }
.board__lots {
  font-size: 1.01rem;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.01em;
}
.board__tokens {
  font-size: 1.01rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.01em;
}
.board__row--1 .board__lots,
.board__row--1 .board__tokens { font-size: 1.2rem; }
.board__row--1 .board__tokens { color: var(--gold-bright); }
/* Tiny unit label under a figure, so a column never needs a legend. */
.board__unit {
  display: block;
  text-align: inherit;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 3px;
}

/* ---- Movement , real month-on-month change ---- */
.board__move { text-align: center; }
.board__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.board__chip svg { width: 9px; height: 9px; }
.board__chip--up   { color: var(--emerald); background: rgba(52, 211, 153, 0.09); border-color: rgba(52, 211, 153, 0.22); }
.board__chip--down { color: var(--rose);    background: rgba(251, 113, 133, 0.08); border-color: rgba(251, 113, 133, 0.2); }
.board__chip--flat { color: var(--text-faint); }
.board__chip--new  {
  color: var(--ice);
  border-color: rgba(159, 214, 224, 0.28);
  background: rgba(159, 214, 224, 0.06);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
}

/* ---- Open slots , an honest empty state that doubles as an invitation ---- */
.board__row--open { min-height: 54px; opacity: 0.5; }
.board__row--open .board__plate {
  border-style: dashed;
  background: none;
  color: var(--text-faint);
}
.board__row--open .board__name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 400;
}

/* ---- Provenance strip , where the numbers came from ---- */
.board__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 15px clamp(16px, 2.2vw, 26px);
  border-top: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.014);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  line-height: 1.6;
}
.board__foot b { color: var(--text-muted); font-weight: 500; }
.board__verify { display: inline-flex; align-items: center; gap: 8px; }
.board__verify svg { width: 13px; height: 13px; color: var(--emerald); flex: none; }

/* ---------------------------------------------------------------------------
   7. How it works , editorial notes with hairline numerals, not cards
--------------------------------------------------------------------------- */
.board-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(26px, 4vw, 54px);
  padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 70px);
}
.board-note { position: relative; padding-top: 26px; border-top: 1px solid var(--line-gold); }
.board-note__n {
  position: absolute;
  top: -13px;
  left: 0;
  padding-right: 12px;
  background: var(--obsidian);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
}
.board-note h3 {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--text);
}
.board-note p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.75; margin: 0; }
.board-note p + p { margin-top: 10px; }
.board-note code {
  font-family: var(--font-mono);
  font-size: 0.84em;
  color: var(--gold);
  background: rgba(233, 196, 106, 0.08);
  border: 1px solid var(--line-gold);
  border-radius: 5px;
  padding: 1px 6px;
}

/* ---------------------------------------------------------------------------
   8. Hall of record , past winners as a ledger, which is what builds belief
--------------------------------------------------------------------------- */
.board-archive { padding-bottom: clamp(60px, 8vw, 100px); }
.board-archive__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-strong);
}
.board-archive__head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0;
}
.board-archive__head p {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0;
}

.ledger { margin-top: 4px; }
.ledger__row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 150px 132px auto;
  align-items: center;
  gap: 16px;
  padding: 19px 4px;
  border-bottom: 1px solid var(--line);
}
.ledger__row:hover { background: rgba(255, 255, 255, 0.014); }
.ledger__month {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ledger__who { min-width: 0; }
.ledger__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ledger__acct {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-top: 3px;
}
.ledger__fig {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
}
.ledger__fig small {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 3px;
}
.ledger__prize {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.ledger__paid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid rgba(52, 211, 153, 0.26);
  background: rgba(52, 211, 153, 0.07);
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ledger__paid svg { width: 10px; height: 10px; }
.ledger__paid--due {
  border-color: var(--line-gold);
  background: rgba(233, 196, 106, 0.06);
  color: var(--gold);
}

/* ---------------------------------------------------------------------------
   9. Entry call to action
--------------------------------------------------------------------------- */
.board-enter {
  position: relative;
  margin: 0 0 clamp(70px, 9vw, 110px);
  padding: clamp(34px, 5vw, 58px) clamp(26px, 4vw, 54px);
  border: 1px solid var(--line-gold);
  border-radius: 22px;
  background:
    radial-gradient(110% 150% at 100% 0%, rgba(233, 196, 106, 0.12), transparent 58%),
    linear-gradient(160deg, rgba(20, 17, 10, 0.9), rgba(8, 8, 10, 0.95));
  overflow: hidden;
}
.board-enter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto;
  align-items: center;
  gap: clamp(26px, 4vw, 52px);
}
.board-enter h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 14px 0 0;
}
.board-enter p { color: var(--text-soft); font-size: 0.96rem; line-height: 1.7; margin: 16px 0 0; max-width: 54ch; }
.board-enter__cta { display: flex; flex-direction: column; gap: 12px; min-width: 232px; }
.board-enter__note { font-size: 0.74rem; line-height: 1.6; color: var(--text-faint); margin-top: 4px; }
.board-enter__note a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.board-enter__note a:hover { color: var(--gold); }

/* ---------------------------------------------------------------------------
   10. Waiting state , shown before the first month is ever published.
   Day one must not look like a bug.
--------------------------------------------------------------------------- */
.board-soon {
  margin-top: 30px;
  padding: clamp(46px, 7vw, 80px) clamp(24px, 4vw, 52px);
  border: 1px dashed var(--line-gold);
  border-radius: 20px;
  background: rgba(233, 196, 106, 0.028);
  text-align: center;
}
.board-soon h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 18px 0 0;
}
.board-soon p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.72;
  max-width: 52ch;
  margin: 14px auto 0;
}
.board-soon__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid var(--line-gold);
  background: rgba(233, 196, 106, 0.07);
  color: var(--gold);
}
.board-soon__mark svg { width: 26px; height: 26px; }

/* ---------------------------------------------------------------------------
   11. Responsive
   Below 900px the grid collapses into stacked records. The figures stay in a
   mono row so they remain comparable down the page, which is the whole point of
   a standings table: shrinking the desktop columns would make them unreadable.
--------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .board { --cols: 66px minmax(0, 1fr) 118px 112px 74px; }
  .board__acct { display: none; }
  .board__hrow .col-acct { display: none; }
}

@media (max-width: 900px) {
  .board-head { grid-template-columns: 1fr; align-items: start; gap: 26px; }
  .board-clock { align-self: start; }
  .board-prize { grid-template-columns: 1fr; margin-bottom: 0; gap: 16px; }
  .board-enter__grid { grid-template-columns: 1fr; }
  .board-enter__cta { min-width: 0; }
}

@media (max-width: 720px) {
  /* Header row is meaningless once the columns stack. */
  .board__hrow { display: none; }
  .board thead { display: none; }

  .board__row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "plate who  move"
      "plate lots tokens";
    row-gap: 11px;
    column-gap: 14px;
    padding: 17px clamp(14px, 3vw, 20px);
    min-height: 0;
  }
  .board__row--1 { min-height: 0; }
  .board__rank { grid-area: plate; align-self: start; }
  .board__who  { grid-area: who; padding-right: 0; }
  .board__move { grid-area: move; text-align: right; align-self: start; }
  .board__acct { display: none; }

  /* Each figure keeps its own column so they stay aligned down the page, which
     is the entire reason a standings table exists. */
  .board__num--lots   { grid-area: lots; text-align: left; padding-right: 0; }
  .board__num--tokens { grid-area: tokens; text-align: right; padding-right: 0; }
  .board__unit { display: inline; margin-left: 6px; margin-top: 0; }
  .board__row--1 .board__name { font-size: 1.2rem; }
  .board__row--1 .board__lots,
  .board__row--1 .board__tokens { font-size: 1.06rem; }

  .board__foot { flex-direction: column; align-items: flex-start; gap: 9px; }

  .ledger__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "month prize"
      "who   who"
      "figs  paid";
    row-gap: 10px;
  }
  .ledger__month { grid-area: month; }
  .ledger__who   { grid-area: who; }
  .ledger__prize { grid-area: prize; }
  .ledger__paid  { grid-area: paid; justify-self: end; }
  .ledger__figs  { grid-area: figs; display: flex; gap: 20px; }
  .ledger__fig   { text-align: left; }
}

@media (max-width: 480px) {
  .board-clock__cell { min-width: 52px; padding: 11px 7px 9px; }
  .board-clock__n { font-size: 1.18rem; }
  .board-clock__label { max-width: 74px; font-size: 0.52rem; padding: 0 11px; }
}

/* ---------------------------------------------------------------------------
   12. Motion, print and reduced-motion
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .board__row::before { animation: none; }
  .board-kicker .pulse { animation: none; }
}

/* The desk prints the board to check it against the broker statement. */
@media print {
  .board-page::before,
  .board-enter,
  .board-clock { display: none !important; }
  .board { border-color: #999; background: none; backdrop-filter: none; }
  .board__row::before { display: none; }
  .board-title, .board__name, .board__tokens, .ledger__name { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .board__row { border-color: #ccc; }
}