:root {
  /* From the client mock-up, lifted a touch: the shading darkens them again. */
  --board-single-dark: #0a0b1d;
  --board-single-light: #6c6982;
  --board-ring-red: #8c1a3c;
  --board-ring-green: #2a6b68;
  --board-bull-outer: #2a6b68;
  --board-bull-inner: #7a1230;
  --board-wire: #6b7188;
  --board-surround: #0b0c18;
  --board-rim: #20317a;
  --board-number: #9ea3ba;
  --board-logo-opacity: 0.3; /* the mock-up's logos sit back in the ring */
  /* The section due next, in neon blue; its rings a touch brighter. */
  --board-target: #1a7dff;
  --board-target-ring: #3de6ff;
  --board-mark: #ffffff;
  --board-pulse: #b8f2ff;
  --board-pulse-peak: 0.45; /* opacity at the brightest point of the pulse */
  --board-pulse-ms: 1.4s; /* one full breath in and out */
  --board-hit: #ff3b30;
  /* Sections already hit, as in the mock-up's 1: deep red singles, orange rings. */
  --board-done: #5a1210;
  --board-done-ring: #ff5a3a;
  --board-miss: #ffffff; /* a wrong hit's flash */
  --board-miss-fade: 0.9s; /* a wrong hit's red fading out; see MISS_FADE_MS */
}

#board .surround { fill: var(--board-surround); }

/* Navy band round the edge, with a tab reaching in behind each number. */
#board .rim { fill: var(--board-rim); }

#board .rim circle {
  fill: none;
  stroke: var(--board-rim);
  stroke-width: 5;
}

/* The board can take taps as darts (board-svg.js, onTap) once they're
   turned on (app.js, onBoardTap). */
#board {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.taps-on #board {
  cursor: pointer;
}

#board .bed { transition: fill 0.4s ease; }

/* As on a real board: red doubles and trebles on the dark singles (20, 18, …),
   green on the light ones. */
#board .parity-a .single { fill: var(--board-single-dark); }
#board .parity-b .single { fill: var(--board-single-light); }

#board .parity-a .treble,
#board .parity-a .double { fill: var(--board-ring-red); }
#board .parity-b .treble,
#board .parity-b .double { fill: var(--board-ring-green); }

#board .bull-outer { fill: var(--board-bull-outer); }
#board .bull-inner { fill: var(--board-bull-inner); }

#board .labels {
  fill: var(--board-number);
  font-family: "Univers Next Pro", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  text-anchor: middle;
  dominant-baseline: alphabetic; /* centred with dy, see DIGIT_MIDDLE_EM */
  pointer-events: none;
}

#board .logos {
  opacity: var(--board-logo-opacity);
  pointer-events: none;
}

/* Lighting and grain layers over the beds (see boardMarkup). */
#board .shade { pointer-events: none; }
#board .grain { mix-blend-mode: overlay; }

#board .wires {
  fill: none;
  stroke: var(--board-wire);
  stroke-width: 1.2;
  pointer-events: none;
}

/* The game's 1–5 marks sit back until their section is due. */
#board .target-marks {
  fill: var(--board-mark);
  font-family: "Archetype Display", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 34px;
  text-anchor: middle;
  dominant-baseline: alphabetic; /* centred with dx/dy, see MARK_MIDDLE_EM */
  pointer-events: none;
}

#board .target-marks text {
  opacity: 0.35;
  transition: opacity 0.4s ease;
}

#board .target-marks text.is-target { opacity: 1; }

/* Same weight as the hit marks below, so a dart's flash still shows on it. */
#board .is-target .single { fill: var(--board-target); }

#board .is-target .treble,
#board .is-target .double { fill: var(--board-target-ring); }

#board .bed.is-done {
  fill: var(--board-done);
  stroke: var(--board-done-ring);
  stroke-width: 1.5;
  stroke-opacity: 0.6;
}

#board .treble.is-done,
#board .double.is-done { fill: var(--board-done-ring); }

#board .bed.is-fading { transition: fill var(--board-miss-fade) ease-out; }

#board .bed.is-hit {
  fill: var(--board-hit);
  transition: none;
}

#board .bed.is-hit.is-fading { fill: var(--board-miss); }

/* The due section's glow, breathing in and out over the board. Only the
   layer's opacity moves, so this runs on the compositor. It waits for the
   board's fade-in to finish. */
.board-pulse {
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  animation: board-pulse var(--board-pulse-ms) ease-in-out 1.35s infinite alternate;
}

.board-pulse path { fill: var(--board-pulse); }

@keyframes board-pulse {
  from { opacity: 0; }
  to { opacity: var(--board-pulse-peak); }
}

@media (prefers-reduced-motion: reduce) {
  .board-pulse { animation: none; }
  #board .bed,
  #board .bed.is-fading,
  #board .target-marks text { transition: none; }
}