Small fix on the live Run Cards site, three edits, applied verbatim. Keep everything else exactly as it is: the contracts and addresses, the wallet stack, the look, the boxes, the texts, the reads, the simulations, the Join/Leave/Deliver/Reveal flows, My cards, Sample cards (its cards, title lines and colours), Rarity odds (its rows, numbers and colours), Past runs, Questions, the footer. Do not write or deploy any contract. Change no files but web/src/styles.css and web/src/Samples.tsx.

WHAT AND WHY. On phones two boxes get very tall. (1) Under 560px the Rarity odds table turns into four labelled blocks, one per run, each four lines tall, about 1,000px in all. Keep it a table on phones too: one row per run (Run, Common, Rare, Epic, Legendary), the four percentage columns as narrow as their contents, the run label taking the rest of the width on at most two lines. Past runs keeps its labelled blocks. (2) Under 640px the Sample cards show two cards per row, so each run kind is two rows of large cards, about 2,900px in all. Show the four cards of a run kind in one row on phones too, like a table: smaller pictures (about 73 x 102 px at 375px), the rarity under each in a smaller font. (3) On every width, make the Sample cards read like a table: the odds move from the run kind's title line to above each card, in the rarity's colour, aligned with the picture below ("60%" over the Common card, "28%" over Rare, and so on); the title line keeps only the name and the distance.

EDIT 1. In web/src/styles.css, under "/* ---------- tables ---------- */", replace the whole block that begins with "@media (max-width: 559px) {" and contains "table, thead, tbody, tr, th, td { display: block; }" (eight lines, ending with its closing brace) with exactly this:

@media (max-width: 559px) {

table:not(.odds), table:not(.odds) thead, table:not(.odds) tbody, table:not(.odds) tr, table:not(.odds) th, table:not(.odds) td { display: block; }

table:not(.odds) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

table:not(.odds) tr { padding: var(--s2) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1) var(--s3); }

table:not(.odds) tbody th { grid-column: 1 / -1; font-weight: 700; }

table:not(.odds) th, table:not(.odds) td { border: 0; padding: 0; }

table:not(.odds) td::before { content: attr(data-label); display: block; font: 400 var(--fs-label) / 1.4 var(--font-mono); text-transform: uppercase; color: var(--dim); }

/* Rarity odds keep one row per run on phones: the run label takes the width the four narrow percentage columns leave. */

.odds { font-size: var(--fs-ui); }

.odds th, .odds td { padding: var(--s2) 0 var(--s2) 6px; }

.odds th:first-child { padding-left: 0; }

.odds thead th { font-size: 9px; }

.odds thead th:not(:first-child), .odds td { width: 1%; white-space: nowrap; text-align: right; }

.odds td { font-size: 13px; }

}

The six "table:not(.odds)" lines are the old rules, scoped so they no longer touch the odds table; the ".odds" lines are new.

EDIT 2. In the same file, under the sample-card rules, replace this one line:

@media (max-width: 639px) { .sample-row .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

with exactly this one line:

@media (max-width: 639px) { .sample-row .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .sample .rarity { font-size: var(--fs-label); } }

EDIT 3. In web/src/Samples.tsx, four single-line replacements, each line occurring once:

(a) replace

function SampleCard({ row, rarity, edition }: { row: SampleRow; rarity: string; edition: number }) {

with

function SampleCard({ row, rarity, edition, odds }: { row: SampleRow; rarity: string; edition: number; odds: number }) {

(b) replace the line

<li ref={ref} className="sample">

with these two lines

<li ref={ref} className="sample">

  <p className={`small rarity r-${rarity.toLowerCase()}`}>{odds}%</p>

(c) replace

      <h3 className="row-title"><strong>{row.label.split(", ")[0]}</strong> {row.label.split(", ")[1]} · {ODDS[i].odds.join(" / ")} %</h3>

with

      <h3 className="row-title"><strong>{row.label.split(", ")[0]}</strong> {row.label.split(", ")[1]}</h3>

(d) replace

        {RARITIES.map((r, i) => <SampleCard key={r} row={row} rarity={r} edition={row.editions[i]} />)}

with

        {RARITIES.map((r, j) => <SampleCard key={r} row={row} rarity={r} edition={row.editions[j]} odds={ODDS[i].odds[j]} />)}

ODDS stays exported from the same file as it is. Nothing else in the two files changes, and no other file changes.

CHECK. At 375px wide: the Rarity odds box shows the header row and four rows, each run on one row with its four percentages in their colours (Rare blue, Epic purple, Legendary orange), run labels on at most two lines; the Past runs table still shows one labelled block per run; each Sample cards run kind shows its four cards in one row, Common, Rare, Epic, Legendary, the odds above each card in the rarity's colour and the rarity under it, pictures still 400 x 560 in shape and pixelated; no sideways scroll. At 640px and wider only the odds move, from the title lines to above the cards.