Don't wrap battle lines.

1 files changed, 33 insertions, 36 deletions

diff --git a/play.html b/play.html
index 74d5977..a83b122 100644
--- a/play.html
+++ b/play.html
@@ -26,23 +26,11 @@ main {
 	box-shadow: inset 0 0 8px #0008;
 }
 
-/*
-main[data-scenario="1"] {
-	background-image: url("images/The_Battle_of_White_Mountain_(by_Peter_Snayers).jpg");
-	background-size: cover;
-	background-position: center;
+#player1, #player2 {
+	padding: 1px;
 }
 
-main[data-scenario="5"] {
-	background-image: url(images/Malplaquet.jpg);
-	background-size: cover;
-	background-position: center;
-}
-*/
-
-/*
-#player1 div, #player2 div { outline: 1px dotted pink; }
-*/
+.table { width: fit-content; margin: 0 auto; }
 
 .card, .card * {
 	pointer-events: none;
@@ -73,14 +61,20 @@ main[data-scenario="5"] {
 .table_reserve, .table_front, .table_pool {
 	display: flex;
 	justify-content: center;
-	flex-wrap: wrap;
 	gap: 24px;
+	padding: 0 23px;
+}
+
+.table_front {
+	min-height: 509px;
 }
 
 .table_reserve {
-	margin: 24px;
+	min-height: 1px;
 }
 
+.table_reserve .slot_dice { display: none }
+
 .slot_cubes {
 	height: 87px;
 	display: flex;
@@ -122,8 +116,6 @@ main[data-scenario="5"] {
 	align-content: start;
 }
 
-.table_reserve .slot_dice { display: none }
-
 .stick {
 	width: 200px;
 	height: 6px;
@@ -303,27 +295,32 @@ main[data-scenario="5"] {
 	<div id="log"></div>
 </aside>
 
-<main data-min-zoom="0.5" data-max-zoom="1.125" map-width="1920" map-height="1080">
+<main data-min-zoom="0.5" data-max-zoom="1.125" data-map-xheight="500">
+
+	<div class="table">
 
-	<div class="flip" id="player1">
-		<div class="player_pool">
-			<div id="name1" class="player_name"></div>
-			<div id="pool1" class="table_pool"></div>
-			<div id="morale1" class="table_pool"></div>
+		<div class="flip" id="player1">
+			<div class="player_pool">
+				<div id="name1" class="player_name"></div>
+				<div id="pool1" class="table_pool"></div>
+				<div id="morale1" class="table_pool"></div>
+			</div>
+			<div id="reserve1" class="table_reserve"></div>
+			<div id="front1" class="table_front"></div>
 		</div>
-		<div id="reserve1" class="table_reserve"></div>
-		<div id="front1" class="table_front"></div>
-	</div>
 
-	<div id="player2">
-		<div id="front2" class="table_front"></div>
-		<div id="reserve2" class="table_reserve"></div>
-		<div class="player_pool">
-			<div id="morale2" class="table_pool"></div>
-			<div id="pool2" class="table_pool"></div>
-			<div id="name2" class="player_name"></div>
+		<div id="player2">
+			<div id="front2" class="table_front"></div>
+			<div id="reserve2" class="table_reserve"></div>
+			<div class="player_pool">
+				<div id="morale2" class="table_pool"></div>
+				<div id="pool2" class="table_pool"></div>
+				<div id="name2" class="player_name"></div>
+			</div>
 		</div>
-	</div>
+
+	<div class="table">
+
 </main>
 
 <footer id="status"></footer>