/, spec §5.1 step 3): a denser .tiles grid --
trophy tiles hold one mark plus two short lines, not a stat block, so
three fit per row on desktop where standings tiles fit two (the
.tiles--3 grammar above, just under a different name because these tiles
are never mixed into a plain .tiles grid). 900px stays the only
breakpoint, per the .cols rule elsewhere in this file. */
.trophy-case { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.25em 0; }
@media (min-width: 900px) { .trophy-case { grid-template-columns: 1fr 1fr 1fr; } }
.trophy {
display: flex; align-items: flex-start; gap: .7rem;
background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
padding: .8rem 1rem; box-shadow: 0 1px 3px rgba(26, 28, 32, .06);
}
.trophy .mark { flex: none; margin-top: .2em; }
/* These h3/p selectors assume tools/render.ts marks up a trophy tile's name
as an and its earn line and count/date line as
elements, inside
the .trophy-text block (since 2026-09-05; before that they were direct
children of .trophy on one row). Nothing enforces the tag choice: if a
future change marks up those lines with different tags, these rules
silently style nothing, no test fails, and the text just renders unstyled.
If that happens, fix it here by matching the tags actually used, not by
inventing a new class. */
.trophy h3, .trophy p { margin: 0; }
.trophy h3 { font-size: .95em; font-weight: 700; }
.trophy p { font-size: .85em; color: var(--muted-ink); }
/* Locked reads as the unopened pack, the same quiet parchment
.season-card--upcoming already uses for "not yet" states. The mark itself
goes grey via .mark--empty on the SVG element, never here: this rule must
not carry its own fill or stroke, or the two greys could drift apart the
day only one of them gets edited. */
.trophy--locked { background: var(--parchment); box-shadow: none; }
.trophy--locked p { color: var(--pewter-deep); }
/* Standings Trophies column (spec §5.3): a dense run of earned marks in one
table cell, capped at six with a "+N" overflow so one player's trophy
count never wraps the whole row taller. */
.shelf { display: inline-flex; align-items: center; gap: .2em; vertical-align: -1px; }
.shelf-more {
margin-left: .35em;
font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
font-size: .78em; color: var(--muted-ink);
}
/* Standings trophy legend (spec follow-up 2026-09-03, beneath the ledger
the .shelf column above sits in): a quiet key pairing all fifteen
registry marks with their names, generated by tools/render.ts
trophyLegend() straight off TROPHIES so a sixteenth trophy needs no
second edit here. Fifteen items on an already dense page is meant to
read as one small-print key, not a second table - a plain wrapping
inline list, muted text, no border or background of its own, the same
"quiet, not a card" restraint .card-caption already uses below. Marks
keep their own colors (the metals are the accent, same as everywhere
else on the site); this rule adds no color of its own and never reaches
for --lime, which is reserved for the one RSVP CTA. */
.trophy-legend {
list-style: none; margin: 1.5em 0 0; padding: 0;
display: flex; flex-wrap: wrap; gap: .35em 1.25em;
font-size: .82em; color: var(--muted-ink);
}
.trophy-legend li { display: inline-flex; align-items: center; gap: .4em; }
/* Card gallery (/player//, spec §5.1 step 2): one figure per set a
player was carded in. A fixed basis, not .card-grid's auto-fill/minmax
grid, because a player owns at most a handful of cards; auto-fill reserves
phantom empty tracks up to the container width, which would strand a
lone card in a narrow column with dead space beside it instead of letting
it sit at a natural size. Figure margin reset for the same reason
.card-grid resets it: browser default figure margins (1em 40px) squeeze
the frame inside itself and push the caption past the edge. */
.card-gallery { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1.25em 0; }
.card-gallery figure { margin: 0; width: min(240px, 40vw); display: flex; flex-direction: column; }
.card-gallery img { width: 100%; }
/* Sets are not all the same height (Set 3 grew 35px when its counter box
went to three lines, 2026-09-20), so a player carded in two sets gets two
heights side by side. The row already stretches every figure to the
tallest; pushing the caption to the bottom keeps the captions on one line
instead of leaving the shorter card's caption hanging 12px higher. */
.card-gallery figcaption { margin-top: auto; }
/* The Hope Coin's route (/hope-coin/, spec §5.2): a vertical line with each
holder's stop hanging off it, oldest at the top. A plain hairline
(--line), not a rarity metal, because this line is structure, not a
rarity signal (the "gold means something" rule above the rarity accents
applies here too). */
.route { position: relative; list-style: none; margin: 1.5em 0; padding: 0; }
.route::before {
content: ""; position: absolute; top: .3em; bottom: .3em; left: 5px;
width: 2px; background: var(--line);
}
.route-stop { position: relative; margin: 0 0 1.5rem; padding-left: 2rem; }
.route-stop:last-child { margin-bottom: 0; }
/* The bead on the line: paper-filled so the hairline shows through an
unfilled ring, the same "hollow means not-here" reading .mark--empty
already uses for a locked mark. */
.route-stop::before {
content: "";
position: absolute; left: 0; top: .3em; width: 12px; height: 12px;
border-radius: 50%; background: var(--paper); border: 2px solid var(--pewter-deep);
}
/* The present holder: filled foil bead, bold text. Foil, not sapphire, on
purpose -- the coin itself is drawn in foil (.coin-ring/.coin-core above)
and the current stop should read as the same metal as the trophy it
marks. */
.route-stop--current { font-weight: 800; }
.route-stop--current::before { background: var(--foil-deep); border-color: var(--foil-deep); }
/* Leg labels between journey stops (Task 6, #48, M3): a distance line, not
another stop on the route. padding-left matches .route-stop's own so the
figure's text lines up with stop text on the same spine; the negative
top margin pulls it in close under the stop above rather than reading as
its own paragraph-spaced row, and the positive bottom margin keeps the
stop below it at the route's normal 1.5rem rhythm. */
.route-leg { padding-left: 2rem; margin: -0.75rem 0 0.75rem; }
/* No bead: a leg is a distance, not a place the Coin stopped, so it draws
none of .route-stop::before's ring on the spine. */
.route-leg::before { display: none; }
/* The stint lines (Task 7, #48, spec §5; a line since 2026-09-07): a road
trip drawn as one straight line inside the stop it belongs to, a tick
per place. It shipped as a loop, and Beau, who drove both routes, asked
for a line when he read the live page. Sized here, never by width/height
attributes on the svg itself, so every drawing on the page changes size
together. max-width keeps a nine-name route from stretching its text
into a headline on a wide screen.
min-width is the phone half of that (whole-branch review finding 1,
2026-09-05): a drawing squeezed into a 343px phone column drew its
place names at four pixels, so below 480px the drawing keeps its size
and its own .route-scroll box pans instead. The page body still never
scrolls sideways, because that overflow stops at the scroll box. */
.route-line { display: block; width: 100%; height: auto; max-width: 540px; min-width: 480px; }
/* The drawing's scroll box: .table-scroll supplies the panning and the
card treatment, and this class supplies only the spacing a drawing
inside a journey stop needs, which is tighter than a full-width ledger
table's. */
.route-scroll { margin: .6rem 0 .2rem; }
/* The line itself is a drawn stroke, never a filled shape: light page,
dark objects (docs/brand.md). Pewter, not a rarity metal, for the same
reason .route's own spine is a hairline -- this is structure, not a
signal. */
.route-line-path { fill: none; stroke: var(--pewter-deep); stroke-width: 1.5; }
/* One filled bead per place the Coin rode through, matching the pewter
ring .route-stop::before already draws on the spine. */
.route-tick circle { fill: var(--pewter-deep); }
/* The one border crossing. Foil is the page's "this one is different"
accent (the coin itself is drawn in foil above), and it is spent on
exactly one tick in the whole journey. */
.route-flag { fill: var(--foil-deep); }
/* Place names in the same small monospace face .stat uses. No font-size
here, on purpose: tools/render.ts emits a font-size attribute on every
text in the drawing, scaled to that drawing's own viewBox width so a
wide route and a narrow one print their names at the same size (see
LINE_REF_WIDTH there), and a stylesheet rule beats an SVG presentation
attribute whatever the attribute says. An 11px rule sat here from
2026-09-05 to 2026-09-07 and pinned every name to 11 user units, so
Beau's Alaska route printed at seven pixels while the renderer's
attribute was ignored. tools/render.test.ts guards both halves: every
text carries the attribute, and neither rule here carries a size. */
.route-tick text { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; fill: var(--ink); }
/* The stint's mileage, under the line at its right end. Same face as the
names, sized the same way, muted so the places read first. */
.route-line-miles { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; fill: var(--muted-ink); }
/* The coin's own photo frame (Task 5, #48): the hero at the top of
/hope-coin/ (site/hope-coin/assets/coin.png), and the frame that later
infographics on this page reuse. Copies .card-frame's border and
box-shadow -- the same "dark object gets real presentation" look every
card gets -- but circular, not rounded-rectangle, because the coin itself
is round, and with no hover lift: the hero sits at the top of the page on
its own, not in a clickable gallery, so nothing about it needs to react
to a pointer. */
.coin-frame {
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 6px 24px rgba(26, 28, 32, .16);
}
.coin-frame img { display: block; width: 100%; height: auto; }
/* Browser default figure margin (1em 40px) would push the coin off-center
in its half of the .cols grid and shove the caption past the edge, the
same reason .card-grid figure { margin: 0 } exists above. */
.coin-figure { margin: 0; }
/* Trophy tile text block (2026-09-05): a tile is mark + .trophy-text, and the
text block stacks name, earn line, and (earned only) the count/date line,
so the earn line can show on EVERY tile without crowding the single row
the tile used to be. .trophy h3 / .trophy p above still style the lines. */
.trophy-text { display: grid; gap: .15em; min-width: 0; }
.trophy-earn { line-height: 1.35; }
.trophy .stat { font-size: .78em; }
/* Card zoom (site/card-zoom.js): select a card, see it big. The script adds
.card-frame--zoomable to every frame it wires and appends ONE