Make a small game that I can play on a new sketchbook board.
Game: [name the game and give its rules in one or two lines, for example Snake: steer the snake, eat the food to grow, and do not hit the walls or your own body]
Start with get-design-context and get-tokens. Do not change the site, its tokens or its pages. Everything goes on the new board.
1. Make a new board with create-sketchbook-board and give it the name of the game.
2. Write the board with set-board:
a. HTML: one section with a title, a score row (for example Score, Best and Length), a stage that holds a canvas, a start screen on the stage with a short message and a Play button, and one line of help text that tells the controls.
b. CSS: use only token names as var(--…). Put the stage on the page surface (surface-body) with a border token, so the game is light and the grid is easy to see. Make the game large but keep all of it on the screen: max-inline-size min(64rem, 75svh). Use the site's .btn classes for the buttons.
c. JavaScript: draw the game on the canvas. Read each colour from the tokens with getComputedStyle when the game starts (surface, border, ink, success, warning, danger), so the game follows the design system. A board refuses colour values, so do not write hex or rgb values in the CSS.
3. Controls: arrow keys and W A S D, P to pause, and swipe on a touch screen. Pause the game when the canvas loses focus or the visitor goes to a different tab. Give the canvas tabindex="0" and an aria-label that tells the controls.
4. Keep the best score in localStorage, inside try and catch, so the game still works when the browser blocks storage.
5. The canvas gets focus when play starts. Remove its focus ring (outline: none on :focus and :focus-visible of the canvas only). Keep the focus ring on the buttons.
6. Keep the canvas sharp on high-density screens: set its size with a ResizeObserver and devicePixelRatio (2 at most).
7. Open the board, play one round, and tell me what you checked: start, controls, pause, game over, best score, and a narrow screen.
Show me the board when it is done. Do not put the game on a page unless I ask.
Create a Snake game on a Front panel board
Build a playable browser game on a sketchbook board. The game draws on a canvas and takes every colour from your design tokens.