/*
 * deck, the forbidden-word card: the word to guess on top, "Do not say" small, then the words. The describer
 * finds the word at a glance in the middle of a round. render.mjs links this sheet on a page whose cards
 * carry words not to say, and on no other (the page's CSS budget, SPEC section 11).
 */

.deck__ban-name {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  font: 700 var(--step--1) / 1.3 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.deck__ban-list {
  max-width: 24ch;
  font: 600 var(--step-1) / 1.35 var(--font-body);
  text-wrap: balance;
}

/* Each word stays whole: "ice cream" does not break over two lines. */
.deck__ban-list > span {
  white-space: nowrap;
}

@container (max-width: 34rem) {
  /* The card holds seven short lines: the word gives way, so the whole card fits a small phone. */
  .deck[data-ban] .deck__text {
    font-size: var(--step-3);
  }

  .deck[data-ban] .deck__ban-name {
    margin-top: 0;
  }

  .deck[data-ban] .deck__ban-list {
    font-size: var(--step-0);
  }

  /* The card is as tall as a card whose words take three lines, and no taller (a brand's taller card is for
     one big word). */
  .tool .deck[data-ban] > .deck__card {
    min-height: 10.5rem;
  }
}