/* zahlenbild: rules used only by the zahlenbild pages (loaded after base.css). */
/* ---- Dot Picture ----
   One square board (an svg) as wide as the card allows, at most 640 px:
   white dots with their numbers, joined dots black, the line between them.
   The finished picture shows its name underneath in big letters. Nothing
   animated. */
.zb-board {
  direction: ltr;
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border: 2px solid #141413;
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  touch-action: manipulation;
  cursor: pointer;
  /* Task 169: no grey tap flash over the board (flicker on e-ink). */
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* Drawing a line: the finger draws, the page does not scroll. */
.zb-board.zb-drag-mode {
  touch-action: none;
}

/* No focus ring after a tap; the keyboard still shows one. */
.zb-board [tabindex]:focus {
  outline: none;
}

.zb-board [tabindex]:focus-visible circle {
  stroke-width: 4;
}

.zb-board svg {
  display: block;
  width: 100%;
  height: 100%;
}

.zb-num {
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 0.25em;
  stroke-linejoin: round;
}

.zb-name {
  margin: 10px 0 0;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
}