/* Expanded Boccia diagrams. All selectors stay inside the encyclopedia/editor. */
#mre-main .step-diagram.mre-boccia-diagram,
.mre-admin .step-diagram.mre-boccia-diagram {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}
#mre-main .mre-boccia-diagram svg,
.mre-admin .mre-boccia-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
}
#mre-main .mre-boccia-diagram svg text,
.mre-admin .mre-boccia-diagram svg text {
  font-family: var(--body-font, "Noto Sans JP", "Yu Gothic", sans-serif);
  font-size: 22px;
  font-weight: 700;
  fill: #354b2d;
}
#mre-main .mre-boccia-diagram .mre-diagram-title,
.mre-admin .mre-boccia-diagram .mre-diagram-title { font-size: 24px; }
#mre-main .mre-boccia-diagram .mre-diagram-small,
.mre-admin .mre-boccia-diagram .mre-diagram-small { font-size: 20px; }
#mre-main .mre-boccia-diagram .mre-diagram-score,
.mre-admin .mre-boccia-diagram .mre-diagram-score { font-size: 30px; }
#mre-main .mre-boccia-diagram .mre-diagram-red,
.mre-admin .mre-boccia-diagram .mre-diagram-red { fill: #a6372e; }
#mre-main .mre-boccia-diagram .mre-diagram-blue,
.mre-admin .mre-boccia-diagram .mre-diagram-blue { fill: #245c80; }
#mre-main .mre-boccia-diagram .mre-ball-initial,
.mre-admin .mre-boccia-diagram .mre-ball-initial {
  font-size: 20px;
  fill: #fffef5;
}
#mre-main .mre-boccia-diagram .mre-ball-white .mre-ball-initial,
.mre-admin .mre-boccia-diagram .mre-ball-white .mre-ball-initial { fill: #394734; }
#mre-main .mre-boccia-diagram .mre-diagram-step-number,
.mre-admin .mre-boccia-diagram .mre-diagram-step-number { fill: #fffef5; }
#mre-main .mre-boccia-diagram .mre-diagram-rule,
.mre-admin .mre-boccia-diagram .mre-diagram-rule {
  fill: none;
  stroke: #97a085;
  stroke-width: 1.5;
}
#mre-main .mre-boccia-diagram .mre-diagram-measure,
.mre-admin .mre-boccia-diagram .mre-diagram-measure {
  fill: none;
  stroke: #526446;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#mre-main .mre-boccia-diagram .mre-diagram-distance,
.mre-admin .mre-boccia-diagram .mre-diagram-distance {
  fill: none;
  stroke: #72845d;
  stroke-width: 2;
  stroke-dasharray: 5 5;
}
#mre-main .mre-boccia-diagram figcaption,
.mre-admin .mre-boccia-diagram figcaption {
  margin-top: 14px;
  font-family: var(--body-font, "Noto Sans JP", "Yu Gothic", sans-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.8;
  color: #43533b;
  overflow-wrap: anywhere;
  text-align: left;
}
/* Mancala boards: stone counts inside the pockets, small position numbers outside. */
#mre-main .mre-boccia-diagram .mre-mancala-count,
.mre-admin .mre-boccia-diagram .mre-mancala-count { font-size: 21px; fill: #2c3a27; }
#mre-main .mre-boccia-diagram .mre-diagram-tiny,
.mre-admin .mre-boccia-diagram .mre-diagram-tiny { font-size: 15px; fill: #5b6a50; }
/* Mölkky skittles: the number printed on top of each pin. */
#mre-main .mre-boccia-diagram .mre-molkky-number,
.mre-admin .mre-boccia-diagram .mre-molkky-number { font-size: 15px; fill: #2c3a27; }
@media (forced-colors: active) {
  #mre-main .mre-boccia-diagram svg,
  .mre-admin .mre-boccia-diagram svg { forced-color-adjust: none; }
  #mre-main .mre-boccia-diagram figcaption,
  .mre-admin .mre-boccia-diagram figcaption { color: CanvasText; }
}
/* Gateball: the number on a red ball. */
#mre-main .mre-boccia-diagram .mre-gateball-red,
.mre-admin .mre-boccia-diagram .mre-gateball-red { fill: #fffef5; }