CSS-Only 1D Chess

White to move.
Black replies Knight 7→5. White to move.
Black replies Rook 6→5. White to move.
Black replies King 8→7. White to move.
Black replies Knight 5→3. White to move.
Black replies King 7→6. White to move.
Black replies King 7→8. White to move.
Black replies Knight 3→5. White to move.
Black replies King 6→7. White to move.
Black replies Knight 3→1. White to move.
Selected King at 1.
Selected Knight at 2.
Selected Rook at 3.
Selected Knight at 4.
Selected Rook at 4.
Selected King at 2.
Selected Rook at 2.
Selected Knight at 6.
Selected Knight at 8.
Selected King at 3.
Draw by stalemate.
Black replies Knight 5→3. Checkmate. Black wins.
Black replies Rook 5→4. Checkmate. Black wins.
Draw by insufficient material.
Black replies Knight 5→3. Draw by insufficient material.
Black replies King 6→5. Draw by insufficient material.
Black replies King 7→8. Draw by insufficient material.
Checkmate. White wins.

Rules

The rules are the same as regular chess, except the knight can only jump two spaces forward/backward because of the single row board.

About

I was inspired to make a CSS-only (i.e. no JS) 1D chess game after seeing a post on Hacker News about one of the variants (with JS) and then subsequently finding an earlier version too (also with JS).

You can take a look at the "making CSS-only 3D/2D 1D chess" post on my blog for a little extra detail on the process.

Spoiler: There's also a 2D 3D version of the game... just click the little 3D 2D text in the header to switch to it!