/* A store's loyalty card (loyalty-card.js, docs/loyalty-cards.md). Everything on it is sized in em, so the card
   is as large as the font-size of whatever holds it: a hand's width on a store's counter, a slot's in the
   wallet, the whole stage up close. Each store prints its own: `data-loyalty-store` dresses it. */
.loyalty-card {
    --loyalty-paper: #fbf7ec; --loyalty-ink: #25252d; --loyalty-accent: #25252d; --loyalty-stamp: #1b3fae;
    --loyalty-font: 'Sora', sans-serif;
    position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: .4em; box-sizing: border-box;
    width: 21em; aspect-ratio: 1.586; padding: .9em 1.2em .7em; overflow: hidden; isolation: isolate;
    border: .12em solid var(--loyalty-ink); border-radius: .9em; background: var(--loyalty-paper); color: var(--loyalty-ink);
    font-family: 'Sora', sans-serif; line-height: 1.1; text-align: left; box-shadow: 0 .25em .6em rgba(0, 0, 0, .22);
}
.loyalty-card-head { display: flex; flex-direction: column-reverse; gap: .25em; min-width: 0; }
.loyalty-card-head b { min-width: 0; overflow: hidden; font-family: var(--loyalty-font); font-size: 1.5em; font-weight: 900; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; color: var(--loyalty-accent); }
.loyalty-card-head em { flex: none; font-size: .62em; font-style: normal; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.loyalty-card-places { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em .9em; align-content: center; justify-items: center; }
.loyalty-place { position: relative; display: block; width: 3em; aspect-ratio: 1; border: .1em dashed color-mix(in srgb, var(--loyalty-ink) 38%, transparent); border-radius: 50%; }
.loyalty-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; min-width: 0; font-size: .68em; }
.loyalty-card-foot i { min-width: 0; padding-right: .2em; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; opacity: .7; }
/* What has been spent towards the next stamp. */
.loyalty-card-foot b { flex: none; font-size: 1.15em; font-style: normal; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .04em; opacity: .85; }

/* A stamp is ink pressed by hand: it sits askew, a little off its place, and takes more or less ink. */
.loyalty-stamp { position: absolute; inset: -6%; width: 112%; height: 112%; overflow: visible; fill: none; stroke: var(--loyalty-stamp); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: var(--ink, .85); transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--turn, 0deg)); mix-blend-mode: multiply; }
.loyalty-stamp-ring { stroke-width: .8; stroke-dasharray: 1.2 1.1; }
/* Mrs. Parsil's is her own, whatever the card: violet, from the pad she keeps by the board. */
.loyalty-stamp.is-guest { stroke: #8a2fa3; }
.loyalty-stamp.is-guest path { fill: color-mix(in srgb, #8a2fa3 28%, transparent); }
/* A stamp just given comes down on the card: held over it, pressed, lifted, each in its turn. */
.loyalty-stamp.is-fresh { animation: loyalty-stamp-press .55s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(.35s + var(--order, 0) * .28s); }
@keyframes loyalty-stamp-press {
    0% { opacity: 0; transform: translate(var(--dx, 0), calc(var(--dy, 0) - 1.6em)) rotate(calc(var(--turn, 0deg) - 14deg)) scale(2.3); }
    55% { opacity: 1; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--turn, 0deg)) scale(.86); }
    100% { opacity: var(--ink, .85); transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--turn, 0deg)) scale(1); }
}
.loyalty-card:has(.loyalty-stamp.is-fresh) { animation: loyalty-card-thud .3s ease-out both; animation-delay: .62s; }
@keyframes loyalty-card-thud { 0% { translate: 0 0; } 35% { translate: 0 .28em; } 100% { translate: 0 0; } }
.motion-reduced .loyalty-stamp.is-fresh, .motion-reduced .loyalty-card:has(.loyalty-stamp.is-fresh) { animation: none; }
.loyalty-card.is-full { box-shadow: 0 0 0 .18em #f2c55c, 0 .25em .9em rgba(242, 197, 92, .65); }

/* Bouzoppmania: head office's plastic, red band, yellow and blue. */
.loyalty-card[data-loyalty-store="general"] { --loyalty-paper: linear-gradient(#e11d2a 0 3.5em, #ffe600 3.5em 3.8em, #fff 3.8em); --loyalty-ink: #0b2cff; --loyalty-accent: #fff; --loyalty-stamp: #0b2cff; --loyalty-font: 'Bungee', 'Sora', sans-serif; border-radius: 1.1em; }
.loyalty-card[data-loyalty-store="general"] .loyalty-card-head em { color: #fff; opacity: 1; }
.loyalty-card[data-loyalty-store="general"] .loyalty-card-head b { font-size: 1.3em; }
/* Steppe Market: felt, stitched by hand. */
.loyalty-card[data-loyalty-store="mongolistan"] { --loyalty-paper: radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .05) 0 .06em, transparent .1em) 0 0 / .7em .7em, #ead9bb; --loyalty-ink: #4b2a1a; --loyalty-accent: #8a2a2a; --loyalty-stamp: #8a2a2a; border-style: dashed; border-radius: .5em; }
/* The Card Stall: a delivery note off the pad. */
.loyalty-card[data-loyalty-store="pedalistan"] { --loyalty-paper: repeating-linear-gradient(#0000 0 1.45em, rgba(35, 99, 74, .16) 1.45em 1.5em), #f4f1dc; --loyalty-ink: #1d3b2f; --loyalty-accent: #23634a; --loyalty-stamp: #23634a; --loyalty-font: 'Pacifico', 'Sora', cursive; border-radius: .25em; }
/* High Pass Post: a counterfoil, typed. */
.loyalty-card[data-loyalty-store="tagoustan"] { --loyalty-paper: #e4dcc6; --loyalty-ink: #2b2a26; --loyalty-accent: #1f5f74; --loyalty-stamp: #1f5f74; --loyalty-font: 'Special Elite', 'Sora', serif; border-radius: .2em; outline: .08em solid #b08d3c; outline-offset: -.5em; }
/* Royal Dispensary: a prescription card. */
.loyalty-card[data-loyalty-store="andasmas"] { --loyalty-paper: linear-gradient(90deg, #2f9e5b 0 .7em, #fff .7em); --loyalty-ink: #26235f; --loyalty-accent: #3b3594; --loyalty-stamp: #2f9e5b; --loyalty-font: 'Abril Fatface', 'Sora', serif; padding-left: 1.7em; border-radius: .5em; }
/* The Kiosk: newsprint. */
.loyalty-card[data-loyalty-store="boulemia"] { --loyalty-paper: linear-gradient(rgba(0, 0, 0, .06) .06em, transparent .06em) 0 0 / 100% .5em, #e3ded3; --loyalty-ink: #1c1a17; --loyalty-accent: #1c1a17; --loyalty-stamp: #8a4b1f; --loyalty-font: 'Abril Fatface', 'Sora', serif; border-radius: 0; border-width: .06em .06em .3em; }
/* The Grill Stand: a greasy menu card, neon over the kitchen. */
.loyalty-card[data-loyalty-store="merguez"] { --loyalty-paper: #1d1513; --loyalty-ink: #ffe9d6; --loyalty-accent: #ff7a3c; --loyalty-stamp: #ffb347; --loyalty-font: 'Bangers', 'Sora', sans-serif; border-color: #ff7a3c; }
.loyalty-card[data-loyalty-store="merguez"] .loyalty-card-head b { letter-spacing: .04em; text-shadow: 0 0 .35em rgba(255, 122, 60, .8); }
.loyalty-card[data-loyalty-store="merguez"] .loyalty-stamp { mix-blend-mode: screen; }
.loyalty-card[data-loyalty-store="merguez"] .loyalty-stamp.is-guest { stroke: #e58cff; }

/* On a store's counter (marketplace.js): lying where it was put down, picked up to look at. */
.store-loyalty-cards { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 12px 14px; max-width: 100%; }
.store-loyalty { flex: none; padding: 0; border: 0; background: none; box-shadow: none; font-size: 11px; cursor: pointer; transform: rotate(-3deg); transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), opacity .18s ease; }
.store-loyalty:hover, .store-loyalty:focus-visible { background: none; box-shadow: none; transform: rotate(-1deg) translateY(-4px); }
.store-loyalty:focus-visible { outline: 3px solid var(--store-border, #25252d); outline-offset: 6px; border-radius: 12px; }
/* In the Corner, the countries' cards: the one Mrs. Parsil stamps lies in front, the others wait aside, smaller. */
.store-loyalty-cards.is-choice .store-loyalty:nth-child(even) { transform: rotate(2deg); }
.store-loyalty.is-aside { font-size: 7.5px; opacity: .72; }
.store-loyalty.is-aside:hover, .store-loyalty.is-aside:focus-visible { opacity: 1; }

/* Up close. */
.inspector-object.is-loyalty-card { border-radius: 18px; font-size: min(20px, 3.9vw); }
.loyalty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.loyalty-actions:empty { display: none; }
.loyalty-redeem, .loyalty-booster { display: inline-block; padding: 10px 22px; border: 3px solid #25252d; border-radius: 999px; background: #f2c55c; color: #25252d; font: inherit; font-weight: 900; text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 #25252d; }
.loyalty-redeem:hover, .loyalty-booster:hover { background: #ffd978; color: #25252d; }
.loyalty-redeem:disabled { opacity: .6; cursor: progress; }
.loyalty-keeper-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; flex-basis: 100%; margin: 10px 0 0; font-weight: 700; }
.loyalty-keeper-line q { font-style: italic; }