Rank

#Usage

Use the rank circle (.place) wherever a player's place is shown: every standings list, the leaderboard card on Home, and the played Trivia card ("1st today / of 4").

Don't use a circle for anything else. Square = tap, pill = read, circle = rank. No button is ever circular, so a circle with a number in it always reads as a place.

Don't colour the top three gold, silver and bronze. On the podium, 1st, 2nd and 3rd are three states the board already has: solid, traced and lit. Metals would be three new hues, each with one job.

#Anatomy

Code: <span class="place place-N">N</span>, with <CrownPerch /> inside for last month's winner. The circle is position: relative so the crown can hang off it.

#States

The top three on the podium. On the 1st, last month's top three stand on columns made from the board's three tile states: 1st solid (--tile), 2nd traced (--select with a 2px --select-stroke), 3rd lit (--lit with a 1.5px --select-stroke). The columns are 72px wide, radius 12, and 150, 104 and 66px tall.

#Behaviour

• The circle has no motion of its own. It changes only when the standings do.
• The crown stays all month. It appears on last month's winner's circle on the season leaderboard (with a "September winner" line under the name), on your own circle on Home's leaderboard card if you won, and on the podium. It's gone at the next 1st.
• On the podium the crown arrives. The columns grow 3rd, 2nd, 1st; the crown drops onto the 1st column at 1900ms, the column dips on impact, and confetti fires. Under reduced motion the podium opens built, crown on. See Celebration.
• Never during a round. The crown is never decoration, and nothing celebrates while the clock runs.

#Accessibility

• The number is text, so the place is read out, and colour is never the only signal: the 1st circle also says "1".
• The crown is aria-hidden. On the season leaderboard the line under the name ("September winner") says it in words. On Home's leaderboard card nothing does; see Known issues.
• Ordinals in words: the Trivia card spells the place out beside the circle ("2nd today / of 14").

#Content

• Numbers only inside the circle: "1", "12". An unranked player gets a dash, kept as a symbol, not prose.
• Numbers lead, names last on the line beside it: "833 pts · 104 behind Samra".
• "(you)" marks your own row in the name, not a colour wash.

#Why it's built this way

#Known issues and gaps

• An undocumented fourth hue. .place.place-none fills with a hardcoded pale blue, rgba(184,204,239,0.18). It isn't in the palette and doesn't change in light mode. Fix: map it to an existing role. Planned for 3.23.7 (3.23.6 audit).
• The crown on Home has no words. On Home's leaderboard card the crown is the only sign you won last month, and it's hidden from screen readers.
• Only 1st is styled. The code sets place-2, place-3 and onward, but nothing styles them; every place after 1st is the same --fg-soft circle.
• One other numbered circle. The steps in Trivia mode's rules card (.mc-n, 16px) are numbers in circles, though they're steps, not ranks.
• .place-1 reads the legacy --gold and --gold-ink, which resolve to --fg and --ground.

#Related

• Card: the standings row and Home's leaderboard card
• Celebration: the podium, the crown's drop and the confetti
• Tile: the three states the podium borrows
• Home: the leaderboard and Trivia cards
• D-007, the podium says 1st, 2nd and 3rd in tiles

#Changelog