/* ============================================================================
   The desktop scoreboard.

   SHAPE. `#portfolio-section`'s shape, deliberately: a 316px rail of cards
   beside one framed pane, a 14px gutter, a tab strip welded to the top of the
   pane, and a dense table inside it. This page is the third of the redesigned
   set and it must not invent a fourth layout.

   TOKEN VALUES ONLY. Nothing here declares a colour, a radius or a font size
   that app.css :root has not already named, and no component sets a font
   size — every step is a `.t-*` class in the markup.

   THREE THINGS THIS FILE HOLDS TO
   1. Elevation is the SURFACE LADDER, never a shadow. --panel-sunken <
      --card-bg < --background < --secondary. Cards are DARKER than the
      ground: --card-bg is the header band's colour and the trade ticket's,
      so this page is painted the same as the page a trader buys on. See the
      ladder note in app.css :root.
   2. Gold (--accent) is money that will be paid, and nothing else. Blue
      (--primary) is you, and nothing else. Ranks 1-3 lift by surface.
   3. #scoreboard-section is on the `border-radius: 0 !important` exclusion
      list at app.css:16515, so radii here need no !important — unlike
      portfolio.css, which is not on that list.
   ========================================================================= */

/* Under 992px the phone keeps the table; the desktop view is not rendered. */
#scoreboard-cards { display: none; }

@media (min-width: 992px) {
  #scoreboard-cards { display: block; }
  #scoreboard-section .sb-legacy { display: none !important; }
}

/* 32px of air under the header band, not 20. MEASURED on the Hyperliquid
   portfolio in Chrome on 2026-08-21: its nav band is 0..56 (the same 56px
   this header is), and the page title row starts 32px under the band below
   it. The four redesigned pages share this value. The TRADE page is not on
   it — a working surface starts at the chrome. */
#scoreboard-cards .sbc-wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 32px 20px 80px;
}

/* ---------------------------------------------------------- page head --
   Title left, every control right, on one row — `.pf-head`. */
#scoreboard-cards .sbc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
#scoreboard-cards .sbc-head-l { display: flex; align-items: baseline; gap: 14px; }
#scoreboard-cards .sbc-title { margin: 0; color: var(--text-primary); }
#scoreboard-cards .sbc-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
}
#scoreboard-cards .sbc-sub span { font-variant-numeric: tabular-nums; }
#scoreboard-cards .sbc-sep {
  width: 1px;
  height: 11px;
  background: var(--border-light);
  display: block;
}
#scoreboard-cards .sbc-head-r { display: flex; align-items: center; gap: 8px; }
#scoreboard-cards .sbc-btn {
  padding: 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: var(--r-input);
  background: transparent;
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
#scoreboard-cards .sbc-btn:hover { border-color: var(--border-light); color: var(--text-primary); }
/* Presses on pointer-down. Scale only — transform and opacity are the two
   properties that never cost a layout pass. */
#scoreboard-cards .sbc-btn:active { transform: scale(0.97); }
/* Matches #trade-now-btn and `.pf-btn-pri`, so the three pages press the same
   button. */
#scoreboard-cards .sbc-btn-pri {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--background);
}
#scoreboard-cards .sbc-btn-pri:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--background);
}

/* -------------------------------------------------------------- band --
   316px rail + pane, the split #portfolio-section uses. */
#scoreboard-cards .sbc-band {
  display: grid;
  grid-template-columns: 316px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

/* `.sbc-rail` is a column, not a card: no border of its own. */
/* STICKY, AND SHORT ENOUGH TO STICK — WITHOUT A SCROLLBAR.
   A sticky element taller than the viewport does not pin its top; it scrolls
   with the page until its BOTTOM edge arrives. The first fix capped the rail
   and let it scroll inside itself, which pinned correctly but put a scrollbar
   in a sidebar — worse than the problem.
   The rail is short enough on its own now: the rank card was compacted and
   the rules prose moved behind a disclosure, so the three cards fit without a
   cap. No max-height, no overflow, no inner scrollbar. If a future card makes
   the rail taller than the viewport again, SHORTEN THE CARD — do not put the
   scrollbar back. */
#scoreboard-cards .sbc-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 16px;
}

#scoreboard-cards .sbc-rail-hero,
#scoreboard-cards .sbc-list {
  border: 1px solid var(--border-color);
  border-radius: var(--r-card);
  background: var(--card-bg);
}
/* More padding than the list cards, and the one step UP the surface ladder
   (--secondary, the only surface above the page ground, against the lists'
   --card-bg below it): the rail has three cards and only one is about you. */
#scoreboard-cards .sbc-rail-hero {
  padding: 14px 16px 14px;
  background: var(--secondary);
  /* A floor only. The four states are the same height by CONSTRUCTION — one
     figure line box, one bar, one key, two rows and one note slot, all
     printed on every state — so the rail does not resize when you switch
     period and your standing changes from ranked to not. */
  min-height: 168px;
}
/* A 3px left border on a 10px-radius card renders as a rounded blue sliver
   that matches nothing else on the page. The whole border carries it instead:
   one hairline, the card's own shape, no stray edge. */
#scoreboard-cards .sbc-rail-hero.is-ranked { border-color: rgba(125, 211, 252, 0.4); }
#scoreboard-cards .sbc-lbl { color: var(--text-muted); }
#scoreboard-cards .sbc-hero-fig {
  margin-top: 4px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
#scoreboard-cards .sbc-hero-of { color: var(--text-muted); margin-left: 8px; }
/* The empty states sit at --fs-fig, not --fs-hero: the hero step exists for a
   number, and there is no number here. The LINE BOX still has to be the hero's,
   or the card is shorter when you are unranked and the rail resizes under the
   pointer on a period switch: 20px x 1.89 = 37.8px, the same box --fs-hero
   makes at line-height 1.05. Same margin-top as the ranked figure, too. */
#scoreboard-cards .sbc-hero-fig.is-empty {
  color: var(--text-secondary);
  line-height: 1.89;
}
#scoreboard-cards .sbc-hero-blank { color: var(--text-muted); margin-top: 8px; }

/* ------ the score bar: ONE track, filled to the score ------
   Each segment is that component's points as a share of 100, laid end to end.
   The bar's total length is the score; the colours say what it is made of.
   No gaps: a gap makes three stubs and then no length on the bar means
   anything. This is the original `.score-bar-inline` (app.css:14860). */
#scoreboard-cards .sbc-bar {
  display: flex;
  height: 5px;
  margin-top: 12px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
#scoreboard-cards .sbc-seg { display: block; height: 100%; min-width: 0; }
#scoreboard-cards .sbc-seg.is-premium { background: var(--score-premium); }
#scoreboard-cards .sbc-seg.is-profit  { background: var(--score-profit); }
#scoreboard-cards .sbc-seg.is-trade   { background: var(--score-trade); }

/* The key IS the legend: each name in its segment's colour, points beside it.
   Printed once, on your card. */
#scoreboard-cards .sbc-legend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
}
/* The name is the coloured half; the points beside it are a figure, so they
   print in --text-primary like every other figure on the page. */
#scoreboard-cards .sbc-leg {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#scoreboard-cards .sbc-leg b { font-weight: 600; margin-right: 5px; }
/* The INK variants, not the bar fills: #3b82f6 measures 3.86:1 and #8b5cf6
   3.36:1 on --secondary at 12px/600, both under the 4.5 floor. See the token
   note in app.css :root. */
#scoreboard-cards .sbc-leg b.is-premium { color: var(--score-premium-ink); }
#scoreboard-cards .sbc-leg b.is-profit  { color: var(--score-profit-ink); }
#scoreboard-cards .sbc-leg b.is-trade   { color: var(--score-trade-ink); }

/* The last line is a SLOT, not an optional element: it is printed on every
   state, empty on the ranked one, so all four states close at the same
   height. `min-height` is one line at --fs-ui x 1.4, so a note that wraps
   still grows the card rather than being clipped. */
#scoreboard-cards .sbc-hero-note {
  margin: 9px 0 0;
  min-height: calc(var(--fs-ui) * 1.4);
  color: var(--text-muted);
}

/* the hero card's closing two lines */
#scoreboard-cards .sbc-hero-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}
#scoreboard-cards .sbc-hero-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0;
}
#scoreboard-cards .sbc-hero-row-k { color: var(--text-muted); }
#scoreboard-cards .sbc-hero-row-v {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
#scoreboard-cards .sbc-hero-row-v.gold { color: var(--accent); }

/* ------ the two rail lists: label left, value right, no rules ------ */
#scoreboard-cards .sbc-list { padding: 12px 16px 12px; }
#scoreboard-cards .sbc-list-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  margin-bottom: 3px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
}
#scoreboard-cards .sbc-list-h-v {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
#scoreboard-cards .sbc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
}
#scoreboard-cards .sbc-row-k { color: var(--text-muted); white-space: nowrap; }
#scoreboard-cards .sbc-row-v {
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#scoreboard-cards .sbc-row-v.gold { color: var(--accent); }
/* All time pays nothing, so the tiers are stated without the money colour. */
#scoreboard-cards .sbc-row-v.muted { color: var(--text-muted); }
/* The countdown, divided from the tiers by a hairline: the tiers are the
   pool, this is when it closes. Same row shape, so the card stays one grid. */
#scoreboard-cards .sbc-purse-clock {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

#scoreboard-cards .sbc-note {
  margin: 10px 0 0;
  color: var(--text-muted);
}
/* Fixed, not just a floor: both notes are one line at 316px, and a min-height
   alone still let the longer one push the card taller and resize the rail. */
#scoreboard-cards .sbc-note-fixed { height: 1.4em; overflow: hidden; }
#scoreboard-cards .sbc-note a { color: var(--primary); text-decoration: none; }
#scoreboard-cards .sbc-note a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- main --
   Tab strip welded to the top of the pane, exactly `.pf-tabs` + `.pf-pane`. */
#scoreboard-cards .sbc-main { min-width: 0; }
/* ---------------------------------------------------------- the strip --
   The period's totals, as the header of the board they describe. Five equal
   cells divided by hairlines, not five cards: they are one set of facts
   about one board, and a border around each would say they are five
   separate things. */
#scoreboard-cards .sbc-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--border-color);
  border-radius: var(--r-card);
  background: var(--card-bg);
  margin-bottom: 14px;
}
#scoreboard-cards .sbc-strip-cell {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 16px;
  border-left: 1px solid var(--border-color);
  min-width: 0;
}
#scoreboard-cards .sbc-strip-cell:first-child { border-left: 0; }
#scoreboard-cards .sbc-strip-k { color: var(--text-muted); }
#scoreboard-cards .sbc-strip-v {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------- how scoring works --
   The three parts and their CAPS, stated as a rule. Each bar's length is
   that part's share of SCORE_MAX, so the three lengths ARE the 30/40/30
   split and the card needs no legend. */
/* The full rules are one click away, not gone: the caps and their bars stay
   printed, and the paragraph that states how a prize is won sits under a
   disclosure so the rail fits a viewport without a scrollbar. */
#scoreboard-cards .sbc-rules-more { margin-top: 14px; }
#scoreboard-cards .sbc-rules-more > summary {
  cursor: pointer;
  color: var(--text-muted);
  list-style: none;
  padding: 4px 0;
  transition: color 0.15s ease;
}
#scoreboard-cards .sbc-rules-more > summary::-webkit-details-marker { display: none; }
#scoreboard-cards .sbc-rules-more > summary::after {
  content: '\203A';
  float: right;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}
#scoreboard-cards .sbc-rules-more[open] > summary::after { transform: rotate(-90deg); }
#scoreboard-cards .sbc-rules-more > summary:hover { color: var(--text-primary); }
#scoreboard-cards .sbc-rules-clip {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
#scoreboard-cards .sbc-rules-more[open] .sbc-rules-clip { grid-template-rows: 1fr; }
/* The closing state: still `[open]`, so the content is still rendered and the
   row can transition back to 0fr. `renderRules` removes the class and clears
   `open` when the transition ends. */
#scoreboard-cards .sbc-rules-more[open].is-closing .sbc-rules-clip { grid-template-rows: 0fr; }
#scoreboard-cards .sbc-rules-more.is-closing > summary::after { transform: rotate(90deg); }
#scoreboard-cards .sbc-rules-clip > * { min-height: 0; overflow: hidden; }
/* PADDING, not margin. A margin on the clipped child sits outside the grid
   row, so the closed state kept an 8px sliver open under the summary. */
#scoreboard-cards .sbc-rules-more .sbc-note { margin: 0; padding-top: 8px; }

#scoreboard-cards .sbc-cap { margin-top: 12px; }
#scoreboard-cards .sbc-cap-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
#scoreboard-cards .sbc-cap-k { color: var(--text-primary); font-weight: 600; }
#scoreboard-cards .sbc-cap-v { font-variant-numeric: tabular-nums; }
/* Text, so the ink variants. The bars two lines below keep the fills. */
#scoreboard-cards .sbc-cap-v.is-premium { color: var(--score-premium-ink); }
#scoreboard-cards .sbc-cap-v.is-profit  { color: var(--score-profit-ink); }
#scoreboard-cards .sbc-cap-v.is-trade   { color: var(--score-trade-ink); }
#scoreboard-cards .sbc-cap-t {
  display: block;
  height: 5px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
#scoreboard-cards .sbc-cap-f { display: block; height: 100%; }
#scoreboard-cards .sbc-cap-f.is-premium { background: var(--score-premium); }
#scoreboard-cards .sbc-cap-f.is-profit  { background: var(--score-profit); }
#scoreboard-cards .sbc-cap-f.is-trade   { background: var(--score-trade); }

/* 8px of vertical padding and 16px of inset. The sort pills are 32px tall
   inside a strip whose only height came from the tabs' own padding, so they
   sat hard against the top and bottom edges with nothing around them. */
#scoreboard-cards .sbc-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-bottom: 0;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--card-bg);
}
#scoreboard-cards .sbc-tabstrip { display: flex; }
#scoreboard-cards .sbc-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px 7px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
#scoreboard-cards .sbc-tab:hover { color: rgba(255, 255, 255, 0.8); }
/* Feedback on pointer-DOWN, not on release. Waiting for the click to show
   anything is what makes a control feel dead. */
#scoreboard-cards .sbc-tab:active { color: #fff; }
#scoreboard-cards .sbc-tab.active { color: #fff; border-bottom-color: var(--primary); }
/* A `<span>`, never `<b>`: the UA `bolder` weight resolves off the ladder. */
#scoreboard-cards .sbc-tab-n {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
/* The original scoreboard's sort strip: a label and four buttons, the live
   one filled. A `<select>` hides three of the four fields behind a click and
   makes the reader open a menu to learn what the board can be ordered by. */
#scoreboard-cards .sbc-tools { display: flex; align-items: center; gap: 10px; }
#scoreboard-cards .sbc-tools-lbl { color: var(--text-muted); }
#scoreboard-cards .sbc-sorts { display: flex; align-items: center; gap: 6px; }
#scoreboard-cards .sbc-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border: 1px solid var(--border-color);
  border-radius: var(--r-input);
  background: var(--panel-sunken);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
#scoreboard-cards .sbc-sort:hover { border-color: var(--border-light); color: var(--text-primary); }
#scoreboard-cards .sbc-sort:active { transform: scale(0.97); }
/* Blue is you, everywhere else on this page. The live sort is the one control
   the reader is standing on, so it takes --primary too and nothing else in
   the strip carries a fill. */
#scoreboard-cards .sbc-sort.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--background);
}
#scoreboard-cards .sbc-sort i { font-size: 0.8em; }

#scoreboard-cards .sbc-pane {
  border: 1px solid var(--border-color);
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: var(--card-bg);
  overflow-x: auto;
}

/* ---------------------------------------------------------- the rows --
   A LIST of two-line rows, not a table. The reasons are on `rowHtml` in
   scoreboard-cards.js; the short form is that seven labelled figures do not
   fit as seven columns in 888px, and abbreviating a label until it stops
   naming its own number is not an option here.
   There is no header row, so nothing can scroll away from its labels: every
   figure on line 2 carries its own. Sorting was never in the headers on this
   page either — it is the four-button strip above.

   NAMED `.sbc-lrow`, not `.sbc-row`: `.sbc-row` is already the rail cards'
   key/value line (:233), which is a flex row. A board row that reuses the
   name inherits `display: flex` and lays its two lines side by side. */
#scoreboard-cards .sbc-rows { display: flex; flex-direction: column; }

/* TWO COLUMNS: the trader, and the caret that opens them. The payout column
   went into the expand panel — see `rowHtml` for why a 104px gold cell was
   the row's loudest ink on its most derivable figure. The trader column takes
   the width back, which is where the score bar's length lives. */
#scoreboard-cards .sbc-lrow {
  display: grid;
  /* TWO COLUMNS: the trader on the left over two lines, the meter on the
     right across both of them. The meter track is FIXED, not `auto`: each
     row is its own grid, so a content-sized track would be as wide as that
     row's own score and the figures would jitter down the board. 444 = the
     bar's 360 cap + the 12px gap + a 72px slot for the widest score
     `_assignScoreDecimals` can print ("12.345678"). */
  grid-template-columns: minmax(0, 1fr) 444px;
  align-items: center;
  padding: 11px 16px 12px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
#scoreboard-cards .sbc-lrow:last-child { border-bottom: 0; }
#scoreboard-cards .sbc-lrow:hover { background: rgba(255, 255, 255, 0.025); }
#scoreboard-cards .sbc-lrow.is-open { background: rgba(255, 255, 255, 0.045); }
#scoreboard-cards .sbc-lrow:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Blue is you. A left border, not a fill, so a paid row can still be gold. */
#scoreboard-cards .sbc-lrow.is-me {
  background: rgba(125, 211, 252, 0.07);
  box-shadow: inset 2px 0 0 var(--primary);
}
#scoreboard-cards .sbc-lrow.is-me:hover,
#scoreboard-cards .sbc-lrow.is-me.is-open { background: rgba(125, 211, 252, 0.1); }

/* ---- line 1: rank, address, the bar, the score, the prize ----
   The bar takes whatever the fixed slots leave, which is ~450px against the
   148 it had as a table cell. It is the only length-encoded comparison on a
   board that ranks and pays on score, so it gets the room. */
#scoreboard-cards .sbc-r1 {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* THE METER: the bar and its figure, as one element, centred against both
   lines of the row. End-justified, so the score's RIGHT edge lands on the
   same x on every row of every period and the column can be read straight
   down. Its left edge moves with the digit count, which is what right-aligned
   numerals are for. */
#scoreboard-cards .sbc-meter {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

/* CENTRED, on every rank. The podium chip is an inline-flex box that centres
   its digit; a plain numeral in the same 30px slot sat hard left, so ranks
   1-3 and 4-down did not line up down the board. Centre is the chip's
   constraint, so it is the one both must take. */
#scoreboard-cards .sbc-rank {
  flex: 0 0 30px;
  text-align: center;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* Ranks 4 and below only — a podium rank wears a metal chip and its ink is
   set with the chip, further up this file. These three would otherwise win on
   source order and repaint the numeral on top of its own chip. */
#scoreboard-cards .sbc-lrow.is-paid:not(.is-top) .sbc-rank { color: var(--text-secondary); }
#scoreboard-cards .sbc-lrow.is-me:not(.is-top) .sbc-rank { color: var(--primary); }

/* THE PODIUM.
   The file used to say "ranks 1-3 lift by SURFACE, never by colour, no medal,
   no gradient chip". That rule is retired here by the owner's decision: three
   steps of white tint were measurably present and still read as nothing, and
   the ORIGINAL odette board marked its podium with metal. So the mark is now
   a filled METAL CHIP on the rank numeral — gold, silver, bronze.

   THIS DOES NOT BREAK THE MONEY RULE. --accent (#FDE047) still means, and only
   means, a figure that will be paid, and it appears on this row in exactly one
   place: the prize slot. The chips are metals, not --accent — #D4A017 is a
   deeper, browner gold that does not read as the prize yellow beside it — and
   a chip states a POSITION, never an amount. The chips are therefore printed
   on all three periods, including All time, where nothing is paid: rank 1 of
   all time IS rank 1, and saying so claims no money. */
#scoreboard-cards .sbc-lrow.is-top .sbc-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  height: 20px;
  border-radius: var(--r-xs);
  color: #10151F;
  font-weight: 700;
}
#scoreboard-cards .sbc-lrow.is-top-1 .sbc-rank { background: #D4A017; }
#scoreboard-cards .sbc-lrow.is-top-2 .sbc-rank { background: #A8B3C4; }
#scoreboard-cards .sbc-lrow.is-top-3 .sbc-rank { background: #B0763C; }
/* THE ROW KEEPS THE ORDINARY SURFACE. The chip is the mark and it is enough;
   tinting the row as well gave the podium two marks for one fact, and a
   coloured band behind a dense row of figures costs legibility to say
   something the chip already said. Ranks 1-3 differ from rank 4 by the chip
   alone. */

#scoreboard-cards .sbc-addr {
  flex: 0 0 auto;
  color: var(--text-primary);
  font-family: var(--mono);
  font-size: var(--fs-data);
  text-decoration: none;
  transition: color 0.15s ease;
}
#scoreboard-cards .sbc-addr:hover { color: var(--text-primary); text-decoration: underline; }
#scoreboard-cards .sbc-lrow.is-me .sbc-addr { color: var(--primary); }

/* ---- the trollbox display name, INLINE on this board ---------------------
   `.tb-ident` is a two-line stack in app.css, which is right for the phone
   table and the open-positions list. It is wrong here: names arrive from
   Firestore AFTER the row is painted, and `.sbc-lrow` has auto row heights,
   so a stack would grow every named row by a line about one round trip after
   render — a board that re-flows while you read it, with named and unnamed
   rows at different heights.
   Laid out in a row the height never changes, painted or not. It always fits:
   the trader column is minmax(0,1fr) — ~500px at the 992px breakpoint — and
   the name is capped at 14ch (app.css:19404), which ellipsises past that. */
#scoreboard-cards .sbc-addr .tb-ident {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}

/* Once a name is shown IT is the identifier and the address is the proof
   beside it, so the address demotes. Only when a name actually painted —
   an unnamed row keeps its address at full weight, because that is all the
   row has. 0.85em, not app.css's 0.72em: that size was chosen for a second
   line under a name, and reads too small standing next to one. */
#scoreboard-cards .sbc-addr .tb-ident-named .tb-ident-addr {
  font-size: 0.85em;
  color: var(--text-muted);
}

/* Rule 2 of this file: blue is you, and nothing else. The demotion above
   must not take that mark off your own row. */
#scoreboard-cards .sbc-lrow.is-me .sbc-addr .tb-ident-named .tb-ident-addr {
  color: var(--primary);
}
#scoreboard-cards .sbc-chip {
  flex: 0 0 auto;
  color: var(--primary);
  border: 1px solid rgba(125, 211, 252, 0.35);
  border-radius: var(--r-xs);
  padding: 1px 5px;
}

/* CAPPED. The bar grew to whatever the pane left it — 574px on a 1260 page —
   which stretched line 1 edge to edge and pulled the score and the prize away
   from the address they belong to. A length comparison does not get more
   readable past ~360px; it just makes the row longer to cross. */
#scoreboard-cards .sbc-meter .sbc-bar {
  flex: 1 1 auto;
  max-width: 360px;
  min-width: 150px;
  margin-top: 0;
}
/* --fs-fig, the row's LARGEST figure — this is the number the board is
   ordered by and paid on, and the only figure on the row a reader cannot
   derive from another mark on it.
   The prize used to hold this step. It was the wrong figure to give it to:
   a prize is a function of RANK, and the rank is already marked at the far
   left by a metal chip, so the gold column restates it in dollars. On a
   fifteen-row paying week it prints four distinct values, seven of them the
   same $50, and the rail beside the board prints the whole ladder anyway.
   The loudest ink on the row was on its most redundant figure.
   The prize has since left the row entirely; the score is the only figure
   on line 1 that carries a step. THE MONEY RULE IS UNTOUCHED — --accent
   still means, and only means, a figure that will be paid. See
   `.sbc-stat.is-prize` in the expand panel.

   NOT a fixed 52px wide. `score.js _assignScoreDecimals` raises precision up
   to SIX decimals to separate traders who tie at 2dp, so this cell can hold
   "12.345678". It grows into the bar's slack instead; the bar keeps its own
   150px floor. */
#scoreboard-cards .sbc-score-v {
  flex: 0 1 auto;
  min-width: 52px;
  text-align: right;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* The prize is no longer on the row. It is the first mark of the expand
   panel's trio row — `.sbc-stat.is-prize`, below. */

/* The caret. The row has been `role="button"` with `aria-expanded` since it
   was built, so a screen reader was always told it opens — nothing on screen
   said so. Column 3, spanning both lines like the prize, and it rotates to
   point up when the drawer is open, so it reports the state as well as the
   affordance. Muted until the row is hovered or focused: fifteen bright
   carets down a board would be a column of chrome competing with the
   figures. */
#scoreboard-cards .sbc-caret {
  flex: 0 0 auto;
  display: flex;
  color: var(--text-muted);
  font-size: 0.75rem;
  /* THE FLIP IS INSTANT, AND THAT IS DELIBERATE. A `transform` transition
     here does not run: VERIFIED in Chrome on 2026-08-21, the CSSTransition
     was created and then sat at currentTime 0 for as long as the row stayed
     open, so the computed value held at the identity matrix and the caret
     never turned. Forcing `transition: none` on the element snapped it
     straight to 180deg, which proves the rule and its specificity are right
     and the transition alone is what swallowed it. An explicit
     `rotate(0deg)` start value did not fix it either.
     Rather than ship a turn that silently does not happen, the caret flips
     on the frame the row opens. The colour still eases. Do not add
     `transform` back to this list without re-testing the open state in
     Chrome and reading the computed matrix — not by eye. */
  transform: rotate(0deg);
  transition: color 0.15s ease;
}
#scoreboard-cards .sbc-lrow:hover .sbc-caret,
#scoreboard-cards .sbc-lrow:focus-visible .sbc-caret { color: var(--text-secondary); }
/* 90deg, not 180: the mark is a `>` that turns to point DOWN at the drawer
   it opened, which is the direction the panel actually grows. */
#scoreboard-cards .sbc-lrow.is-open .sbc-caret {
  transform: rotate(90deg);
  color: var(--text-primary);
}
/* ---- line 2: the three marks the reader can sort by ----
   Value first, unit-word after. Fixed tracks, so a figure still reads down
   the board with no header row.
   The consistency trio that used to sit right of a `1fr` void is now in the
   expand panel; see `rowHtml` for why. With three marks there are no longer
   two chunks to separate, so the void and the `.is-gap` placement went with
   them. */
#scoreboard-cards .sbc-r2 {
  display: grid;
  /* All three FIXED, so the band is a constant width packed to the left and
     the slack lands at the row's end. Spreading them across the full pane
     puts 200px of nothing between figures belonging to one trader.
     The widths are MEASURED, not guessed: widest rendered content per track
     across all 72 rows of the all-time board on 2026-08-21, at the formats
     those marks are now printed in, is 115 / 124 / 72px ($1,202,385 volume,
     $5,056.89 premium, 926 trades). Re-measure before narrowing any of them.
     Volume's track lost 20px to dropping the cents. */
  grid-template-columns: 118px 126px 74px;
  gap: 24px;
  margin: 6px 0 0 42px;   /* clears the rank slot, so line 2 starts under the address */
}
#scoreboard-cards .sbc-stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}
/* The figure leads. Left-aligned tabular numerals, so a bigger number is a
   longer mark. */
#scoreboard-cards .sbc-stat b {
  /* --text-primary, not --text-secondary: this IS the figure. Only the unit
     word beside it stays muted. See portfolio.css. */
  color: var(--text-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The unit, not a label: lowercase, muted, trailing. It reads as texture
   rather than as a form field the reader has to parse before the number. */
#scoreboard-cards .sbc-stat i {
  color: var(--text-muted);
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* No mark for the ordered column. One ink step at 12px on a muted word is
   below the threshold at which anyone sees it — a feature nobody can perceive
   is not a feature. The filled sort button above the board carries it. */

/* ------------------------------------------------------- the row detail --
   The original scoreboard's expand panel, on this page's surfaces: --panel-
   sunken so it reads as a drawer opened UNDER the row, not another row. */
/* The drawer animates on GRID ROWS: 0fr -> 1fr is the only way to transition
   to a content-driven height without measuring it in JS. `.sbc-detail-clip`
   needs `min-height: 0` and `overflow: hidden`, or the row refuses to shrink
   below its content. */
#scoreboard-cards .sbc-detail {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--panel-sunken);
  border-bottom: 1px solid var(--border-color);
  opacity: 0;
  transition: grid-template-rows 0.26s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.15s ease;
}
#scoreboard-cards .sbc-detail.is-in { grid-template-rows: 1fr; opacity: 1; }
#scoreboard-cards .sbc-detail-clip { min-height: 0; overflow: hidden; }
/* 16px, the same inset every row uses, so the panel's edges line up with the
   row that opened it. */
#scoreboard-cards .sbc-detail-in {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
}
#scoreboard-cards .sbc-dbar {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 74px;
  align-items: center;
  gap: 16px;
}
#scoreboard-cards .sbc-dbar-l { color: var(--text-secondary); }
#scoreboard-cards .sbc-dbar-t {
  display: block;
  height: 5px;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
#scoreboard-cards .sbc-dbar-f { display: block; height: 100%; border-radius: var(--r-xs); }
#scoreboard-cards .sbc-dbar-f.is-premium { background: var(--score-premium); }
#scoreboard-cards .sbc-dbar-f.is-profit  { background: var(--score-profit); }
#scoreboard-cards .sbc-dbar-f.is-trade   { background: var(--score-trade); }
#scoreboard-cards .sbc-dbar-v {
  text-align: right;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* The consistency trio, moved off the row. It is EVIDENCE, not a score part,
   so it sits under a rule rather than in the bar stack — and it needs no
   group heading, because each mark already carries its own unit word.
   `.sbc-stat` is reused verbatim: it is the row's mark, and this is the same
   reading one level down. */
#scoreboard-cards .sbc-drow {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: baseline;
  margin-top: 3px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}
/* One rule between the bars and everything under them, not two. The foot
   keeps its own border for the case where no trio is printed. */
/* The prize, in the panel. Gold still means, and only means, money that will
   be paid — the colour kept its meaning when the figure changed rooms. It is
   the first mark on the row because it is the only verdict among three
   measurements; it takes no extra weight beyond the colour. */
#scoreboard-cards .sbc-stat.is-prize b {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

#scoreboard-cards .sbc-drow + .sbc-dfoot {
  margin-top: 0;
  padding-top: 9px;
  border-top: 0;
}

/* The panel's closing line: the profit ratio, and the trader on Basescan.
   Built on the SAME grid as the bars, so the label sits in the label column,
   the link starts where the bars start, and the figure lands in the figure
   column. A separate flex row here would put two of the three out of line. */
#scoreboard-cards .sbc-dfoot {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 74px;
  align-items: center;
  gap: 16px;
  margin-top: 3px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}
/* All three are placed EXPLICITLY on row 1. With only the value and the link
   given columns, sparse auto-placement pushed the link past the cursor and
   onto a second row. */
#scoreboard-cards .sbc-dfoot-k { grid-column: 1; grid-row: 1; color: var(--text-muted); }
#scoreboard-cards .sbc-dfoot-v {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
#scoreboard-cards .sbc-dfoot-v.is-up { color: var(--positive); }
#scoreboard-cards .sbc-dfoot-v.is-down { color: var(--negative); }
#scoreboard-cards .sbc-dfoot-a {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}
#scoreboard-cards .sbc-dfoot-a:hover { color: var(--text-primary); }
#scoreboard-cards .sbc-dfoot-a i { font-size: 0.85em; }

/* the paid line, a row of its own in the list.
   Centred, with a rule running out to both margins and an arrow at each end
   pointing UP into the rows that get paid. Gold, because this line is about
   money — it is the boundary of the purse — and it is the only place other
   than the prize slot where gold appears. */
#scoreboard-cards .sbc-cut-in {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(253, 224, 71, 0.05);
  border-top: 1px solid rgba(253, 224, 71, 0.22);
  border-bottom: 1px solid rgba(253, 224, 71, 0.22);
}
#scoreboard-cards .sbc-cut-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(253, 224, 71, 0.3));
}
/* The second rule mirrors the first, so the fade runs outward from the label
   in both directions instead of pointing one way. */
#scoreboard-cards .sbc-cut-in .sbc-cut-rule:last-child {
  background: linear-gradient(90deg, rgba(253, 224, 71, 0.3), transparent);
}
#scoreboard-cards .sbc-cut-ar { color: var(--accent); font-size: 0.8rem; line-height: 1; }
#scoreboard-cards .sbc-cut-lbl { color: var(--accent); white-space: nowrap; }

#scoreboard-cards .sbc-blank {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-muted);
}

/* --------------------------------------------------------------- foot -- */
/* The pager is a SHARED component — `.pgr` in app.css. It used to be
   declared here as `.sbc-pg-*`; the Portfolio panes needed the same control,
   and two lookalike pagers drift. Nothing about it is scoped to this page. */

/* focus, per the app's own rule at portfolio.css:1030 */
#scoreboard-cards .sbc-tab:focus-visible,
#scoreboard-cards .sbc-btn:focus-visible,
#scoreboard-cards .sbc-sort:focus-visible,
#scoreboard-cards .sbc-addr:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* The rail stops being a rail before the table starts clipping columns. */
@media (min-width: 992px) and (max-width: 1199px) {
  #scoreboard-cards .sbc-band { grid-template-columns: 1fr; }
  #scoreboard-cards .sbc-rail { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  #scoreboard-cards .sbc-detail,
  #scoreboard-cards .sbc-rules-clip { transition: none; }
  #scoreboard-cards .sbc-detail { opacity: 1; }

  #scoreboard-cards * { transition: none !important; }
  /* Reduced motion is a gentler equivalent, not no feedback: the colour
     change on press stays, the scale goes. */
  #scoreboard-cards .sbc-btn:active { transform: none; }
}




/* ==========================================================================
   ROUND 10 — the page system on the Scoreboard (>=992px). The header carries
   the actions, the band carries YOUR RANK as its sixth cell, the rail is
   gone (HOW SCORING WORKS is a disclosure under the field), the field is the
   strip's metrics.
   ========================================================================== */
@media (min-width: 992px) {
  /* ---- header ---- */
  #scoreboard-cards .sbc-page-title {
    font-family: var(--v2-display, 'Geist', sans-serif);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
  }

  #scoreboard-cards .sbc-stage-actions {
    position: static;
    right: auto;
    top: auto;
  }

  #scoreboard-cards .sbc-stage-btn {
    background: var(--v2-chip, #232C42);
    box-shadow: var(--v2-chip-lift);
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: var(--v2-r-ctl, 8px);
  }
  #scoreboard-cards .sbc-stage-btn:hover { background: var(--v2-chip-hover, #2C3752); color: var(--text-primary); }
  #scoreboard-cards .sbc-stage-btn-pri { background: #FDFDFD; color: #0F1520; box-shadow: none; }
  #scoreboard-cards .sbc-stage-btn-pri:hover { background: #FFFFFF; color: #0F1520; }

  /* the stage keeps its headline; its sub line now lives in the header meta */
  #scoreboard-cards .sbc-stage-sub { display: none; }
  /* podium foot: score, then the meta on its own line — never clipped */
  #scoreboard-cards .sbc-pcard-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  #scoreboard-cards .sbc-pcard-meta {
    margin-left: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
  }

  /* ---- the rail is gone: one column ---- */
  #scoreboard-cards .sbc-band { grid-template-columns: minmax(0, 1fr); }
  #scoreboard-cards .sbc-rail { display: none; }

  /* ---- the band: six cells, YOUR RANK last ---- */
  #scoreboard-cards .sbc-strip.v2-band { margin-bottom: 14px; }
  #scoreboard-cards .sbc-strip.v2-band .sbc-strip-cell { gap: 0; }
  #scoreboard-cards .sbc-strip-you .sbc-strip-v.is-gold { color: var(--accent) !important; }
  #scoreboard-cards .sbc-strip-you.is-ranked .sbc-strip-v { color: var(--v2-sky, #7DD3FC) !important; }
  #scoreboard-cards .sbc-you-connect {
    display: inline-block;
    margin-top: 6px;
    border: 0;
    background: #FDFDFD;
    color: #0F1520;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    align-self: flex-start;
  }

  /* ---- tabs row + field: the strip's metrics, no card ---- */
  #scoreboard-cards .sbc-tabs {
    border: 0;
    background: transparent;
    padding: 0 0 8px;
    border-radius: 0;
  }
  #scoreboard-cards .sbc-pane {
    border: 0;
    background: transparent;
    border-radius: 0;
  }

  /* ---- the disclosure under the field ---- */
  #scoreboard-cards .sbc-how {
    margin-top: 18px;
    border-top: 1px solid var(--v2-hair, rgba(255, 255, 255, 0.08));
    padding-top: 10px;
  }
  #scoreboard-cards .sbc-how > summary {
    cursor: pointer;
    list-style: none;
    color: var(--text-muted);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 4px 0;
  }
  #scoreboard-cards .sbc-how > summary::-webkit-details-marker { display: none; }
  #scoreboard-cards .sbc-how > summary::after { content: ' \203A'; }
  #scoreboard-cards .sbc-how[open] > summary::after { content: ' \2304'; }
  #scoreboard-cards .sbc-how > summary:hover { color: var(--text-primary); }
  #scoreboard-cards .sbc-how .sbc-list {
    border: 0;
    background: transparent;
    padding: 6px 0 0;
    max-width: 560px;
  }
  #scoreboard-cards .sbc-how .sbc-list-h { display: none; }
}



/* ==========================================================================
   ROUND 13 — the quiet system on the Scoreboard (>=992px). The periods are
   the page's big tabs, the stage is retired (a slim podium strip stands in
   for it: three hairline-divided cells, 1 · 2 · 3), the band is the stat
   panel (prize pool · 1st place · scoring closes · traders · your rank), and
   the field is a .v2-panel whose rows are the trade strip's rows. No metal
   colour anywhere but the podium's place word; no amber words.
   ========================================================================== */
@media (min-width: 992px) {
  #scoreboard-cards .sbc-stage { display: none !important; }
  #scoreboard-cards .sbc-band { grid-template-columns: minmax(0, 1fr); display: block; }
  #scoreboard-cards .sbc-main { display: block; }

  /* ---- the stat panel ---- */
  #scoreboard-cards .sbc-strip.v2-band { margin-bottom: 12px !important; }
  #scoreboard-cards .sbc-strip-cell { display: block !important; gap: 0; }
  #scoreboard-cards .sbc-strip-you.is-ranked .sbc-strip-v { color: var(--text-primary) !important; }
  #scoreboard-cards .sbc-strip-you .sbc-strip-v.is-gold { color: var(--text-primary) !important; }
  #scoreboard-cards .sbc-strip-you { display: block !important; }
  #scoreboard-cards .sbc-strip-you .sbc-you-connect { margin-top: 8px !important; height: 24px !important; padding: 0 9px !important; font-size: 0.6875rem !important; border-radius: 5px !important; }

  /* ---- the slim podium: one line, three cells ---- */
  #scoreboard-cards .sbc-podium-strip {
    display: flex;
    align-items: stretch;
    margin-bottom: 12px;
  }
  #scoreboard-cards .sbc-podium-strip[hidden] { display: none; }
  #scoreboard-cards .sbc-pod {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 16px;
    border-left: 1px solid var(--v2-hair, rgba(255, 255, 255, .06));
  }
  #scoreboard-cards .sbc-pod:first-child { border-left: 0; }
  #scoreboard-cards .sbc-pod-place {
    flex: 0 0 auto;
    font-family: var(--num);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
  }
  #scoreboard-cards .sbc-pod-place.is-gold { color: #D4A017; }
  #scoreboard-cards .sbc-pod-place.is-silver { color: #A8B3C4; }
  #scoreboard-cards .sbc-pod-place.is-bronze { color: #B0763C; }
  #scoreboard-cards .sbc-pod-who,
  #scoreboard-cards .sbc-pod-who:hover {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #scoreboard-cards .sbc-pod-who .tb-ident-addr,
  #scoreboard-cards .sbc-pod-who small { font-weight: 400; color: var(--text-muted); }
  #scoreboard-cards .sbc-pod-score {
    flex: 0 0 auto;
    font-family: var(--num);
    font-variant-numeric: tabular-nums;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
  }
  #scoreboard-cards .sbc-pod-prize {
    flex: 0 0 auto;
    font-family: var(--num);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--text-muted);
  }
  #scoreboard-cards .sbc-pod-final { font-size: 11px; color: var(--text-muted); }

  /* ---- the field panel ---- */
  #scoreboard-cards .sbc-panel .sbc-tools { display: inline-flex; align-items: center; gap: 8px; }
  #scoreboard-cards .sbc-panel .sbc-tools-lbl { display: none; }
  #scoreboard-cards .sbc-pane { border: 0; background: transparent; border-radius: 0; padding: 0; }
  #scoreboard-cards .sbc-rows { display: block; }
  #scoreboard-cards .sbc-blank { padding: 22px 16px 20px; font-size: 12px; color: var(--text-muted); text-align: center; }

  /* the rows ARE the strip's rows (revamp.css .v2-pos-row, value for value);
     the first-generation .sbc-lrow / .sbc-rank rules above are reset here,
     then the board's own marks are added (top 3, you, the cut) */
  #scoreboard-cards .sbc-lrow,
  #scoreboard-cards .sbc-lrow:hover,
  #scoreboard-cards .sbc-lrow.is-open {
    display: grid;
    grid-template-columns: var(--v2-tbl-grid);
    grid-template-rows: none;
    grid-template-areas: none;
    gap: 10px;
    align-items: center;
    min-height: 32px;
    padding: 6px 16px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--v2-hair, rgba(255, 255, 255, .06));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
  }
  #scoreboard-cards .sbc-lrow:hover { background: rgba(255, 255, 255, .02); }
  #scoreboard-cards .sbc-lrow > * { grid-area: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #scoreboard-cards .sbc-lrow .sbc-rank,
  #scoreboard-cards .sbc-lrow.is-top .sbc-rank,
  #scoreboard-cards .sbc-lrow.is-top-1 .sbc-rank,
  #scoreboard-cards .sbc-lrow.is-top-2 .sbc-rank,
  #scoreboard-cards .sbc-lrow.is-top-3 .sbc-rank,
  #scoreboard-cards .sbc-lrow.is-me:not(.is-top) .sbc-rank,
  #scoreboard-cards .sbc-lrow.is-paid:not(.is-top) .sbc-rank {
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
    font-family: var(--num);
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--text-muted);
  }
  #scoreboard-cards .sbc-lrow.is-top .sbc-rank { color: var(--text-primary); font-weight: 700; }
  #scoreboard-cards .sbc-lrow .sbc-score-v { font-size: 0.75rem; line-height: 1.2; text-align: left; }
  #scoreboard-cards .sbc-lrow .sbc-row-prize { font-size: 0.75rem; color: var(--text-primary); text-align: left; }
  #scoreboard-cards .sbc-lrow .sbc-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
  #scoreboard-cards .sbc-lrow .sbc-addr,
  #scoreboard-cards .sbc-lrow .sbc-addr:hover { color: var(--text-primary); font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #scoreboard-cards .sbc-lrow .sbc-addr .tb-ident-addr,
  #scoreboard-cards .sbc-lrow .sbc-addr small { font-weight: 400; color: var(--text-muted); }
  #scoreboard-cards .sbc-lrow .sbc-chip { font-size: 10px; font-weight: 600; color: var(--v2-sky, #7DD3FC); letter-spacing: 0; text-transform: none; }
  #scoreboard-cards .sbc-lrow .sbc-gap { font-size: 11px; color: var(--text-muted); }
  #scoreboard-cards .sbc-lrow .sbc-caret { display: none; }
  #scoreboard-cards .sbc-lrow .sbc-row-prize.is-none { color: var(--text-muted); }
  #scoreboard-cards .sbc-lrow .sbc-score-v { font-weight: 700; color: var(--text-primary); }
  /* Rows below the paid cut are quiet by COLOUR, not opacity: a faded white
   read 2.4:1, the muted token reads 5.5:1 and still recedes. */
#scoreboard-cards .sbc-lrow.is-cut > *,
#scoreboard-cards .sbc-lrow.is-cut .sbc-rank,
#scoreboard-cards .sbc-lrow.is-cut .sbc-addr,
#scoreboard-cards .sbc-lrow.is-cut .sbc-addr * { color: var(--text-muted); }
  #scoreboard-cards .sbc-lrow.is-me { box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .45); }
  #scoreboard-cards .sbc-lrow.is-open { background: rgba(255, 255, 255, .02); }

  /* the paid line: a quiet hairline row */
  #scoreboard-cards .sbc-cut { padding: 6px 16px; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  #scoreboard-cards .sbc-cut-in { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
  #scoreboard-cards .sbc-cut-rule,
  #scoreboard-cards .sbc-cut-in .sbc-cut-rule,
  #scoreboard-cards .sbc-cut-in .sbc-cut-rule:last-child { flex: 1; height: 1px; background: var(--v2-hair, rgba(255, 255, 255, .06)); }
  #scoreboard-cards .sbc-cut-lbl { font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
  #scoreboard-cards .sbc-cut-ar { display: none; }

  /* the Sunday banner: a muted sentence on the panel tone */
  #sbc-sunday {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card-bg, #0E1322);
    border: 0;
    border-radius: 8px;
    padding: 9px 16px;
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-secondary);
  }
  #sbc-sunday[hidden] { display: none; }
  #sbc-sunday .sbc-sunday-ico { color: var(--text-muted); }
  #sbc-sunday b { color: var(--text-primary); }

  /* the pager sits in the panel foot */
  #scoreboard-cards .sbc-panel .pgr { margin: 0; padding: 8px 16px; justify-content: flex-end; }
  #scoreboard-cards .sbc-panel .pgr:empty { display: none; }
  #scoreboard-cards .pgr-sel { height: 24px; padding: 0 9px; border: 0; border-radius: 5px; background: var(--v2-chip, #232C42); font-size: 11px; }
  #scoreboard-cards .pgr-lbl, #scoreboard-cards .pgr-of { font-size: 11px; }
  #scoreboard-cards .pgr-btn { border: 0; background: var(--v2-chip, #232C42); border-radius: 5px; width: 24px; height: 24px; color: var(--text-secondary); }
  #scoreboard-cards .pgr-btn:disabled { opacity: .4; }

  /* the YOU pin: the button family */
  #sbc-me-pin {
    border: 0 !important;
    background: var(--v2-chip, #232C42) !important;
    color: var(--text-primary) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important;
    font-size: 12px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }
  #sbc-me-pin .t-col { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--text-muted); }

  /* ---- how scoring works: a sky text link, then three hairline columns ---- */
  #scoreboard-cards .sbc-how { margin-top: 14px; border: 0; padding: 0; }
  #scoreboard-cards .sbc-how > summary {
    cursor: pointer;
    list-style: none;
    color: var(--v2-sky, #7DD3FC);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 0;
  }
  #scoreboard-cards .sbc-how > summary::-webkit-details-marker { display: none; }
  #scoreboard-cards .sbc-how > summary::after { content: ' \203A'; }
  #scoreboard-cards .sbc-how[open] > summary::after { content: ' \2304'; }
  #scoreboard-cards .sbc-how > summary:hover { color: var(--text-primary); }
  #scoreboard-cards .sbc-how .sbc-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    max-width: none;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: var(--card-bg, #0E1322);
    border-radius: 8px;
    overflow: hidden;
  }
  #scoreboard-cards .sbc-how .sbc-list-h { display: none; }
  #scoreboard-cards .sbc-how .sbc-cap {
    margin: 0;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--v2-hair, rgba(255, 255, 255, .06));
    border-radius: 0;
    padding: 14px 16px;
  }
  #scoreboard-cards .sbc-how .sbc-cap:first-of-type { border-left: 0; }
  #scoreboard-cards .sbc-how .sbc-cap-h { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 10px; }
  #scoreboard-cards .sbc-how .sbc-cap-k { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
  #scoreboard-cards .sbc-how .sbc-cap-v { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary) !important; }
  #scoreboard-cards .sbc-how .sbc-cap-t { height: 3px; border-radius: 2px; }
  #scoreboard-cards .sbc-how .sbc-rules-more { grid-column: 1 / -1; margin: 0; padding: 0 16px 14px; border-top: 1px solid var(--v2-hair, rgba(255, 255, 255, .06)); }
  #scoreboard-cards .sbc-how .sbc-rules-more > summary { color: var(--text-muted); font-size: 12px; padding: 10px 0 0; cursor: pointer; }
  #scoreboard-cards .sbc-how .sbc-note { font-size: 12px; line-height: 1.55; color: var(--text-muted); max-width: 760px; }
}

/* ---------- podium identicon (1st / 2nd / 3rd only) ----------------------
   The name on a podium slot comes from tbIdent, which reads trollbox_profiles
   — a display name the trader SET. The identicon is derived from the address,
   so it is the one mark on the podium nobody can pick to resemble someone
   else. Only the three podium slots carry it: those are the rows people
   actually read, and a face on every table row would be noise.

   ONE CLASS, BOTH PAINTERS. This surface renders the podium twice — card()
   into #sbc-podium and podCell() into #sbc-podium-strip — and the v2 desktop
   shows the STRIP. Styling only the card's class is L-024 in
   .claude/rules/review-lessons.md (a mark only one of two painters knew
   about), so .sbc-ident is sized once and both hosts lay it out.

   Desktop only, matching the JS guard in scoreboard-cards.js — OdetteV2 only
   exists once revamp.js has passed the ODETTE_V2 gate at >=992px, so phones
   keep the untouched mobile scoreboard. */
@media (min-width: 992px) {
  #scoreboard-cards .sbc-ident {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 1px var(--v2-hair, rgba(255, 255, 255, .06));
  }

  /* the two hosts: both need to be a flex line so the face sits on the
     baseline of the name rather than pushing it */
  #scoreboard-cards .sbc-pcard-who,
  #scoreboard-cards .sbc-pod-who,
  #scoreboard-cards .sbc-pod-who:hover {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }

  /* the strip is a denser line than the card, so its face is smaller */
  #scoreboard-cards .sbc-pod-who .sbc-ident { width: 16px; height: 16px; }

  /* the champion card is larger; its face follows */
  #scoreboard-cards .sbc-pcard.is-champ .sbc-ident { width: 22px; height: 22px; }
}

/* --------------------------------------------------------------------------
   Round 14 · cleanup (2026-09-29). The periods sit on the title line; the
   stat panel is one line per cell (each sub is its cell's tooltip; YOUR RANK
   keeps its sub inline); the podium line leaves and ranks 1-3 lead the field
   in their metal, with the podium's face mark. Existing colours only.
   Desktop only, like the rest of #scoreboard-cards.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  #scoreboard-cards .sbc-head .sbc-tabstrip.v2-bigtabs { margin: 0 0 0 22px !important; height: 34px; }

  #scoreboard-cards .sbc-strip.v2-band > .sbc-strip-cell {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline;
    gap: 8px;
    padding: 11px 16px !important;
    white-space: nowrap;
    overflow: hidden;
  }
  #scoreboard-cards .sbc-strip.v2-band .sbc-strip-k { margin: 0 !important; }
  #scoreboard-cards .sbc-strip.v2-band .sbc-strip-v {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #scoreboard-cards .sbc-strip.v2-band > .sbc-strip-cell:not(.sbc-strip-you) .v2-band-sub { display: none !important; }
  #scoreboard-cards .sbc-strip.v2-band > .sbc-strip-you { flex: 1.6 1 0 !important; }
  #scoreboard-cards .sbc-strip.v2-band > .sbc-strip-you .v2-band-sub {
    margin: 0 !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #scoreboard-cards .sbc-strip.v2-band > .sbc-strip-you .sbc-you-connect { margin: 0 0 0 auto !important; align-self: center; }

  /* ranks 1-3: the podium's metal on the numeral, its face beside the name */
  #scoreboard-cards .sbc-lrow.is-top .sbc-rank { font-weight: 700 !important; }
  #scoreboard-cards .sbc-lrow.is-top-1 .sbc-rank { color: #D4A017 !important; }
  #scoreboard-cards .sbc-lrow.is-top-2 .sbc-rank { color: #A8B3C4 !important; }
  #scoreboard-cards .sbc-lrow.is-top-3 .sbc-rank { color: #B0763C !important; }
  #scoreboard-cards .sbc-lrow.is-top .sbc-who { font-weight: 600; color: var(--text-primary); }
  #scoreboard-cards .sbc-lrow.is-top .sbc-addr { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; }
  #scoreboard-cards .sbc-lrow .sbc-ident { width: 16px; height: 16px; }
}