/* ===== PULLSTAR card renderer ===== */
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --act { syntax: '<number>'; inherits: true; initial-value: 0; }

.pcard {
  --w: 240px; --rc: #9aa7b8;
  --mx: 50%; --my: 50%; --tx: 0; --ty: 0; --act: 0; --hyp: 0;
  --rainbow: linear-gradient(115deg, #ff6b8b 0%, #ffcf6b 12%, #8dffb0 25%, #6be0ff 38%, #a58bff 50%, #ff8be3 62%, #ff6b8b 75%, #ffcf6b 88%, #8dffb0 100%);
  width: var(--w); aspect-ratio: 25 / 35; font-size: calc(var(--w) / 25);
  position: relative; perspective: calc(var(--w) * 3.2); flex: none;
  font-family: 'Inter', system-ui, sans-serif; color: #eef2ff; user-select: none; -webkit-user-select: none;
}
.pc-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--tx) * 13deg)) rotateX(calc(var(--ty) * -13deg)); }
.pc-flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3, 1.35, .5, 1); }
.pcard.flipped .pc-flip { transform: rotateY(180deg); }
.pc-face { position: absolute; inset: 0; border-radius: 1.15em; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 .5em 1.4em rgba(0,0,0,.55), 0 0 0 .06em rgba(0,0,0,.6); transform: translateZ(0); }
.pcard.active .pc-face { box-shadow: 0 1em 2.4em rgba(0,0,0,.6), 0 0 1.6em -0.2em var(--rc); }
.pc-back { transform: rotateY(180deg) translateZ(0); }
.pc-face > div { position: absolute; }

/* frame by rarity */
.pc-frame { inset: 0; background: linear-gradient(135deg, #d9e0ea, #7f8ca0 38%, #eef2f7 52%, #6f7c8f 70%, #c3ccd8); }
.pc-frame::after { content: ''; position: absolute; inset: .45em; border-radius: .85em; box-shadow: inset 0 0 0 .08em rgba(255,255,255,.55), inset 0 0 .5em rgba(0,0,0,.45); }
.r-uncommon .pc-frame { background: linear-gradient(135deg, #d4e5ff, #2563eb 38%, #e4efff 52%, #1d3a8a 70%, #93b8ff); }
.r-rare .pc-frame { background: linear-gradient(135deg, #c9ffe4, #16a34a 38%, #d8fff0 52%, #0b6b30 70%, #86efac); }
.r-epic .pc-frame { background: linear-gradient(135deg, #f1e4ff, #8b2ee0 38%, #f6edff 52%, #4c1d95 70%, #c79bff); }
.r-legendary .pc-frame { background: linear-gradient(135deg, #fff1b8, #d98a06 36%, #fffbe0 50%, #8a4b05 68%, #ffd36b); }
.r-mythic .pc-frame { background: conic-gradient(from var(--seeda), #ff4d6d, #ffb84d, #f9ff4d, #4dff9a, #4dd8ff, #9a6bff, #ff4dd8, #ff4d6d); }
.r-mythic .pc-frame::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(40,0,10,.55), rgba(0,0,0,.15) 50%, rgba(40,0,10,.6)); }

/* inner panel, shifted by print centering */
.pc-inner { inset: 1em; border-radius: .75em; overflow: hidden; z-index: 2;
  transform: translate(calc(var(--cx) * .42em), calc(var(--cy) * .42em));
  background: linear-gradient(180deg, #121624, #0a0c14 60%, #10121c); box-shadow: 0 0 0 .07em rgba(0,0,0,.7); }
.pc-inner > div { position: absolute; }

.pc-head { top: 0; left: 0; right: 0; height: 3.5em; display: flex; align-items: center; gap: .5em; padding: 0 .7em; z-index: 5; }
.pc-titles { flex: 1; min-width: 0; }
.pc-name { font-family: 'Barlow Condensed', 'Oswald', sans-serif; font-weight: 800; font-size: 1.62em; line-height: .95; letter-spacing: .01em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 .06em .2em rgba(0,0,0,.7); }
.pc-sub { font-size: .62em; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--rc) 72%, #fff); font-weight: 700; margin-top: .2em; }
.pc-rating { display: flex; flex-direction: column; align-items: center; line-height: .9; padding: .2em .45em; border-radius: .4em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 55%, #000), #05060a); box-shadow: inset 0 0 0 .06em color-mix(in srgb, var(--rc) 70%, #fff); }
.pc-rating b { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5em; font-weight: 800; }
.pc-rating span { font-size: .45em; letter-spacing: .15em; opacity: .8; }
.pc-gemhead .gem { width: 1.6em; height: 1.6em; fill: color-mix(in srgb, var(--rc) 85%, #fff); }

.pc-window { top: 3.5em; left: .5em; right: .5em; height: 17.4em; border-radius: .5em; overflow: hidden; z-index: 1;
  box-shadow: inset 0 0 0 .07em rgba(255,255,255,.25), 0 .15em .5em rgba(0,0,0,.5); }
.pc-bg { position: absolute; inset: -4%; background-size: cover; background-position: center;
  transform: translate(calc(var(--tx) * -.35em), calc(var(--ty) * -.35em)); }
.pc-subjclip { top: 0; left: .5em; right: .5em; height: 20.9em; overflow: hidden; z-index: 3; pointer-events: none; border-radius: 0 0 .5em .5em; }
.pc-subj { position: absolute; left: calc(var(--sx) * 1%); top: calc(3.5em + var(--sy) * .174em); width: calc(14em * var(--ss));
  transform: translate(-50%, -50%) translate(calc(var(--tx) * .45em), calc(var(--ty) * .45em)); }
.pc-subj img { width: 100%; display: block; filter: drop-shadow(0 .4em .6em rgba(0,0,0,.55)); }
.pc-subj .glyph { width: 100%; display: block; overflow: visible; filter: drop-shadow(0 0 .7em var(--rc)) drop-shadow(0 .35em .5em rgba(0,0,0,.7)); }
/* baked: the shadowed picture replaces the live element (kept invisible only to hold the size) */
.pc-subj .pc-sraster { position: absolute; left: -25%; top: 0; margin-top: -25%; width: 150%; max-width: none; filter: none; }
.pc-subj.baked > :not(.pc-sraster) { visibility: hidden; filter: none; }

.pc-body { top: 21.3em; left: .5em; right: .5em; bottom: .45em; display: flex; flex-direction: column; gap: .4em; z-index: 4; }
.pc-meta { display: flex; justify-content: space-between; align-items: center; font-size: .56em; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #b8c0d6; padding: 0 .2em; }
.pc-rar { display: inline-flex; align-items: center; gap: .4em; color: color-mix(in srgb, var(--rc) 78%, #fff); }
.pc-rar .gem { width: 1.2em; height: 1.2em; fill: currentColor; }
.pc-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-radius: .45em; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 .06em color-mix(in srgb, var(--rc) 45%, transparent); }
.pc-stats > div { display: flex; flex-direction: column; align-items: center; padding: .38em .2em; min-width: 0; }
.pc-stats > div + div { border-left: .06em solid rgba(255,255,255,.08); }
.pc-stats span { font-size: .48em; letter-spacing: .14em; text-transform: uppercase; color: #8d97b0; white-space: nowrap; }
.pc-stats b { font-family: 'Barlow Condensed', sans-serif; font-size: 1.12em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pc-flavor { flex: 1; font-size: .6em; font-style: italic; color: #a7b0c8; line-height: 1.35; padding: 0 .35em; overflow: hidden; }
.pc-foot { display: flex; justify-content: space-between; align-items: center; font-size: .46em; letter-spacing: .08em; color: #7d87a0; padding: 0 .35em .1em; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.pc-serial { color: color-mix(in srgb, var(--rc) 72%, #fff); font-weight: 700; }
.pc-prime { top: 3.9em; right: 1em; z-index: 6; font-size: .55em; font-weight: 800; letter-spacing: .15em; padding: .3em .6em; border-radius: 1em;
  background: linear-gradient(90deg, #fff1b8, #f59e0b); color: #3b1d00; box-shadow: 0 0 .8em rgba(245,158,11,.8); }

/* full-art layout */
.l-fullart .pc-window { top: 0; left: 0; right: 0; height: 100%; border-radius: .75em; box-shadow: none; }
.l-fullart .pc-subjclip { left: 0; right: 0; height: 100%; border-radius: .75em; }
.l-fullart .pc-subj { top: calc(var(--sy) * 1%); width: calc(19em * var(--ss)); }
.l-fullart .pc-head { background: linear-gradient(180deg, rgba(0,0,0,.8), rgba(0,0,0,.35) 70%, transparent); height: 4.2em; align-items: flex-start; padding-top: .55em; }
.l-fullart .pc-body { top: auto; left: 0; right: 0; bottom: 0; padding: 2.6em .55em .45em; background: linear-gradient(180deg, transparent, rgba(4,5,10,.82) 32%, rgba(4,5,10,.95)); }
.l-fullart .pc-flavor { flex: none; }

/* ---------- foil layers ---------- */
.pc-shine, .pc-holo, .pc-foil { pointer-events: none; opacity: 0; }
.pc-shine { inset: 0; z-index: 1; }
.pc-holo { position: absolute; inset: 0; z-index: 2; }
.pc-foil { inset: 0; z-index: 6; } /* inside .pc-inner, so the border stays clean */
.pc-wear { inset: 0; z-index: 7; background-size: 100% 100%; pointer-events: none; }
.pc-grime { inset: 0; z-index: 7; background: #7a5a30; mix-blend-mode: multiply; opacity: var(--grime); pointer-events: none; }
.pc-glare { inset: 0; z-index: 8; pointer-events: none; mix-blend-mode: overlay; opacity: calc(.15 + var(--act) * .7);
  background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.8) 0%, rgba(255,255,255,.14) 26%, rgba(0,0,0,.45) 95%); }

/* All foils use single large textures (no-repeat, >100% size) and smooth
   gradients, so tilting slides one continuous surface with no seams/stripes.
   Positions stay inside 0-100% so the oversized image always covers. */
.pcard { --rainbow: linear-gradient(115deg, #ff6b8b 0%, #ffcf6b 12%, #8dffb0 25%, #6be0ff 38%, #a58bff 50%, #ff8be3 62%, #ff6b8b 75%, #ffcf6b 88%, #8dffb0 100%);
  --fx: calc((var(--seedx) + var(--mx)) / 2); --fy: calc((var(--seedy) + var(--my)) / 2); }
.pc-rshine { inset: 0; z-index: 0; opacity: 0; pointer-events: none; }

/* Pattern sheets (sheets.js): one giant colour sheet per finish, 4x the card;
   --hx-x/--hx-y (from the pattern number) pick this copy's window on it.
   None of these layers use a CSS filter: the grading is baked into the sheets. */
.pcard { --hx-px: calc(var(--hx-x) + var(--tx, 0) * 1.2%); --hx-py: calc(var(--hx-y) + var(--ty, 0) * 1.2%); }
.pc-tint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background-repeat: no-repeat; background-size: 400% auto; background-position: var(--hx-x) var(--hx-y); }

/* Holo: the art keeps its own colours. A light soft-light tint leans it toward
   this copy's colours on the Spectrum fade sheet, and the bright sparkle only
   appears where the light hits, following the tilt. */
.f-holo .pc-tint { background-image: var(--tex-fade); opacity: calc((.14 + var(--act) * .12) * var(--hw)); }
.f-holo .pc-holo {
  opacity: calc((.15 + var(--act) * .6) * var(--hw)); mix-blend-mode: color-dodge;
  background-image: var(--tex-glitter), var(--tex-fade-foil); background-repeat: no-repeat;
  background-size: 150% auto, 400% auto; background-position: var(--mx) var(--my), var(--hx-px) var(--hx-py);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.5) 22%, transparent 48%);
  mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.5) 22%, transparent 48%);
}
/* Reverse holo: the panel behind the text (under the art window, so artwork is
   never banded), coloured by this copy's window on the Sunset fade sheet. */
.f-reverse .pc-rshine {
  opacity: calc((.3 + var(--act) * .4) * var(--hw)); mix-blend-mode: color-dodge;
  background-image: var(--tex-glitter), var(--tex-sunset-foil); background-repeat: no-repeat;
  background-size: 150% auto, 400% auto; background-position: var(--fx) var(--fy), var(--hx-px) var(--hx-py);
}
.f-reverse .pc-inner { background: linear-gradient(180deg, #1b2236, #121624 60%, #1a1f30); }

/* Galaxy: drifting starfield, art + frame + panel */
.f-galaxy .pc-holo, .f-galaxy .pc-shine, .f-galaxy .pc-rshine {
  opacity: calc((.7 + var(--act) * .3) * var(--hw)); mix-blend-mode: color-dodge;
  background-image: var(--tex-cosmos), radial-gradient(circle at var(--mx) var(--my), rgba(140,120,255,.5), transparent 60%);
  background-repeat: no-repeat; background-size: 170% auto, 100% 100%;
  background-position: calc(var(--seedx) * .4 + 30% + var(--tx) * 12%) calc(var(--seedy) * .4 + 30% + var(--ty) * 12%), 0 0;
}
.f-galaxy .pc-holo { filter: brightness(1.05) contrast(1.35) saturate(1.8); }
.f-galaxy .pc-shine, .f-galaxy .pc-rshine { filter: brightness(.85) contrast(1.3) saturate(1.6); }
.f-galaxy .pc-inner { background: linear-gradient(180deg, #141a3a, #0b0e24 60%, #141a36); }

/* Prismatic: honeycomb facets over this copy's window on the Nebula sheet,
   whole card. Over the art the facets drop to a faint trace (a fixed mask, so
   free per frame) and the art's colour sparkle only shows where the light hits. */
.f-prismatic .pc-foil {
  opacity: calc((.24 + var(--act) * .32) * var(--hw)); mix-blend-mode: color-dodge;
  background-image: var(--tex-hex), var(--tex-nebula-foil); background-blend-mode: overlay; background-repeat: no-repeat;
  background-size: 130% auto, 400% auto; background-position: var(--fx) var(--fy), var(--hx-px) var(--hx-py);
  -webkit-mask-image: linear-gradient(to bottom, #000 3.5em, rgba(0,0,0,.18) 3.5em, rgba(0,0,0,.18) 20.9em, #000 20.9em);
  mask-image: linear-gradient(to bottom, #000 3.5em, rgba(0,0,0,.18) 3.5em, rgba(0,0,0,.18) 20.9em, #000 20.9em);
}
.f-prismatic .pc-holo {
  opacity: calc((.12 + var(--act) * .55) * var(--hw)); mix-blend-mode: color-dodge;
  background-image: var(--tex-glitter), var(--tex-nebula-foil); background-repeat: no-repeat;
  background-size: 160% auto, 400% auto; background-position: var(--mx) var(--my), var(--hx-px) var(--hx-py);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.45) 25%, transparent 52%);
  mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.45) 25%, transparent 52%);
}
.f-prismatic .pc-tint { background-image: var(--tex-nebula); opacity: calc((.1 + var(--act) * .08) * var(--hw)); }

/* Gold: etched gold, toned art */
.f-gold .pc-inner { background: linear-gradient(180deg, #2a1d05, #140d02 60%, #24180a); }
.f-gold .pc-bg, .f-gold .pc-subj { filter: sepia(.8) saturate(1.7) hue-rotate(-12deg) brightness(1.05) contrast(1.15); }
.f-gold .pc-name, .f-gold .pc-stats b { background: linear-gradient(180deg, #fff7d0, #e8b33a 55%, #a87200); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.f-gold .pc-foil {
  opacity: calc((.45 + var(--act) * .45) * var(--hw)); mix-blend-mode: color-dodge; background-repeat: no-repeat;
  background-image: var(--tex-etch), linear-gradient(115deg, transparent 22%, rgba(255,214,120,.25) 38%, rgba(255,240,180,.95) 48%, #fff 50%, rgba(255,200,90,.9) 53%, rgba(255,214,120,.2) 62%, transparent 78%);
  background-size: 220% auto, 300% 300%; background-position: calc(var(--seedx) * .5 + 25%) calc(var(--seedy) * .5 + 25%), var(--mx) var(--my);
}
.f-gold .pc-shine { opacity: calc(.5 * var(--hw)); mix-blend-mode: overlay; background: var(--tex-etch) no-repeat; background-size: 220% auto; background-position: calc(var(--seedx) * .5 + 25%) calc(var(--seedy) * .5 + 25%); }

/* Obsidian 1/1: no foil, no rainbow. The artwork stays as painted and the panel
   around it is a jet-black void with stars at three depths that slide at
   different speeds as the card tilts (like looking into an End portal). */
.f-obsidian .pc-inner { background: radial-gradient(120% 90% at 50% 45%, #000 55%, #04040a 80%, #08081a); }
.f-obsidian .pc-name { color: #f4f6fb; text-shadow: 0 0 .5em rgba(170,200,255,.35); }
.f-obsidian .pc-sub, .f-obsidian .pc-rar, .f-obsidian .pc-serial, .f-obsidian .pc-gemhead .gem { color: #c9d2e6; fill: #c9d2e6; }
.f-obsidian .pc-stats { background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 .06em rgba(255,255,255,.12); }
.f-obsidian .pc-glare { opacity: calc(.06 + var(--act) * .18); }
.pc-void { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pc-void i { position: absolute; inset: -12%; display: block; background-image: var(--tex-void); background-repeat: no-repeat; }
/* deeper layers are smaller, dimmer and move less */
.pc-void .d1 { background-size: 100% auto; opacity: .45; transform: translate(calc(var(--tx) * .4em), calc(var(--ty) * .4em)); background-position: var(--seedx) var(--seedy); }
.pc-void .d2 { background-size: 150% auto; opacity: .75; transform: translate(calc(var(--tx) * -1.1em), calc(var(--ty) * -1.1em)); background-position: calc(100% - var(--seedx)) var(--seedy); }
.pc-void .d3 { background-size: 230% auto; opacity: .95; transform: translate(calc(var(--tx) * -2.4em), calc(var(--ty) * -2.4em)); background-position: var(--seedy) calc(100% - var(--seedx)); }
/* a slow drift so the void is alive even when the card sits still */
.f-obsidian .pc-void .d1 { animation: void-drift 40s linear infinite alternate; }
@keyframes void-drift { to { background-position: calc(var(--seedx) + 6%) calc(var(--seedy) + 4%); } }
@media (prefers-reduced-motion: reduce) { .f-obsidian .pc-void .d1 { animation: none; } }

/* Prime pattern: foil perfectly centred + starburst */
/* the starburst is fixed to the card, centred on the art; its middle fades out so
   the rays only frame the edges of the image. It brightens as the card tilts. */
.pc-primefx { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: color-dodge;
  opacity: calc((.22 + var(--hyp, 0) * .4 + var(--act) * .18) * var(--hw, 1));
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,226,150,.75) 0 3deg, rgba(255,226,150,0) 6deg 12deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 0 28%, rgba(0,0,0,.45) 48%, #000 72%);
  mask-image: radial-gradient(ellipse at 50% 50%, transparent 0 28%, rgba(0,0,0,.45) 48%, #000 72%); }

/* idle shimmer (pack reveals, hero cards) */
@keyframes pc-idle { 0% { --mx: 20%; --my: 30%; --act: .55; } 50% { --mx: 80%; --my: 70%; --act: .8; } 100% { --mx: 20%; --my: 30%; --act: .55; } }
.pcard.idle:not(.active) { animation: pc-idle 5s ease-in-out infinite; }

/* ---------- card back ---------- */
.pc-back { background: radial-gradient(circle at 50% 45%, #1f2a5c, #0a0e24 60%, #05060f); }
.pc-back::before { content: ''; position: absolute; inset: .7em; border-radius: .8em; border: .18em solid #c9a24a; box-shadow: inset 0 0 0 .3em #0a0e24, inset 0 0 0 .42em rgba(201,162,74,.5); }
.pb-ring { inset: 0; background: repeating-radial-gradient(circle at 50% 45%, rgba(120,150,255,.12) 0 .12em, transparent .12em 1.1em), repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,255,255,.04) 0 6deg, transparent 6deg 12deg); }
.pb-logo { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; }
.pb-logo svg { width: 9em; filter: drop-shadow(0 0 1em rgba(255,200,90,.6)); }
.pb-logo svg path { fill: url(#none); fill: #f2c14e; stroke: #fff3c4; stroke-width: 1.5; }
.pb-logo div { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 2.2em; letter-spacing: .3em; margin-right: -.3em; color: #f6d77a; text-shadow: 0 0 .5em rgba(246,215,122,.6); }
.pb-glare { inset: 0; mix-blend-mode: overlay; background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.6), transparent 50%); opacity: calc(.2 + var(--act) * .6); }
.back-only.r-epic .pc-back, .back-only.r-legendary .pc-back, .back-only.r-mythic .pc-back { box-shadow: 0 0 2.5em .3em var(--rc), 0 0 0 .1em var(--rc); animation: back-pulse 1.1s ease-in-out infinite; }
@keyframes back-pulse { 50% { box-shadow: 0 0 4em .8em var(--rc), 0 0 0 .1em #fff; } }

/* ---------- graded slab ---------- */
.slab { --w: 260px; width: var(--w); padding: calc(var(--w) * .04); padding-top: 0; border-radius: calc(var(--w) * .05); position: relative; flex: none;
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 40%, rgba(255,255,255,.14));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), inset 0 0 0 calc(var(--w) * .02) rgba(255,255,255,.06), 0 1.2em 2.6em rgba(0,0,0,.55);
  transform: perspective(1200px) rotateY(calc(var(--tx, 0) * 10deg)) rotateX(calc(var(--ty, 0) * -10deg)); font-family: 'Inter', sans-serif; }
.slab-label { display: flex; justify-content: space-between; gap: .5em; margin: calc(var(--w) * .04) 0; padding: calc(var(--w) * .03) calc(var(--w) * .035);
  background: linear-gradient(180deg, #fbfbfd, #e8eaf0); color: #111; border-radius: calc(var(--w) * .02); border: calc(var(--w) * .008) solid #c8102e; font-size: calc(var(--w) * .038); }
.slab.gem .slab-label { border-color: #d4a017; background: linear-gradient(180deg, #fffaf0, #f3e7c3); }
.sl-left { min-width: 0; }
.sl-brand { font-weight: 900; letter-spacing: .2em; color: #c8102e; font-size: .9em; }
.slab.gem .sl-brand { color: #a77a00; }
.sl-name { font-weight: 800; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.05em; }
.sl-line { font-size: .78em; color: #444; white-space: nowrap; }
.sl-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.sl-gname { font-size: .72em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sl-grade { font-size: 2.4em; font-weight: 900; line-height: 1; font-family: 'Barlow Condensed', sans-serif; }
.sl-cert { font-size: .62em; font-family: 'JetBrains Mono', monospace; color: #666; }
.slab-well { display: flex; justify-content: center; padding: calc(var(--w) * .035) 0 calc(var(--w) * .04); border-radius: calc(var(--w) * .02);
  background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.slab .pc-tilt { transform: none; }
.slab-gloss { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 45%, rgba(255,255,255,.04) 55%, transparent 70%); background-size: 250% 250%;
  background-position: var(--mx, 50%) var(--my, 50%); }

.pcard.hype.flipped .pc-back { box-shadow: 0 0 2.5em .4em var(--rc), 0 0 0 .12em var(--rc); animation: back-pulse 1.1s ease-in-out infinite; }

/* surface wear shows most where the light hits it */
.pc-surf { inset: 0; z-index: 7; background-size: 100% 100%; pointer-events: none; opacity: calc(.5 + var(--act) * .5);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.3) 100%);
  mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.3) 100%); }

/* A second copy of the cut-out subject that can sit ABOVE the full-card foil
   (Prismatic/Gold/Obsidian) so the subject isn't washed out. Off by default;
   the fx-* classes switch treatments on. */
.pc-subjtop { inset: 1em; z-index: 6; border-radius: .75em; overflow: hidden; pointer-events: none; display: none;
  transform: translate(calc(var(--cx) * .42em), calc(var(--cy) * .42em)); }
.pc-subjtop > div { position: absolute; }
.fx-clean .pc-subjtop, .fx-soft .pc-subjtop, .fx-spot .pc-subjtop { display: block; }
.fx-soft .pc-subjtop { opacity: .7; }
.fx-spot .pc-subjtop { opacity: .8; }
.fx-tone { --hw: .5 !important; }
.fx-spot .pc-foil, .fx-spot .pc-shine, .fx-spot .pc-holo, .fx-spot .pc-rshine {
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.06) 65%);
  mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.06) 65%); }

/* Default (option C): on full-card foils the subject gets ~30% of the shine,
   background and frame keep all of it. Galaxy/Holo/Reverse already shine behind
   the subject; Obsidian is mono with a faint sheen, so they need no change. */
.f-prismatic .pc-subjtop, .f-gold .pc-subjtop { display: block; opacity: .7; }
.pcard.fx-clean .pc-subjtop { opacity: 1; }

/* ---------- card types: each has its own frame treatment ---------- */
.pc-type { display: inline-flex; align-items: center; gap: .45em; }
.pc-type .ti { width: 1.25em; height: 1.25em; fill: currentColor; opacity: .85; }
/* Moment: film-strip perforations along the art window */
.t-moment .pc-window::before, .t-moment .pc-window::after { content: ''; position: absolute; left: 0; right: 0; height: .9em; z-index: 4; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(5,6,12,.92) 0 .2em, transparent .22em) 0 0 / 1.1em 100% repeat-x, rgba(5,6,12,.55); }
.t-moment .pc-window::before { top: 0; } .t-moment .pc-window::after { bottom: 0; }
.t-moment.l-fullart .pc-window::before { top: 3.9em; } .t-moment.l-fullart .pc-window::after { bottom: 9em; }
/* Venue: arched, panoramic window */
.t-venue .pc-window { border-radius: 7em 7em .5em .5em / 3.2em 3.2em .5em .5em; }
.t-venue.l-fullart .pc-window { border-radius: .75em; }
/* Item: cut corners + a faint hex weave behind the text panel */
.t-item .pc-window { border-radius: 0; clip-path: polygon(1.2em 0, calc(100% - 1.2em) 0, 100% 1.2em, 100% calc(100% - 1.2em), calc(100% - 1.2em) 100%, 1.2em 100%, 0 calc(100% - 1.2em), 0 1.2em); }
.t-item.l-fullart .pc-window { clip-path: none; }
.t-item .pc-inner { background:
  radial-gradient(circle, rgba(255,255,255,.035) 0 .12em, transparent .14em) 0 0 / 1em 1.7em,
  radial-gradient(circle, rgba(255,255,255,.035) 0 .12em, transparent .14em) .5em .85em / 1em 1.7em,
  linear-gradient(180deg, #121624, #0a0c14 60%, #10121c); }

/* ---------- traits ---------- */
.pc-traits { display: flex; gap: .3em; flex-wrap: wrap; padding: 0 .2em; }
.pc-traits span { font-size: .48em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .28em .7em; border-radius: 1em;
  color: color-mix(in srgb, var(--rc) 70%, #fff); background: color-mix(in srgb, var(--rc) 16%, transparent); box-shadow: inset 0 0 0 .1em color-mix(in srgb, var(--rc) 45%, transparent); }

/* ---------- versions: Alt Art + Signed ---------- */
.pc-vtag { top: 8.2em; left: 2em; z-index: 6; font-size: .5em; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; padding: .3em .7em; border-radius: 1em;
  background: rgba(8,9,16,.82); color: #fff; box-shadow: inset 0 0 0 .12em color-mix(in srgb, var(--rc) 80%, #fff); }
.v-signed .pc-vtag { background: linear-gradient(90deg, #1b1306, #3a2a08); color: #ffe39a; box-shadow: inset 0 0 0 .12em #f5c84c; }
.pc-sign { left: 0; right: 0; top: 12.2em; height: 7em; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; transform: rotate(-9deg); }
.l-fullart .pc-sign { top: 14em; }
.pc-sign span { font-family: 'Mr Dafoe', 'Brush Script MT', cursive; font-size: 3.1em; line-height: 1; color: var(--ink); white-space: nowrap; max-width: 92%; overflow: hidden;
  text-shadow: 0 .03em 0 rgba(0,0,0,.45), 0 0 .2em color-mix(in srgb, var(--ink) 35%, transparent); }

/* ---------- animated art layer ----------
   Particle designs are drawn by anim.js on a canvas at the card's real pixel
   size; God rays is CSS (two slowly turning conic gradients). */
.pc-anim { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.pc-anim i, .pc-anim b { position: absolute; display: none; }

/* canvas designs (anim.js): screen-blended over the art */
.pc-anim canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; mix-blend-mode: screen; }

/* God rays: soft beams of light from above, slowly turning */
.a-rays i:nth-child(1), .a-rays i:nth-child(2) { display: block; left: 50%; top: -8%; width: 64em; height: 64em; margin: -32em 0 0 -32em; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 18%, transparent 46%); mask-image: radial-gradient(circle, #000 0, rgba(0,0,0,.6) 18%, transparent 46%); }
.a-rays i:nth-child(1) { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 30%, rgba(255,255,255,.55)) 0deg, rgba(255,255,255,0) 7deg, rgba(255,255,255,0) 16deg, color-mix(in srgb, var(--rc) 30%, rgba(255,255,255,.55)) 23deg); opacity: .5; animation: an-spin 70s linear infinite; }
.a-rays i:nth-child(2) { background: repeating-conic-gradient(from 8deg, rgba(255,255,255,.35) 0deg, rgba(255,255,255,0) 3deg, rgba(255,255,255,0) 9deg, rgba(255,255,255,.35) 12deg); opacity: .28; animation: an-spin 110s linear infinite reverse; }
@keyframes an-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .pc-anim i, .pc-anim b, .pb-anim { animation: none !important; } }

/* ---------- per-set card backs ---------- */
.pc-back { background: radial-gradient(circle at 50% 45%, var(--b1, #1f2a5c), color-mix(in srgb, var(--b2, #0a0e24) 85%, #000) 60%, #05060f); }
.pc-back::before { border-color: var(--ba, #c9a24a); box-shadow: inset 0 0 0 .3em var(--b2, #0a0e24), inset 0 0 0 .42em color-mix(in srgb, var(--ba, #c9a24a) 50%, transparent); }
.pb-logo svg path { fill: var(--ba, #f2c14e); }
.pb-logo div { color: color-mix(in srgb, var(--ba, #f6d77a) 80%, #fff); }
.pb-img { width: 9em; max-height: 9em; object-fit: contain; }
.pb-rays { background: repeating-conic-gradient(from 0deg at 50% 45%, color-mix(in srgb, var(--ba, #fff) 14%, transparent) 0 5deg, transparent 5deg 15deg) !important; }
.pb-grid { background: linear-gradient(color-mix(in srgb, var(--ba, #8af) 12%, transparent) .06em, transparent .06em) 0 0 / 1.6em 1.6em, linear-gradient(90deg, color-mix(in srgb, var(--ba, #8af) 12%, transparent) .06em, transparent .06em) 0 0 / 1.6em 1.6em !important; }
.pb-waves { background: repeating-radial-gradient(ellipse 140% 60% at 50% 120%, color-mix(in srgb, var(--ba, #8af) 14%, transparent) 0 .15em, transparent .15em 1.2em) !important; }
.pb-diamonds { background: conic-gradient(from 45deg at 50% 50%, color-mix(in srgb, var(--ba, #fff) 8%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--ba, #fff) 8%, transparent) 0 75%, transparent 0) 0 0 / 2em 2em !important; }
.pb-anim { position: absolute; inset: -30%; background: conic-gradient(from 0deg at 50% 50%, transparent 0 70%, color-mix(in srgb, var(--ba, #fff) 22%, transparent) 80%, transparent 90%); animation: pb-spin 7s linear infinite; mix-blend-mode: screen; }
@keyframes pb-spin { to { transform: rotate(360deg); } }
/* the void has no holo, so a Prime Obsidian keeps its badge but not the foil starburst */


/* Black Label: perfect 10 subgrades. Black label, gold type, a gold edge on the case. */
.slab.black { box-shadow: inset 0 0 0 2px rgba(240,200,110,.55), inset 0 0 0 calc(var(--w) * .02) rgba(255,255,255,.05), 0 0 2.2em -0.4em rgba(240,200,110,.55), 0 1.2em 2.6em rgba(0,0,0,.55); }
.slab.black .slab-label { background: linear-gradient(180deg, #17171b, #050506); color: #f1d38a; border-color: #d4af5a; }
.slab.black .sl-brand, .slab.black .sl-gname { color: #f1d38a; letter-spacing: .22em; }
.slab.black .sl-line, .slab.black .sl-cert { color: #b9a578; }
.slab.black .sl-grade { background: linear-gradient(180deg, #fff2c4, #d4af5a 60%, #9a7420); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Only the card you are looking at animates: the reveal stack's lower cards,
   and the spinning glow on a card back while its front is showing, sit still. */
.stack .slot:not(.cur) .pcard.idle { animation: none; }
.pcard:not(.flipped):not(.back-only) .pb-anim { animation: none; display: none; }