/*
 * deck, "secret": the cover of the card that lies face down until one player turns it. render.mjs links this
 * sheet on a secret page, and on no other (the page's CSS budget, SPEC section 11). style.css hides the word
 * under the cover, so the word is never seen before this sheet is here.
 */

.deck__cover {
  position: absolute;
  inset: var(--space-5) var(--space-3) var(--space-3);
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  max-width: none;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, transparent 0 0.5rem, color-mix(in srgb, var(--brand-ink) 12%, transparent) 0 1rem) var(--brand);
  box-shadow: inset 0 0 0 0.3rem var(--brand), inset 0 0 0 0.4rem var(--brand-ink);
  color: var(--brand-ink);
  font: inherit;
  cursor: pointer;
}

.deck__cover-line {
  font: var(--display-weight) var(--step-2) / 1.15 var(--font-display);
  text-wrap: balance;
}

.deck__cover-act {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--brand-ink);
  color: var(--brand);
  font-weight: 750;
}

/* Which card of this visit lies here ("Card 2, face down": cover.js, rule 8). It comes after the words to press, so
   on a phone those stay where they were. It blinks once when a new card comes (style.css, .is-again). */
.deck__cover-count {
  font-size: var(--step--1);
  font-weight: 750;
}

/* Face up, the cover is out of the way and the card carries "Hide the word" at its foot (cover.js). The button is
   in the card from the start: style.css hides all but the cover of a face-down card, and the room stays. */
.deck__card:not([data-covered]) > .deck__cover {
  display: none;
}

.deck__hide {
  margin-top: var(--space-2);
}

/* The card is taller by the button, so a word of two lines still leaves everything under the card where it was.
   On a phone a brand sets the height of a deck card with three classes (brand.css is loaded before this sheet), so
   the rule there is as strong. The back of the card is set from the top on a phone: "Turn the card" stays on the
   first screen of a small phone, in the place where "Hide the word" comes. Paper keeps the height style.css gives. */
@media screen {
  .deck__card:has(> .deck__hide) {
    min-height: 15.5rem;
  }

  .deck[data-type="question"] .deck__card:has(> .deck__hide) {
    min-height: 20.5rem;
  }

  @container (max-width: 34rem) {
    .deck .deck__card:has(> .deck__hide) {
      min-height: 12.6rem;
    }

    .deck[data-type="question"] .deck__card:has(> .deck__hide) {
      min-height: 24.5rem;
    }

    .deck__cover {
      align-content: start;
    }
  }
}

/* Without script nothing can turn the card, so it is shown face up, and nothing can hide it again. The selector is
   as strong as the one in style.css that hides the word, and comes after it. */
@media (scripting: none) {
  .deck__cover,
  .deck__hide {
    display: none;
  }

  .deck__card[data-covered] > :not(.deck__cover) {
    visibility: visible;
  }
}

/* The words to press lift now and then (the keyframes are in style.css), not for a visitor who asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .deck__cover-act {
    animation: deck-nudge 2.4s var(--ease) infinite;
  }
}