use modern css features (will break UI in old browsers that don't support nesting)

src/frontend/static/style.css

@@ -30,49 +30,55 @@ li form {
   display: inline;
 }
 
-board-game:not(.outcome-winx) .when-outcome-winx,
-board-game:not(.outcome-wino) .when-outcome-wino,
-board-game:not(.outcome-draw) .when-outcome-draw,
-board-game:not(.outcome-undecided) .when-outcome-undecided,
-board-game:not(.autoplayer-x-enabled) .when-autoplayer-x-enabled,
-board-game:not(.autoplayer-x-disabled) .when-autoplayer-x-disabled,
-board-game:not(.autoplayer-o-enabled) .when-autoplayer-o-enabled,
-board-game:not(.autoplayer-o-disabled) .when-autoplayer-o-disabled,
-board-game:not(.game-in-progress) .when-game-in-progress,
-board-game:not(.game-not-in-progress) .when-game-not-in-progress {
-  display: none;
-}
+board-game {
+  &:not(.outcome-winx) .when-outcome-winx,
+  &:not(.outcome-wino) .when-outcome-wino,
+  &:not(.outcome-draw) .when-outcome-draw,
+  &:not(.outcome-undecided) .when-outcome-undecided,
+  &:not(.autoplayer-x-enabled) .when-autoplayer-x-enabled,
+  &:not(.autoplayer-x-disabled) .when-autoplayer-x-disabled,
+  &:not(.autoplayer-o-enabled) .when-autoplayer-o-enabled,
+  &:not(.autoplayer-o-disabled) .when-autoplayer-o-disabled,
+  &:not(.game-in-progress) .when-game-in-progress,
+  &:not(.game-not-in-progress) .when-game-not-in-progress {
+    display: none;
+  }
 
-table.game-board-table {
-  border: solid 7px transparent;
-  border-collapse: collapse;
-}
+  table.game-board-table {
+    border: solid 7px transparent;
+    border-collapse: collapse;
 
-table.game-board-table tbody.game-board td {
-  border: solid 6px black;
-  padding: 3px;
-}
+    tbody.game-board {
+      td {
+        border: solid 6px black;
+        padding: 3px;
+      }
 
-tbody.game-board button,
-tbody.game-board button:disabled,
-tbody.game-board button:hover {
-  width: 4em;
-  height: 4em;
-  border: none;
-  background-color: transparent;
-  color: transparent;
-}
+      button {
+        &,
+        &:disabled,
+        &:hover {
+          width: 4em;
+          height: 4em;
+          border: none;
+          background-color: transparent;
+          color: transparent;
+        }
 
-tbody.game-board button.square-X {
-  background-image: url("x.png");
-  background-size: 100% 100%;
-}
+        &.square-X {
+          background-image: url("x.png");
+          background-size: 100% 100%;
+        }
 
-tbody.game-board button.square-O {
-  background-image: url("o.png");
-  background-size: 100% 100%;
-}
+        &.square-O {
+          background-image: url("o.png");
+          background-size: 100% 100%;
+        }
 
-tbody.game-board button.square-_:enabled {
-  cursor: pointer;
+        &.square-_:enabled {
+          cursor: pointer;
+        }
+      }
+    }
+  }
 }