.behind {
  background-color: var(--faded-link-color);
  border-end-start-radius: var(--xsmall-border-radius);
  border-end-end-radius: var(--xsmall-border-radius);
  padding-bottom: var(--xxxsmall-padding);
  margin-top: var(--xsmall-margin);
}

.card {
  display: inline-block;
  max-width: 7.2rem;
  min-width: 7.2rem;
}

.card img {
  border-radius: var(--small-border-radius);
}

.center {
  display: flex;
  justify-content: center;
}

.commander-card {
  color: var(--match-color);
  background-color: var(--info-color);
  border: var(--faded-info-border);
  border-radius: var(--small-border-radius);
}

.details-header {
  padding-inline: var(--xxsmall-padding);
  display: flex;
  justify-content: space-between;
}

.detail-line {
  padding-inline: var(--xxsmall-padding);
}

.details {
  font-size: var(--xxxsmall-font-size);
}

.draw-card {
  padding: var(--xxxsmall-padding);
  border: 2px solid var(--faded-reverse-color);
  border-radius: var(--small-border-radius);
}

.draw-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.hand-card {
  border: 1px solid var(--faded-reverse-color);
  border-radius: var(--small-border-radius);
}

.hand-card-details {
  border-end-start-radius: var(--xsmall-border-radius);
  border-end-end-radius: var(--xsmall-border-radius);
  color: var(--match-color);
}

.opening-hand-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.hand-kind-land {
  color: var(--match-color);
  background-color: var(--heading-color);
}

.hand-kind-non-land {
  color: var(--match-color);
  background-color: var(--reverse-color);
}

.land-played-draw {
  color: var(--match-color);
  background-color: var(--heading-color);
}

.land-played-none {
  color: var(--match-color);
  background-color: var(--reverse-color);
}

.land-played-reserve {
  color: var(--match-color);
  background-color: var(--accent-color);
}


.opening {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
}

.opening-stats {
  min-width: 12rem;
  font-size: var(--small-font-size);
}

.progress-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-bottom: var(--large-padding);
}

.reserves {
  border-top: var(--faded-match-border);
  /*
  background-color: var(--faded-link-color);
  border-end-start-radius: var(--xsmall-border-radius);
  border-end-end-radius: var(--xsmall-border-radius);
*/
  padding-bottom: var(--xxxsmall-padding);
  margin-top: var(--xsmall-margin);
}

textarea {
  display: block;
  font-size: var(--xsmall-font-size);
  width: 80%;
  height: 14rem;
}

.two-columns {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}