Pill

#Usage

Use a pill for a single live value. There are three in a round: the timer pill and the score pill in the HUD, and the word pill between the HUD and the board, which shows the letters you're tracing and then the verdict.

Don't put a label or a recap in a pill. A static label in a pill makes people wait for a number that never comes; labels are the eyebrow's job. Results, bests and badges are recaps, so they're carried by weight and ink, not by a pill and not by green.

Don't tap a pill. Square = tap, pill = read. The one exception is the tappable word pill on a review board, which shows its word on the board (see States).

#Anatomy

The word pill hugs its word: it grows as you spell, and it holds nothing but the word. The verdict in words ("+3 pts", "already found", "go longer", "not a word") lives in the caption above it.

#States

The hint tag rides at the front of the pill once the trivia hint is used: on its own at rest, and whenever the word starts from the two hint tiles, through wrong answers and the solve. Its fill is a 16% tint of whatever colour the pill's text is, so the same tag reads on the neutral, rose and green pills.

The tappable word pill sits on review boards (the daily board, game and solo results) as "longest on board". Tap it and its word lights on the board above; while it's showing, .active flips the pill exactly like a pressed tile: a cream pill turns navy with the soft outline. Never green, because showing a word earns nothing.

#Behaviour

• No verdict while tracing. Colouring a word green under the finger would turn the board into a detector: drag around, watch for green, lift. So the pill stays neutral until the finger lifts. "Already found" is the one exception, because it tells you only what you already knew.
• The verdict holds briefly. On a game board the result shows for 750ms, then the pill empties. In trivia the solve is green for 650ms and a wrong answer rose for 900ms. Under 3 letters says nothing: it's a fumbled tap, not a guess.
• Arriving fades; leaving is instant. Background, edge and ink ease together over 0.12s, so a word fades from grey to green. .empty has transition: none, so when the word goes, the colour goes with it.
• The slot holds still. The empty pill keeps its 40px height, so the board doesn't slide up and down as you trace.
• The clock turns rose at 0:10 and stays rose to zero. The change eases over 0.5s, because .pill is in the light and dark cross-fade rule.
• Numbers don't jitter. The HUD uses tabular figures, so the clock and score keep their width as they tick.

#Accessibility

• Ink on a semantic fill is --ground, never white. In dark mode --danger is a light rose, and white on it lands near 1.4:1. The urgent clock used white until 3.11.0.
• Colour is never the only signal. Every verdict is also in words, in the caption above the pill.
• Trivia announces its result in a status region ("That's it:" and the answer, or "Not it."). The game board's verdict and the clock aren't announced; see Known issues.
• Reduced motion: the word pill's transition is off; states change instantly.

#Content

• One value per pill, and nothing else in it: no label, no units beyond the value's own ("pts", "solved").
• The traced word is uppercase, as the tiles are. Longest-word pills are lowercase, as a word in a list is.
• The clock reads m:ss ("1:24", "0:07").

#Why it's built this way

#Known issues and gaps

• Pill-shaped badges ship. The host, you and "old app" tags in the lobby, the "unique ×2" mark on a word row, the who-solved chips in trivia room results and the longest-word pills on standings rows are labels or recaps in a pill shape, against "one live value".
• The longest-on-board pill is tapped, which bends square = tap, and it doesn't expose its on state (no aria-pressed). The card behind it (.lob-card) uses a hardcoded white tint that doesn't follow light mode.
• Too short looks like tracing. .short sets its ink to --gold, which resolves to --fg, so the pill is identical to .neutral; only the caption ("go longer") tells them apart.
• The game board's verdict isn't announced to screen readers, and neither is the clock running low.
• The spec still documents .len-badge, which nothing renders (3.23.6 audit).
• The pill CSS reads legacy names (--tray-raise, --ok-green, --bad-fill, --gold, --urgent); they resolve to the canonical roles.

#Related

• Tile: the board under the pill, which stays neutral
• Trivia: the hint tag, the 650ms solve and the 900ms not-it
• Color: one hue, one meaning
• D-002, green is earned

#Changelog