some timer logic

client/styles/game.css

@@ -64,7 +64,7 @@ h1 {
 
 #game-role {
     position: relative;
-    border-bottom: 2px solid gray;
+    border: 5px solid transparent;
     background-color: #e7e7e7;
     display: flex;
     flex-direction: column;
@@ -85,6 +85,56 @@ h1 {
     /*transform-style: preserve-3d;*/
 }
 
+#game-role-back {
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #333243;
+    border: 5px solid #61606a;
+    position: relative;
+    flex-direction: column;
+    cursor: pointer;
+    max-width: 17em;
+    border-radius: 3px;
+    height: 23em;
+    margin: 0 auto 2em auto;
+    width: 100%;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.11),
+    0 2px 2px rgba(0,0,0,0.11),
+    0 4px 4px rgba(0,0,0,0.11),
+    0 8px 8px rgba(0,0,0,0.11),
+    0 16px 16px rgba(0,0,0,0.11),
+    0 32px 32px rgba(0,0,0,0.11);
+    /*perspective: 1000px;*/
+    /*transform-style: preserve-3d;*/
+}
+
+#game-role-back h4 {
+    font-size: 24px;
+    padding: 0.5em;
+    text-align: center;
+    color: #e7e7e7;
+}
+
+#game-role-back p {
+   color: #c3c3c3;
+    font-size: 20px;
+}
+
+#game-timer {
+    padding: 1px;
+    background-color: #3c3c3c;
+    color: whitesmoke;
+    border-radius: 3px;
+    font-size: 35px;
+    text-shadow: 0 3px 4px rgb(0 0 0 / 85%);
+    border: 1px solid #747474;
+}
+
 #role-name {
     position: absolute;
     top: 6%;
@@ -100,10 +150,15 @@ h1 {
 }
 
 #role-image {
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
     position: absolute;
-    top: 34%;
+    top: 37%;
     left: 50%;
     transform: translate(-50%, -50%);
+    width: 78%;
 }
 
 #role-description {
@@ -114,7 +169,7 @@ h1 {
     transform: translate(-50%, 0);
     font-size: 16px;
     width: 78%;
-    max-height: 7em;
+    max-height: 6em;
 }
 
 #game-link img {