Add different highlight for dangerous moves. Make colors clearer.

Moves into spaces which will yield to the opponent are highlighted with an
extra red inside border.

Also change colors to be consistent:

Yellow - action for both spaces and units
Blue - selected unit
White - highlight (both for tooltip and current battle/intercept space)

Clearer blue and red colors for supply lines.

RED

1 files changed, 71 insertions, 65 deletions

diff --git a/play.css b/play.css
index 303af48..e59cd07 100644
--- a/play.css
+++ b/play.css
@@ -7,6 +7,11 @@ body.Britain header.your_turn { background-color: salmon; }
 #role_Britain, #log .h2.britain { background-color: #fcb; }
 aside { width: 220px; }
 
+:root {
+	--highlight-color: yellow;
+	--selected-color: blue;
+}
+
 .role_vp { float: right; }
 
 .checked::before { content: "\2714  " }
@@ -232,7 +237,8 @@ body.shift .highlight {
 
 .wilderness, .cultivated, .box, .militia-box, .leader-box {
 	position: absolute;
-	border: 5px solid transparent;
+	box-sizing: border-box;
+	border: 4px solid transparent;
 }
 .wilderness {
 	border-radius: 50%;
@@ -244,50 +250,85 @@ body.shift .highlight {
 	background-size: cover;
 	background-repeat: no-repeat;
 }
-.mountain.tip {
-	background-image: url(mountain-tip.svg);
-	z-index: 100;
-}
 .mountain.highlight {
 	background-image: url(mountain-highlight.svg);
+	filter: drop-shadow(0 0 2px black);
+}
+.mountain.danger {
+	background-image: url(mountain-danger.svg);
+	filter: drop-shadow(0 0 2px black);
 }
 .mountain.selected {
 	background-image: url(mountain-selected.svg);
+	filter: drop-shadow(0 0 2px black);
 }
 .mountain.british_supply {
 	background-image: url(mountain-supply-british.svg);
+	filter: none;
 }
 .mountain.french_supply {
 	background-image: url(mountain-supply-french.svg);
+	filter: none;
 }
 .mountain.british_supply.french_supply {
 	background-image: url(mountain-supply-both.svg);
+	filter: none;
+}
+.mountain.no_supply {
+	background-image: none;
+}
+.mountain.tip {
+	background-image: url(mountain-tip.svg);
+	z-index: 100;
 }
 
-.cultivated.highlight, .box.highlight, .militia-box.highlight {
-	border-color: white;
-	box-shadow: 0 0 5px white;
+.wilderness.highlight, .cultivated.highlight, .box.highlight, .militia-box.highlight {
+	border-color: yellow;
+	box-shadow: inset 0 0 3px black, 0 0 3px black;
 }
-.wilderness.highlight {
+.wilderness.selected, .cultivated.selected, .box.selected, .militia-box.selected {
 	border-color: white;
+	box-shadow: inset 0 0 3px black, 0 0 3px black;
 }
-.wilderness.selected, .cultivated.selected, .box.selected, .militia-box.selected {
-	border-color: crimson;
+.wilderness.danger, .cultivated.danger, .box.danger {
+	box-shadow: inset 0 0 0 3px red, inset 0 0 3px 3px black, 0 0 3px black;
 }
 .wilderness.tip, .cultivated.tip, .box.tip, .militia-box.tip {
-	border-color: yellow;
-	border-style: dashed;
+	border-color: white;
+	box-shadow: 0 0 3px black, inset 0 0 3px black;
 	z-index: 100;
 }
 
 .wilderness.french_supply, .cultivated.french_supply, .box.french_supply {
-	border-top-color: #0092d5;
-	border-left-color: #0092d5;
+	border-width: 6px;
+	border-top-color: blue;
+	border-left-color: blue;
+	border-bottom-color: transparent;
+	border-right-color: transparent;
+	box-shadow: none;
 }
 
 .wilderness.british_supply, .cultivated.british_supply, .box.british_supply {
-	border-bottom-color: #f0594e;
-	border-right-color: #f0594e;
+	border-width: 6px;
+	border-top-color: transparent;
+	border-left-color: transparent;
+	border-bottom-color: red;
+	border-right-color: red;
+	box-shadow: none;
+}
+
+.wilderness.british_supply.french_supply, .cultivated.british_supply.french_supply, .box.british_supply.french_supply {
+	border-width: 6px;
+	border-top-color: blue;
+	border-left-color: blue;
+	border-bottom-color: red;
+	border-right-color: red;
+	box-shadow: none;
+}
+
+.wilderness.no_supply, .cultivated.no_supply, .box.no_supply {
+	border-color: transparent;
+	box-shadow: none;
 }
 
 /* COUNTERS */
@@ -319,12 +360,13 @@ body.flat .event {
 
 body.flat .leader.highlight,
 body.flat .unit.highlight {
-	box-shadow:0 0 0 2px yellow;
+	box-shadow: 0 0 0 3px var(--highlight-color);
 }
 
 body.flat .leader.selected,
 body.flat .unit.selected {
-	box-shadow:0 0 0 2px crimson;
+	box-shadow: 0 0 0 3px var(--selected-color);
+	border-color: var(--selected-color) !important;
 }
 
 /* BEVEL STYLE ( top right bottom left ) */
@@ -492,120 +534,84 @@ body.bevel .event {
 
 .leader{background-color:#f0f0f0}
 body.bevel .leader{border-color:#f5f5f5 #d8d8d8 #d8d8d8 #f5f5f5;box-shadow:0 0 0 1px #707070}
-body.bevel .leader.highlight{box-shadow:0 0 0 1px #707070,0 0 0 3px yellow}
-body.bevel .leader.selected{box-shadow:0 0 0 1px #707070,0 0 0 3px crimson}
 body.flat .leader{border-color:#707070}
 .event{background-color:#f0f0f0}
 body.bevel .event{border-color:#f5f5f5 #d8d8d8 #d8d8d8 #f5f5f5;box-shadow:0 0 0 1px #707070}
-body.bevel .event.highlight{box-shadow:0 0 0 1px #707070,0 0 0 3px yellow}
-body.bevel .event.selected{box-shadow:0 0 0 1px #707070,0 0 0 3px crimson}
 body.flat .event{border-color:#707070}
 .marker.amphib{background-color:#f0f0f0}
 body.bevel .marker.amphib{border-color:#f5f5f5 #d8d8d8 #d8d8d8 #f5f5f5;box-shadow:0 0 0 1px #707070}
-body.bevel .marker.amphib.highlight{box-shadow:0 0 0 1px #707070,0 0 0 3px yellow}
-body.bevel .marker.amphib.selected{box-shadow:0 0 0 1px #707070,0 0 0 3px crimson}
 body.flat .marker.amphib{border-color:#707070}
 .marker.british_allied{background-color:#ffd990}
 body.bevel .marker.british_allied{border-color:#fff8af #dfb86f #dfb86f #fff8af;box-shadow:0 0 0 1px #7f580f}
-body.bevel .marker.british_allied.highlight{box-shadow:0 0 0 1px #7f580f,0 0 0 3px yellow}
-body.bevel .marker.british_allied.selected{box-shadow:0 0 0 1px #7f580f,0 0 0 3px crimson}
 body.flat .marker.british_allied{border-color:#7f580f}
 .marker.french_allied{background-color:#ffd990}
 body.bevel .marker.french_allied{border-color:#fff8af #dfb86f #dfb86f #fff8af;box-shadow:0 0 0 1px #7f580f}
-body.bevel .marker.french_allied.highlight{box-shadow:0 0 0 1px #7f580f,0 0 0 3px yellow}
-body.bevel .marker.french_allied.selected{box-shadow:0 0 0 1px #7f580f,0 0 0 3px crimson}
 body.flat .marker.french_allied{border-color:#7f580f}
 .marker.british_stockade{background-color:#e7e2c5}
 body.bevel .marker.british_stockade{border-color:#ffffe3 #c7c2a4 #c7c2a4 #ffffe3;box-shadow:0 0 0 1px #676244}
-body.bevel .marker.british_stockade.highlight{box-shadow:0 0 0 1px #676244,0 0 0 3px yellow}
-body.bevel .marker.british_stockade.selected{box-shadow:0 0 0 1px #676244,0 0 0 3px crimson}
 body.flat .marker.british_stockade{border-color:#676244}
 .marker.french_stockade{background-color:#e7e2c5}
 body.bevel .marker.french_stockade{border-color:#ffffe3 #c7c2a4 #c7c2a4 #ffffe3;box-shadow:0 0 0 1px #676244}
-body.bevel .marker.french_stockade.highlight{box-shadow:0 0 0 1px #676244,0 0 0 3px yellow}
-body.bevel .marker.french_stockade.selected{box-shadow:0 0 0 1px #676244,0 0 0 3px crimson}
 body.flat .marker.french_stockade{border-color:#676244}
 .marker.british_raided{background-color:#f78b33}
 body.bevel .marker.british_raided{border-color:#ffaa52 #d76a12 #d76a12 #ffaa52;box-shadow:0 0 0 1px #770a00}
-body.bevel .marker.british_raided.highlight{box-shadow:0 0 0 1px #770a00,0 0 0 3px yellow}
-body.bevel .marker.british_raided.selected{box-shadow:0 0 0 1px #770a00,0 0 0 3px crimson}
 body.flat .marker.british_raided{border-color:#770a00}
 .marker.french_raided{background-color:#f78b33}
 body.bevel .marker.french_raided{border-color:#ffaa52 #d76a12 #d76a12 #ffaa52;box-shadow:0 0 0 1px #770a00}
-body.bevel .marker.french_raided.highlight{box-shadow:0 0 0 1px #770a00,0 0 0 3px yellow}
-body.bevel .marker.french_raided.selected{box-shadow:0 0 0 1px #770a00,0 0 0 3px crimson}
 body.flat .marker.french_raided{border-color:#770a00}
 .marker.siege_0{background-color:#fff460}
 body.bevel .marker.siege_0{border-color:#ffff78 #dfd43f #dfd43f #ffff78;box-shadow:0 0 0 1px #7f7400}
-body.bevel .marker.siege_0.highlight{box-shadow:0 0 0 1px #7f7400,0 0 0 3px yellow}
-body.bevel .marker.siege_0.selected{box-shadow:0 0 0 1px #7f7400,0 0 0 3px crimson}
 body.flat .marker.siege_0{border-color:#7f7400}
 .marker.siege_1{background-color:#fff460}
 body.bevel .marker.siege_1{border-color:#ffff78 #dfd43f #dfd43f #ffff78;box-shadow:0 0 0 1px #7f7400}
-body.bevel .marker.siege_1.highlight{box-shadow:0 0 0 1px #7f7400,0 0 0 3px yellow}
-body.bevel .marker.siege_1.selected{box-shadow:0 0 0 1px #7f7400,0 0 0 3px crimson}
 body.flat .marker.siege_1{border-color:#7f7400}
 .marker.siege_2{background-color:#fff460}
 body.bevel .marker.siege_2{border-color:#ffff78 #dfd43f #dfd43f #ffff78;box-shadow:0 0 0 1px #7f7400}
-body.bevel .marker.siege_2.highlight{box-shadow:0 0 0 1px #7f7400,0 0 0 3px yellow}
-body.bevel .marker.siege_2.selected{box-shadow:0 0 0 1px #7f7400,0 0 0 3px crimson}
 body.flat .marker.siege_2{border-color:#7f7400}
 .marker.fieldworks{background-color:#e3dfd6}
 body.bevel .marker.fieldworks{border-color:#fffef5 #c3beb5 #c3beb5 #fffef5;box-shadow:0 0 0 1px #635e55}
-body.bevel .marker.fieldworks.highlight{box-shadow:0 0 0 1px #635e55,0 0 0 3px yellow}
-body.bevel .marker.fieldworks.selected{box-shadow:0 0 0 1px #635e55,0 0 0 3px crimson}
 body.flat .marker.fieldworks{border-color:#635e55}
 .unit.british{background-color:#eac99e}
 body.bevel .unit.british{border-color:#ffe8bd #caa87d #caa87d #ffe8bd;box-shadow:0 0 0 1px #6a481d}
-body.bevel .unit.british.highlight{box-shadow:0 0 0 1px #6a481d,0 0 0 3px yellow}
-body.bevel .unit.british.selected{box-shadow:0 0 0 1px #6a481d,0 0 0 3px crimson}
 body.flat .unit.british{border-color:#6a481d}
 .marker.british_fort{background-color:#ef473e}
 body.bevel .marker.british_fort{border-color:#ff665d #cf261d #cf261d #ff665d;box-shadow:0 0 0 1px #770000}
-body.bevel .marker.british_fort.highlight{box-shadow:0 0 0 1px #770000,0 0 0 3px yellow}
-body.bevel .marker.british_fort.selected{box-shadow:0 0 0 1px #770000,0 0 0 3px crimson}
 body.flat .marker.british_fort{border-color:#770000}
 .marker.british_fort_uc{background-color:#f15a4f}
 body.bevel .marker.british_fort_uc{border-color:#ff796e #d1392e #d1392e #ff796e;box-shadow:0 0 0 1px #710000}
-body.bevel .marker.british_fort_uc.highlight{box-shadow:0 0 0 1px #710000,0 0 0 3px yellow}
-body.bevel .marker.british_fort_uc.selected{box-shadow:0 0 0 1px #710000,0 0 0 3px crimson}
 body.flat .marker.british_fort_uc{border-color:#710000}
 .unit.french{background-color:#aae0fa}
 body.bevel .unit.french{border-color:#c9ffff #89c0da #89c0da #c9ffff;box-shadow:0 0 0 1px #29607a}
-body.bevel .unit.french.highlight{box-shadow:0 0 0 1px #29607a,0 0 0 3px yellow}
-body.bevel .unit.french.selected{box-shadow:0 0 0 1px #29607a,0 0 0 3px crimson}
 body.flat .unit.french{border-color:#29607a}
 .marker.french_fort{background-color:#007ec5}
 body.bevel .marker.french_fort{border-color:#1f9ee5 #005ea5 #005ea5 #1f9ee5;box-shadow:0 0 0 1px #001d64}
-body.bevel .marker.french_fort.highlight{box-shadow:0 0 0 1px #001d64,0 0 0 3px yellow}
-body.bevel .marker.french_fort.selected{box-shadow:0 0 0 1px #001d64,0 0 0 3px crimson}
 body.flat .marker.french_fort{border-color:#001d64}
 .marker.french_fort_uc{background-color:#0093d6}
 body.bevel .marker.french_fort_uc{border-color:#1fb3f6 #0073b6 #0073b6 #1fb3f6;box-shadow:0 0 0 1px #002467}
-body.bevel .marker.french_fort_uc.highlight{box-shadow:0 0 0 1px #002467,0 0 0 3px yellow}
-body.bevel .marker.french_fort_uc.selected{box-shadow:0 0 0 1px #002467,0 0 0 3px crimson}
 body.flat .marker.french_fort_uc{border-color:#002467}
 .marker.season_french_first{background-color:#0072bb}
 body.bevel .marker.season_french_first{border-color:#1f92db #00529b #00529b #1f92db;box-shadow:0 0 0 1px #001963}
-body.bevel .marker.season_french_first.highlight{box-shadow:0 0 0 1px #001963,0 0 0 3px yellow}
-body.bevel .marker.season_french_first.selected{box-shadow:0 0 0 1px #001963,0 0 0 3px crimson}
 body.flat .marker.season_french_first{border-color:#001963}
 .marker.season_british_first{background-color:#da2127}
 body.bevel .marker.season_british_first{border-color:#fa4046 #ba0006 #ba0006 #fa4046;box-shadow:0 0 0 1px #810000}
-body.bevel .marker.season_british_first.highlight{box-shadow:0 0 0 1px #810000,0 0 0 3px yellow}
-body.bevel .marker.season_british_first.selected{box-shadow:0 0 0 1px #810000,0 0 0 3px crimson}
 body.flat .marker.season_british_first{border-color:#810000}
 .marker.provincial_assemblies{background-color:#004892}
 body.bevel .marker.provincial_assemblies{border-color:#1f68b2 #002872 #002872 #1f68b2;box-shadow:0 0 0 1px #000d57}
-body.bevel .marker.provincial_assemblies.highlight{box-shadow:0 0 0 1px #000d57,0 0 0 3px yellow}
-body.bevel .marker.provincial_assemblies.selected{box-shadow:0 0 0 1px #000d57,0 0 0 3px crimson}
 body.flat .marker.provincial_assemblies{border-color:#000d57}
 .marker.vps{background-color:#b4883d}
 body.bevel .marker.vps{border-color:#d4a75c #94671c #94671c #d4a75c;box-shadow:0 0 0 1px #340700}
-body.bevel .marker.vps.highlight{box-shadow:0 0 0 1px #340700,0 0 0 3px yellow}
-body.bevel .marker.vps.selected{box-shadow:0 0 0 1px #340700,0 0 0 3px crimson}
 body.flat .marker.vps{border-color:#340700}
 
+/* action highlight */
+body.bevel .leader.highlight{box-shadow:0 0 0 1px #707070,0 0 0 4px var(--highlight-color)}
+body.bevel .unit.british.highlight{box-shadow:0 0 0 1px #6a481d,0 0 0 4px var(--highlight-color)}
+body.bevel .unit.french.highlight{box-shadow:0 0 0 1px #29607a,0 0 0 4px var(--highlight-color)}
+
+/* selected */
+body.bevel .leader.selected{box-shadow:0 0 0 3px var(--selected-color)}
+body.bevel .unit.british.selected{box-shadow:0 0 0 3px var(--selected-color)}
+body.bevel .unit.french.selected{box-shadow:0 0 0 3px var(--selected-color)}
+
 /* MOBILE PHONE LAYOUT */
 
 @media (max-width: 640px) {