1 files changed, 27 insertions, 10 deletions

diff --git a/play.css b/play.css
index efc2b66..2261ede 100644
--- a/play.css
+++ b/play.css
@@ -1,7 +1,7 @@
 /* STYLESHEET FOR RED FLAG OVER PARIS */
 
-main { background-color: dimgray; }
-header { background-color: gainsboro; }
+main { background-color: dimgray }
+header { background-color: gainsboro }
 
 #role_Commune { background-color: hsl(358, 62%, 75%); }
 #role_Versailles { background-color: hsl(199, 45%, 75%); }
@@ -57,19 +57,18 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
 #final_panel { width: clamp(290px, 560px, 100%) }
 #set_aside_panel { width: clamp(290px, 830px, 100%) }
 
-#red_objective_header { background-color: hsl(358, 20%, 28%); }
-#blue_objective_header { background-color: hsl(199, 14%, 26%); }
-#red_objective { background-color: hsl(358, 10%, 36%); }
-#blue_objective { background-color: hsl(199, 7%, 33%); }
+#red_objective_header { background-color: hsl(358, 20%, 28%) }
+#blue_objective_header { background-color: hsl(199, 20%, 26%) }
+#red_objective { background-color: hsl(358, 10%, 36%) }
+#blue_objective { background-color: hsl(199, 10%, 34%) }
 
 .panel {
 	background-color: #555;
-	box-shadow: 3px 3px 9px #0008;
 }
 
 .panel_header {
 	background-color: #444;
-	color: white;
+	color: hsl(40, 60%, 90%);
 	user-select: none;
 	font-weight: bold;
 	text-align: center;
@@ -92,7 +91,7 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
 	width: 250px;
 	height: 350px;
 	border-radius: 16px;
-	box-shadow: 2px 2px 6px #0008;
+	box-shadow: 0px 1px 6px #0008;
 }
 
 #tooltip {
@@ -105,7 +104,7 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
 /* MAP */
 
 #mapwrap {
-	box-shadow: 3px 3px 9px #0008;
+	box-shadow: 1px 1px 9px #0008;
 	width: 1500px;
 	height: 1050px;
 	margin-bottom: 30px;
@@ -401,3 +400,21 @@ body.censorship #hand_panel { width: clamp(290px, 1370px, 100%) }
 .card_52{background-image:url(cards.2x/objective_11.jpg)}
 .card_53{background-image:url(cards.2x/objective_12.jpg)}
 }
+
+/* MOBILE LAYOUT */
+
+@media (max-width: 640px) {
+	#mapwrap {
+		margin: 0
+	}
+	.panel_grid {
+		gap: 0;
+		margin: 0;
+	}
+	.panel {
+		width: 100% !important;
+	}
+	.panel_body {
+		justify-content: center;
+	}
+}