Style card holding boxes to match map style and colors.

1 files changed, 97 insertions, 53 deletions

diff --git a/play.html b/play.html
index 1403f55..7f90426 100644
--- a/play.html
+++ b/play.html
@@ -27,17 +27,23 @@
 }
 
 :root {
-	--suf-25: hsl(273 80% 25%);
-	--suf-75: hsl(273 39% 75%);
-	--suf-85: hsl(273 39% 85%);
-
-	--opp-25: hsl(16 100% 25%);
-	--opp-75: hsl(16 85% 75%);
-	--opp-85: hsl(16 85% 85%);
+	--back-strategy: hsl(36, 71%, 66%);
+	--back-states: #99b778;
+	--back-suf: #754d8d;
+	--back-opp: #da6642;
+
+	--suf-25: hsl(273, 80%, 25%);
+	--suf-75: hsl(273, 39%, 75%);
+	--suf-85: hsl(273, 39%, 85%);
+
+	--opp-25: hsl(16, 100%, 25%);
+	--opp-75: hsl(16, 85%, 75%);
+	--opp-85: hsl(16, 85%, 85%);
 }
 
 main {
 	background-color: slategray;
+	background-color: hsl(170, 13%, 55%);
 }
 
 #role_Suffragist { background-color: var(--suf-85); }
@@ -49,7 +55,7 @@ main {
 body.Suffragist header.your_turn { background-color: var(--suf-75); }
 body.Opposition header.your_turn { background-color: var(--opp-75); }
 
-#log { background-color: whitesmoke; }
+#log { background-color: floralwhite; }
 #log .h1, #log .h2 {
 	font-weight: bold;
 	padding-top: 2px;
@@ -58,8 +64,8 @@ body.Opposition header.your_turn { background-color: var(--opp-75); }
 	border-top: 1px solid black;
 	border-bottom: 1px solid black;
 }
-#log .h1 { background-color: silver; }
-#log .h2 { background-color: gainsboro; }
+#log .h1 { background-color: hsl(170, 40%, 73%); }
+#log .h2 { background-color: hsl(170, 40%, 83%); }
 
 #log .suf { background-color: var(--suf-85); border-top: 1px solid var(--suf-25); border-bottom: 1px solid var(--suf-25); }
 #log .opp { background-color: var(--opp-85); border-top: 1px solid var(--opp-25); border-bottom: 1px solid var(--opp-25); }
@@ -81,7 +87,6 @@ body.Opposition header.your_turn { background-color: var(--opp-75); }
 	vertical-align: -2px;
 	width: 12px;
 	height: 12px;
-	border-radius: 0px;
 	box-shadow: none;
 	border: none;
 	background-size: contain;
@@ -165,43 +170,89 @@ body.Opposition header.your_turn { background-color: var(--opp-75); }
 .panel_grid {
 	display: flex;
 	justify-content: center;
-	min-width: 1500px;
+	min-width: 1100px;
 	max-width: 1500px;
-	margin: 20px auto;
-	gap: 20px;
+	margin: 24px auto;
+	gap: 24px;
 }
 
-#hand, #discard, #support_claimed, #support_discard, #opposition_claimed, #opposition_discard, #states_draw, #strategy_draw, #out_of_play { min-height: 350px; }
-#hand_panel, #states_draw, #support_discard_panel, #opposition_discard_panel, #out_of_play { min-width: 1100px; }
-#strategy_draw { min-width: 790px; }
-#support_claimed, #opposition_claimed { min-width: 250px; }
-
 .panel {
-	background-color: #555;
+	font-family: CopperplateCC;
+	font-variant: small-caps;
+	x-border: 2px solid #222;
+	background-color: hsl(43, 52%, 88%);
+	box-shadow: 1px 2px 4px #0004;
 }
 
 .panel_header {
-	background-color: #444;
-	color: hsl(40, 60%, 90%);
+	background-color: hsl(43, 42%, 78%);
+	margin: 3px;
+	border: 2px solid #222;
 	font-weight: bold;
 	text-align: center;
-	padding: 3px 1em;
+	padding: 2px 0;
 }
 
 .panel_body {
-	display: flex;
-	justify-content: start;
-	flex-wrap: wrap;
-	padding: 20px;
-	gap: 20px;
+	margin: 3px;
+	border: 2px solid #222;
+	display: grid;
+	grid-template-columns: repeat(3, 250px);
+	padding: 16px;
+	gap: 16px;
+	min-height: 350px;
+	min-width: 250px;
+	max-width: 1100px;
+}
+
+#support_claimed_header { background-color: var(--back-suf); color: white; }
+#opposition_claimed_header { background-color: var(--back-opp); color: white; }
+#strategy_draw_header { background-color: var(--back-strategy); }
+#states_draw_header { background-color: var(--back-states); }
+
+body.Suffragist #hand_header { background-color: var(--suf-75); }
+body.Opposition #hand_header { background-color: var(--opp-75); }
+
+body.Suffragist #set_aside_header { background-color: var(--suf-85); }
+body.Opposition #set_aside_header { background-color: var(--opp-85); }
+
+#support_claimed, #opposition_claimed {
+	grid-template-columns: 250px;
+}
+
+#strategy_draw {
+	grid-template-columns: repeat(3, 250px);
+}
+
+#hand, #set_aside {
+	grid-template-columns: repeat(auto-fill, 250px);
+}
+
+/*
+#hand, #set_aside, #support_claimed, #opposition_claimed, #states_draw, #strategy_draw { min-height: 350px; }
+#hand { min-width: calc(250px * 4 + 16px * 3); }
+#strategy_draw { min-width: calc(250px * 3 + 16px * 2); }
+#states_draw { width: calc(250px * 3 + 16px * 2); }
+#support_claimed, #opposition_claimed { min-width: 250px; }
+
+@media (min-width: 1320px) {
+#states_draw { width: calc(250px * 4 + 16px * 3); }
+}
+
+@media (min-width: 1900px) {
+#states_draw { width: calc(250px * 6 + 16px * 5); }
 }
+*/
+
 
 /* MAP */
 
 #mapwrap {
 	width: 1100px;
 	height: 850px;
-	box-shadow: 0 1px 8px #0008;
+	x-border: 1px solid #222;
+	x-margin-top: -1px;
+	box-shadow: 1px 2px 4px #0004;
 }
 
 #map {
@@ -292,7 +343,7 @@ div.label.claimable::after {
 */
 
 div.label.claimable {
-	text-decoration: double underline;
+	text-decoration: underline;
 }
 
 div.state.selected {
@@ -330,14 +381,14 @@ div.persistent_box {
 	position: absolute;
 	width: 125px;
 	height: 175px;
-	border: 1px solid #444;
-	border-radius: 8px;
+	border-radius: 4px;
+	box-shadow: 0 0 0 1px #222, 1px 2px 2px #0004;
 }
 
 body.shift .persistent_box .card:hover {
 	width: 250px;
 	height: 350px;
-	border-radius: 16px;
+	border-radius: 8px;
 	z-index: 100;
 }
 
@@ -471,8 +522,8 @@ div.button_box .button {
 	background-repeat: no-repeat;
 	width: 250px;
 	height: 350px;
-	border-radius: 16px;
-	box-shadow: 1px 2px 4px #0004;
+	border-radius: 8px;
+	box-shadow: 0 0 0 1px #222, 1px 2px 4px #0004;
 }
 
 .card.action {
@@ -1220,45 +1271,38 @@ c5 3 13 7 17 8 8 2 9 3 11 12 1 5 5 12 8 16 5 8 5 8 3 22 l-3 14 -30 -1 c-35
 	</div>
 	</div>
 
-	<div class="panel_grid">
-		<div id="hand_panel" class="panel hide">
+	<div id="hand_panel" class="panel hide">
 		<div id="hand_header" class="panel_header">Hand</div>
 		<div id="hand" class="panel_body"></div>
 		</div>
 	</div>
 
-	<div class="panel_grid">
-		<div id="set_aside_panel" class="panel hide">
-		<div id="set_aside_header" class="panel_header">Set-aside cards</div>
+	<div id="set_aside_panel" class="panel hide">
+		<div id="set_aside_header" class="panel_header">Set-aside Cards</div>
 		<div id="set_aside" class="panel_body"></div>
 		</div>
 	</div>
 
 	<div class="panel_grid">
 		<div id="support_claimed_panel" class="panel">
-		<div id="support_claimed_header" class="panel_header">Suffragist Claimed</div>
-		<div id="support_claimed" class="panel_body"></div>
+			<div id="support_claimed_header" class="panel_header">Suffragist Claimed</div>
+			<div id="support_claimed" class="panel_body"></div>
 		</div>
 
 		<div id="opposition_claimed_panel" class="panel">
-		<div id="opposition_claimed_header" class="panel_header">Opposition Claimed</div>
-		<div id="opposition_claimed" class="panel_body"></div>
+			<div id="opposition_claimed_header" class="panel_header">Opposition Claimed</div>
+			<div id="opposition_claimed" class="panel_body"></div>
 		</div>
 	</div>
 
-	<div class="panel_grid">
-		<div id="strategy_draw_panel" class="panel">
-		<div id="strategy_draw_header" class="panel_header">Available Strategy cards</div>
+	<div id="strategy_draw_panel" class="panel">
+		<div id="strategy_draw_header" class="panel_header">Available Strategy Cards</div>
 		<div id="strategy_draw" class="panel_body"></div>
-		</div>
-
 	</div>
 
-	<div class="panel_grid">
-		<div id="states_draw_panel" class="panel">
-		<div id="states_draw_header" class="panel_header">Available States cards</div>
+	<div id="states_draw_panel" class="panel">
+		<div id="states_draw_header" class="panel_header">Available States Cards</div>
 		<div id="states_draw" class="panel_body"></div>
-		</div>
 	</div>
 
 	<br><br><br>