Use SVG paths for spaces.

1 files changed, 8 insertions, 14 deletions

diff --git a/play.css b/play.css
index 46a37c2..1859938 100644
--- a/play.css
+++ b/play.css
@@ -109,28 +109,22 @@ main { background-color: #777; }
 
 /* SPACES */
 
-path { fill: transparent; stroke-width: 4; }
-path.action { fill: white; fill-opacity: 0.3; stroke: white; }
+path { fill: none; stroke-width: 4; }
+path.action { fill: yellowgreen; fill-opacity: 0.3; stroke: lightgreen; }
+path.mongol.action { fill: gold; fill-opacity: 0.3; stroke: gold; }
 path.selected { stroke: yellow; }
 path.tip { stroke: white; stroke-dasharray: 4 4; }
 
 .space {
 	position: absolute;
-	border: 2px solid lime;
-}
-
-.space.action {
-	background-color: white; opacity: 0.3; stroke: white;
-}
-
-.space.selected {
-	background-color: gold; opacity: 0.3; stroke: white;
-}
-
-.space.province {
 	border-radius: 50%;
+	border: 4px solid transparent;
 }
 
+.space.action { border-color: lightgreen; box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; }
+.space.selected { border-color: yellow; box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; }
+.space.tip { border: 4px dotted white; }
+
 .box{position:absolute;box-sizing:border-box;border:4px solid transparent}
 .box.action{border-color:lemonchiffon;}
 .box.selected{border-color:yellow;}