front: better CSS selectors

webapp/src/components/Board/index.css

@@ -1,3 +1,11 @@
+.board {
+    display: flex;
+    flex-direction: column;
+    justify-content: center; 
+    align-items: center;
+    /* scale: 15%; */
+}
+
 .tile {
     border: 1px solid #e4e4e4;
     float: left;
@@ -10,22 +18,12 @@
     margin-top: -1px;
     padding: 0;
     text-align: center;
-   
 }
 
-.black {
+.tile.black {
     background: lightgray;
 }
 
-.board {
+.tile.white:hover {
-    display: flex;
-    flex-direction: column;
-    justify-content: center; 
-    align-items: center;
-    /* scale: 15%; */
-
-}
-
-.white:hover {
     background-color:azure;
-}
+}

webapp/src/components/Stone/index.css

@@ -1,7 +1,3 @@
-.white-stone {
+.stone {
-    cursor: default;
+    cursor: default; /* disable 'I beam' cursor change */
-}
-
-.black-stone {
-    cursor: default;
 }

webapp/src/components/Stone/index.jsx

@@ -15,11 +15,11 @@ export function Stone( color ) {
 }
 
 export function WhiteStone() {
-    return <span className="white-stone">⛀</span>
+    return <span className="stone white">⛀</span>
 }
 
 export function BlackStone() {
-    return <span className="black-stone">⛂</span>
+    return <span className="stone black">⛂</span>
 }
 
 export function oppositeColor(color) {