@layer components {
  /* Card images sit on a dark surface in both themes — old white-bordered
     frames disappear against a light page. */
  .card-well {
    background: var(--color-well);
    color: var(--color-well-ink);
    padding: var(--space-5);
    border-radius: var(--radius);
  }

  .card-well img {
    margin-inline: auto;
    border-radius: var(--card-corner-radius);
  }

  .card-well__caption {
    margin-top: var(--space-3);
    color: var(--color-well-ink-muted);
    font-size: var(--text-sm);
    text-align: center;
  }

  /* Neither the back face nor the button exists for a reader without JS, which
     is what `--flippable` marks: the card-flip controller adds it on connect. */
  .card-well__face--back,
  .card-well__flip {
    display: none;
  }

  .card-well--flippable .card-well__faces {
    position: relative;
    transform: perspective(60rem) rotateY(0deg);
    transform-style: preserve-3d;
    transition: transform 400ms ease;
  }

  .card-well--flipped .card-well__faces {
    transform: perspective(60rem) rotateY(180deg);
  }

  .card-well--flippable .card-well__face {
    backface-visibility: hidden;
  }

  /* The back lies over the front rather than beside it, so the well's height
     still comes from one image in ordinary flow. Scryfall serves both faces at
     the same size, so the two line up exactly. */
  .card-well--flippable .card-well__face--back {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: rotateY(180deg);
  }

  /* Outlined rather than filled: the page's brass button is its primary action,
     and turning a card over is not that. It draws in well ink because brass
     reads at 3:1 against this dark ground in light mode. */
  .card-well--flippable .card-well__flip {
    display: block;
    margin: var(--space-3) auto 0;
    padding: var(--space-1) var(--space-3);
    font: inherit;
    font-size: var(--text-sm);
    color: var(--color-well-ink);
    background: none;
    border: 1px solid var(--color-well-ink-muted);
    border-radius: var(--radius);
    cursor: pointer;
  }

  .card-well--flippable .card-well__flip:hover {
    border-color: var(--color-well-ink);
  }

  @media (prefers-reduced-motion: reduce) {
    .card-well--flippable .card-well__faces {
      transition: none;
    }
  }
}