-- I have now solved this problem, see the bottom half of the post for a solution.
I am interested in whether one can produce a html page which produces the 'Lights Out' game for arbitrary fixed grid size (https://en.wikipedia.org/wiki/Lights_Out_(game)) without using any JavaScript.
It's easy to do with the slightest hint of JavaScript of course.
CSS is pretty powerful stuff (Is CSS Turing complete?) so it seems like it could perhaps be possible.
The typical technique I've seen (and done myself) in similar problems is judicious use of checkboxes/radios, see for example
https://css-tricks.com/functional-css-tabs-revisited/
If you google you can see some games people have made just with css
We seem to be hindered by that we are only really allowed to traverse the dom in one direction with CSS selectors, I can't ask for say the parents of elements with certain properties.
My interest is that if it is possible I think it would be quite insightful to see a solution.
The desired result would be something that plays the 5 x 5 lights out game without invoking any JavaScript and that works in Firefox, the html itself can be however large is needed.
If it's not possible I would like a compelling argument as to why not.
Edit: I made a mistake in my initial analysis of this problem. It’s actually quite trivial, will post a solution later today.
Edit 2: Given that the question has been put on hold for reasons beyond my understanding, I can't be bothered to properly produce the solution so I will just provide the idea.
Simply have 5*5 checkboxes, corresponding to the 5*5 squares, in order. Now underneath have 2^(5*5) divs containing some representation of the board representing how the state of the game would look after selecting each possible combination of on/off for a particular square.
By default hide all of these divs, now have 2^(5*5) CSS selectors, which basically match a particular configuration of checked/uncheccked checkboxes, then do a + * + * + *... with as many + * as required to reach your div that corresponds to this game state, then make that div visible, done.
As it happens, I did actually work out a way to represent games even when the order of things matter, provided you're interested only in finitely many turns. If the question is reopened I could provide this if someone is interested.
Edit 3: Please if possible could someone inform me of the mechanism for having my question removed from being on hold? I see that it is marked as too broad, but I have no idea what to make of that. It certainly has a satisfactory solution, indeed, I have just provided one.
