init

client/assets/styles/game.css

@@ -303,12 +303,12 @@
     border-top: 1px solid purple;
 }
 
-.game .img {
+.game .img, .faceoff .img {
     position: relative;
     height: 100%;
 }
 
-.game .avatar {
+.game .avatar, .faceoff .avatar {
     grid-area: avatar;
     width: 100%;
     height: 100%;

client/assets/styles/instance.less

@@ -379,6 +379,37 @@
     opacity: 0.5;
 }
 
+
+.faceoff {
+    overflow: hidden;
+    display: grid;
+    grid-template-rows: min-content 1fr 1fr min-content ;
+    grid-template-areas:
+        "oppname"
+        "opponent"
+        "player"
+        "playername";
+
+    .ready {
+        background: black;
+        color: @green;
+    }
+
+    h1 {
+        text-align: center;
+    }
+
+    .opponent-name {
+        margin-bottom: 1em;
+        grid-area: oppname;
+    }
+
+    .player-name {
+        margin-top: 1em;
+        grid-area: playername;
+    }
+}
+
 /* Mobile Nav*/
 .instance-nav { display: none; }