1 files changed, 94 insertions, 6 deletions

diff --git a/land-and-freedom.scss b/land-and-freedom.scss
index 3602c26..8b9636f 100644
--- a/land-and-freedom.scss
+++ b/land-and-freedom.scss
@@ -4,10 +4,14 @@
 $selectable-color: white; //  yellow;
 $selected-color: yellow; //blue;
 
+$anarchist-color: rgb(76, 70, 89);
+$communist-color: rgb(255, 0, 0);
+$moderate-color: rgb(126, 18, 80);
+
 main {
   // background-color: rgb(213, 196, 131);
   // background-color: darkolivegreen;
-  background-color: #7B904B;;
+  background-color: #7b904b;
 }
 
 /* MAP */
@@ -44,11 +48,60 @@ main {
   }
 }
 
+.game_info {
+  padding: 3px 4px;
+  border-bottom: 1px solid black;
+  font-size: 16px;
+  line-height: 1.5;
+  grid-column: 1;
+  grid-row: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+#roles {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+// #role_Anarchist::before {
+//   background-color: $anarchist-color;
+//   content: ' ';
+//   display: block;
+//   height: 100%;
+//   left: 0;
+//   opacity: 0.6;
+//   position: absolute;
+//   top: 0;
+//   width: 100%;
+//   z-index: -1;
+// }
+
+#role_Anarchist {
+  background-color: $anarchist-color;
+}
+
+#role_Communist {
+  background-color: $communist-color;
+}
+
+#role_Moderate {
+  background-color: $moderate-color;
+}
+
+.role {
+  color: white;
+
+  a {
+    color: white;
+  }
+}
+
 .panel {
   min-width: 1271px;
   max-width: 1271px;
   // background-color: hsl(34, 10%, 35%);
-  background-color: #58641D;
+  background-color: #58641d;
   margin: 12px auto;
   box-shadow: 1px 2px 4px #0004;
   border: 2px solid #333;
@@ -73,11 +126,19 @@ main {
 }
 
 #hand_header {
-  background-color: #273B09;
+  background-color: #273b09;
+}
+
+.panel_header[data-faction-id='a'] {
+  background-color: $anarchist-color;
+}
+
+.panel_header[data-faction-id='c'] {
+  background-color: $communist-color;
 }
 
-.panel_header[data-faction-id="a"] {
-  background: linear-gradient(45deg, black 50%, red 0);
+.panel_header[data-faction-id='m'] {
+  background-color: $moderate-color;
 }
 
 // #hand,
@@ -127,7 +188,7 @@ main {
   box-shadow: 0 0 0 1px #333;
 }
 
-@for $i from 1 through 62 {
+@for $i from 1 through 108 {
   .card[data-card-id='#{$i}'] {
     background-image: url('images/cards100/card_#{$i}.png');
   }
@@ -151,6 +212,33 @@ main {
   margin-top: 1px;
 }
 
+.glory {
+  box-sizing: border-box;
+  position: absolute;
+  // background-color: yellow;
+  // opacity: 0.5;
+  width: 34px;
+  height: 34px;
+  background-size: 100% 100%;
+  // box-shadow: 0 0 0 1px #333;
+  border-radius: 4px;
+}
+
+.glory[data-faction-id='a'] {
+  border: 1px #333 solid;
+  background-image: url('images/factions/anarchists.png');
+}
+
+.glory[data-faction-id='c'] {
+  border: 1px #333 solid;
+  background-image: url('images/factions/communitsts.png');
+}
+
+.glory[data-faction-id='m'] {
+  border: 1px #333 solid;
+  background-image: url('images/factions/moderates.png');
+}
+
 .standee {
   box-sizing: border-box;
   position: absolute;