/* weidefreunde: rules used only by the weidefreunde pages (loaded after base.css). */
/* ---- Pasture Friends (Weidefreunde): card-and-dice game for children ----
   Yard of five cards, the animal die, one pasture row per player. Black on
   white only; a free place on a pasture is the same drawing, white and
   dashed. Nothing animated; spacing from margins (Tolino). */
.wf-die-svg {
  width: 96px;
  height: 96px;
}

.wf-yard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  direction: ltr;
  max-width: 480px;
  margin: 0 auto;
}

.wf-card {
  width: calc(20% - 8px);
  min-width: 56px;
  min-height: 72px;
  margin: 4px;
  padding: 2px;
  border: 2px solid #141413;
  border-radius: var(--radius);
  background: #fff;
  color: #141413;
  line-height: 0;
}

.wf-card svg {
  width: 100%;
  max-width: 56px;
  height: auto;
}

.wf-card-active {
  border-width: 5px;
  padding: 0;
}

.wf-pastures {
  margin: var(--space-2) auto;
  max-width: 480px;
}

.wf-pasture {
  display: flex;
  align-items: center;
  direction: ltr;
  margin: 0 0 var(--space-1);
  padding: 4px;
  border: 2px solid transparent;
  border-radius: var(--radius);
}

.wf-pasture-active {
  border: 4px solid #141413;
  padding: 2px;
}

.wf-pasture-marker {
  flex: 0 0 auto;
  margin-right: 4px;
}

.wf-slots {
  display: flex;
  flex: 1 1 auto;
  justify-content: space-between;
}

.wf-slot {
  display: block;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 19%;
  max-width: 52px;
  padding: 2px;
  border: 3px solid #141413;
  border-radius: var(--radius);
  background: #fff;
  line-height: 0;
}

.wf-slot svg {
  width: 100%;
  height: auto;
}

.wf-slot-free {
  border-style: dashed;
  border-width: 2px;
}

.wf-slot-free svg * {
  fill: #fff !important;
  stroke-dasharray: 3 3;
}

/* The picture explanation (before the first game) is the shared Howto
   panel (base.css); these are the pasture pictures inside it. The lines
   about the last turns, each with the die that was rolled, follow. */
.howto-pics .wf-howto-card,
.howto-pics .wf-howto-slot {
  margin: 1px;
  min-width: 0;
  min-height: 0;
  width: auto;
  flex: 0 0 auto;
}

.howto-pics .wf-howto-slot {
  width: auto;
  max-width: none;
}

.howto-pics .wf-slot svg,
.howto-pics .wf-card svg {
  width: auto;
  height: auto;
}

.wf-howto-arrow {
  flex: 0 0 auto;
  margin: 0 2px;
}

.wf-howto-back {
  line-height: 0;
  margin-left: 2px;
}

.wf-log-line {
  margin-bottom: 4px;
}

.wf-log-die {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  margin: 0 8px;
  direction: ltr;
}

.wf-log-die .wf-die-svg {
  width: 36px;
  height: 36px;
}

.howto-pics .wf-die-svg {
  width: 56px;
  height: 56px;
}