Tile

#Usage

Use a tile for a letter the player can trace, and for anything that should read as a word from the game: a name spelled on Home, a recovery code, the podium, confetti. Reusing the tile is how the brand stays the mechanic instead of a decoration.

Don't use a tile for a control. Buttons are rounded squares in outline or a single solid primary; a segmented toggle selects with --fg fill. The tile's selected look means "in the trace", and using it on a control would make a setting look like a move.

#Anatomy

Code: .grid > .tile > .tile-face. One letter per tile, A to Z, plus the two-letter Qu face on the 4×4 dice.

#States

There is no green tile. A word that scores turns the pill green, not the tiles; see the word pill rules in Color.

#Behaviour

• Tracing: press a tile and drag through neighbours, including diagonals. Moving back onto the previous tile removes the last letter; a tile can't be used twice. Mid-swipe only the centre 70% of a tile counts, so clipped corners don't grab neighbours on diagonals. On the trivia board (since 3.23.2) the first touch and the lift point count anywhere on the tile; the word round's board still needs the centre 70% for the first touch too (see A round).
• The word is read from the live trace when the finger lifts, and its verdict shows in the pill above the board.
• No press-dip. Every button shrinks slightly when pressed; tiles don't, because a dip would fight the trace.
• State changes animate background, edge and opacity together, never one without the others, or the edge snaps while the fill fades.
• No trace line on the game board. The lit tiles already carry the word. The name board on Home is the one exception, because its letters recede instead of lighting up.

#Accessibility

• Contrast is identical in both modes because the roles swap (see above).
• Target size: on a 320px-wide phone a 5×5 tile is about 50px square, above the 44px floor.
• Reduced motion: tile transitions are off; states change instantly.
• Not yet: the board can only be played by touch or mouse. See Known issues and gaps.

#Content

• Uppercase letters only. Words built from tiles wrap at five tiles per line (TRAMP / LE), so a long word never shrinks its tiles to fit.
• When a word appears outside the board (a name, a code, the summary), it's shown in lit tiles, because the player built it by swiping. The same interaction gets the same visual.

#Why it's built this way

#Known issues and gaps

• Highlights fade too slowly (found while writing this page). The light/dark cross-fade rule comes later in the CSS than the tile's own transition and overrides it, so on the game board a tile lights up over 0.5s instead of 0.08s. Measured from the shipping build in Chromium. The fix is to scope the cross-fade so it doesn't replace the tile's transition; planned for 3.23.7.
• No keyboard or screen-reader way to play. Tracing needs a pointer. A typed-word path would make rounds playable without one.
• The board still sets valid and invalid classes that have had no styles since 3.1.1.

#Related

• Color: the tokens behind every state
• Trivia: the board with a question card above it
• Build on Outword: reusing tiles for a new word moment

#Changelog