Tweak array layout.

1 files changed, 31 insertions, 4 deletions

diff --git a/play.html b/play.html
index 639c1ef..2e318d8 100644
--- a/play.html
+++ b/play.html
@@ -140,17 +140,44 @@ body.Teutons #plan_actions .russian { display: none }
 
 #battle_grid {
 	display: grid;
-	width: 1200px;
-	gap: 36px;
-	grid-template-columns: 376px 376px 376px;
+	gap: 18px;
+	grid-template-columns: auto auto auto;
 	margin: 0 auto;
-	padding-bottom: 36px;
+	justify-content: center;
+	padding-bottom: 18px;
+}
+
+#battle_grid .grid_array {
+	width: 376px;
+	height: 506px;
+	padding: 12px;
+}
+
+#battle_grid #grid_bm {
+	width: 376px;
+	height: 376px;
+	padding: 12px;
 }
 
 #grid_rd1:empty, #grid_rd2:empty, #grid_rd3:empty, #grid_sa1:empty, #grid_sa2:empty, #grid_sa3:empty { display: none; }
 
 #battle_header { grid-row: 1; grid-column: 1 / 4; }
 
+/*
+#battle_grid.defender #grid_a1 { transform: rotate(180deg) }
+#battle_grid.defender #grid_a2 { transform: rotate(180deg) }
+#battle_grid.defender #grid_a3 { transform: rotate(180deg) }
+#battle_grid.defender #grid_sa1 { transform: rotate(180deg) }
+#battle_grid.defender #grid_sa2 { transform: rotate(180deg) }
+#battle_grid.defender #grid_sa3 { transform: rotate(180deg) }
+#battle_grid.attacker #grid_d1 { transform: rotate(180deg) }
+#battle_grid.attacker #grid_d2 { transform: rotate(180deg) }
+#battle_grid.attacker #grid_d3 { transform: rotate(180deg) }
+#battle_grid.attacker #grid_rd1 { transform: rotate(180deg) }
+#battle_grid.attacker #grid_rd2 { transform: rotate(180deg) }
+#battle_grid.attacker #grid_rd3 { transform: rotate(180deg) }
+*/
+
 #battle_grid.defender #grid_a1 { grid-row: 2; grid-column: 1; }
 #battle_grid.defender #grid_a2 { grid-row: 2; grid-column: 2; }
 #battle_grid.defender #grid_a3 { grid-row: 2; grid-column: 3; }