/* The board itself. Carried over from harness/webui.html, with the cell
   colours unchanged: they were chosen so that light and dark cells stay
   distinguishable — a Sister is bound to dark cells and a player has to be able
   to see which ones those are — while being gentler to look at for a whole game
   than the near-black against near-white they started as.

   They sit on the shade ground now rather than on paper, which is why the
   board no longer needs a border to hold it together. */

:root {
  --light:  #DAD4C6;
  --dark:   #ABA391;
  --edge:   #8F8878;

  /* The houses are defined in site.css, which every page loads. */

  /* The glyph cut out of a piece. The house colours are saturated and mid-dark,
     so the mark has to be darker than both to read on either. */
  --glyph:  #17191C;

  /* Interaction. Blue for what you have picked up, because neither house owns
     it; the two houses own green and orange everywhere on this board. */
  --pick:   #4E9BCB;
  --dest:   #1D9E75;
  --last:   #D8A030;
  --threat: #D0483A;
  --defend: #1D9E75;
}

/* Colour is the only thing carrying which side a piece belongs to -- kind is
   carried by the glyph and is already safe -- so the sides need a pair that
   survives dichromacy. Blue against the same rust scores dE 43.3 at worst
   across protanopia, deuteranopia and tritanopia, against 10.1 for the houses,
   with both sides at an identical 6.3:1 behind the glyph. The green does not
   come back in this mode; a green that a protanope can tell from that orange
   is not a green. */
[data-cvd] {
  --atreides:  #2C6491;
  --harkonnen: #AA3A18;
  --atreides-key:  #5E93C0;
  --harkonnen-key: #D2653A;
}

#board svg { touch-action: manipulation; }

/* The glyph sits on top of the piece and used to swallow the click, so a piece
   could only be picked up by its coloured margin -- which reads as the board
   ignoring you. It is decoration over a target and should never take a hit. */
/* Everything drawn ON a cell is decoration over a target: the piece's rim and
   field, its glyph, and the ring round a loose piece. None of them takes a hit,
   so the pointer, the hover outline and the click all land on the cell polygon
   underneath and behave identically whether you aim at the piece or at the bare
   part of its cell.
 
   Giving the piece its own cursor was not enough. It fixed the pointer and left
   the hover outline behind, because that outline belongs to the cell and the
   cell was no longer being hovered. */
#board g,
#board polygon.pc,
#board polygon.hang { pointer-events: none; }

polygon.cell { stroke: var(--edge); stroke-width: 1; }
polygon.cell.pickable { cursor: pointer; }
polygon.cell.pickable:hover { stroke: var(--pick); stroke-width: 2.5; }
polygon.sel { stroke: var(--pick); stroke-width: 3; }
polygon.lastmv { stroke: var(--last); stroke-width: 2.5; }

circle.dest { fill: var(--dest); opacity: .85; cursor: pointer; }
circle.destcap { fill: none; stroke: var(--dest); stroke-width: 3.5; cursor: pointer; }

line.att { stroke: var(--threat); stroke-width: 2.5; opacity: .8; }
line.def { stroke: var(--defend); stroke-width: 2.5; opacity: .8; stroke-dasharray: 5 4; }
line.inc { stroke: var(--threat); stroke-width: 2.5; opacity: .55; stroke-dasharray: 2 5; }

polygon.hang { fill: none; stroke: var(--threat); stroke-width: 3; opacity: .9;
               stroke-linejoin: round; }

text { pointer-events: none; user-select: none; }

.legend b { color: var(--atreides-key); font-weight: 400; }
.legend i { color: var(--harkonnen-key); font-style: normal; }

/* The marks in the key are the same SVG paths the board draws inside a piece,
   where they are cut out of a saturated house colour and so are painted in the
   board's dark. In the key there is no piece under them and the ground is the
   shade itself, so they were being drawn in near-black on near-black. CSS beats
   the fill attribute, which is what makes one set of paths serve both. */
#key path { fill: var(--chalk-mute); }

/* The board's own edge labels. Quiet enough to ignore while playing and there
   when you want to find the move you just read in the list. */
#board .edge {
  fill: #6E736D;
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
}