import InfoBox from '../components/InfoBox.astro';
import PullQuote from '../components/PullQuote.astro';

After two weeks without a game change, the return starts underneath the interface rather than on top of it. A design handoff supplied the missing foundation tokens, the mobile game surface was rebuilt around the narrow screen, and a second review immediately found that one of the new feedback elements still moved the controls it was supposed to support.

## Tokens before layout

The handoff specified tracking, font weights, touch-target size, border colour, and the gold used for the highest-value fruit, but the application still repeated those values directly across its components. The agent migrated exact matches to named tokens and added a convention test that scans every Svelte file for a literal value that already has a token equivalent. That makes the design system a constraint the codebase can enforce, not a document that slowly becomes less true.

## One row where there used to be two

On a phone, the daily header now collapses score, the [length multiplier](/posts/length-multiplier-and-combo-feedback#a-longer-snake-should-be-worth-more), and words remaining into one compact row. The desktop header stays as it was. Word history reverses so the newest submission appears first, fruit cells and combo words inherit their fruit colour, and the [combo notification](/posts/length-multiplier-and-combo-feedback#explain-the-fruit-after-it-exists) moves into a reserved rail above the input. The goal is not to make the desktop smaller, but to let the phone decide which information needs to remain visible while the board and keyboard compete for the same height.

## The reserved rail still moved

The first toast layout reserved enough height for one message, which looked stable in the happy path. Two simultaneous combos made the rail grow, pushed the input and keyboard down, and proved that “in flow” was the wrong guarantee. A follow-up design review moved the stack onto the bottom edge of the board, growing upward as an overlay, and added end-to-end checks that compare the board-to-keyboard gap before and after a toast appears in both game modes.

<PullQuote>A mobile layout is stable only if the second message behaves as well as the first.</PullQuote>

## Contrast becomes executable

The same review caught muted text that missed WCAG AA in both themes, plus fruit-tinted history chips whose readable colour depended on the fruit and theme combination. The fix was not another set of sampled screenshots. A contrast test now resolves the actual CSS cascade, mixes the same foreground and background colours the browser receives, and checks every fruit across all four theme and contrast combinations.

<InfoBox title="What the tests now protect">
  A token cannot quietly regain an equivalent hardcoded value. A combo toast cannot change the
  distance between the board and keyboard. Muted text and every fruit-tinted history chip must
  remain readable after the theme cascade and colour mixing are applied.
</InfoBox>

## A smaller surface with stronger rules

The redesign removes repeated labels, shortens leaderboard banners that wrapped badly, and deletes an abandoned About page, but the durable result is the set of rules left behind. The narrow screen has less competing chrome, and the next visual change has tests for the two failures that are easiest to miss in a desktop review: movement and contrast.