add tableaus and icon data

1 files changed, 47 insertions, 6 deletions

diff --git a/land-and-freedom.css b/land-and-freedom.css
index 00fbfd0..9452199 100644
--- a/land-and-freedom.css
+++ b/land-and-freedom.css
@@ -1,5 +1,5 @@
 main {
-  background-color: darkolivegreen;
+  background-color: #7B904B;
 }
 
 /* MAP */
@@ -26,13 +26,39 @@ main {
     background-image: url(images/map100.png);
   }
 }
-#hand {
+.panel {
+  min-width: 1271px;
+  max-width: 1271px;
+  background-color: #58641D;
+  margin: 12px auto;
+  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2666666667);
+  border: 2px solid #333;
+}
+
+.panel_body {
   display: flex;
-  flex-direction: row;
-  gap: 8px;
-  margin-top: 16px;
-  padding: 16px;
   justify-content: center;
+  flex-wrap: wrap;
+  padding: 12px;
+  gap: 12px;
+  min-height: 260px;
+}
+
+.panel_header {
+  color: white;
+  user-select: none;
+  font-weight: bold;
+  text-align: center;
+  border-bottom: 2px solid #333;
+  background-color: red;
+}
+
+#hand_header {
+  background-color: #273B09;
+}
+
+.panel_header[data-faction-id=a] {
+  background: linear-gradient(45deg, black 50%, red 0);
 }
 
 .front {
@@ -321,6 +347,17 @@ main {
   height: 180px;
 }
 
+.blank_marker {
+  box-sizing: border-box;
+  position: absolute;
+  background-color: red;
+  width: 29px;
+  height: 29px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px #333;
+  margin-top: 1px;
+}
+
 .standee {
   box-sizing: border-box;
   position: absolute;
@@ -333,14 +370,17 @@ main {
   transition-property: top, left;
   transition-duration: 700ms;
   transition-timing-function: ease;
+  z-index: 1;
 }
 
+.bonus.action,
 .card.action,
 .front.action,
 .standee.action {
   box-shadow: 0 0 0 3px white;
 }
 
+.bonus.action:hover,
 .card.action:hover,
 .card.selected,
 .front.action:hover,
@@ -375,6 +415,7 @@ main {
   height: 54px;
   background-size: cover;
   background-repeat: no-repeat;
+  border-radius: 50%;
 }
 
 .bonus[data-bonus-id="0"][data-bonus-on="0"] {