/* PowerLoyalty Pro: loyalty cards (layouts, patterns, fonts, stamp shapes), stamp animations and celebrations.
   Every size is in em, so a card scales with its font-size: .plc-sm in galleries, .plc-md beside a form. */

.plc {
  --empty: color-mix(in srgb, var(--ink) 11%, transparent);
  --line: color-mix(in srgb, var(--ink) 28%, transparent);
  --stamp-ink: var(--bg);
  --plfont: 'Archivo', 'Inter', system-ui, sans-serif;
  position: relative; width: 100%; max-width: 26em; font-size: 16px; color: var(--ink); border-radius: 1.25em; overflow: hidden; isolation: isolate;
  background: linear-gradient(140deg, var(--bg) 0%, var(--bg2) 100%);
  box-shadow: 0 1.2em 2.6em -1.4em rgba(15, 22, 38, .55), 0 .1em .25em rgba(15, 22, 38, .12), inset 0 0 0 1px rgba(255, 255, 255, .06);
  font-family: 'Inter', system-ui, sans-serif; text-align: left; line-height: 1.3;
}
.plc::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--pat, none); opacity: var(--pat-o, .55); pointer-events: none; }
.plc::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, .18), transparent 55%); pointer-events: none; }
.plc-sm { font-size: 8.5px; border-radius: 1.1em; }
.plc-md { font-size: 13.5px; }
.plc-lg { font-size: 18px; }
.plc-in { position: relative; padding: 1.1em 1.2em .9em; display: flex; flex-direction: column; gap: .85em; min-height: 13.5em; }
.plc svg { display: block; }

/* Typefaces: titles and numbers use the card's face, small print stays in Inter. */
.plf-archivo { --plfont: 'Archivo', 'Inter', system-ui, sans-serif; }
.plf-serif { --plfont: 'Playfair Display', Georgia, serif; }
.plf-mono { --plfont: 'Space Mono', ui-monospace, monospace; }
.plf-script { --plfont: 'Pacifico', 'Brush Script MT', cursive; }
.plf-rounded { --plfont: 'Fredoka', 'Nunito', system-ui, sans-serif; }
.plf-condensed { --plfont: 'Bebas Neue', 'Oswald', Impact, sans-serif; }
.plf-slab { --plfont: 'Roboto Slab', Rockwell, Georgia, serif; }

/* Header */
.plc-hd { display: flex; align-items: center; gap: .7em; min-width: 0; }
.plc-logo { width: 2.7em; height: 2.7em; border-radius: .75em; object-fit: cover; background: #fff; flex: none; box-shadow: 0 .1em .3em rgba(0, 0, 0, .15); }
.plc-badge { width: 2.7em; height: 2.7em; border-radius: .8em; display: grid; place-items: center; background: var(--ac); color: var(--stamp-ink); flex: none; box-shadow: 0 .3em .8em -.3em color-mix(in srgb, var(--ac) 70%, transparent); }
.plc-badge svg { width: 1.55em; height: 1.55em; }
.plc-names { flex: 1; min-width: 0; }
.plc-biz { display: block; font: 800 1.12em/1.1 var(--plfont); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plf-condensed .plc-biz { font-weight: 400; font-size: 1.45em; letter-spacing: .02em; }
.plf-script .plc-biz { font-weight: 400; font-size: 1.15em; }
.plc-title { display: block; margin-top: .2em; font-size: .72em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plc-count { font: 800 1.35em/1 var(--plfont); white-space: nowrap; opacity: .9; }
.plc-count b { color: var(--ac); font-size: 1.15em; }
.plf-condensed .plc-count { font-weight: 400; font-size: 1.8em; }
.plc-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Footer */
.plc-ft { display: flex; justify-content: space-between; align-items: center; gap: .6em; font-size: .8em; font-weight: 600; min-width: 0; }
.plc-reward { display: inline-flex; align-items: center; gap: .4em; padding: .38em .75em .38em .55em; border-radius: 2em; background: color-mix(in srgb, var(--ac) 18%, transparent); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.plc-reward svg { width: 1.15em; height: 1.15em; flex: none; color: var(--ac); }
.plc-who { opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plc-pw { display: block; text-align: right; margin-top: -.45em; font-size: .56em; letter-spacing: .02em; opacity: .5; }
.is-full .plc-reward { background: var(--ac); color: var(--stamp-ink); box-shadow: 0 0 0 .2em color-mix(in srgb, var(--ac) 30%, transparent); }
.is-full .plc-reward svg { color: var(--stamp-ink); }

/* ---------- stamps ---------- */
.pl-s { position: relative; width: 100%; max-width: 3em; aspect-ratio: 1; display: grid; place-items: center; color: color-mix(in srgb, var(--ink) 32%, transparent); background: var(--empty); border-radius: 50%; box-shadow: inset 0 0 0 .14em var(--line); transition: background .3s, color .3s; }
.pl-s svg { width: 56%; height: 56%; }
.pl-s.on { background: var(--ac); color: var(--stamp-ink); box-shadow: 0 .25em .6em -.25em color-mix(in srgb, var(--ac) 85%, #000), inset 0 -.15em 0 rgba(0, 0, 0, .12); }
.pls-square .pl-s { border-radius: 28%; }
.pls-star .pl-s { border-radius: 0; box-shadow: none; clip-path: polygon(50% 2%, 63% 35%, 98% 37%, 70% 59%, 80% 95%, 50% 75%, 20% 95%, 30% 59%, 2% 37%, 37% 35%); }
.pls-heart .pl-s { border-radius: 0; box-shadow: none; clip-path: path('M50 92C20 70 2 52 6 30 10 10 36 6 50 26 64 6 90 10 94 30 98 52 80 70 50 92Z'); clip-path: polygon(50% 93%, 15% 62%, 3% 40%, 6% 20%, 20% 8%, 36% 9%, 50% 24%, 64% 9%, 80% 8%, 94% 20%, 97% 40%, 85% 62%); }
.pls-hex .pl-s { border-radius: 0; box-shadow: none; clip-path: polygon(25% 4%, 75% 4%, 99% 50%, 75% 96%, 25% 96%, 1% 50%); }
.pls-shield .pl-s { border-radius: 0; box-shadow: none; clip-path: polygon(50% 2%, 94% 16%, 90% 58%, 50% 98%, 10% 58%, 6% 16%); }
.pls-drop .pl-s { border-radius: 50% 50% 50% 8%; rotate: -45deg; }
.pls-drop .pl-s svg { rotate: 45deg; }
.pls-ticket .pl-s { border-radius: 18%; -webkit-mask: radial-gradient(circle at 0 50%, transparent 18%, #000 19%) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 18%, #000 19%) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, transparent 18%, #000 19%) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 18%, #000 19%) right / 51% 100% no-repeat; box-shadow: none; }
.pls-badge .pl-s { border-radius: 0; box-shadow: none; clip-path: polygon(50% 0, 61% 11%, 77% 6%, 82% 22%, 98% 26%, 93% 42%, 100% 55%, 89% 66%, 92% 82%, 76% 85%, 68% 99%, 54% 92%, 40% 100%, 30% 87%, 14% 88%, 11% 72%, 0 63%, 8% 49%, 2% 33%, 17% 26%, 20% 10%, 37% 11%); }
.pls-diamond .pl-s { border-radius: 14%; rotate: 45deg; width: 82%; }
.pls-diamond .pl-s svg { rotate: -45deg; }
.pls-star .pl-s:not(.on), .pls-heart .pl-s:not(.on), .pls-hex .pl-s:not(.on), .pls-shield .pl-s:not(.on), .pls-badge .pl-s:not(.on), .pls-ticket .pl-s:not(.on) { background: color-mix(in srgb, var(--ink) 16%, transparent); }

/* ---------- layouts ---------- */
.plc-grid { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: .6em .55em; justify-items: center; }
.plc-grid.few { gap: .8em; }
.plc-row { display: flex; flex-wrap: wrap; gap: .45em; justify-content: center; }
.plc-row .pl-s { width: 2.35em; flex: none; }
.plc-row-sm .pl-s { width: 1.55em; }
.plc-row-sm .pl-s svg { width: 60%; height: 60%; }

.pll-blank .plc-in { gap: 1em; }
.pll-blank .pl-s { box-shadow: inset 0 0 0 .12em var(--line); background: transparent; }
.pll-blank .pl-s.on { background: var(--ac); box-shadow: none; }
.pll-blank .plc-badge { background: transparent; color: var(--ac); box-shadow: inset 0 0 0 .12em var(--line); }

/* Ticket stub */
.plc-tk { display: flex; border-radius: .8em; background: color-mix(in srgb, var(--bg) 70%, #fff 30%); box-shadow: inset 0 0 0 .12em var(--line); position: relative; overflow: hidden; }
.plc-tk::before, .plc-tk::after { content: ''; position: absolute; left: calc(70% - .7em); width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--bg2); }
.plc-tk::before { top: -.7em; } .plc-tk::after { bottom: -.7em; }
.plc-tk-main { flex: 0 0 70%; padding: .9em .7em; border-right: .14em dashed var(--line); display: flex; align-items: center; }
.plc-tk-stub { flex: 1; padding: .6em .5em; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .2em; min-width: 0; }
.plc-tk-stub small { font-size: .62em; letter-spacing: .14em; text-transform: uppercase; opacity: .65; font-weight: 700; }
.plc-tk-stub b { font: 800 .95em/1.1 var(--plfont); overflow-wrap: anywhere; }
.plf-condensed .plc-tk-stub b { font-weight: 400; font-size: 1.25em; }
.plc-tk-stub span { font: 700 .58em var(--plfont); opacity: .55; letter-spacing: .08em; }

/* Boarding pass */
.plc-bp { display: flex; flex-direction: column; gap: .7em; background: color-mix(in srgb, var(--bg) 85%, #fff); border-radius: .8em; padding: .8em .9em; box-shadow: inset 0 0 0 .12em var(--line); }
.plc-bp-route { display: flex; justify-content: space-between; align-items: center; gap: .5em; }
.plc-bp-route span { display: flex; flex-direction: column; }
.plc-bp-route span.r { text-align: right; }
.plc-bp-route small, .plc-bp-meta small { font-size: .58em; letter-spacing: .14em; text-transform: uppercase; opacity: .6; font-weight: 700; }
.plc-bp-route b { font: 700 1.45em/1 var(--plfont); letter-spacing: -.02em; text-transform: uppercase; }
.plc-bp-route svg { width: 1.9em; height: 1.9em; color: var(--ac); flex: none; }
.plc-bp-meta { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: .4em; }
.plc-bp-meta span { display: flex; flex-direction: column; min-width: 0; }
.plc-bp-meta b { font: 700 .85em var(--plfont); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plc-bp-code { height: 2.2em; border-radius: .2em; opacity: .85; background: repeating-linear-gradient(90deg, var(--ink) 0 .12em, transparent .12em .3em, var(--ink) .3em .38em, transparent .38em .52em, var(--ink) .52em .7em, transparent .7em .85em); }

/* Ring */
.plc-ring { position: relative; width: min(100%, 15em); aspect-ratio: 1; margin: 0 auto; }
.plc-ring .pl-s { position: absolute; left: 50%; top: 50%; width: min(2.6em, calc(38em / var(--n))); margin: calc(min(2.6em, calc(38em / var(--n))) / -2); transform: rotate(calc(var(--i) * 360deg / var(--n))) translateY(-6.1em) rotate(calc(var(--i) * -360deg / var(--n))); }
.plc-ring-c { position: absolute; inset: 27%; border-radius: 50%; background: color-mix(in srgb, var(--ac) 15%, transparent); box-shadow: inset 0 0 0 .14em color-mix(in srgb, var(--ac) 40%, transparent); display: grid; place-content: center; justify-items: center; text-align: center; gap: .1em; }
.plc-ring-c svg { width: 1.6em; height: 1.6em; color: var(--ac); }
.plc-ring-c b { font: 800 2.1em/1 var(--plfont); }
.plc-ring-c small { font-size: .7em; opacity: .7; font-weight: 600; }

/* Progress bar */
.plc-bar { display: flex; flex-direction: column; gap: .7em; padding: .2em 0 .3em; }
.plc-bar-num { display: flex; align-items: baseline; gap: .45em; }
.plc-bar-num b { font: 800 2.7em/1 var(--plfont); color: var(--ac); letter-spacing: -.03em; }
.plf-condensed .plc-bar-num b { font-weight: 400; font-size: 3.4em; }
.plc-bar-num span { font-size: .85em; opacity: .75; font-weight: 600; }
.plc-bar-track { position: relative; height: 1.15em; border-radius: 1em; background: var(--empty); box-shadow: inset 0 0 0 .1em var(--line); }
.plc-bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, var(--ac), color-mix(in srgb, var(--ac) 65%, #fff)); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.plc-bar-ticks { position: absolute; inset: 0 .35em; display: flex; justify-content: space-between; align-items: center; }
.plc-bar-ticks .pl-s { width: .55em; max-width: none; background: color-mix(in srgb, var(--ink) 25%, transparent); box-shadow: none; border-radius: 50%; clip-path: none; rotate: none; }
.plc-bar-ticks .pl-s.on { background: color-mix(in srgb, var(--stamp-ink) 85%, transparent); }
.plc-bar-ticks .pl-s svg { display: none; }

/* Winding path */
.plc-path { display: flex; flex-direction: column; gap: .7em; position: relative; padding-right: 1.4em; }
.plc-path-row { display: flex; justify-content: space-between; gap: .4em; position: relative; }
.plc-path-row::before { content: ''; position: absolute; left: 1.2em; right: 1.2em; top: 50%; border-top: .2em dotted var(--line); z-index: -1; }
.plc-path-row.rev { flex-direction: row-reverse; }
.plc-path-row .pl-s { width: 2.4em; flex: none; }
.plc-flag { position: absolute; right: 0; bottom: .1em; width: 1.6em; height: 1.6em; color: var(--ac); }
.plc-flag svg { width: 100%; height: 100%; }

/* Passport page */
.plc-pp { position: relative; border-radius: .6em; padding: .6em .7em .7em; background: color-mix(in srgb, var(--bg) 82%, #fff); box-shadow: inset 0 0 0 .12em var(--line); }
.plc-pp-h { display: block; font: 700 .62em var(--plfont); letter-spacing: .32em; text-transform: uppercase; opacity: .55; margin-bottom: .5em; }
.plc-pp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5em; justify-items: center; }
.plc-pp .pl-s { rotate: var(--r); translate: var(--x) 0; background: transparent; box-shadow: inset 0 0 0 .1em color-mix(in srgb, var(--ink) 16%, transparent); }
.plc-pp .pl-s.on { background: transparent; color: var(--ac); box-shadow: inset 0 0 0 .16em var(--ac), inset 0 0 0 .3em transparent, inset 0 0 0 .42em color-mix(in srgb, var(--ac) 55%, transparent); clip-path: none; }

/* Stack (scoops, patties) */
.plc-stack { display: flex; justify-content: center; align-items: flex-end; gap: 1em; }
.plc-stack-col { display: flex; flex-direction: column-reverse; gap: .18em; align-items: center; }
.plc-stack-col .pl-s { width: 7.5em; max-width: none; height: min(1.4em, calc(13em / var(--n))); aspect-ratio: auto; border-radius: 1em; clip-path: none; rotate: none; }
.plc-stack-col .pl-s svg { width: auto; height: 70%; }
.plc-stack-col .pl-s.on:nth-child(even) { background: color-mix(in srgb, var(--ac) 72%, #fff); }
.plc-stack-base { width: 3em; height: 3em; color: var(--ac); opacity: .9; }
.plc-stack-base svg { width: 100%; height: 100%; }

/* Coin row */
.plc-coins { display: flex; flex-wrap: wrap; gap: .45em; justify-content: center; }
.plc-coins .pl-s { width: 2.5em; flex: none; border-radius: 50%; clip-path: none; rotate: none; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .25), transparent 45%), var(--empty); }
.plc-coins .pl-s.on { background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .75), transparent 42%), linear-gradient(150deg, color-mix(in srgb, var(--ac) 75%, #fff), var(--ac) 55%, color-mix(in srgb, var(--ac) 70%, #000)); box-shadow: inset 0 0 0 .16em color-mix(in srgb, var(--ac) 60%, #000), 0 .2em .4em rgba(0, 0, 0, .25); color: color-mix(in srgb, var(--ac) 45%, #000); }

/* Pie */
.plc-pie { position: relative; width: min(12em, 100%); margin: 0 auto; }
.plc-pie svg { width: 100%; height: auto; }
.pl-slice { fill: color-mix(in srgb, var(--ink) 10%, transparent); stroke: var(--bg); stroke-width: 1.4; transition: fill .3s; transform-origin: 50px 50px; }
.pl-slice.on { fill: var(--ac); }
.plc-pie-rim { fill: none; stroke: var(--line); stroke-width: 2; }
.plc-pie-c { position: absolute; inset: 35%; border-radius: 50%; background: var(--bg); box-shadow: 0 .2em .5em rgba(0, 0, 0, .2); display: grid; place-content: center; text-align: center; }
.plc-pie-c b { font: 800 1.6em/1 var(--plfont); }
.plc-pie-c small { font-size: .6em; opacity: .7; }

/* Filling cup */
.plc-cup { display: flex; flex-direction: column; align-items: center; gap: .7em; }
.plc-cup-glass { position: relative; width: 6.6em; height: 7.6em; background: color-mix(in srgb, var(--ink) 7%, transparent); clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); display: grid; place-items: center; }
.plc-cup-glass::before { content: ''; position: absolute; inset: 0; border: .28em solid var(--line); clip-path: inherit; }
.plc-cup-fill { position: absolute; left: 0; right: 0; bottom: 0; height: var(--p); background: linear-gradient(color-mix(in srgb, var(--ac) 80%, #fff), var(--ac) 40%, color-mix(in srgb, var(--ac) 75%, #000)); transition: height 1.2s cubic-bezier(.2, .8, .2, 1); }
.plc-cup-b { position: absolute; bottom: 8%; width: .45em; height: .45em; border-radius: 50%; background: rgba(255, 255, 255, .55); animation: plc-bub 3.2s ease-in infinite; }
.plc-cup-b:nth-of-type(2) { left: 30%; } .plc-cup-b:nth-of-type(3) { left: 55%; animation-delay: 1.1s; } .plc-cup-b:nth-of-type(4) { left: 42%; animation-delay: 2.2s; }
@keyframes plc-bub { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-5em); opacity: 0; } }
.plc-cup-glass b { position: relative; font: 800 2em var(--plfont); color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }

/* Membership card */
.plc-mb { display: flex; flex-direction: column; gap: .65em; }
.plc-mb-top { display: flex; justify-content: space-between; align-items: center; }
.plc-chip { width: 2.5em; height: 1.85em; border-radius: .38em; background: linear-gradient(135deg, #F3E1A0, #B8954A 55%, #E9D48A); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), inset .6em 0 0 -.5em rgba(0, 0, 0, .15); }
.plc-mb-tier { font: 800 .72em var(--plfont); letter-spacing: .18em; text-transform: uppercase; padding: .3em .7em; border-radius: 2em; background: color-mix(in srgb, var(--ac) 22%, transparent); color: var(--ink); }
.plc-mb-num { font: 700 1.2em 'Space Mono', ui-monospace, monospace; letter-spacing: .12em; opacity: .9; }
.plc-mb-row { display: flex; justify-content: space-between; gap: .6em; }
.plc-mb-row > span { display: flex; flex-direction: column; min-width: 0; }
.plc-mb-row small { font-size: .58em; letter-spacing: .14em; text-transform: uppercase; opacity: .6; font-weight: 700; }
.plc-mb-row b { font: 700 .9em var(--plfont); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plc-mb .plc-row { justify-content: flex-start; }

/* Sticker book */
.plc-st { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55em; justify-items: center; }
.plc-st .pl-s { border-radius: .7em; rotate: var(--r); background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 .12em var(--line); clip-path: none; }
.plc-st .pl-s.on { background: #fff; color: var(--ac); box-shadow: 0 .18em .35em rgba(0, 0, 0, .22), inset 0 0 0 .16em color-mix(in srgb, var(--ac) 35%, transparent); }
.plc-st .pl-s.on:nth-child(3n+2) { color: color-mix(in srgb, var(--ac) 60%, var(--ink)); }
.plc-st .pl-s.on:nth-child(4n+3) { background: color-mix(in srgb, var(--ac) 18%, #fff); }

/* Treasure chest */
.plc-chest { display: flex; flex-direction: column; gap: .8em; align-items: center; }
.plc-chest-art { position: relative; width: 9em; height: 6.2em; perspective: 30em; }
.plc-chest-art .box { position: absolute; inset: 42% 0 0; border-radius: .35em .35em .6em .6em; background: linear-gradient(#8B5A2B, #5C3A1A); box-shadow: inset 0 0 0 .22em #3B2410, inset 0 1.2em 0 -1em rgba(255, 255, 255, .15); }
.plc-chest-art .box::after { content: ''; position: absolute; left: 50%; top: -.2em; width: 1.2em; height: 1.4em; margin-left: -.6em; border-radius: .2em; background: var(--ac); box-shadow: inset 0 0 0 .15em rgba(0, 0, 0, .3); }
.plc-chest-art .lid { position: absolute; inset: 0 0 56%; border-radius: 3.6em 3.6em .3em .3em; background: linear-gradient(#A0692F, #6B4420); box-shadow: inset 0 0 0 .22em #3B2410; transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.3, 1.4, .5, 1); }
.plc-chest-art .glow { position: absolute; inset: 20% 10% 45%; border-radius: 50%; background: radial-gradient(color-mix(in srgb, var(--ac) 80%, #fff), transparent 70%); opacity: 0; transition: opacity .6s .3s; }
.plc-chest.open .lid { transform: rotateX(62deg) translateY(-.4em); }
.plc-chest.open .glow { opacity: 1; }

/* ---------- patterns ---------- */
.plp-dots { --pat: radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1.1px, transparent 1.5px) 0 0 / 1em 1em; }
.plp-stripes { --pat: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ac) 14%, transparent) 0 .9em, transparent .9em 1.8em); }
.plp-diagonal { --pat: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink) 8%, transparent) 0 .12em, transparent .12em .9em); }
.plp-grid { --pat: linear-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px) 0 0 / 1.1em 1.1em, linear-gradient(90deg, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px) 0 0 / 1.1em 1.1em; }
.plp-waves { --pat: radial-gradient(circle at 50% 120%, transparent 38%, color-mix(in srgb, var(--ac) 14%, transparent) 39% 42%, transparent 43%) 0 0 / 2.4em 1.4em; }
.plp-confetti { --pat: radial-gradient(circle, color-mix(in srgb, var(--ac) 45%, transparent) .14em, transparent .16em) 0 0 / 2.6em 2.2em, radial-gradient(circle, color-mix(in srgb, var(--ink) 18%, transparent) .1em, transparent .12em) 1.3em 1em / 2.6em 2.2em, linear-gradient(60deg, transparent 46%, color-mix(in srgb, var(--ac) 30%, transparent) 47% 53%, transparent 54%) .6em 1.4em / 2.6em 2.2em; --pat-o: .7; }
.plp-paper { --pat: radial-gradient(color-mix(in srgb, var(--ink) 6%, transparent) .5px, transparent .8px) 0 0 / .32em .32em, linear-gradient(transparent 95%, color-mix(in srgb, var(--ink) 5%, transparent) 95%) 0 0 / 100% 1.4em; }
.plp-kraft { --pat: radial-gradient(color-mix(in srgb, #5a3a1a 14%, transparent) .6px, transparent 1px) 0 0 / .4em .4em, radial-gradient(color-mix(in srgb, #fff 18%, transparent) .6px, transparent 1px) .2em .2em / .5em .5em; --pat-o: .9; }
.plp-guilloche { --pat: repeating-radial-gradient(circle at 100% 0, transparent 0 .5em, color-mix(in srgb, var(--ac) 16%, transparent) .5em .56em), repeating-radial-gradient(circle at 0 100%, transparent 0 .6em, color-mix(in srgb, var(--ink) 7%, transparent) .6em .65em); }
.plp-holo { --pat: conic-gradient(from 210deg at 70% 30%, rgba(255, 0, 170, .22), rgba(0, 220, 255, .22), rgba(170, 255, 0, .2), rgba(255, 200, 0, .22), rgba(255, 0, 170, .22)); --pat-o: .9; }
.plp-checker { --pat: conic-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--ink) 7%, transparent) 0 75%, transparent 0) 0 0 / 1.6em 1.6em; }
.plp-circles { --pat: radial-gradient(circle, transparent 40%, color-mix(in srgb, var(--ac) 15%, transparent) 41% 44%, transparent 45%) 0 0 / 3em 3em; }
.plp-bubbles { --pat: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .5) 0 .15em, transparent .2em), radial-gradient(circle, transparent 55%, color-mix(in srgb, var(--ac) 20%, transparent) 57% 62%, transparent 64%); --pat-size: 2.2em; background-size: auto; }
.plc.plp-bubbles::before { background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .6) 0 .12em, transparent .16em) 0 0 / 2.2em 2.2em, radial-gradient(circle, transparent 54%, color-mix(in srgb, var(--ac) 22%, transparent) 56% 62%, transparent 64%) 0 0 / 2.2em 2.2em, radial-gradient(circle, transparent 54%, color-mix(in srgb, var(--ac) 18%, transparent) 56% 62%, transparent 64%) 1.1em 1.3em / 3.1em 3.1em; }
.plp-chevron { --pat: linear-gradient(135deg, color-mix(in srgb, var(--ink) 7%, transparent) 25%, transparent 25%) -.8em 0 / 1.6em 1.6em, linear-gradient(225deg, color-mix(in srgb, var(--ink) 7%, transparent) 25%, transparent 25%) -.8em 0 / 1.6em 1.6em; }
.plp-sunburst { --pat: repeating-conic-gradient(from 0deg at 85% 15%, color-mix(in srgb, var(--ac) 16%, transparent) 0 6deg, transparent 6deg 14deg); }
.plp-linen { --pat: repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 3px); --pat-o: .9; }
.plp-neon { --pat: linear-gradient(color-mix(in srgb, var(--ac) 22%, transparent) 1px, transparent 1px) 0 0 / 1.4em 1.4em, linear-gradient(90deg, color-mix(in srgb, var(--ac) 22%, transparent) 1px, transparent 1px) 0 0 / 1.4em 1.4em; --pat-o: .6; }
.plp-neon .pl-s.on { box-shadow: 0 0 .5em var(--ac), 0 0 1.2em color-mix(in srgb, var(--ac) 60%, transparent); }
.plp-neon .plc-biz, .plp-neon .plc-count b { text-shadow: 0 0 .5em color-mix(in srgb, var(--ac) 70%, transparent); }
.plp-marble { --pat: radial-gradient(60% 40% at 20% 30%, rgba(255, 255, 255, .25), transparent 70%), radial-gradient(50% 35% at 80% 70%, color-mix(in srgb, var(--ac) 18%, transparent), transparent 70%), linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .14) 45%, transparent 52%); --pat-o: 1; }

/* ---------- stamp animations (loyalty-card.js adds .pl-a-<name> to the slot that was just filled) ---------- */
.pl-s.pl-new { z-index: 2; }
.pl-a-rubber { animation: pla-rubber .55s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pla-rubber { 0% { scale: 2.4; rotate: -24deg; opacity: 0; } 55% { scale: .88; rotate: 4deg; opacity: 1; } 75% { scale: 1.06; } 100% { scale: 1; rotate: 0deg; } }
.pl-a-rubber::after, .pl-a-punch::after, .pl-a-fireworks::after { content: ''; position: absolute; inset: -10%; border-radius: inherit; border: .18em solid var(--ac); animation: pla-ring .7s ease-out .25s both; pointer-events: none; }
@keyframes pla-ring { 0% { scale: .7; opacity: .9; } 100% { scale: 1.9; opacity: 0; } }
.pl-a-ink { animation: pla-pop .45s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes pla-pop { 0% { scale: 0; } 70% { scale: 1.18; } 100% { scale: 1; } }
.pl-a-bean { animation: pla-drop .8s cubic-bezier(.35, 0, .35, 1) both; }
@keyframes pla-drop { 0% { translate: 0 -5em; rotate: 220deg; opacity: 0; } 55% { translate: 0 0; rotate: 0deg; opacity: 1; scale: 1.15 .82; } 72% { translate: 0 -.6em; scale: .95 1.05; } 88% { translate: 0 0; scale: 1.03 .97; } 100% { translate: 0 0; scale: 1; } }
.pl-a-snip { animation: pla-snip .7s ease-out both; }
@keyframes pla-snip { 0% { clip-path: inset(0 100% 0 0 round 50%); } 100% { clip-path: inset(0 0 0 0 round 0); } }
.pl-a-burst, .pl-a-confetti, .pl-a-gift { animation: pla-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.pl-a-coin { animation: pla-coin .9s cubic-bezier(.3, 0, .3, 1) both; }
@keyframes pla-coin { 0% { translate: 0 -6em; rotate: y 0deg; opacity: 0; } 60% { translate: 0 0; rotate: y 1080deg; opacity: 1; } 78% { translate: 0 -.5em; } 100% { translate: 0 0; rotate: y 1080deg; } }
.pl-a-diamond { animation: pla-diamond .7s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes pla-diamond { 0% { scale: 0; rotate: 90deg; filter: brightness(2.2); } 70% { scale: 1.12; filter: brightness(1.6); } 100% { scale: 1; rotate: 0deg; filter: none; } }
.pls-diamond .pl-a-diamond { animation-name: pla-diamond2; }
@keyframes pla-diamond2 { 0% { scale: 0; rotate: 135deg; filter: brightness(2.2); } 70% { scale: 1.12; } 100% { scale: 1; rotate: 45deg; filter: none; } }
.pl-a-heart { animation: pla-heart .75s ease-out both; }
@keyframes pla-heart { 0% { scale: 0; } 35% { scale: 1.35; } 55% { scale: .88; } 75% { scale: 1.1; } 100% { scale: 1; } }
.pl-a-punch { animation: pla-punch .5s ease-out both; }
@keyframes pla-punch { 0% { scale: .3; opacity: 0; } 40% { scale: 1; opacity: 1; translate: -.08em 0; } 55% { translate: .1em 0; } 70% { translate: -.06em 0; } 100% { translate: 0 0; } }
.pl-a-fireworks { animation: pla-pop .45s ease-out both; }
.pl-a-fill { animation: pla-fill .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pla-fill { 0% { clip-path: inset(100% 0 0 0); } 100% { clip-path: inset(0 0 0 0); } }
.pl-a-check { animation: pla-check .6s ease-out both; }
@keyframes pla-check { 0% { clip-path: circle(0% at 50% 50%); } 100% { clip-path: circle(75% at 50% 50%); } }
.pl-a-flip { animation: pla-flip .8s cubic-bezier(.3, .9, .4, 1) both; }
@keyframes pla-flip { 0% { rotate: y 0deg; scale: .6; } 100% { rotate: y 720deg; scale: 1; } }
.pl-a-neon { animation: pla-neon 1.1s linear both; }
@keyframes pla-neon { 0%, 18%, 30%, 52% { opacity: 1; filter: drop-shadow(0 0 .5em var(--ac)) brightness(1.6); } 10%, 24%, 44% { opacity: .15; filter: none; } 100% { opacity: 1; filter: drop-shadow(0 0 .25em var(--ac)); } }
.pl-a-trophy { animation: pla-rise .8s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes pla-rise { 0% { translate: 0 1.8em; opacity: 0; scale: .6; } 70% { translate: 0 -.3em; opacity: 1; scale: 1.1; } 100% { translate: 0 0; scale: 1; } }
.pl-a-trophy::before, .pl-a-vip::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .85) 48%, transparent 62%) -150% 0 / 250% 100% no-repeat; animation: pla-shine .9s ease-out .35s both; pointer-events: none; }
@keyframes pla-shine { to { background-position: 150% 0; } }
.pl-a-vip { animation: pla-vip .9s cubic-bezier(.3, .9, .4, 1) both; }
@keyframes pla-vip { 0% { rotate: y 180deg; opacity: .2; } 100% { rotate: y 0deg; opacity: 1; } }
.pl-a-pizza { animation: pla-pizza .8s steps(8, end) both; }
@keyframes pla-pizza { 0% { clip-path: polygon(50% 50%, 50% 0, 50% 0, 50% 0, 50% 0, 50% 0); } 25% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 50%); } 50% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%, 50% 100%); } 75% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 50%); } 100% { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0); } }
.pl-slice.pl-a-pizza { animation: pla-slice .6s cubic-bezier(.3, 1.5, .5, 1) both; clip-path: none; }
.pl-slice.pl-new { animation: pla-slice .6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes pla-slice { 0% { scale: .2; opacity: 0; } 70% { scale: 1.08; } 100% { scale: 1; opacity: 1; } }
.pl-a-scoop { animation: pla-scoop .75s cubic-bezier(.4, 0, .3, 1) both; }
@keyframes pla-scoop { 0% { translate: 0 -4em; opacity: 0; } 50% { translate: 0 0; opacity: 1; scale: 1.25 .7; } 70% { scale: .9 1.12; } 100% { scale: 1; } }
.pl-a-fade { animation: pla-fade .4s ease-out both; }
@keyframes pla-fade { from { opacity: 0; } to { opacity: 1; } }

/* Particles thrown by a stamp (spawned inside the slot) */
.pl-p { position: absolute; left: 50%; top: 50%; width: .45em; height: .45em; margin: -.225em; border-radius: 50%; background: var(--ac); pointer-events: none; animation: pla-p .75s cubic-bezier(.2, .7, .3, 1) forwards; z-index: 3; }
.pl-p.sq { border-radius: .08em; width: .35em; height: .6em; }
.pl-p.star { background: none; color: var(--ac); width: .9em; height: .9em; margin: -.45em; }
.pl-p.star::before { content: '\2726'; font-size: .9em; line-height: 1; display: block; }
.pl-p.heart { background: none; color: #F43F5E; width: .9em; height: .9em; margin: -.45em; }
.pl-p.heart::before { content: '\2665'; font-size: 1em; line-height: 1; display: block; }
@keyframes pla-p { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.3) rotate(var(--rot, 0deg)); opacity: 0; } }

/* ---------- reward celebration (a layer over the whole page) ---------- */
.pl-fx { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.pl-fx i { position: absolute; display: block; }
.pl-fx .cf { width: .55rem; height: .9rem; border-radius: .1rem; top: -2rem; animation: plfx-fall var(--t, 2.6s) cubic-bezier(.25, .6, .4, 1) var(--d, 0s) forwards; }
@keyframes plfx-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx, 0), 110vh) rotate(var(--rot, 720deg)); opacity: .9; } }
.pl-fx .fw { width: .4rem; height: .4rem; border-radius: 50%; animation: plfx-fw 1.1s cubic-bezier(.15, .8, .3, 1) var(--d, 0s) forwards; opacity: 0; }
@keyframes plfx-fw { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.pl-fx .sp { font-size: 1.4rem; color: #FDE68A; animation: plfx-tw 1.6s ease-in-out var(--d, 0s) both; text-shadow: 0 0 .6rem rgba(253, 230, 138, .9); }
.pl-fx .sp::before { content: '\2726'; }
@keyframes plfx-tw { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1.2) rotate(90deg); opacity: 1; } }
.pl-fx .cn { width: 1.6rem; height: 1.6rem; border-radius: 50%; top: -2rem; background: radial-gradient(circle at 35% 30%, #FFF6C7, #F2B33D 45%, #B7791F); box-shadow: inset 0 0 0 .18rem #B7791F; animation: plfx-coin var(--t, 1.8s) cubic-bezier(.4, 0, .6, 1) var(--d, 0s) forwards; }
@keyframes plfx-coin { 0% { transform: translateY(0) rotateY(0); } 100% { transform: translateY(110vh) rotateY(1440deg); } }
.pl-fx .ht { font-size: 1.6rem; color: #F43F5E; bottom: -2rem; animation: plfx-rise var(--t, 2.4s) ease-out var(--d, 0s) forwards; }
.pl-fx .ht::before { content: '\2665'; }
@keyframes plfx-rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx, 0), -110vh) scale(1.2); opacity: 0; } }
.pl-fx .bb { width: 1.4rem; height: 1.4rem; border-radius: 50%; bottom: -2rem; border: 2px solid rgba(255, 255, 255, .8); background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7), rgba(125, 211, 252, .25) 60%); animation: plfx-rise var(--t, 2.8s) ease-out var(--d, 0s) forwards; }
.pl-glowing { animation: plfx-glow 1.6s ease-in-out 2; }
@keyframes plfx-glow { 0%, 100% { box-shadow: 0 1.2em 2.6em -1.4em rgba(15, 22, 38, .55); } 50% { box-shadow: 0 0 0 .4em color-mix(in srgb, var(--ac) 45%, transparent), 0 0 3em color-mix(in srgb, var(--ac) 70%, transparent); } }
.pl-cheer { position: fixed; left: 50%; top: 18%; z-index: 10000; transform: translateX(-50%); padding: 14px 22px; border-radius: 18px; background: #18202F; color: #fff; font: 800 18px/1.2 'Archivo', system-ui, sans-serif; box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .6); text-align: center; animation: plfx-cheer 3.2s cubic-bezier(.3, 1.4, .5, 1) forwards; max-width: calc(100vw - 32px); }
.pl-cheer small { display: block; font: 500 13px 'Inter', system-ui, sans-serif; opacity: .75; margin-top: 4px; }
@keyframes plfx-cheer { 0% { transform: translate(-50%, -20px) scale(.8); opacity: 0; } 12% { transform: translate(-50%, 0) scale(1); opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -8px); } }

@media (prefers-reduced-motion: reduce) {
  .pl-s[class*="pl-a-"], .pl-slice[class*="pl-a-"] { animation: pla-fade .3s ease-out both !important; }
  .pl-s::before, .pl-s::after, .pl-p, .pl-fx, .plc-cup-b { display: none !important; }
  .plc-bar-fill, .plc-cup-fill, .plc-chest-art .lid { transition: none; }
}