/* Prose styling for the how-to-play page, on top of styles.css. */

body.rules {
  align-items: center;
}

body.rules main {
  max-width: 660px;
  align-items: stretch;
}

article {
  font-size: 1.0625rem;
}

article h2 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 600;
}

article h2:first-child {
  margin-top: 0;
}

article p {
  margin: 0 0 0.85rem;
}

article ul {
  margin: 0 0 0.85rem;
  padding-left: 1.25rem;
}

article li {
  margin-bottom: 0.5rem;
}

article a {
  color: var(--accent);
}

figure {
  margin: 1rem 0 1.25rem;
}

figure svg {
  width: 100%;
  max-width: 420px;
  height: auto;
}

figcaption {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* The diagram uses the same colours as the board itself. */
.diagram rect {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

.diagram .peg {
  fill: #7ccf7c;
}

.diagram .between {
  fill: var(--muted);
  font-size: 34px;
  text-anchor: middle;
}