/* zoowurf: rules used only by the zoowurf pages (loaded after base.css). */
/* ---- Zoo Toss (Zoowurf): dice game for children ----
   Two open cards to choose from, the card in play, the animal dice. Black
   on white only; a place on the card that is still open is the same
   drawing, white and dashed. Nothing animated; spacing from margins
   (Tolino). */
.zw-yard,
.zw-card-big {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  direction: ltr;
  max-width: 480px;
  margin: 0 auto;
}

.zw-open-card {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  width: calc(50% - 12px);
  min-width: 140px;
  min-height: 96px;
  margin: 6px;
  padding: 4px;
  border: 2px solid #141413;
  border-radius: var(--radius);
  background: #fff;
  color: #141413;
  line-height: 0;
}

.zw-open-card-active {
  border-width: 5px;
  padding: 1px;
}

.zw-card-big {
  box-sizing: border-box;
  padding: 6px;
  border: 4px solid #141413;
  border-radius: var(--radius);
  background: #fff;
  line-height: 0;
}

.zw-slot {
  display: block;
  box-sizing: border-box;
  margin: 3px;
  padding: 2px;
  border: 3px solid #141413;
  border-radius: var(--radius);
  background: #fff;
  line-height: 0;
}

.zw-open-card .zw-slot {
  margin: 2px;
  padding: 1px;
  border-width: 2px;
}

.zw-slot-open {
  border-style: dashed;
  border-width: 2px;
}

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

.zw-dice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  direction: ltr;
}

.zw-dice .zw-die {
  margin: 4px;
}

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

.zw-log-dice {
  display: inline-block;
  direction: ltr;
  line-height: 0;
  vertical-align: middle;
  margin: 0 6px;
}

.zw-log-dice .zw-die {
  margin: 1px;
}

/* a free place the player can tap to put the paw there (at least 48 px) */
button.zw-slot-tap {
  min-width: 52px;
  min-height: 52px;
  margin: 4px;
  padding: 2px;
  border: 4px dashed #141413;
  border-radius: var(--radius);
  background: #fff;
  color: #141413;
  cursor: pointer;
}

/* the turn a computer has just played */
.zw-review {
  box-sizing: border-box;
  max-width: 480px;
  margin: 0 auto var(--space-2);
  padding: 6px;
  border: 3px solid #141413;
  border-radius: var(--radius);
  background: #fff;
}

.zw-review-turn + .zw-review-turn {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 2px solid #141413;
}

.zw-review-title {
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
}

.zw-card-small {
  border-width: 3px;
  padding: 3px;
}

.zw-card-small .zw-slot {
  margin: 2px;
  padding: 1px;
  border-width: 2px;
}

.zw-review-roll {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 4px 0;
}

.zw-review-label {
  margin: 0 6px;
}

.zw-review-paw {
  display: inline-flex;
  align-items: center;
  direction: ltr;
  margin: 0 6px;
  line-height: 0;
}

.zw-review-paw .zw-die {
  margin: 0 2px;
}

.zw-review-paw svg {
  margin: 0 2px;
}