add support for tokens in monitor

public/monitor.css

@@ -1,20 +1,24 @@
+:root {
+  --citrus: #c2d72f;
+  --bleue: #0093ff;
+  --marine: #20dfb2;
+  --main-bg-color: var(--marine);
+  --main-fg-color: var(--bleue);
+  --transparent: #0f0;
+}
 body {
   font-family: "Arial Rounded MT Bold", sans-serif;
   background-color: black;
   margin: 0px auto;
   overflow: hidden;
+  color: black;
 }
 * {
   margin: 0;
   padding: 0;
 }
-/*
-# colors
-citrus: c2d72f
-bleue: 0093ff
-*/
 #info {
-  background-color: #c2d72f;
+  background-color: var(--main-bg-color);
   padding: 1em 0 0 1em;
   width: 1280px;
   height: 720px;
@@ -30,31 +34,41 @@ bleue: 0093ff
   margin-top: 1.5em;
 }
 .box {
-  background-color: #0f0;
+  background-color: var(--transparent);
   height: 189px;
   outline: 0.3em solid grey;
   -moz-outline-radius: 1em;
 }
 .points {
   position: absolute;
-  top: 1em;
-  right: 1em;
-  background-color: #c2d72f;
-  width: 3em;
-  padding: 0.2em;
+  right: 0.2em;
   text-align: right;
-  border-radius: 0.5em;
-  box-shadow: 0 0 0.3em #c2d72f, 0 0 0.8em #c2d72f, 0 0 1em #c2d72f, 0 0 1.2em #c2d72f;
+  font-size: 36px;
+}
+.points.bg {
+  -webkit-text-stroke: 10px var(--main-bg-color);
 }
 .player.buzzing .box {
-  outline: 0.7em solid #0093ff;
+  outline: 0.7em solid var(--main-fg-color);
+}
+.subbox {
+  margin-top: 0.5em;
+  display: flex;
+  justify-content: space-between;
 }
 .name {
-  margin-top: 0.5em;
   text-align: center;
   letter-spacing: 0.3em;
   font-variant: small-caps;
+  flex-grow: 1;
   /*font-weight: bold;*/
 }
+.tokens {
+  width: 4em;
+  /* width: 4em should give enough space for 3 tokens,
+  if a user has more they'll be hidden. */
+  height: 21px; /* 1 line height */
+  overflow: hidden;
+}
 /*1280 x 720*/
 /*1920 x 1080*/