1 files changed, 51 insertions, 5 deletions

diff --git a/play.css b/play.css
index 0dc2ad0..eb5d563 100644
--- a/play.css
+++ b/play.css
@@ -9,7 +9,7 @@ header.your_turn { background-color: orange; }
 #turn_info { background-color: gainsboro; }
 .role_vp { float: right; }
 
-body.Observer #hand_panel, body.Observer #draw_panel, body.Observer #discard_panel, body.Observer #market_panel {
+body.Observer #hand_panel, body.Observer #draw_panel, body.Observer #discard_panel {
 	display: none;
 }
 
@@ -634,11 +634,10 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 	min-width: 1368px;
 	max-width: 1636px;
 	margin: 12px auto 36px auto;
-	background-color: #555;
 }
 
 .panel_header {
-	background-color: #444;
+	background-color: hsl(0,0%,27%);
 	color: white;
 	user-select: none;
 	font-weight: bold;
@@ -647,6 +646,7 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 }
 
 .panel_body {
+	background-color: hsl(0,0%,35%);
 	display: flex;
 	justify-content: start;
 	flex-wrap: wrap;
@@ -655,8 +655,54 @@ body.shift .zenobia { background-image: url(images/rival_back.png) }
 	min-height: 350px;
 }
 
-#market {
-	background-image: repeating-linear-gradient(135deg, #555555, #555555 60px, #505050 60px, #505050 120px);
+#market, #played {
+	background-image: repeating-linear-gradient(135deg,
+		hsl(0,0%,33%),
+		hsl(0,0%,33%) 60px,
+		hsl(0,0%,30%) 60px,
+		hsl(0,0%,30%) 120px
+	)
+}
+
+.panel_header.p_red { background-color: hsl(354,20%,27%) }
+.panel_header.p_blue { background-color: hsl(207,20%,27%) }
+.panel_header.p_yellow { background-color: hsl(47,25%,27%) }
+.panel_header.p_green { background-color: hsl(99,15%,27%) }
+
+#played.p_red {
+	background-image: repeating-linear-gradient(135deg,
+		hsl(354,20%,33%),
+		hsl(354,20%,33%) 60px,
+		hsl(354,20%,31%) 60px,
+		hsl(354,20%,31%) 120px
+	)
+}
+
+#played.p_blue {
+	background-image: repeating-linear-gradient(135deg,
+		hsl(207,20%,33%),
+		hsl(207,20%,33%) 60px,
+		hsl(207,20%,31%) 60px,
+		hsl(207,20%,31%) 120px
+	)
+}
+
+#played.p_yellow {
+	background-image: repeating-linear-gradient(135deg,
+		hsl(47,25%,33%),
+		hsl(47,25%,33%) 60px,
+		hsl(47,25%,31%) 60px,
+		hsl(47,25%,31%) 120px
+	)
+}
+
+#played.p_green {
+	background-image: repeating-linear-gradient(135deg,
+		hsl(99,15%,33%),
+		hsl(99,15%,33%) 60px,
+		hsl(99,15%,31%) 60px,
+		hsl(99,15%,31%) 120px
+	)
 }
 
 /* CRISIS TABLE HIGHLIGHT */