1 files changed, 24 insertions, 15 deletions

diff --git a/play.css b/play.css
index c8b8fd7..1536227 100644
--- a/play.css
+++ b/play.css
@@ -29,8 +29,8 @@ header.your_turn { background-color: orange; }
 /* CARDS */
 
 .hand {
-	margin: 0 auto;
-	padding:  24px;
+	margin: 0 auto 85px auto;
+	padding: 24px;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
@@ -71,20 +71,21 @@ header.your_turn { background-color: orange; }
 /* BATTLE & PURSUIT DIALOGS */
 
 #battle, #pursuit {
-	z-index: 100;
+	position: absolute;
+	scroll-margin: 20px;
+	z-index: 200;
 	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; }
+@media (max-width: 400px) {
+	#battle, #pursuit {
+		min-width: 90vw;
+		min-width: 90dvw;
+	}
+}
 
 /* BATTLE DIALOG */
 
@@ -95,12 +96,17 @@ header.your_turn { background-color: orange; }
 #battle_message { background-color: #d6c4a9; }
 
 #battle_header {
-	cursor: move;
+	list-style: none;
+	cursor: s-resize;
 	padding: 2px 8px;
 	line-height: 24px;
 	min-height: 24px;
 	text-align: center;
 	font-weight: bold;
+}
+
+#battle[open] #battle_header {
+	cursor: n-resize;
 	border-bottom: 1px solid black;
 }
 
@@ -158,12 +164,17 @@ header.your_turn { background-color: orange; }
 #pursuit_message { background-color: #d6c4a9; }
 
 #pursuit_header {
-	cursor: move;
+	list-style: none;
+	cursor: s-resize;
 	padding: 2px 8px;
 	line-height: 24px;
 	min-height: 24px;
 	text-align: center;
 	font-weight: bold;
+}
+
+#pursuit[open] #pursuit_header {
+	cursor: n-resize;
 	border-bottom: 1px solid black;
 }
 
@@ -193,7 +204,7 @@ header.your_turn { background-color: orange; }
 
 /* TABLES */
 
-table { border-collapse: collapse; font-size: 12px; user-select: none; }
+table { border-collapse: collapse; font-size: 12px; }
 td.blank { background-color: transparent; border: none }
 td,th { border: 1px solid #222; text-align: center; padding: 2px 4px; }
 td { min-width: 16px; height: 19px; }
@@ -225,11 +236,9 @@ td img { vertical-align: middle }
 #mapsvg {
 	display: block;
 	position: absolute;
-	user-select: none;
 }
 
 #calendar, #calendar2 {
-	user-select: none;
 	position: absolute;
 	display: flex;
 	top: 24px;