Connect Four against CSS

You are red. Yellow is a 84→128→7 neural network (11,783 integer weights) computed by your browser's style engine with @property, calc() and :has(). 0 bytes of JavaScript.

youCSS
Your moveYour turnCSS winsYou win!Draw
Tap a column to drop a red piece. The network answers straight away. The network chose column . The bars above the board show how much it liked each column. Blocked your four in column . A hard-coded rule: if you can win next move, stop it. Connected four in column . A hard-coded rule: if it can win now, it does.

How it plays

  1. Three hard-coded rules come first. Win now if it can. Otherwise block a four you could make next move. Avoid a column where its piece would let you win right on top of it.
  2. Everything else is the network. A 84→128→7 MLP (128 hidden ReLU units) scores the seven columns. It was trained in numpy to imitate a depth-7 alpha-beta search.
  3. The stylesheet describes one turn. Each of the 21 turns is a nested element that inherits the board from the turn before it, so the browser reruns the same network for every move.