/* villains: rules used only by the villains pages (loaded after base.css). */
/* Fairy-Tale Villains (villains-app.js): plan card, the three places of the
   domain in a row, the market, action buttons, a box for choices, the hand
   as a row of cards, the other villains and the log. A place with a hero
   has a dashed frame. Margins instead of `gap`. */
.vl-goal {
  text-align: start;
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2);
}

.vl-goal-head {
  font-size: 1rem;
}

.vl-goal-text {
  margin: var(--space-1) 0;
  font-size: 0.9rem;
}

.vl-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.vl-steps li {
  margin: 0 0 0.1rem;
}

.vl-steps .vl-done,
.vl-place-step.vl-done {
  font-weight: 700;
}

.vl-heading {
  text-align: start;
  font-size: 1rem;
  margin: var(--space-3) 0 var(--space-1);
}

.vl-domain {
  display: flex;
}

.vl-place {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  margin: 0 0 var(--space-2);
  margin-inline-end: 2%;
  padding: var(--space-1);
  background: #fff;
  color: #141413;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  text-align: start;
  font-size: 0.78rem;
  line-height: 1.25;
}

.vl-place:last-child {
  margin-inline-end: 0;
}

.vl-place.vl-blocked {
  border-style: dashed;
}

.vl-place-name {
  font-weight: 700;
  font-size: 0.9rem;
  overflow-wrap: break-word;
}

.vl-place-sign,
.vl-place-step {
  margin: 0.1rem 0 0;
  overflow-wrap: break-word;
}

.vl-hero {
  font-weight: 700;
  border-top: 1px dashed var(--border);
  margin-top: 0.15rem;
  padding-top: 0.1rem;
  overflow-wrap: break-word;
}

.vl-market {
  text-align: start;
  font-size: 0.9rem;
}

.vl-market p {
  margin: 0 0 var(--space-1);
}

.vl-actions {
  margin: var(--space-2) 0;
  text-align: center;
}

.vl-actions button,
.vl-chooser button {
  min-height: 44px;
  margin: 0 var(--space-1) var(--space-1) 0;
}

.vl-chooser {
  margin: var(--space-2) 0;
  padding: var(--space-2);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  text-align: start;
}

.vl-hand,
.vl-others {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vl-hand {
  display: flex;
  flex-wrap: wrap;
}

.vl-hand li {
  margin: 0 var(--space-1) var(--space-1) 0;
}

.vl-others li {
  margin: 0 0 var(--space-2);
}

.vl-card {
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  background: #fff;
  color: #141413;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-weight: 700;
}

.vl-card.vl-unplayable {
  font-weight: 400;
}

.vl-other {
  display: block;
  width: 100%;
  min-height: 44px;
  text-align: start;
  padding: var(--space-2);
  background: #fff;
  color: #141413;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  line-height: 1.3;
}

.vl-other.vl-selected {
  background: #141413;
  color: #fff;
}

.vl-other-full {
  margin-top: var(--space-1);
}

.vl-domain-small .vl-place {
  font-size: 0.72rem;
}

.vl-log {
  text-align: start;
  margin: 0;
  padding-inline-start: 1.4rem;
  font-size: 0.85rem;
}