/* A sealed pack, as drawn by booster-pack.js. It sizes from --pack-width and
   scales everything inside from its own width, so the same wrapper works as a
   thumbnail in a list and as the pack torn open on the opening table. */
.booster-pack {
    --pack-width: 150px;
    --pack-ink: #25252d;
    --pack-a: hsl(var(--pack-hue, 280) 86% 64%);
    --pack-b: hsl(calc(var(--pack-hue, 280) + 46) 96% 79%);
    --pack-c: hsl(calc(var(--pack-hue, 280) + 180) 78% 88%);
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: var(--pack-width);
    aspect-ratio: 5 / 8;
    container-type: inline-size;
    color: var(--pack-ink);
    /* The outline and the hard shadow follow the crimped edges, which a border
       cannot. They scale with the pack; its own cqw would measure its parent. */
    --pack-line: max(1.5px, calc(var(--pack-width) * .014));
    --pack-drop: calc(var(--pack-width) * .035);
    filter: drop-shadow(var(--pack-line) 0 0 var(--pack-ink)) drop-shadow(calc(-1 * var(--pack-line)) 0 0 var(--pack-ink)) drop-shadow(0 var(--pack-line) 0 var(--pack-ink)) drop-shadow(0 calc(-1 * var(--pack-line)) 0 var(--pack-ink)) drop-shadow(var(--pack-drop) var(--pack-drop) 0 var(--pack-ink));
    transform: rotate(var(--pack-tilt, 0deg));
    user-select: none;
}
.booster-pack-face {
    --tooth: 5cqw;
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 2cqw;
    background: var(--pack-a);
    -webkit-mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x;
    mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x;
}
/* The print: one per pattern, shared by the wrapper and the backs of its cards.
   Its sizes are in cqw, so it scales with whatever it is printed on. */
[data-pack-pattern] {
    --pack-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -30 160 160'%3E%3Cpath d='M50 4 62 36 96 37 69 58 79 92 50 72 21 92 31 58 4 37 38 36Z'/%3E%3C/svg%3E");
    --pack-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -30 160 160'%3E%3Cpath d='M50 90C22 70 6 54 6 34 6 18 18 8 31 8c9 0 15 5 19 12 4-7 10-12 19-12 13 0 25 10 25 26 0 20-16 36-44 56Z'/%3E%3C/svg%3E");
}
.pack-print { position: absolute; inset: 0; overflow: hidden; background: var(--pack-a); pointer-events: none; }
.pack-print::before, .pack-print::after { content: none; position: absolute; inset: 0; }
[data-pack-pattern="sunburst"] .pack-print { background: repeating-conic-gradient(from 0deg at 50% var(--pack-burst-y, 50%), var(--pack-a) 0 11deg, var(--pack-b) 11deg 22deg); }
[data-pack-pattern="stripes"] .pack-print { background: repeating-linear-gradient(128deg, var(--pack-a) 0 9cqw, var(--pack-b) 9cqw 13cqw, var(--pack-a) 13cqw 16cqw, var(--pack-c) 16cqw 18cqw); }
[data-pack-pattern="dots"] .pack-print {
    background:
        radial-gradient(circle, var(--pack-b) 0 3.4cqw, transparent 3.7cqw) 0 0 / 14cqw 14cqw,
        radial-gradient(circle, var(--pack-c) 0 2cqw, transparent 2.3cqw) 7cqw 7cqw / 14cqw 14cqw,
        var(--pack-a);
}
[data-pack-pattern="checker"] .pack-print { background: conic-gradient(from 45deg, var(--pack-a) 25%, var(--pack-b) 0 50%, var(--pack-a) 0 75%, var(--pack-b) 0) 50% 50% / 20cqw 20cqw; }
[data-pack-pattern="zigzag"] .pack-print {
    background:
        linear-gradient(135deg, var(--pack-b) 25%, transparent 25%) -8cqw 0 / 16cqw 16cqw,
        linear-gradient(225deg, var(--pack-b) 25%, transparent 25%) -8cqw 0 / 16cqw 16cqw,
        linear-gradient(315deg, var(--pack-c) 25%, transparent 25%) 0 0 / 16cqw 16cqw,
        linear-gradient(45deg, var(--pack-c) 25%, transparent 25%) 0 0 / 16cqw 16cqw,
        var(--pack-a);
}
[data-pack-pattern="waves"] .pack-print {
    background:
        radial-gradient(circle at 50% 100%, transparent 0 4cqw, var(--pack-c) 4.2cqw 5.6cqw, var(--pack-b) 5.8cqw 8cqw, transparent 8.2cqw) 0 0 / 16cqw 8cqw,
        radial-gradient(circle at 50% 100%, transparent 0 4cqw, var(--pack-c) 4.2cqw 5.6cqw, var(--pack-b) 5.8cqw 8cqw, transparent 8.2cqw) 8cqw 4cqw / 16cqw 8cqw,
        var(--pack-a);
}
[data-pack-pattern="plaid"] .pack-print {
    background:
        repeating-linear-gradient(90deg, transparent 0 3cqw, var(--pack-c) 3cqw 4cqw, transparent 4cqw 18cqw),
        repeating-linear-gradient(0deg, transparent 0 3cqw, var(--pack-c) 3cqw 4cqw, transparent 4cqw 18cqw),
        repeating-linear-gradient(90deg, transparent 0 9cqw, color-mix(in srgb, var(--pack-b) 62%, transparent) 9cqw 16cqw, transparent 16cqw 18cqw),
        repeating-linear-gradient(0deg, transparent 0 9cqw, color-mix(in srgb, var(--pack-b) 62%, transparent) 9cqw 16cqw, transparent 16cqw 18cqw),
        var(--pack-a);
}
/* Shapes are masks, so they take the colours of the set like the gradients do. */
[data-pack-pattern="stars"] .pack-print::before, [data-pack-pattern="stars"] .pack-print::after,
[data-pack-pattern="hearts"] .pack-print::before, [data-pack-pattern="hearts"] .pack-print::after { content: ''; }
[data-pack-pattern="stars"] .pack-print::before { background: var(--pack-b); -webkit-mask: var(--pack-star) 0 0 / 18cqw 18cqw; mask: var(--pack-star) 0 0 / 18cqw 18cqw; }
[data-pack-pattern="stars"] .pack-print::after { background: var(--pack-c); -webkit-mask: var(--pack-star) 9cqw 9cqw / 18cqw 18cqw; mask: var(--pack-star) 9cqw 9cqw / 18cqw 18cqw; }
[data-pack-pattern="hearts"] .pack-print::before { background: var(--pack-b); -webkit-mask: var(--pack-heart) 0 0 / 18cqw 18cqw; mask: var(--pack-heart) 0 0 / 18cqw 18cqw; }
[data-pack-pattern="hearts"] .pack-print::after { background: var(--pack-c); -webkit-mask: var(--pack-heart) 9cqw 9cqw / 18cqw 18cqw; mask: var(--pack-heart) 9cqw 9cqw / 18cqw 18cqw; }
/* The wrapper's sunburst rises from a medallion, unless an emblem takes its place. */
.booster-pack { --pack-burst-y: 44%; }
.booster-pack[data-pack-pattern="sunburst"]:not([data-pack-emblem]) .pack-print {
    background:
        radial-gradient(circle at 50% 44%, var(--pack-c) 0 9cqw, var(--pack-ink) 9cqw 10cqw, transparent 10.2cqw),
        repeating-conic-gradient(from 0deg at 50% 44%, var(--pack-a) 0 11deg, var(--pack-b) 11deg 22deg);
}
.booster-pack-emblem {
    position: absolute;
    left: 50%;
    top: 40%;
    z-index: 1;
    width: 56cqw;
    height: 56cqw;
    overflow: visible;
    fill: var(--pack-c);
    fill-rule: evenodd;
    stroke: var(--pack-ink);
    stroke-width: 5;
    stroke-linejoin: round;
    paint-order: stroke;
    filter: drop-shadow(1.4cqw 1.4cqw 0 var(--pack-ink));
    transform: translate(-50%, -50%) rotate(-6deg);
}
.booster-pack-art { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* Heat-sealed crimps at both ends. */
.booster-pack-face::before,
.booster-pack-face::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    height: 9%;
    background: repeating-linear-gradient(90deg, rgb(255 255 255 / .34) 0 1.2cqw, rgb(37 37 45 / .18) 1.2cqw 2.6cqw), var(--pack-b);
}
.booster-pack-face::before { top: 0; border-bottom: .9cqw solid var(--pack-ink); }
.booster-pack-face::after { bottom: 0; height: 7%; border-top: .9cqw solid var(--pack-ink); }
.booster-pack-sheen {
    position: absolute;
    inset: -10% -60%;
    z-index: 3;
    background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .55) 47%, rgb(186 255 245 / .45) 50%, rgb(255 214 250 / .4) 53%, transparent 62%);
    mix-blend-mode: soft-light;
    opacity: .55;
    transform: translateX(-38%);
    pointer-events: none;
}
.booster-pack-brand {
    position: absolute;
    top: 17%;
    left: 0;
    right: 0;
    z-index: 4;
    color: white;
    font-size: 7.4cqw;
    font-weight: 1000;
    letter-spacing: .24em;
    text-align: center;
    text-indent: .24em;
    text-shadow: .7cqw .7cqw 0 var(--pack-ink), -.35cqw -.35cqw 0 var(--pack-ink), .35cqw -.35cqw 0 var(--pack-ink), -.35cqw .35cqw 0 var(--pack-ink);
}
.booster-pack-name {
    position: absolute;
    left: var(--pack-label-x, 50%);
    top: var(--pack-label-y, 60%);
    z-index: 4;
    box-sizing: border-box;
    width: 84%;
    padding: 3.5cqw 3cqw;
    border: 1.6cqw solid var(--pack-ink);
    background: #fff;
    box-shadow: 2cqw 2cqw 0 var(--pack-ink);
    font-family: var(--pack-font, inherit);
    font-size: calc(8.6cqw * var(--pack-font-scale, 1));
    font-weight: var(--pack-font-weight, 950);
    line-height: 1.08;
    text-align: center;
    overflow-wrap: anywhere;
    transform: translate(-50%, -50%) rotate(-3deg);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.booster-pack-serial {
    position: absolute;
    bottom: 11%;
    z-index: 4;
    padding: 1cqw 2.2cqw;
    border: 1.1cqw solid var(--pack-ink);
    border-radius: 2cqw;
    background: #fff;
    font-size: 5.4cqw;
    font-weight: 950;
    letter-spacing: .06em;
    line-height: 1.2;
}
.booster-pack-serial { right: 8%; font-variant-numeric: tabular-nums; }
.has-art .booster-pack-name { top: var(--pack-label-y, 76%); }
.has-art .booster-pack-serial { bottom: auto; top: 28%; }
/* What a design adds on top: a line of small text, a signature and stickers.
   booster-pack.js places each one by its centre, in percent of the wrapper. */
.booster-pack-tagline {
    position: absolute;
    z-index: 4;
    box-sizing: border-box;
    width: max-content;
    max-width: 76%;
    padding: 1.4cqw 2.8cqw;
    border: 1cqw solid var(--pack-ink);
    border-radius: 1.6cqw;
    background: #fff;
    box-shadow: 1.2cqw 1.2cqw 0 var(--pack-ink);
    font-family: var(--pack-font, inherit);
    font-size: calc(5.2cqw * var(--pack-font-scale, 1));
    font-style: normal;
    font-weight: var(--pack-font-weight, 950);
    line-height: 1.1;
    text-align: center;
    overflow-wrap: anywhere;
    transform: translate(-50%, -50%) rotate(2deg);
}
/* Signed in silver marker, so it shows on any print. */
.booster-pack-signature {
    position: absolute;
    z-index: 4;
    color: #fff;
    filter: drop-shadow(.45cqw 0 0 var(--pack-ink)) drop-shadow(-.45cqw 0 0 var(--pack-ink)) drop-shadow(0 .45cqw 0 var(--pack-ink)) drop-shadow(0 -.45cqw 0 var(--pack-ink));
    transform: translate(-50%, -50%) rotate(-7deg);
}
.booster-pack-signature .signature-ink { display: block; width: 100%; height: auto; overflow: visible; stroke-width: 7; }
.booster-pack-decal {
    position: absolute;
    z-index: 5;
    display: block;
    aspect-ratio: 1;
    /* Die-cut: a white rim around whatever shape it has, then its shadow. */
    filter: drop-shadow(.7cqw 0 0 #fff) drop-shadow(-.7cqw 0 0 #fff) drop-shadow(0 .7cqw 0 #fff) drop-shadow(0 -.7cqw 0 #fff) drop-shadow(1cqw 1cqw 0 rgb(37 37 45 / .5));
    transform: translate(-50%, -50%) rotate(var(--decal-turn, 0deg));
}
.booster-pack-decal.is-picture { aspect-ratio: auto; }
.booster-pack-decal img { display: block; width: 100%; height: auto; pointer-events: none; }
.booster-pack-decal-icon {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: var(--pack-c);
    fill-rule: evenodd;
    stroke: var(--pack-ink);
    stroke-width: 7;
    stroke-linejoin: round;
    paint-order: stroke;
}

/* A sticker slapped on the wrapper by the shop. */
.booster-pack-sticker {
    --star: polygon(50% 0, 61% 14%, 79% 7%, 80% 25%, 98% 28%, 88% 44%, 100% 58%, 83% 66%, 86% 84%, 67% 82%, 57% 99%, 45% 86%, 28% 96%, 24% 78%, 6% 76%, 13% 59%, 0 46%, 15% 35%, 9% 18%, 27% 17%, 34% 1%);
    position: absolute;
    top: -13%;
    right: -26%;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 50cqw;
    aspect-ratio: 1;
    background: var(--pack-ink);
    clip-path: var(--star);
    transform: rotate(14deg);
}
.booster-pack-sticker > span {
    display: grid;
    place-items: center;
    width: 86%;
    height: 86%;
    padding: 0 12%;
    box-sizing: border-box;
    background: #ffe76b;
    clip-path: var(--star);
    /* Always one line: the longer the word, the smaller its letters. */
    font-size: min(8.4cqw, calc(58cqw / var(--sticker-chars, 4)));
    font-weight: 1000;
    line-height: .95;
    text-align: center;
    letter-spacing: -.02em;
    white-space: nowrap;
}

/* Lively packs bob, shine and wave their stickers about. */
.booster-pack.is-lively { animation: booster-pack-bob 3.4s ease-in-out infinite; animation-delay: var(--pack-delay, 0s); }
.booster-pack.is-lively .booster-pack-sheen { animation: booster-pack-sheen 3.8s ease-in-out infinite; animation-delay: var(--pack-delay, 0s); }
.booster-pack.is-lively .booster-pack-sticker { animation: booster-pack-sticker 2.2s ease-in-out infinite; }
@keyframes booster-pack-bob {
    0%, 100% { transform: translateY(0) rotate(calc(var(--pack-tilt, 0deg) - 2deg)); }
    50% { transform: translateY(-6%) rotate(calc(var(--pack-tilt, 0deg) + 2deg)); }
}
@keyframes booster-pack-sheen {
    0%, 30% { transform: translateX(-38%); }
    70%, 100% { transform: translateX(38%); }
}
@keyframes booster-pack-sticker {
    0%, 100% { transform: rotate(14deg) scale(1); }
    50% { transform: rotate(4deg) scale(1.08); }
}

/* The opening table tears the wrapper along a jagged line: booster-opening.js
   clones the face, keeps the top above the tear and the body below it. */
.booster-pack-flap { z-index: 1; pointer-events: none; transform-origin: 100% 13%; }
/* The cards waiting inside, drawn behind the body so only what clears the tear shows. */
.booster-pack-cards { position: absolute; inset: 0; z-index: -1; }
.booster-pack-face:not(.booster-pack-flap) { z-index: 0; }
/* They wear the same print as the backs that are about to be turned over. */
.booster-pack-cards i {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 12%;
    height: 70%;
    overflow: hidden;
    border: 1.4cqw solid var(--pack-ink);
    border-radius: 4cqw;
    background: var(--pack-a);
}
.booster-pack-cards i::after { content: ''; position: absolute; inset: 3.5cqw; border: 1.4cqw solid #fff; border-radius: 3cqw; box-shadow: 0 0 0 .8cqw var(--pack-ink), inset 0 0 0 .8cqw var(--pack-ink); }
.booster-pack-cards i:nth-child(1) { transform: rotate(-7deg) translateX(-6%); }
.booster-pack-cards i:nth-child(2) { transform: rotate(5deg) translateX(5%); }
.booster-pack-cards i:nth-child(3) { transform: translateY(-4%); }

/* Mini packs in lists keep the look and drop the lettering. */
.booster-pack.is-mini { --pack-width: 40px; }
.booster-pack.is-mini :is(.booster-pack-brand, .booster-pack-serial, .booster-pack-tagline, .booster-pack-signature) { display: none; }
.booster-pack.is-mini .booster-pack-name { color: transparent; padding: 0; height: 16cqw; border-width: 3cqw; box-shadow: none; }

/* A card back belongs to the pack it came from. Its print sits on a layer
   inside the card, so cqw measures the card rather than the page. */
.card-back[data-pack-pattern] {
    --pack-ink: #25252d;
    --pack-a: hsl(var(--pack-hue, 280) 86% 64%);
    --pack-b: hsl(calc(var(--pack-hue, 280) + 46) 96% 79%);
    --pack-c: hsl(calc(var(--pack-hue, 280) + 180) 78% 88%);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    container-type: inline-size;
    gap: 4cqw;
    background: var(--pack-a);
}
.card-back[data-pack-pattern] > .pack-print { z-index: -2; }
/* A printed frame, like the border of a real card back. */
.card-back[data-pack-pattern]::after {
    content: '';
    position: absolute;
    inset: 4.5cqw;
    z-index: -1;
    border: 1.8cqw solid #fff;
    border-radius: 5cqw;
    box-shadow: 0 0 0 1.1cqw var(--pack-ink), inset 0 0 0 1.1cqw var(--pack-ink);
}
/* The medallion: the brand over the set's name, on a tilted label. */
.card-back[data-pack-pattern] b {
    display: grid;
    gap: 1.5cqw;
    max-width: 68cqw;
    padding: 4cqw 6cqw;
    border: 1.6cqw solid var(--pack-ink);
    border-radius: 3cqw;
    background: #fff;
    box-shadow: 2.2cqw 2.2cqw 0 var(--pack-ink);
    font-family: var(--pack-font, inherit);
    font-size: calc(8.5cqw * var(--pack-font-scale, 1));
    font-weight: var(--pack-font-weight, 950);
    line-height: 1.05;
    text-align: center;
    overflow-wrap: anywhere;
    transform: rotate(-3deg);
}
.card-back[data-pack-pattern] b::before { content: 'BOUZOPP'; font-family: "Sora", sans-serif; font-size: 3.6cqw; font-weight: 1000; letter-spacing: .3em; text-indent: .3em; color: hsl(var(--pack-hue, 280) 60% 42%); }
.card-back[data-pack-pattern] small { padding: 1.5cqw 3cqw; border-radius: 2cqw; font-size: 3.8cqw; letter-spacing: .14em; }
/* A back designed on its own is laid out like the wrapper: its name, small text,
   signature and stickers sit where booster-pack.js places them, over its emblem
   or its artwork, under the printed frame. */
.card-back.is-designed b { position: absolute; z-index: 4; width: max-content; transform: translate(-50%, -50%) rotate(-3deg); }
.card-back.is-designed small { position: absolute; left: 50%; bottom: 8cqw; z-index: 4; white-space: nowrap; transform: translateX(-50%); }
.card-back.is-designed .booster-pack-emblem { top: 36%; width: 50cqw; height: 50cqw; }
.card-back.is-designed .booster-pack-art { z-index: -1; }

/* What a booster came off the press with of its own (#1114, docs/booster-finishes.md). The foil, the film and
   the oil lie in one layer over the face, as over any object; these are the rest. */
.booster-pack-finishes { z-index: 6; border-radius: inherit; }
/* Out of the fryer: its picture, or its print when it has none, golden and greasy. */
.booster-pack.is-deep-fried:not(.has-fried-art) :is(.pack-print, .booster-pack-emblem, .booster-pack-art) {
    filter: sepia(.75) saturate(2.3) contrast(1.25) brightness(.92) hue-rotate(-14deg);
}
.booster-pack-raw-art { opacity: 0; }
/* In the fryer's reveal the pack goes in raw and comes out with its crust (card-reveal.js, `reveal-fx-raw`). */
.reveal-fx-raw .reveal-fx-front .booster-pack-raw-art { opacity: 1; }
.reveal-fx-raw .reveal-fx-front .booster-pack.is-deep-fried :is(.pack-print, .booster-pack-emblem, .booster-pack-art) { filter: none; }
.reveal-fx-raw .reveal-fx-front .booster-pack-finishes { opacity: 0; }
/* A misprint shifts what is printed on the wrapper out of place, the way it shifts a card's picture: its
   picture or emblem and its lettering, over a pattern that runs on regardless. */
[data-pack-misprint] { --misprint-reach: calc(var(--misprint-strength, 1) * 9cqw); }
[data-pack-misprint="offset"] :is(.booster-pack-art, .booster-pack-emblem, .booster-pack-name, .booster-pack-brand) {
    translate: calc(var(--misprint-x) * var(--misprint-reach)) calc(var(--misprint-y) * var(--misprint-reach));
}
[data-pack-misprint="zoom"] :is(.booster-pack-art, .booster-pack-emblem) { scale: calc(1.25 + var(--misprint-strength, 1) * .3); }
[data-pack-misprint="zoom"] .booster-pack-name { scale: 1.2; }
[data-pack-misprint="stretch"] :is(.booster-pack-art, .booster-pack-emblem, .booster-pack-name) { scale: calc(1 + var(--misprint-strength, 1) * .35) 1; }
[data-pack-misprint="register"] .booster-pack-name,
[data-pack-misprint="register"] .booster-pack-brand {
    text-shadow: calc(var(--misprint-x) * 1.6cqw + 1cqw) 0 0 #ff2d8a, calc(var(--misprint-y) * -1.6cqw - 1cqw) 0 0 #00d9ff;
}
[data-pack-misprint="register"] :is(.booster-pack-art, .booster-pack-emblem) { filter: drop-shadow(1.4cqw 0 0 #ff2d8a99) drop-shadow(-1.4cqw 0 0 #00d9ff99); }
[data-pack-misprint="glitch"] :is(.booster-pack-art, .booster-pack-emblem, .booster-pack-name) {
    clip-path: polygon(0 0, 100% 0, 100% 46%, 0 46%, 0 54%, 100% 54%, 100% 100%, 0 100%);
    translate: calc(var(--misprint-x) * 5cqw) 0;
}
/* Torn with its twin: its half of the wrapper, and the edge the pull left on it. */
.booster-pack-tear { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.booster-pack-tear .card-tear-pulp { fill: #fbf8f0; stroke: none; }
.booster-pack-tear .card-tear-shade { fill: none; stroke: #3b2a1a; stroke-width: 1; stroke-opacity: .32; stroke-linejoin: round; }
.booster-pack-tear .card-tear-crease { fill: none; stroke: #fffdf6; stroke-width: 1.6; stroke-opacity: .8; stroke-linecap: round; }
/* Glitched, once it has failed to open: the picture has started to go. Its outline splits into red and
   blue, bands of colour cross it, and now and then a slice of it jumps sideways. */
.booster-pack.is-glitched {
    filter: drop-shadow(var(--pack-line) 0 0 var(--pack-ink)) drop-shadow(calc(-1 * var(--pack-line)) 0 0 var(--pack-ink)) drop-shadow(0 var(--pack-line) 0 var(--pack-ink)) drop-shadow(0 calc(-1 * var(--pack-line)) 0 var(--pack-ink)) drop-shadow(calc(var(--pack-drop) * -.6) 0 0 #ff00ffb0) drop-shadow(calc(var(--pack-drop) * 1.2) 0 0 #00e5ffb0);
}
.booster-pack.is-glitched .pack-print { filter: saturate(1.7) contrast(1.25) hue-rotate(-28deg); }
.booster-pack-static { display: none; }
.booster-pack.is-glitched .booster-pack-static {
    display: block; position: absolute; inset: 0; z-index: 8; pointer-events: none; mix-blend-mode: hard-light;
    background:
        linear-gradient(#0000 21%, #ff00ff8c 21% 24.5%, #0000 24.5% 57%, #00ffff80 57% 59%, #0000 59% 80%, #00ff668c 80% 81.6%, #000c 81.6% 83%, #0000 83%),
        repeating-linear-gradient(0deg, #0000 0 1.2cqw, #0004 1.2cqw 1.7cqw);
}
.booster-pack.is-glitched .booster-pack-name { translate: -2.5cqw 0; text-shadow: 1.2cqw 0 0 #ff00ff, -1.2cqw 0 0 #00e5ff; }
:root:not(.motion-reduced) .booster-pack.is-glitched :is(.pack-print, .booster-pack-art, .booster-pack-emblem, .booster-pack-static) { animation: booster-pack-glitch 2.6s steps(1, end) infinite; }
@keyframes booster-pack-glitch {
    0%, 86%, 100% { translate: 0 0; clip-path: none; }
    88% { translate: -3cqw 0; clip-path: polygon(0 12%, 100% 12%, 100% 38%, 0 38%); }
    91% { translate: 4cqw 0; clip-path: polygon(0 52%, 100% 52%, 100% 61%, 0 61%); }
    94% { translate: -1.5cqw 0; clip-path: polygon(0 70%, 100% 70%, 100% 94%, 0 94%); }
}
/* A booster frying in front of its collector: the stage shows its copy, the table waits. */
.reveal-fx-pending > .booster-pack { visibility: hidden; }