/* ---------- Card back (shared by decks, cards and boxes) ---------- */
.card-back {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--a, #333);
}
.card-back__art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ---------- Playable card ---------- */
.card {
  position: absolute; inset: 0;
  perspective: 1400px;
  container-type: inline-size;
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 30%;
}
.card.is-flying { z-index: 50; }

.card__shadow {
  position: absolute; inset: 2% 3%;
  border-radius: var(--radius-card);
  background: rgba(40,30,20,.28);
  filter: blur(10px);
  transform: translate(0, 8px);
}

.card__tilt {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .25s var(--ease-out);
}

.card__inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}
.card.is-revealed .card__inner { transform: rotateY(-180deg); }

.card__face {
  position: absolute; inset: 0;
  border-radius: var(--radius-card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.card__front {
  transform: rotateY(180deg);
  color: var(--ink);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex; flex-direction: column;
  padding: 8cqi 9cqi 7cqi;
}

.card__head {
  display: flex; align-items: center; justify-content: space-between;
}
.card__pill {
  display: inline-flex; align-items: center; gap: 2cqi;
  padding: 1.6cqi 4cqi 1.6cqi 1.6cqi;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.4cqi;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--a);
}
.card__pill-symbol {
  width: 6.4cqi; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  font-size: 4.2cqi;
}
.card__number {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 4cqi;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.card__text {
  flex: 1;
  display: flex; align-items: center;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 8.4cqi;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}

/* Two-option cards (Would You Rather): option, "or" rule, option */
.card__duel {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 4cqi;
}
.card__option {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 7.4cqi;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.card__option::first-letter { text-transform: uppercase; }
.card__or {
  display: flex; align-items: center; gap: 3cqi;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4cqi;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--deck-ink);
}
.card__or::before, .card__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .35;
}

.card__foot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 3.4cqi;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.card__foot-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 9cqi;
  line-height: 1;
  color: var(--deck-ink);
}

/* subtle light reflection that follows the finger or pointer */
.card__glare {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.5), transparent 50%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 2;
}
.card.is-tilting .card__glare { opacity: 1; }
.card.is-tilting .card__tilt { transition-duration: .08s; }