update css

src/ui/index.tsx

@@ -3,7 +3,6 @@ import { render, numberSetting, Space, PieceGrid } from '@boardzilla/core';
 import setup, { Token } from '../game/index.js';
 
 import './style.scss';
-import '@boardzilla/core/index.css';
 
 render(setup, {
   layout: game => {

src/ui/style.scss

@@ -1,81 +1,79 @@
-#play-area {
-  .Token {
-    perspective: 1000px;
+.Token {
+  perspective: 1000px;
 
-    .flipper {
+  .flipper {
+    width: 100%;
+    height: 100%;
+    transition: 0.6s;
+    transform-style: preserve-3d;
+    position: relative;
+
+    .front, .back {
+      position: absolute;
+      top: 0;
+      left: 0;
       width: 100%;
       height: 100%;
-      transition: 0.6s;
-      transform-style: preserve-3d;
-      position: relative;
-
-      .front, .back {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border-radius: 10%;
-        border: .3em solid black;
-        backface-visibility: hidden;
-
-        html.dark & {
-          border: .3em solid rgb(164, 164, 164);
-        }
-      }
+      border-radius: 10%;
+      border: .3em solid black;
+      backface-visibility: hidden;
 
-      /* front pane, placed above back */
-      .front {
-        z-index: 2;
-        background: #333;
-        /* for firefox 31 */
-        transform: rotateY(0deg);
-      }
-
-      /* back, initially hidden pane */
-      .back {
-        background: #333;
-        transform: rotateY(180deg);
+      html.dark & {
+        border: .3em solid rgb(164, 164, 164);
       }
     }
 
-    &[data-size="large"] {
-      .front, .back {
-        border-width: .15em;
-      }
+    /* front pane, placed above back */
+    .front {
+      z-index: 2;
+      background: #333;
+      /* for firefox 31 */
+      transform: rotateY(0deg);
     }
 
-    /* flip the pane when hovered */
-    &:not([data-name]) .flipper {
+    /* back, initially hidden pane */
+    .back {
+      background: #333;
       transform: rotateY(180deg);
     }
+  }
 
-    &[data-color=blue] .front {
-      background: blue;
-      html.dark & {
-        background: rgb(13, 13, 115);
-      }
+  &[data-size="large"] {
+    .front, .back {
+      border-width: .15em;
     }
+  }
 
-    &[data-color=green] .front {
-      background: green;
-      html.dark & {
-        background: rgb(13, 90, 13);
-      }
+  /* flip the pane when hovered */
+  &:not([data-name]) .flipper {
+    transform: rotateY(180deg);
+  }
+
+  &[data-color=blue] .front {
+    background: blue;
+    html.dark & {
+      background: rgb(13, 13, 115);
     }
+  }
 
-    &[data-color=purple] .front {
-      background: purple;
-      html.dark & {
-        background: rgb(80, 0, 80);
-      }
+  &[data-color=green] .front {
+    background: green;
+    html.dark & {
+      background: rgb(13, 90, 13);
     }
+  }
 
-    &[data-color=red] .front {
-      background: red;
-      html.dark & {
-        background: rgb(115, 13, 13);
-      }
+  &[data-color=purple] .front {
+    background: purple;
+    html.dark & {
+      background: rgb(80, 0, 80);
+    }
+  }
+
+  &[data-color=red] .front {
+    background: red;
+    html.dark & {
+      background: rgb(115, 13, 13);
     }
   }
 }