/* Soul Bits Cards: card faces, the 3D viewer and the booster pack opening.
   Vendored from RPBot, with cards.js and the
   three pictures in assets/ (frame.webp, back.webp, pack.webp).

   A card is a stack of layers, bottom to top:
     background   the character's own profile background (its image, over a gradient of its colours)
     art          the full-body image
     frame        assets/frame.webp: the gold-and-navy frame with the name box
     finish       the Holo / Polychrome shine, over everything
     name         set inside the frame's name box
   Everything is sized by the card's own width (cqw), so one design works at every size.

   Cost rules this file follows:
   - The expensive parts (blend modes, animation, drop shadows) only apply to a card with .live,
     which is only ever the card being looked at in the viewer or the pack reveal. Cards in the
     grid get a flat, static version of the same finish.
   - Nothing animates on its own unless it is on screen and .live. */

@property --sb-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ------------------------------------------------------------------ card face */
.sbc {
  --h: 220;                                   /* a hue from the id, used only when the character set no colours */
  --c1: #1e1f22; --c2: #5865f2; --c3: #e6a85c; /* the character's profile colours, set per card */
  --mx: 50%; --my: 38%; --tx: 0; --ty: 0; --ma: 0deg; /* where the light is, set by the viewer */
  position: relative; display: block; width: 100%; aspect-ratio: 710 / 992;
  container-type: inline-size; isolation: isolate; overflow: hidden;
  border-radius: 3.1% / 2.2%;                  /* the same corner as the frame picture */
  color: #fff; user-select: none; -webkit-user-select: none; background: #0b0a1e;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
.sbc-bg, .sbc-frame, .sbc-fx, .sbc-fx2, .sbc-glare { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sbc-bg {
  background-color: var(--c1);
  background-image:
    radial-gradient(ellipse 85% 55% at 50% 36%, color-mix(in srgb, var(--c2) 78%, transparent) 0%, transparent 72%),
    radial-gradient(ellipse 70% 35% at 50% 92%, color-mix(in srgb, var(--c3) 45%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--c1) 70%, #fff 0%) 0%, color-mix(in srgb, var(--c1) 55%, #000) 100%);
  background-size: cover; background-position: center;
}
/* A character with no usable background gets a backdrop of its own: a nebula and a field of real stars
   (four-point sparkles and soft points, from assets/stars.webp and nebula.webp), tinted with the
   character's profile colours, with a warm glow where the character stands. */
.sbc.plain .sbc-bg {
  background-color: var(--c1);
  background-image:
    url("assets/stars.webp"),
    url("assets/nebula.webp"),
    radial-gradient(ellipse 90% 55% at 50% 34%, color-mix(in srgb, var(--c2) 85%, transparent) 0%, transparent 74%),
    radial-gradient(ellipse 80% 38% at 50% 100%, color-mix(in srgb, var(--c3) 60%, transparent) 0%, transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--c1) 50%, #000) 0%, var(--c1) 100%);
  background-size: 100% 100%, 100% 100%, auto, auto, auto;
  background-blend-mode: normal, overlay, normal, normal, normal;
}
/* the full-body picture stands on the bottom of the frame's opening */
.sbc-art {
  position: absolute; left: 3.9%; width: 92.4%; top: 1.9%; height: 89.3%;
  object-fit: contain; object-position: center bottom;
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
.sbc.live .sbc-art { filter: drop-shadow(0 1.4cqw 1.6cqw rgba(0, 0, 0, .5)); }
.sbc.noimg .sbc-art { display: none; }
.sbc-frame { object-fit: fill; -webkit-user-drag: none; }

/* the name sits in the frame's name box: 21% to 79% across, about 94% of the way down */
.sbc-plate {
  position: absolute; left: 22.5%; width: 55%; top: 91.4%; height: 5.7%;
  display: grid; place-items: center; pointer-events: none;
}
.sbc-name {
  display: block; max-width: 100%; text-align: center; white-space: nowrap;
  font-size: calc(var(--fs, 5) * 1cqw); line-height: 1.06; font-weight: 600; font-variant: small-caps; letter-spacing: .06em;
  color: #f7ecc8; text-shadow: 0 .25cqw 0 rgba(0, 0, 0, .65), 0 0 1.4cqw rgba(0, 0, 0, .6);
}
.sbc-name > span { display: block; }

/* ------------------------------------------------------------ finish effects */
/* Both finishes live in the BACKGROUND: they sit above the character's background and below the
   full-body art and the frame, so the character and the name stay clean and true to colour.
   A detailed background picture is softened under either finish so the effect reads clearly. */
.sbc-fx, .sbc-fx2, .sbc-glare { display: none; }

.sbc:not(.plain):not([data-finish="normal"]) .sbc-bg { filter: blur(1.1cqw); transform: scale(var(--bg-scale, 1.1)); }

/* HOLO: cool prismatic foil. Aqua, periwinkle, lavender and pearl: no warm colours, so it never
   looks like a Polychrome. In the grid it is a still band over a fine halftone. */
.sbc[data-finish="holo"] .sbc-fx {
  display: block; opacity: .5;
  background: linear-gradient(115deg, transparent 16%, rgba(125, 249, 255, .55) 32%, rgba(199, 166, 255, .55) 48%, rgba(138, 180, 255, .55) 62%, rgba(244, 239, 255, .5) 70%, transparent 82%);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 34%); -webkit-mask-size: 2cqw 2cqw;
          mask-image: radial-gradient(circle, #000 30%, transparent 34%);         mask-size: 2cqw 2cqw;
}

/* POLYCHROME: cut crystal. A faceted prism (assets/facets.webp) lit by the full spectrum, so every
   facet shows a different colour and they change as the card tilts. In the grid it is the same
   facets under a still spectrum. */
.sbc[data-finish="polychrome"] .sbc-fx {
  display: block; opacity: .62;
  background-image: url("assets/facets.webp"), conic-gradient(from 200deg at 50% 40%, #ff4d6d, #ffb347, #f6f06a, #4dffb0, #4db8ff, #a06bff, #ff4dc4, #ff4d6d);
  background-size: 100% 100%, 100% 100%;
  background-blend-mode: hard-light;
}

/* LIVE: the card being looked at. Light follows the pointer; real blending. */
.sbc.live[data-finish="holo"] .sbc-fx {
  /* a smooth prismatic band that sweeps across as the card tilts */
  opacity: .95; mix-blend-mode: hard-light;
  background: repeating-linear-gradient(112deg, #7df9ff 0%, #8ab4ff 9%, #c7a6ff 18%, #f4efff 24%, #7dffd9 32%, #7df9ff 40%);
  background-size: 300% 300%; background-position: var(--mx) var(--my);
  -webkit-mask-image: linear-gradient(112deg, transparent calc(var(--mx) - 52%), #000 var(--mx), transparent calc(var(--mx) + 52%));
  -webkit-mask-size: auto;
          mask-image: linear-gradient(112deg, transparent calc(var(--mx) - 52%), #000 var(--mx), transparent calc(var(--mx) + 52%));
          mask-size: auto;
}
/* ...and a fine halftone that only shows near the light */
.sbc.live[data-finish="holo"] .sbc-fx2 {
  display: block; opacity: .55; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0 28%, transparent 32%); background-size: 1.7cqw 1.7cqw;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .35) 38%, transparent 66%);
          mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .35) 38%, transparent 66%);
}
.sbc.live[data-finish="polychrome"] .sbc-fx {
  opacity: .56; mix-blend-mode: hard-light;
  /* the facets slide a little against the spectrum as the card tilts, so each one flashes its own colour */
  background-image: url("assets/facets.webp"), conic-gradient(from calc(var(--ma, 0deg) + var(--sb-ang)) at var(--mx) var(--my), #ff4d6d, #ffb347, #f6f06a, #4dffb0, #4db8ff, #a06bff, #ff4dc4, #ff4d6d);
  background-size: 114% 114%, 100% 100%;
  background-position: calc(50% + var(--tx) * 5%) calc(50% + var(--ty) * 5%), 0 0;
  animation: sbc-spin 16s linear infinite;
}
@keyframes sbc-spin { to { --sb-ang: 360deg; } }
/* thin bright glints along the facet edges, only near the light */
.sbc.live[data-finish="polychrome"] .sbc-fx2 {
  display: block; opacity: .95; mix-blend-mode: screen;
  background: url("assets/edges.webp") calc(50% - var(--tx) * 5%) calc(50% - var(--ty) * 5%) / 114% 114% no-repeat;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .5) 35%, transparent 72%);
          mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .5) 35%, transparent 72%);
}
.sbc.live .sbc-glare {
  display: block; mix-blend-mode: overlay; opacity: .6;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .12) 34%, transparent 58%);
}
/* the background and the character shift a little against each other: depth */
.sbc.live .sbc-bg { transform: translate(calc(var(--tx) * -1.4cqw), calc(var(--ty) * -1.4cqw)) scale(var(--bg-scale, 1.06)); }
.sbc.live .sbc-art { transform: translate(calc(var(--tx) * .8cqw), calc(var(--ty) * .5cqw)); }

/* GILDED: gold foil. Warm metal with an engraved diamond lattice that catches the light. */
.sbc[data-finish="gilded"] .sbc-fx {
  display: block; opacity: .6;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 236, 170, .34) 0 .25cqw, transparent .25cqw 1.5cqw),
    repeating-linear-gradient(-45deg, rgba(255, 236, 170, .24) 0 .25cqw, transparent .25cqw 1.5cqw),
    linear-gradient(135deg, #5c3d08 0%, #d9ae45 22%, #8f6216 42%, #ecc96a 58%, #84570f 78%, #d4aa44 100%);
}
.sbc.live[data-finish="gilded"] .sbc-fx {
  opacity: .78; mix-blend-mode: hard-light;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 236, 170, .16) 0 .25cqw, transparent .25cqw 1.5cqw),
    repeating-linear-gradient(-45deg, rgba(255, 236, 170, .12) 0 .25cqw, transparent .25cqw 1.5cqw),
    linear-gradient(135deg, #7a5410 0%, #f2d36b 22%, #b5832a 42%, #fff1b0 58%, #a8761f 78%, #e9c86a 100%);
  background-size: auto, auto, 240% 240%; background-position: 0 0, 0 0, var(--mx) var(--my);
}
.sbc.live[data-finish="gilded"] .sbc-fx2 {
  display: block; opacity: .95; mix-blend-mode: screen;
  background-image:
    radial-gradient(ellipse 30% 14% at var(--mx) var(--my), rgba(255, 250, 220, .85), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 246, 200, .9) 0 .2cqw, transparent .2cqw 1.5cqw),
    repeating-linear-gradient(-45deg, rgba(255, 246, 200, .9) 0 .2cqw, transparent .2cqw 1.5cqw);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .35) 40%, transparent 70%);
          mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .35) 40%, transparent 70%);
}

/* AURORA: northern-lights curtains in green, teal, violet and pink, drifting slowly. */
@property --sway { syntax: '<number>'; inherits: false; initial-value: 0; }
.sbc[data-finish="aurora"] .sbc-fx {
  display: block; opacity: .75;
  background-image:
    radial-gradient(ellipse 17% 72% at 28% 38%, rgba(93, 255, 176, .85), transparent 70%),
    radial-gradient(ellipse 22% 82% at 50% 34%, rgba(63, 208, 216, .75), transparent 70%),
    radial-gradient(ellipse 16% 66% at 72% 44%, rgba(165, 107, 255, .75), transparent 70%),
    radial-gradient(ellipse 13% 56% at 88% 38%, rgba(255, 107, 208, .6), transparent 70%);
}
.sbc.live[data-finish="aurora"] .sbc-fx {
  opacity: .92; mix-blend-mode: screen;
  background-position: calc((var(--tx) * -3 + var(--sway) * 5) * 1cqw) 0, calc((var(--tx) * -2 - var(--sway) * 4) * 1cqw) 0, calc((var(--tx) * -4 + var(--sway) * 3) * 1cqw) 0, calc((var(--tx) * -1 - var(--sway) * 5) * 1cqw) 0;
  animation: sbc-sway 9s ease-in-out infinite alternate;
}
@keyframes sbc-sway { from { --sway: -1; } to { --sway: 1; } }
.sbc.live[data-finish="aurora"] .sbc-fx2 {
  display: block; opacity: .55; mix-blend-mode: screen;
  background: repeating-linear-gradient(90deg, transparent 0 1.1cqw, rgba(210, 255, 240, .5) 1.1cqw 1.3cqw);
  background-position: calc(var(--tx) * -3cqw) 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 58%, transparent 92%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 58%, transparent 92%);
}

/* COSMIC: deep space behind the character. A violet and teal nebula and a field of sparkles that drift
   against each other as the card tilts. */
.sbc[data-finish="cosmic"] .sbc-fx {
  display: block; opacity: .96;
  background-image:
    url("assets/stars.webp"),
    conic-gradient(from 205deg at 52% 46%, transparent 0deg, rgba(255, 80, 200, .55) 42deg, transparent 100deg, rgba(0, 225, 255, .5) 172deg, transparent 232deg, rgba(150, 90, 255, .6) 292deg, transparent 352deg),
    url("assets/nebula.webp"),
    radial-gradient(ellipse 70% 50% at 24% 24%, rgba(130, 80, 255, .85), transparent 70%),
    radial-gradient(ellipse 60% 46% at 80% 72%, rgba(0, 200, 255, .65), transparent 70%),
    linear-gradient(rgba(6, 3, 30, .86), rgba(14, 6, 48, .86));
  background-size: 100% 100%, 100% 100%, 100% 100%, auto, auto, auto;
  background-blend-mode: normal, normal, overlay, normal, normal, normal;
}
.sbc.live[data-finish="cosmic"] .sbc-fx { background-size: 112% 112%, 100% 100%, 100% 100%, auto, auto, auto; background-position: calc(50% + var(--tx) * 4%) calc(50% + var(--ty) * 4%), 0 0, 0 0, 0 0, 0 0, 0 0; }
.sbc.live[data-finish="cosmic"] .sbc-fx2 {
  display: block; opacity: .85; mix-blend-mode: screen;
  background: url("assets/stars.webp") calc(50% - var(--tx) * 8%) calc(50% - var(--ty) * 8%) / 150% 150% no-repeat;
  animation: sbc-twinkle 3.4s ease-in-out infinite alternate;
}
@keyframes sbc-twinkle { from { opacity: .35; } to { opacity: .95; } }

/* CLEARCOAT: every card, front and back, has a light sheen like a mint, laminated card: a soft diagonal
   gloss, a bright top edge and a darker bottom edge. While a card is being looked at, a faint band of
   light also slides across it with the pointer. */
.sbc-sheen {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 20%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 64%, rgba(255, 255, 255, .06) 82%, rgba(255, 255, 255, .13) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 90%, rgba(0, 0, 0, .12) 100%);
  box-shadow: inset 0 0 0 .22cqw rgba(255, 255, 255, .22), inset 0 .5cqw .7cqw -.2cqw rgba(255, 255, 255, .5), inset 0 -.6cqw 1cqw -.4cqw rgba(0, 0, 0, .35);
}
.sbc.live .sbc-sheen::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: overlay;
  background: linear-gradient(105deg, transparent calc(var(--mx) - 24%), rgba(255, 255, 255, .26) var(--mx), transparent calc(var(--mx) + 24%));
}

/* ------------------------------------------------------------------ card back */
.sbc.back { background: #0b0a1e url("assets/back.webp") center / 100% 100% no-repeat; }

/* ------------------------------------------------------------------- 3D rig */
.sbr {
  --cw: 280px; position: relative; width: var(--cw); aspect-ratio: 710 / 992; transform-style: preserve-3d; will-change: transform;
}
.sbr-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: calc(var(--cw) * .031) / calc(var(--cw) * .0308); overflow: hidden; }
.sbr-front { transform: translateZ(1.6px); }
.sbr-back { transform: rotateY(180deg) translateZ(1.6px); }
.sbr-slab { position: absolute; inset: 0; border-radius: calc(var(--cw) * .031) / calc(var(--cw) * .0308); background: #d8c9a0; }
.sbr-slab:nth-child(1) { transform: translateZ(-1.1px); }
.sbr-slab:nth-child(2) { transform: translateZ(0); }
.sbr-slab:nth-child(3) { transform: translateZ(1.1px); }

/* ------------------------------------------------------------------- viewer */
.sbv {
  position: fixed; inset: 0; z-index: 10010; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center;
  padding: 20px 16px 18px; color: #fff; overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, hsl(var(--vh, 230) 60% 22% / .96) 0%, rgba(8, 7, 18, .97) 72%);
  animation: sbv-in .28s ease both;
}
.sbv.closing { animation: sbv-out .18s ease both; }
@keyframes sbv-in { from { opacity: 0; } }
@keyframes sbv-out { to { opacity: 0; } }
.sbv-stage {
  position: relative; width: 100%; max-width: 760px; min-height: 0; display: grid; place-items: center;
  perspective: 1300px; touch-action: none; cursor: grab;
}
.sbv-stage.dragging { cursor: grabbing; }
.sbv-stage .sbr { --cw: min(78vw, 400px, calc((100vh - 250px) * .7157)); }
.sbv-shadow {
  position: absolute; left: 50%; bottom: 3%; width: calc(var(--cw, 300px) * .9); height: 26px; margin-left: calc(var(--cw, 300px) * -.45);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, .55), transparent 70%); pointer-events: none;
}
.sbv-info { display: grid; justify-items: center; gap: 8px; padding-top: 10px; text-align: center; max-width: 92vw; }
.sbv-info h2 { margin: 0; font: 600 20px/1.2 "Iowan Old Style", Palatino, Georgia, serif; overflow-wrap: anywhere; }
.sbv-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sbv-chip, .sbv-btn {
  appearance: none; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
  border-radius: 999px; padding: 6px 13px; font: 600 13px/1.2 system-ui, sans-serif;
}
.sbv-chip[aria-pressed="true"] { background: #fff; color: #14112b; border-color: #fff; }
.sbv-chip:hover, .sbv-btn:hover { background: rgba(255, 255, 255, .18); }
.sbv-chip[aria-pressed="true"]:hover { background: #fff; }
.sbv-btn.primary { background: #5865f2; border-color: #5865f2; }
.sbv-btn.primary:hover { background: #4752c4; }
.sbv-hint { margin: 0; font-size: 12.5px; opacity: .68; }
.sbv-close, .sbv-nav {
  position: absolute; z-index: 2; appearance: none; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35); color: #fff;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.sbv-close { top: 14px; right: 14px; }
.sbv-nav.prev { left: 14px; top: 42%; } .sbv-nav.next { right: 14px; top: 42%; }
.sbv-close:hover, .sbv-nav:hover { background: rgba(255, 255, 255, .22); }
.sbv-close svg, .sbv-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sbv button:focus-visible, .sbp button:focus-visible { outline: 3px solid #8ab4ff; outline-offset: 2px; }

/* -------------------------------------------------------------- pack opening */
.sbp {
  position: fixed; inset: 0; z-index: 10005; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center;
  padding: 18px 16px 20px; color: #fff; overflow: hidden; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(ellipse 80% 65% at 50% 45%, #2a1d6b 0%, #120e33 55%, #07060f 100%);
  animation: sbv-in .3s ease both;
}
.sbp.closing { animation: sbv-out .18s ease both; }
.sbp-head { text-align: center; min-height: 44px; }
.sbp-head h2 { margin: 0; font: 600 20px/1.2 "Iowan Old Style", Palatino, Georgia, serif; }
.sbp-head p { margin: 4px 0 0; font-size: 13.5px; opacity: .75; }
.sbp-close { position: absolute; top: 14px; right: 14px; appearance: none; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35); color: #fff; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; padding: 0; z-index: 3; }
.sbp-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sbp-close:hover { background: rgba(255, 255, 255, .22); }
.sbp-stage { position: relative; width: 100%; max-width: 900px; min-height: 0; display: grid; place-items: center; perspective: 1300px; }
.sbp-foot { display: grid; justify-items: center; gap: 10px; min-height: 44px; }
.sbp-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sbp-msg { margin: 0; font-size: 13.5px; min-height: 1.3em; text-align: center; max-width: 80vw; }
.sbp-msg.error { color: #ffb4b4; }

/* the pack itself: the artwork in assets/pack.webp, cut into the strip that tears off and the rest */
.sbp-pack {
  --pw: min(310px, 58vw, calc((100vh - 230px) * .5953)); position: relative; width: var(--pw); aspect-ratio: 587 / 986; touch-action: none; user-select: none; -webkit-user-select: none;
  animation: sbp-float 3.4s ease-in-out infinite; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55));
}
@keyframes sbp-float { 50% { transform: translateY(-7px) rotate(.6deg); } }
.sbp-pack.tearing { animation: none; }
.sbp-pack.shake { animation: sbp-shake .18s linear infinite; }
@keyframes sbp-shake { 25% { transform: translate(2px, -1px) rotate(.4deg); } 75% { transform: translate(-2px, 1px) rotate(-.4deg); } }
.sbp-body, .sbp-top { position: absolute; inset: 0; background: url("assets/pack.webp") center / 100% 100% no-repeat; }
.sbp-body { clip-path: inset(8.4% 0 0 0); }
.sbp-top { clip-path: inset(0 0 91.6% 0); transform-origin: 0 8.4%; transition: transform .7s cubic-bezier(.3, .7, .2, 1), opacity .7s ease; }
.sbp-pack.torn .sbp-top { transform: translate(34%, -180%) rotate(28deg); opacity: 0; }
.sbp-seam { position: absolute; left: 3%; right: 3%; top: 8.4%; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 6px, transparent 6px 11px); opacity: .85; z-index: 2; }
.sbp-rip { position: absolute; left: 3%; top: 8.4%; height: 4px; width: 0; margin-top: -1px; z-index: 3; background: linear-gradient(90deg, #fff, #ffe9a6); box-shadow: 0 0 12px 3px rgba(255, 233, 166, .9); border-radius: 3px; }
.sbp-zone { position: absolute; left: -14%; right: -14%; top: -3%; height: 17%; z-index: 4; cursor: ew-resize; }
.sbp-burst { position: absolute; left: 50%; top: 40%; width: 10px; height: 10px; border-radius: 50%; z-index: 1; opacity: 0; pointer-events: none; }
.sbp-pack.torn .sbp-burst { animation: sbp-burst .9s ease-out both; }
@keyframes sbp-burst { 0% { opacity: 1; box-shadow: 0 0 0 0 #fff, 0 0 0 0 rgba(255, 220, 140, .8); } 100% { opacity: 0; box-shadow: 0 0 0 120px rgba(255, 255, 255, 0), 0 0 90px 160px rgba(255, 220, 140, 0); } }
.sbp-pack.gone { opacity: 0; transform: scale(.9); transition: opacity .35s ease, transform .35s ease; animation: none; }

/* the stack of cards and the one being revealed */
.sbp-stack { position: relative; width: var(--sbp-cw); height: calc(var(--sbp-cw) * 1.3972); --sbp-cw: min(300px, 70vw, calc((100vh - 270px) * .7157)); }
.sbp-slot { position: absolute; inset: 0; transition: transform .5s cubic-bezier(.3, .7, .2, 1), opacity .4s ease; cursor: pointer; }
.sbp-slot { perspective: 1300px; transform: translate(calc(min(var(--i, 0), 4) * 3px), calc(min(var(--i, 0), 4) * -3px)); }
.sbp-slot .sbr { --cw: var(--sbp-cw); position: absolute; left: 0; top: 0; }
.sbp-slot.up { transform: translate(-130%, -6%) rotate(-10deg) scale(.55); opacity: 0; pointer-events: none; }
.sbp-slot:focus-visible { outline: 2px solid rgba(138, 180, 255, .55); outline-offset: 10px; border-radius: 22px; }
.sbp-slot.back-card { cursor: default; }
.sbp-tray { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: flex-end; min-height: 74px; max-width: 92vw; }
.sbp-thumb { width: 46px; flex: none; animation: sbp-thumb .35s ease both; }
@keyframes sbp-thumb { from { transform: translateY(14px) scale(.6); opacity: 0; } }
.sbp-dots { display: flex; gap: 6px; }
.sbp-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.sbp-dots i.on { background: #fff; }
.sbp-flash { position: fixed; inset: 0; z-index: 10006; pointer-events: none; opacity: 0; }
.sbp-flash.holo { animation: sbp-flash 1s ease-out both; background: linear-gradient(115deg, rgba(125, 249, 255, 0) 20%, rgba(138, 180, 255, .55) 38%, rgba(199, 166, 255, .6) 50%, rgba(244, 239, 255, .55) 62%, rgba(125, 249, 255, 0) 80%); background-size: 260% 100%; }
.sbp-flash.polychrome { animation: sbp-flash-poly 1.5s ease-out both; background: radial-gradient(circle at 50% 46%, #fff 0%, rgba(255, 190, 255, .75) 22%, rgba(120, 90, 255, .4) 48%, transparent 72%); }
@keyframes sbp-flash { 0% { opacity: 0; background-position: 120% 0; } 15% { opacity: 1; } 100% { opacity: 0; background-position: -20% 0; } }
@keyframes sbp-flash-poly { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.sbp-spark { position: fixed; z-index: 10007; width: 7px; height: 7px; margin: -3px 0 0 -3px; background: #fff; transform: rotate(45deg); pointer-events: none; animation: sbp-spark 1.1s ease-out both; box-shadow: 0 0 8px 2px var(--sc, #fff); }
@keyframes sbp-spark { to { transform: translate(var(--dx), var(--dy)) rotate(225deg) scale(.2); opacity: 0; } }
.sbp-finishtag { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; font: 700 13px/1 system-ui, sans-serif; letter-spacing: .04em; white-space: nowrap; animation: sbp-tag .5s ease both; }
.sbp-finishtag.holo { background: linear-gradient(90deg, #ff9ad0, #ffe07a, #7dffd8, #84c4ff); color: #14112b; }
.sbp-finishtag.polychrome { background: linear-gradient(90deg, #ff4d6d, #ffb347, #4dffb0, #4db8ff, #a06bff, #ff4dc4); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
@keyframes sbp-tag { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.8); } }

/* the summary */
.sbp-summary { width: 100%; max-height: 100%; overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 150px)); gap: 16px; justify-content: center; align-content: center; padding: 14px 10px 12px; }
.sbp-summary button { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; position: relative; color: inherit; }
.sbp-summary .sbc { transition: transform .15s ease; }
.sbp-summary button:hover .sbc { transform: translateY(-4px); }
.sbp-new { position: absolute; z-index: 2; top: -7px; left: -7px; background: #ffd34d; color: #2a2000; font: 800 11px/1 system-ui, sans-serif; letter-spacing: .06em; padding: 4px 7px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }

@media (prefers-reduced-motion: reduce) {
  .sbc.live[data-finish="polychrome"] .sbc-fx, .sbc.live[data-finish="aurora"] .sbc-fx, .sbc.live[data-finish="cosmic"] .sbc-fx2, .sbp-pack, .sbp-body, .sbp-top { animation: none; }
  .sbp-slot, .sbp-top { transition-duration: .01s; }
  .sbp-flash, .sbp-spark { display: none; }
}
.sbv:focus, .sbp:focus { outline: none; }
.sbv-rarity { margin: 0; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; } .sbv-rarity[data-rarity="uncommon"] { color: #7dffb0; } .sbv-rarity[data-rarity="rare"] { color: #7db8ff; } .sbv-rarity[data-rarity="legendary"] { color: #ffd866; } .sbv-rarity[data-rarity="promo"] { color: #ff9aef; }

.sbp-flash.gilded { animation: sbp-flash 1s ease-out both; background: linear-gradient(115deg, rgba(255, 210, 90, 0) 20%, rgba(255, 226, 140, .6) 42%, rgba(255, 190, 70, .55) 58%, rgba(255, 210, 90, 0) 80%); background-size: 260% 100%; }
.sbp-flash.aurora { animation: sbp-flash 1.2s ease-out both; background: linear-gradient(115deg, rgba(93, 255, 176, 0) 18%, rgba(93, 255, 176, .5) 36%, rgba(63, 208, 216, .55) 50%, rgba(255, 107, 208, .5) 66%, rgba(93, 255, 176, 0) 82%); background-size: 260% 100%; }
.sbp-flash.cosmic { animation: sbp-flash-poly 1.3s ease-out both; background: radial-gradient(circle at 50% 46%, rgba(190, 160, 255, .9) 0%, rgba(110, 60, 255, .5) 30%, rgba(10, 6, 50, .7) 62%, transparent 80%); }
.sbp-finishtag.holo { background: linear-gradient(90deg, #7df9ff, #8ab4ff, #c7a6ff); color: #10123a; }
.sbp-finishtag.gilded { background: linear-gradient(90deg, #c89a2b, #ffe58a, #c89a2b); color: #2a1d00; }
.sbp-finishtag.aurora { background: linear-gradient(90deg, #3fd0a0, #5db8ff, #c46bff); color: #06201a; }
.sbp-finishtag.cosmic { background: linear-gradient(90deg, #3a1d8f, #7a4dff, #1fb5d8); color: #fff; }
.sbp-audio { position: absolute; top: 14px; right: 64px; appearance: none; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35); color: #fff; height: 42px; padding: 0 14px 0 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 system-ui, sans-serif; z-index: 3; }
.sbp-audio svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sbp-audio:hover { background: rgba(255, 255, 255, .22); }

/* a card the person does not have yet */
.sbc.back.missing::before { content: ""; position: absolute; inset: 0; background: rgba(5, 4, 18, .76); z-index: 1; }
.sbc.back.missing .sbc-sheen { opacity: .35; }
.sbc-missing { position: absolute; z-index: 2; left: 9%; right: 9%; top: 45%; height: 10%; display: grid; place-items: center; pointer-events: none; }
.sbc-missing .sbc-name { color: #cfc8ea; text-shadow: 0 .2cqw .7cqw #000; }