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