1 files changed, 27 insertions, 30 deletions

diff --git a/play.css b/play.css
index 793278a..8967dd2 100644
--- a/play.css
+++ b/play.css
@@ -29,15 +29,21 @@ header.your_turn { background-color: orange; }
 /* CARDS */
 
 .hand {
-	margin: 24px;
+	margin: 0 auto;
+	padding:  24px;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
 	min-height: 170px;
-	max-width: 2672px;
+	min-width: 850px;
+	max-width: 2624px;
 	gap: 20px;
 }
 
+@media (max-width: 800px) {
+	.hand { min-width: 2624px; }
+}
+
 .card {
 	background-size: cover;
 	background-repeat: no-repeat;
@@ -62,6 +68,24 @@ header.your_turn { background-color: orange; }
 }
 
 
+/* BATTLE & PURSUIT DIALOGS */
+
+#battle, #pursuit {
+	z-index: 100;
+	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
+	border: 1px solid black;
+	user-select: none;
+}
+
+#battle, #pursuit {
+	position: absolute;
+	min-width: 524px; /* 6 blocks wide */
+	min-width: 550px; /* 4.5 hexes wide */
+}
+
+#battle { left: 696px; top: 475px; }
+#pursuit { left: 696px; top: 590px; }
+
 /* BATTLE DIALOG */
 
 #battle { background-color: #d6c4a9; background: url(texture_clear.png); }
@@ -70,17 +94,6 @@ header.your_turn { background-color: orange; }
 #battle_buttons { background-color: #c4ab8b; }
 #battle_message { background-color: #d6c4a9; }
 
-#battle {
-	position: fixed;
-	min-width: 524px; /* 6 blocks wide */
-	left: 12px;
-	top: 56px;
-	z-index: 100;
-	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
-	border: 1px solid black;
-	user-select: none;
-}
-
 #battle_header {
 	cursor: move;
 	padding: 2px 8px;
@@ -144,17 +157,6 @@ header.your_turn { background-color: orange; }
 #pursuit_buttons { background-color: #c4ab8b; }
 #pursuit_message { background-color: #d6c4a9; }
 
-#pursuit {
-	position: fixed;
-	min-width: 524px; /* 6 blocks wide */
-	left: 12px;
-	top: 56px;
-	z-index: 100;
-	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
-	border: 1px solid black;
-	user-select: none;
-}
-
 #pursuit_header {
 	cursor: move;
 	padding: 2px 8px;
@@ -205,17 +207,12 @@ td img { vertical-align: middle }
 
 /* MAP */
 
-#mapwrap {
-	width: 2672px;
-	height: 960px;
-	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
-}
-
 #map {
 	background-repeat: no-repeat;
 	width: 2672px;
 	height: 960px;
 	overflow: clip;
+	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
 }
 
 #mapsvg {