Territories, not circles

The board is regions again. Voronoi cells divide it with no gaps and no
overlaps and look like a board, which is what this was always supposed to be.

What they cannot do is reproduce every adjacency in the rules, because
provinces interleave -- the Adriatic borders Venice with Trieste between
their centres. The lesson I drew from that was to abandon regions and draw
the adjacency graph, which is unimpeachable and is not a map. It is circles
joined by lines.

The right answer is to stop asking the picture to carry the rules. Clicking a
province lights up exactly where its unit may legally go, taken from the
graph rather than from which shapes happen to share an edge. Vienna lights
Bohemia, Galicia, Budapest, Trieste and Tyrolia; a fleet on the north coast
of Spain does not light the Gulf of Lyon. The picture is a picture and the
rules answer for themselves when asked.

src/App.css

@@ -50,42 +50,42 @@ header p { margin: 2px 0 0; font-size: 0.9rem; }
   background: #6ea3c9;
 }
 
-.sea-bed { fill: #6ea3c9; }
+.ocean { fill: #4a7fa8; }
 
-.edges line {
+.region {
   stroke: #241a10;
-  stroke-width: 2;
-  opacity: 0.28;
-}
-
-.province rect,
-.province circle {
-  stroke: #241a10;
-  stroke-width: 3;
+  stroke-width: 2.5;
+  stroke-linejoin: round;
   cursor: pointer;
 }
 
-.province.sea circle { stroke-opacity: 0.55; }
+/* Open water gets a lighter line: a coastline is a border, the middle of the
+   Atlantic is a convention. */
+.region.sea { stroke-opacity: 0.3; stroke-width: 2; }
 
-.province .pip {
+.region.picked { stroke: #ffd479; stroke-width: 5; }
+
+/* Where the selected unit may actually go, taken from the rules rather than
+   from which shapes happen to touch. */
+.region.open { stroke: #fff6e0; stroke-width: 4; stroke-dasharray: 7 5; }
+
+.pip {
   fill: #fff6e0;
   stroke: #241a10;
-  stroke-width: 2;
+  stroke-width: 1.8;
+  pointer-events: none;
 }
 
-.province .label {
-  font-size: 12px;
+.label {
+  font-size: 11.5px;
   font-weight: 800;
   letter-spacing: 0.04em;
   text-anchor: middle;
   pointer-events: none;
+  fill: #241a10;
 }
 
-.province.picked rect,
-.province.picked circle {
-  stroke: #ffd479;
-  stroke-width: 5;
-}
+.label.wet { fill: #dceaf5; }
 
 .unit path {
   stroke: #241a10;