/* The deck: Delft-tile card back, the front card, the answer band. */
.deck {
  position: relative;
  width: min(480px, 100cqw, 100cqh);
  aspect-ratio: 1;
  flex: none;
  perspective: 1400px;
}

.card-back, .card {
  position: absolute; inset: 0;
  border-radius: 16px;
}

/* Delft tile: blue on tin-glaze white, corner ornaments and a windmill */
.card-back {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%232b4c8c'%3E%3Cpath d='M0 0h14q-2 6-8 8t-6 6zM100 0H86q2 6 8 8t6 6zM0 100h14q-2-6-8-8t-6-6zM100 100H86q2-6 8-8t6-6z'/%3E%3Cpath d='M44 72l3-26h6l3 26z'/%3E%3Cpath d='M46 46l4-5 4 5z'/%3E%3Cg transform='rotate(24 50 42)'%3E%3Crect x='49' y='22' width='2' height='40'/%3E%3Crect x='30' y='41' width='40' height='2'/%3E%3Crect x='51' y='24' width='4' height='15' opacity='.6'/%3E%3Crect x='45' y='45' width='4' height='15' opacity='.6'/%3E%3Crect x='32' y='37' width='15' height='4' opacity='.6'/%3E%3Crect x='53' y='43' width='15' height='4' opacity='.6'/%3E%3C/g%3E%3Cpath d='M26 74q24-6 48 0v2q-24-5-48 0z' opacity='.7'/%3E%3Cpath d='M32 80q8-3 14 0t14 0 14 0' fill='none' stroke='%232b4c8c' stroke-width='1.2' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 45%, #fbf8ef, #e8e1cf);
  box-shadow: inset 0 0 0 10px #f3eee0, inset 0 0 0 12px #2b4c8c, 0 10px 24px rgb(40 30 10 / .3);
}

.card {
  z-index: 1;
  overflow: hidden;
  background: #222;
  box-shadow: 0 14px 34px rgb(30 20 5 / .45), 0 0 0 1px rgb(0 0 0 / .25);
  transform-origin: 50% 150%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  outline: none;
  &.dragging { cursor: grabbing; }
  &.animating { transition: transform .32s cubic-bezier(.25, .9, .3, 1.15); }
  &.flying { transition: transform .3s cubic-bezier(.5, 0, .9, .6); pointer-events: none; }
  &.entering { animation: flip-in .42s cubic-bezier(.2, .8, .3, 1) both; }
  &:focus-visible { box-shadow: 0 0 0 4px var(--parchment), 0 0 0 8px #1f3f86, 0 14px 34px rgb(30 20 5 / .45); }
}
@keyframes flip-in {
  from { transform: rotateY(-90deg); filter: brightness(.6); }
}

.card-art {
  position: absolute; inset: 0;
  svg { width: 100%; height: 100%; display: block; }
}

/* the answer the card leans toward, written on a dark band at its top edge */
.answer {
  position: absolute;
  inset: 0 0 auto;
  padding: 18px 24px 46px;
  background: linear-gradient(rgb(8 10 24 / .88) 45%, transparent);
  color: #fbf3dc;
  font-size: clamp(1.25rem, 3vh, 1.9rem);
  line-height: 1.2;
  opacity: var(--reveal, 0);
  pointer-events: none;
}
.card[data-lean="right"] .answer { text-align: left; }
.card[data-lean="left"] .answer { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .card.animating, .card.flying { transition: none; }
}