/* #85 real cards. Both stack cards are ISO ID-1 cards (85.6 × 54 mm): rounded corners, a pressed edge, layered metal
   or card-stock faces with a faint brushed grain and guilloche, a chip or seal, embossed figures and the holder's name.
   No images beyond the existing cup; the light (.card-sheen) moves with --tilt-x/--tilt-y from bindTilt() using
   transform only. The stack geometry and switch motion in stack.css are unchanged. */
.card-stack { container-type: inline-size; --tilt-x: -0.35; --tilt-y: -0.6; }
.card-stack > .stack-card.real-card {
  aspect-ratio: 85.6 / 54;
  display: grid; grid-template-rows: auto 1fr auto; align-content: stretch;
  padding: 4.6cqw 5.4cqw 4.4cqw;
  border-radius: 4.2cqw;
  overflow: hidden;
  isolation: isolate;
}
.real-card > :not(.card-sheen, .stack-select) { position: relative; z-index: 1; min-width: 0; }

/* Middle row: chip (gold) or seal (loyalty), then the café's name like the issuing bank. */
.card-mid { display: flex; align-items: center; gap: 3.6cqw; align-self: center; }
.card-cafe {
  font: 400 clamp(13px, 4.6cqw, 20px)/1.1 var(--cc-font-display); letter-spacing: 0.4px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-chip {
  flex: none; width: 12.5cqw; aspect-ratio: 1.3; border-radius: 1.8cqw;
  background:
    linear-gradient(90deg, transparent 31%, rgba(92, 60, 18, 0.55) 31% 33%, transparent 33% 67%, rgba(92, 60, 18, 0.55) 67% 69%, transparent 69%),
    linear-gradient(0deg, transparent 32%, rgba(92, 60, 18, 0.5) 32% 35%, transparent 35% 65%, rgba(92, 60, 18, 0.5) 65% 68%, transparent 68%),
    linear-gradient(135deg, #f6e2a6 0%, #caa04f 45%, #f1d78f 70%, #b98a3a 100%);
  box-shadow: inset 0 0 0 1px rgba(92, 60, 18, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 1px rgba(60, 35, 10, 0.25);
}
.card-seal {
  flex: none; display: grid; place-items: center; width: 10.5cqw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6e4327, #3a2414 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(58, 36, 20, 0.35);
}
.card-seal img { width: 78%; height: 78%; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.25)); }

/* Bottom row: embossed figure and holder name, the cup as the card's brand mark. */
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; }
.card-figure { display: flex; align-items: baseline; gap: 2.4cqw; min-width: 0; }
.real-card .coffee-count { font: 400 clamp(36px, 13.5cqw, 58px)/0.9 var(--cc-font-display); letter-spacing: 0; }
.real-card .card-figure p { margin: 0; font: 600 clamp(12px, 3.7cqw, 15px)/1.25 var(--cc-font-body); max-width: 22ch; }
.card-end { display: grid; justify-items: end; gap: 1.2cqw; flex: none; }
.card-mark { width: 11cqw; height: 11cqw; }
.card-holder { font: 600 clamp(11px, 3.4cqw, 14px)/1.2 var(--cc-font-body); letter-spacing: 0.16em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48cqw; }
.card-brand { font: 600 clamp(11px, 3.3cqw, 13px)/1.2 var(--cc-font-body); letter-spacing: 0.04em; white-space: nowrap; }

/* The light. A soft highlight larger than the card, shifted by tilt; static where motion is reduced. */
.card-sheen {
  position: absolute; z-index: 0; left: -25%; top: -60%; width: 150%; height: 220%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12) 55%, transparent 75%);
  transform: translate(calc(var(--tilt-x) * 22%), calc(var(--tilt-y) * 14%));
  transition: transform 120ms linear;
  mix-blend-mode: soft-light;
}
.card-stack > .is-back .card-sheen { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .card-sheen { transition: none; transform: translate(-8%, -9%); } }

/* Gold: polished metal over brushed grain and a guilloche, dark-brown embossing, a pressed bevel. */
.card-stack > .gold-card.is-gold {
  --gold-metal: linear-gradient(118deg, #f8e8b4 0%, #dcb663 26%, #fbebbd 47%, #d6ac58 63%, #b9873a 82%, #e9cc85 100%);
  background:
    linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, 0.38) 27%, transparent 36%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 82% 46%, transparent 0 7px, rgba(90, 58, 18, 0.055) 7px 8px),
    var(--gold-metal);
  border: 1px solid #a77a2f;
  color: #3b260c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(90, 58, 18, 0.35), inset 0 0 0 2px rgba(255, 240, 200, 0.25),
    0 1px 2px rgba(60, 35, 10, 0.3), 0 14px 26px -14px rgba(90, 55, 15, 0.65);
}
.gold-card.is-gold .emboss {
  color: #5a3c12;
  text-shadow: 0 1px 0 rgba(255, 246, 214, 0.85), 0 -1px 0 rgba(70, 42, 10, 0.45);
}
.gold-card.is-gold .card-cafe { color: #3b260c; text-shadow: 0 1px 0 rgba(255, 246, 214, 0.6); }
.gold-card.is-gold .gold-badge { background: rgba(46, 30, 12, 0.86); }

/* Empty gold: the same card in unfilled champagne, still a real card, inviting a pack. */
.card-stack > .gold-card.is-empty {
  background:
    linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, 0.45) 27%, transparent 36%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 82% 46%, transparent 0 7px, rgba(120, 90, 40, 0.045) 7px 8px),
    linear-gradient(118deg, #fbf4df 0%, #efe0b8 40%, #f8eed2 60%, #e3cf9e 100%);
  border: 1px solid #cdb27a;
  color: #4a3414;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(120, 90, 40, 0.25), 0 1px 2px rgba(60, 35, 10, 0.2), 0 12px 22px -14px rgba(90, 60, 20, 0.45);
}
.gold-card.is-empty .card-chip { filter: saturate(0.45) brightness(1.06); }
.gold-card.is-empty .emboss { color: #8a6c3a; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(90, 60, 20, 0.3); }
.gold-card.is-empty .card-mark { opacity: 0.6; filter: grayscale(0.4); }
.gold-card.is-empty .card-figure p { font-weight: 500; font-size: clamp(11px, 3.3cqw, 13px); }

/* Loyalty: thick cream card stock with an espresso seal and stamps, like a café's own printed card. */
.card-stack > .loyalty-card.real-card {
  background:
    linear-gradient(118deg, transparent 20%, rgba(255, 255, 255, 0.35) 28%, transparent 37%),
    repeating-linear-gradient(90deg, rgba(107, 67, 37, 0.025) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 88% 30%, transparent 0 9px, rgba(107, 67, 37, 0.04) 9px 10px),
    linear-gradient(160deg, #fbf3e3 0%, #f2e2c4 55%, #e8d2aa 100%);
  border: 1px solid #c9ab7c;
  color: var(--cc-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(107, 67, 37, 0.2), 0 1px 2px rgba(58, 36, 20, 0.2), 0 14px 26px -14px rgba(58, 36, 20, 0.5);
}
.loyalty-card .emboss { color: #5b3a24; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(58, 36, 20, 0.25); }
.loyalty-card.real-card .stamps {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: auto;
  column-gap: 1.6cqw; row-gap: 0; margin: 0 0 3cqw; padding: 0;
}
.loyalty-card.real-card .stamp, .loyalty-card.real-card .stamp.filled { height: auto; aspect-ratio: 1; }

/* Wallet: the "add it again" escape under "Open in Google Wallet". */
.wallet-again { grid-column: 1 / -1; justify-self: center; min-height: 44px; font-size: 13px; }
.wallet-again[hidden] { display: none !important; }

/* The one-off gold cut-scene card wears the same metal as the stack card. */
.scene-gold {
  background:
    linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, 0.38) 27%, transparent 36%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 3px),
    linear-gradient(118deg, #f8e8b4 0%, #dcb663 26%, #fbebbd 47%, #d6ac58 63%, #b9873a 82%, #e9cc85 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(90, 58, 18, 0.35), 0 18px 40px -14px rgba(0, 0, 0, 0.6);
}