1 files changed, 18 insertions, 11 deletions

diff --git a/play.css b/play.css
index 274cf68..fc62746 100644
--- a/play.css
+++ b/play.css
@@ -107,10 +107,6 @@ header.your_turn { background-color: orange; }
 	position: absolute;
 }
 
-#map svg image {
-	pointer-events: none;
-}
-
 #map svg path.area {
 	fill: green;
 	stroke: green;
@@ -147,6 +143,14 @@ header.your_turn { background-color: orange; }
 	fill: none;
 }
 
+#map svg path.area.battle {
+	fill-opacity: 0.6;
+	stroke-opacity: 0.8;
+	fill: #600;
+	stroke-width: 60;
+	stroke: #700;
+}
+
 #map.hide_blocks #blocks {
 	visibility: hidden;
 }
@@ -159,11 +163,11 @@ body.shift .block.known:hover {
 	z-index: 100;
 }
 
-#battle div.block {
+#battle > div.block {
 	position: relative;
 }
 
-#map div.block {
+#blocks > div.block {
 	position: absolute;
 }
 
@@ -196,6 +200,11 @@ div.block.selected { box-shadow: 0 0 3px 1px yellow; }
 div.block.moved { filter: grayscale(50%) brightness(85%); }
 div.block.highlight.moved { filter: grayscale(60%) brightness(95%); }
 
+/*
+div.block.battle { filter: grayscale(80%) brightness(50%) !important }
+*/
+div.block.battle { opacity: 0; pointer-events: none; }
+
 div.block:hover { z-index: 1; }
 
 div.block.r1 { transform: rotate(-90deg); }
@@ -203,15 +212,13 @@ div.block.r2 { transform: rotate(-180deg); }
 div.block.r3 { transform: rotate(-270deg); }
 
 div.block {
-	transition-property: top, left, transform;
-	transition-duration: 700ms, 700ms, 200ms;
-	transition-timing-function: ease;
+	transition-property: top, left, transform, opacity;
+	transition-duration: 700ms, 700ms, 250ms, 250ms;
+	transition-timing-function: ease, ease, ease, linear;
 }
 
 /* BATTLE BOARD */
 
-#battle { top: 295px; left: 195px; }
-
 #battle { background-color: silver; }
 #battle_message { background-color: lightsteelblue; }
 #battle_header { background-color: steelblue; color: white; }