diff --git a/assets/chessground.base.css b/assets/chessground.base.css
index a8d003e9..6f7f7a7c 100644
--- a/assets/chessground.base.css
+++ b/assets/chessground.base.css
@@ -173,7 +173,7 @@ piece.fading {
   transform: translateY(39%);
 }
 
-coords.squares {
+.cg-wrap coords.squares {
   bottom: 0;
   left: 0;
   text-transform: uppercase;
@@ -181,44 +181,44 @@ coords.squares {
   flex-flow: column-reverse;
   height: 100%;
   width: 12.5%;
+}
 
-  &.black {
-    flex-flow: column;
-  }
+.cg-wrap coords.squares.black {
+  flex-flow: column;
+}
 
-  &.left {
-    text-align: left;
-  }
+.cg-wrap coords.squares.left {
+  text-align: left;
+}
 
-  coord {
-    padding: 6% 4%;
-  }
+.cg-wrap coords.squares coord {
+  padding: 6% 4%;
+}
 
-  &.rank2 {
-    transform: translateX(100%);
-  }
+.cg-wrap coords.squares.rank2 {
+  transform: translateX(100%);
+}
 
-  &.rank3 {
-    transform: translateX(200%);
-  }
+.cg-wrap coords.squares.rank3 {
+  transform: translateX(200%);
+}
 
-  &.rank4 {
-    transform: translateX(300%);
-  }
+.cg-wrap coords.squares.rank4 {
+  transform: translateX(300%);
+}
 
-  &.rank5 {
-    transform: translateX(400%);
-  }
+.cg-wrap coords.squares.rank5 {
+  transform: translateX(400%);
+}
 
-  &.rank6 {
-    transform: translateX(500%);
-  }
+.cg-wrap coords.squares.rank6 {
+  transform: translateX(500%);
+}
 
-  &.rank7 {
-    transform: translateX(600%);
-  }
+.cg-wrap coords.squares.rank7 {
+  transform: translateX(600%);
+}
 
-  &.rank8 {
-    transform: translateX(700%);
-  }
+.cg-wrap coords.squares.rank8 {
+  transform: translateX(700%);
 }