/* GENERATED by design/build-card-art.py. Do not hand-edit.
 *
 * The Xenocide royal-art pipeline. Only the cards listed in that script's
 * ROYALS match anything here: KH, KS, KC, KD, EC, OS, ED, EH, QC, QD, QH, QS, JH, JD, JC, JS, X.
 *
 * **The card is not flattened.** These rules supply a creature, a stock grain
 * and a deckled edge. The rank, the suit pip, the divider, the name plate, the
 * power label, the selection lift and every state mark remain live DOM drawn
 * on top, so the card still reskins, still animates and still says what it did
 * before.
 *
 * **Gating.** Every rule is scoped to the painted cards by `data-card`, so no
 * other card and no non-royal matches. Every rule also stands down under
 * `[data-theme^="occult"]`, because those skins already carry a complete art
 * pack and two packs on one card is a fight neither wins. Skins with no pack
 * are untouched because they never match `data-card`.
 */

/* ── the card face, shared by every painted card ─────────────────────────── */

html:not([data-theme^="occult"]) .card:is([data-card="KH"], [data-card="KS"], [data-card="KC"], [data-card="KD"], [data-card="EC"], [data-card="OS"], [data-card="ED"], [data-card="EH"], [data-card="QC"], [data-card="QD"], [data-card="QH"], [data-card="QS"], [data-card="JH"], [data-card="JD"], [data-card="JC"], [data-card="JS"], [data-card="X"]) {
  /* The deckled edge replaces the drawn one. A radius would clip the paint
     into a curve the artwork does not have, and a border would trace the
     bounding box rather than the torn edge. */
  border-radius: 0;
  -webkit-mask-image: url("deck/xenocide/deckle.webp?v=af1fd605");
          mask-image: url("deck/xenocide/deckle.webp?v=af1fd605");
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* The stock grain. ::before is free; ::after is the royal hairline. */
html:not([data-theme^="occult"]) .card:is([data-card="KH"], [data-card="KS"], [data-card="KC"], [data-card="KD"], [data-card="EC"], [data-card="OS"], [data-card="ED"], [data-card="EH"], [data-card="QC"], [data-card="QD"], [data-card="QH"], [data-card="QS"], [data-card="JH"], [data-card="JD"], [data-card="JC"], [data-card="JS"], [data-card="X"])::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: url("deck/xenocide/stock-grain.webp?v=f0d411e9") center / 100% 100% no-repeat;
  /* OVERLAY, not multiply. The grain is mid-grey, and multiplying mid-grey
     over a near-black stock is almost a no-op -- it was invisible on every
     dark skin, which is nine of the eleven. Overlay pivots on that mid-grey:
     it leaves the base where the texture is neutral and lightens or darkens
     around it, so the paper reads on a black card and on a pale one. */
  mix-blend-mode: overlay;
  opacity: .7;
}

/* Everything the card draws itself has to sit above that grain -- but raise it
   with z-index ALONE, and only give `position` to the elements that do not
   already have one.

   A blanket `> * { position: relative }` here is wrong and was shipped once:
   .card__corner and .card__power are both `position: absolute`, so it dropped
   the rank and the pip out of the corner and into flow, where the card's own
   `align-items: center` centred them at the top -- and the vertical space they
   then occupied pushed the creature down the card. One rule, both symptoms,
   and only on the cards that have art. */
html:not([data-theme^="occult"]) .card:is([data-card="KH"], [data-card="KS"], [data-card="KC"], [data-card="KD"], [data-card="EC"], [data-card="OS"], [data-card="ED"], [data-card="EH"], [data-card="QC"], [data-card="QD"], [data-card="QH"], [data-card="QS"], [data-card="JH"], [data-card="JD"], [data-card="JC"], [data-card="JS"], [data-card="X"]) .card__body,
html:not([data-theme^="occult"]) .card:is([data-card="KH"], [data-card="KS"], [data-card="KC"], [data-card="KD"], [data-card="EC"], [data-card="OS"], [data-card="ED"], [data-card="EH"], [data-card="QC"], [data-card="QD"], [data-card="QH"], [data-card="QS"], [data-card="JH"], [data-card="JD"], [data-card="JC"], [data-card="JS"], [data-card="X"]) .card__plate { position: relative; z-index: 1; }
html:not([data-theme^="occult"]) .card:is([data-card="KH"], [data-card="KS"], [data-card="KC"], [data-card="KD"], [data-card="EC"], [data-card="OS"], [data-card="ED"], [data-card="EH"], [data-card="QC"], [data-card="QD"], [data-card="QH"], [data-card="QS"], [data-card="JH"], [data-card="JD"], [data-card="JC"], [data-card="JS"], [data-card="X"]) .card__corner,
html:not([data-theme^="occult"]) .card:is([data-card="KH"], [data-card="KS"], [data-card="KC"], [data-card="KD"], [data-card="EC"], [data-card="OS"], [data-card="ED"], [data-card="EH"], [data-card="QC"], [data-card="QD"], [data-card="QH"], [data-card="QS"], [data-card="JH"], [data-card="JD"], [data-card="JC"], [data-card="JS"], [data-card="X"]) .card__power { z-index: 1; }

/* AT HAND SIZE AND BELOW the deckle is a few pixels of noise around a 40px
   chip or a 70px card, and reads as damage rather than as an edge -- so the
   mask comes off and the card's own geometry comes back. The creature stays:
   it is the only thing at those sizes that says which card this is.

   `--md` joined `--sm` on 2026-08-25, reported as "the entity cards in hand
   are a different size". They are not: they are 70x102 like every other card
   in the hand, measured. What differed was the EDGE -- a feathered deckle
   against a crisp 1px ring with a 5px radius -- and a soft edge beside eight
   hard ones reads as a smaller card. The argument for dropping it at 40px was
   always about how few pixels the deckle has to work with, and 70 is not many
   more. XL keeps it: the enemy panel draws at 179 and that is where a torn
   edge is an edge. */
html:not([data-theme^="occult"]) .card--sm:is([data-card="KH"], [data-card="KS"], [data-card="KC"], [data-card="KD"], [data-card="EC"], [data-card="OS"], [data-card="ED"], [data-card="EH"], [data-card="QC"], [data-card="QD"], [data-card="QH"], [data-card="QS"], [data-card="JH"], [data-card="JD"], [data-card="JC"], [data-card="JS"], [data-card="X"]),
html:not([data-theme^="occult"]) .card--md:is([data-card="KH"], [data-card="KS"], [data-card="KC"], [data-card="KD"], [data-card="EC"], [data-card="OS"], [data-card="ED"], [data-card="EH"], [data-card="QC"], [data-card="QD"], [data-card="QH"], [data-card="QS"], [data-card="JH"], [data-card="JD"], [data-card="JC"], [data-card="JS"], [data-card="X"]) {
  -webkit-mask-image: none; mask-image: none;
  border-radius: var(--card-radius);
}
html:not([data-theme^="occult"]) .card--sm:is([data-card="KH"], [data-card="KS"], [data-card="KC"], [data-card="KD"], [data-card="EC"], [data-card="OS"], [data-card="ED"], [data-card="EH"], [data-card="QC"], [data-card="QD"], [data-card="QH"], [data-card="QS"], [data-card="JH"], [data-card="JD"], [data-card="JC"], [data-card="JS"], [data-card="X"]),
html:not([data-theme^="occult"]) .card--md:is([data-card="KH"], [data-card="KS"], [data-card="KC"], [data-card="KD"], [data-card="EC"], [data-card="OS"], [data-card="ED"], [data-card="EH"], [data-card="QC"], [data-card="QD"], [data-card="QH"], [data-card="QS"], [data-card="JH"], [data-card="JD"], [data-card="JC"], [data-card="JS"], [data-card="X"])::before { opacity: .6; }

/* ── KH ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="KH"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="KH"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/kh.webp?v=ab4238e3");
          mask-image: url("deck/xenocide/kh.webp?v=ab4238e3");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="KH"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/kh.webp?v=ab4238e3");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── KS ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="KS"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="KS"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/ks.webp?v=d6424114");
          mask-image: url("deck/xenocide/ks.webp?v=d6424114");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="KS"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/ks.webp?v=d6424114");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── KC ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="KC"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="KC"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/kc.webp?v=d56dca9e");
          mask-image: url("deck/xenocide/kc.webp?v=d56dca9e");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="KC"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/kc.webp?v=d56dca9e");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── KD ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="KD"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="KD"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/kd.webp?v=be4576a5");
          mask-image: url("deck/xenocide/kd.webp?v=be4576a5");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="KD"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/kd.webp?v=be4576a5");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── EC ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="EC"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="EC"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/ec.webp?v=529ec1de");
          mask-image: url("deck/xenocide/ec.webp?v=529ec1de");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="EC"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/ec.webp?v=529ec1de");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── OS ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="OS"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="OS"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/os.webp?v=9162f03f");
          mask-image: url("deck/xenocide/os.webp?v=9162f03f");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="OS"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/os.webp?v=9162f03f");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── ED ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="ED"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="ED"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/ed.webp?v=985d1a2d");
          mask-image: url("deck/xenocide/ed.webp?v=985d1a2d");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="ED"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/ed.webp?v=985d1a2d");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── EH ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="EH"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="EH"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/eh.webp?v=5da2c024");
          mask-image: url("deck/xenocide/eh.webp?v=5da2c024");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="EH"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/eh.webp?v=5da2c024");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── QC ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="QC"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="QC"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/qc.webp?v=68e98a88");
          mask-image: url("deck/xenocide/qc.webp?v=68e98a88");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="QC"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/qc.webp?v=68e98a88");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── QD ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="QD"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="QD"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/qd.webp?v=1286353f");
          mask-image: url("deck/xenocide/qd.webp?v=1286353f");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="QD"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/qd.webp?v=1286353f");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── QH ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="QH"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="QH"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/qh.webp?v=82471357");
          mask-image: url("deck/xenocide/qh.webp?v=82471357");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="QH"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/qh.webp?v=82471357");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── QS ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="QS"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="QS"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/qs.webp?v=d812e165");
          mask-image: url("deck/xenocide/qs.webp?v=d812e165");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="QS"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/qs.webp?v=d812e165");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── JH ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="JH"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="JH"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/jh.webp?v=b86ddf0a");
          mask-image: url("deck/xenocide/jh.webp?v=b86ddf0a");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="JH"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/jh.webp?v=b86ddf0a");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── JD ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="JD"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="JD"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/jd.webp?v=3d2326f0");
          mask-image: url("deck/xenocide/jd.webp?v=3d2326f0");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="JD"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/jd.webp?v=3d2326f0");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── JC ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="JC"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="JC"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/jc.webp?v=a440d34c");
          mask-image: url("deck/xenocide/jc.webp?v=a440d34c");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="JC"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/jc.webp?v=a440d34c");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── JS ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="JS"] .card__art > svg { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="JS"] .card__art {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/js.webp?v=e083e4f4");
          mask-image: url("deck/xenocide/js.webp?v=e083e4f4");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="JS"] .card__art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/js.webp?v=e083e4f4");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* ── X ─────────────────────────────────────────────────────────────── */

/* The vector stands down. It stays in the DOM, so nothing that reads the card
   has to know the difference, and comes straight back if this file goes. */
html:not([data-theme^="occult"]) .card[data-card="X"] .card__mark { display: none; }

/* Painted in the skin's ink through this master's own alpha, and modelled by
   its own luminance. Multiply leaves white untouched and deepens the shadows,
   so the painting keeps its form while the colour still comes from the theme.
   These rules are per-card rather than shared because the slot is not one
   element for every card -- see SLOT in the build script. */
html:not([data-theme^="occult"]) .card[data-card="X"] .card__body {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/x.webp?v=2d1c14e0");
          mask-image: url("deck/xenocide/x.webp?v=2d1c14e0");
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
html:not([data-theme^="occult"]) .card[data-card="X"] .card__body::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("deck/xenocide/x.webp?v=2d1c14e0");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}

/* QD carries a second ink. See SECOND_INK in the build script: the creature
   is still painted in the skin's own colour, and this lays rgb(214 172 62) over the
   LIT STRUCTURE ONLY, masked by the master's own luminance rather than by a
   second file. `mask-mode: luminance` is what makes that possible. */
html:not([data-theme^="occult"]) .card[data-card="QD"] .card__art::before {
  content: ""; position: absolute; inset: 0;
  z-index: 3; pointer-events: none;
  opacity: .5;
  background-color: rgb(214 172 62);
  -webkit-mask-image: url("deck/xenocide/qd.webp?v=1286353f"); mask-image: url("deck/xenocide/qd.webp?v=1286353f");
  -webkit-mask-mode: luminance; mask-mode: luminance;
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* Blood (H) -- the painted Force sigil, at XL, MD only.
   Below that the vector in forces.js takes over, because the painting is mush
   at lane size and a suit misread is a misplay. See SIGIL_FLOOR.

   Painted on the ART FRAME, not the pip box -- see SIGIL_SLOT. The pip and its
   vector stand down whole; they stay in the DOM so nothing that reads the card
   has to know, and they come straight back if this file goes. */
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="H"]:not(:has(.card__art)) .card__mark { display: none; }
/* The art frame is taller than the pip box it replaces and overlaps the power
   label by 6px, so the rank and the power word are raised over it -- with
   `z-index` ALONE, because both are already `position: absolute`. This is the
   same discipline SHARED states for painted cards, and it has to be restated
   because the sigils are keyed by SUIT and never match that rule. Giving them
   `position` instead is the bug that once dropped the rank into flow. */
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="H"]:not(:has(.card__art)) .card__corner,
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="H"]:not(:has(.card__art)) .card__power { z-index: 1; }
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="H"]:not(:has(.card__art)) .card__body {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/sigil-h.webp?v=9868f5f9"); mask-image: url("deck/xenocide/sigil-h.webp?v=9868f5f9");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* NO MULTIPLY LAYER, and that is the fix rather than an omission.
   A royal is painted through its alpha and then darkened by its own luminance,
   which is right when the alpha carries the silhouette and the luminance
   carries the modelling. These masters put BOTH in the luminance, so they need
   `luma_alpha` -- and with luminance already folded into the alpha, a multiply
   layer applies it a SECOND time. That is what made the Forces read as grey
   mud: the lattice sits at luminance 106, and squared it can never leave 17%.
   Once is correct. Once is also what makes the light skins work, because the
   voids become transparent instead of dark ink. */

/* Dream (D) -- the painted Force sigil, at XL, MD only.
   Below that the vector in forces.js takes over, because the painting is mush
   at lane size and a suit misread is a misplay. See SIGIL_FLOOR.

   Painted on the ART FRAME, not the pip box -- see SIGIL_SLOT. The pip and its
   vector stand down whole; they stay in the DOM so nothing that reads the card
   has to know, and they come straight back if this file goes. */
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="D"]:not(:has(.card__art)) .card__mark { display: none; }
/* The art frame is taller than the pip box it replaces and overlaps the power
   label by 6px, so the rank and the power word are raised over it -- with
   `z-index` ALONE, because both are already `position: absolute`. This is the
   same discipline SHARED states for painted cards, and it has to be restated
   because the sigils are keyed by SUIT and never match that rule. Giving them
   `position` instead is the bug that once dropped the rank into flow. */
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="D"]:not(:has(.card__art)) .card__corner,
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="D"]:not(:has(.card__art)) .card__power { z-index: 1; }
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="D"]:not(:has(.card__art)) .card__body {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/sigil-d.webp?v=b94344b7"); mask-image: url("deck/xenocide/sigil-d.webp?v=b94344b7");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* NO MULTIPLY LAYER, and that is the fix rather than an omission.
   A royal is painted through its alpha and then darkened by its own luminance,
   which is right when the alpha carries the silhouette and the luminance
   carries the modelling. These masters put BOTH in the luminance, so they need
   `luma_alpha` -- and with luminance already folded into the alpha, a multiply
   layer applies it a SECOND time. That is what made the Forces read as grey
   mud: the lattice sits at luminance 106, and squared it can never leave 17%.
   Once is correct. Once is also what makes the light skins work, because the
   voids become transparent instead of dark ink. */

/* Swarm (C) -- the painted Force sigil, at XL, MD only.
   Below that the vector in forces.js takes over, because the painting is mush
   at lane size and a suit misread is a misplay. See SIGIL_FLOOR.

   Painted on the ART FRAME, not the pip box -- see SIGIL_SLOT. The pip and its
   vector stand down whole; they stay in the DOM so nothing that reads the card
   has to know, and they come straight back if this file goes. */
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="C"]:not(:has(.card__art)) .card__mark { display: none; }
/* The art frame is taller than the pip box it replaces and overlaps the power
   label by 6px, so the rank and the power word are raised over it -- with
   `z-index` ALONE, because both are already `position: absolute`. This is the
   same discipline SHARED states for painted cards, and it has to be restated
   because the sigils are keyed by SUIT and never match that rule. Giving them
   `position` instead is the bug that once dropped the rank into flow. */
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="C"]:not(:has(.card__art)) .card__corner,
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="C"]:not(:has(.card__art)) .card__power { z-index: 1; }
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="C"]:not(:has(.card__art)) .card__body {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/sigil-c.webp?v=6050802b"); mask-image: url("deck/xenocide/sigil-c.webp?v=6050802b");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* NO MULTIPLY LAYER, and that is the fix rather than an omission.
   A royal is painted through its alpha and then darkened by its own luminance,
   which is right when the alpha carries the silhouette and the luminance
   carries the modelling. These masters put BOTH in the luminance, so they need
   `luma_alpha` -- and with luminance already folded into the alpha, a multiply
   layer applies it a SECOND time. That is what made the Forces read as grey
   mud: the lattice sits at luminance 106, and squared it can never leave 17%.
   Once is correct. Once is also what makes the light skins work, because the
   voids become transparent instead of dark ink. */

/* Void (S) -- the painted Force sigil, at XL, MD only.
   Below that the vector in forces.js takes over, because the painting is mush
   at lane size and a suit misread is a misplay. See SIGIL_FLOOR.

   Painted on the ART FRAME, not the pip box -- see SIGIL_SLOT. The pip and its
   vector stand down whole; they stay in the DOM so nothing that reads the card
   has to know, and they come straight back if this file goes. */
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="S"]:not(:has(.card__art)) .card__mark { display: none; }
/* The art frame is taller than the pip box it replaces and overlaps the power
   label by 6px, so the rank and the power word are raised over it -- with
   `z-index` ALONE, because both are already `position: absolute`. This is the
   same discipline SHARED states for painted cards, and it has to be restated
   because the sigils are keyed by SUIT and never match that rule. Giving them
   `position` instead is the bug that once dropped the rank into flow. */
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="S"]:not(:has(.card__art)) .card__corner,
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="S"]:not(:has(.card__art)) .card__power { z-index: 1; }
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md)[data-suit="S"]:not(:has(.card__art)) .card__body {
  position: relative;
  background-color: currentColor;
  -webkit-mask-image: url("deck/xenocide/sigil-s.webp?v=e1b2c887"); mask-image: url("deck/xenocide/sigil-s.webp?v=e1b2c887");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* NO MULTIPLY LAYER, and that is the fix rather than an omission.
   A royal is painted through its alpha and then darkened by its own luminance,
   which is right when the alpha carries the silhouette and the luminance
   carries the modelling. These masters put BOTH in the luminance, so they need
   `luma_alpha` -- and with luminance already folded into the alpha, a multiply
   layer applies it a SECOND time. That is what made the Forces read as grey
   mud: the lattice sits at luminance 106, and squared it can never leave 17%.
   Once is correct. Once is also what makes the light skins work, because the
   voids become transparent instead of dark ink. */

/* Blood (H) BOUND -- the sigil with its binding drawn in, at XL, MD.
   The existing chain/egg overlay is suppressed HERE ONLY, because the binding
   is now part of the art and two sets of chains is one too many. Below the
   floor the vector and that overlay are untouched and still do the work.

   The dim has to be restated on the slot. deck.css dims `.card__mark` and
   `.card__art` for these states, and the sigil now paints on NEITHER -- so
   without this a bound card would render at full strength and the binding
   would be the only thing saying it is bound. */
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md).is-bound[data-suit="H"]:not(:has(.card__art)) .card__body {
  -webkit-mask-image: url("deck/xenocide/sigil-h-bound.webp?v=c99a6d1c"); mask-image: url("deck/xenocide/sigil-h-bound.webp?v=c99a6d1c");
  opacity: .78;
}
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md).is-bound[data-suit="H"]:not(:has(.card__art)) .card__body::after { content: none; }

/* Dream (D) BOUND -- the sigil with its binding drawn in, at XL, MD.
   The existing chain/egg overlay is suppressed HERE ONLY, because the binding
   is now part of the art and two sets of chains is one too many. Below the
   floor the vector and that overlay are untouched and still do the work.

   The dim has to be restated on the slot. deck.css dims `.card__mark` and
   `.card__art` for these states, and the sigil now paints on NEITHER -- so
   without this a bound card would render at full strength and the binding
   would be the only thing saying it is bound. */
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md).is-bound[data-suit="D"]:not(:has(.card__art)) .card__body {
  -webkit-mask-image: url("deck/xenocide/sigil-d-bound.webp?v=3c88f8eb"); mask-image: url("deck/xenocide/sigil-d-bound.webp?v=3c88f8eb");
  opacity: .78;
}
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md).is-bound[data-suit="D"]:not(:has(.card__art)) .card__body::after { content: none; }

/* Swarm (C) BOUND -- the sigil with its binding drawn in, at XL, MD.
   The existing chain/egg overlay is suppressed HERE ONLY, because the binding
   is now part of the art and two sets of chains is one too many. Below the
   floor the vector and that overlay are untouched and still do the work.

   The dim has to be restated on the slot. deck.css dims `.card__mark` and
   `.card__art` for these states, and the sigil now paints on NEITHER -- so
   without this a bound card would render at full strength and the binding
   would be the only thing saying it is bound. */
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md).is-bound[data-suit="C"]:not(:has(.card__art)) .card__body {
  -webkit-mask-image: url("deck/xenocide/sigil-c-bound.webp?v=df48542b"); mask-image: url("deck/xenocide/sigil-c-bound.webp?v=df48542b");
  opacity: .78;
}
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md).is-bound[data-suit="C"]:not(:has(.card__art)) .card__body::after { content: none; }

/* Void (S) INCUBATING -- the sigil with its binding drawn in, at XL, MD.
   The existing chain/egg overlay is suppressed HERE ONLY, because the binding
   is now part of the art and two sets of chains is one too many. Below the
   floor the vector and that overlay are untouched and still do the work.

   The dim has to be restated on the slot. deck.css dims `.card__mark` and
   `.card__art` for these states, and the sigil now paints on NEITHER -- so
   without this a bound card would render at full strength and the binding
   would be the only thing saying it is bound. */
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md).is-incubating[data-suit="S"]:not(:has(.card__art)) .card__body {
  -webkit-mask-image: url("deck/xenocide/sigil-s-incubating.webp?v=0433371f"); mask-image: url("deck/xenocide/sigil-s-incubating.webp?v=0433371f");
  opacity: .85;
}
html:not([data-theme^="occult"]) .card:is(.card--xl, .card--md).is-incubating[data-suit="S"]:not(:has(.card__art)) .card__body::after { content: none; }

/* ── The Pantheon lightbox ─────────────────────────────────────────────────
   The same masks the cards wear, at a size the grid has no room for. Painted
   through `currentColor` exactly as a card is, so the lightbox follows the
   skin; an <img> could not, which is why this is a mask and not a picture.

   `.lb__art` carries no art of its own: an entity with no painted master
   simply matches nothing here and the lightbox shows its vector drawing
   instead, which scales better than any of this. */

:where(html:not([data-theme^="occult"])) .lb__art[data-card="KH"] {
  -webkit-mask-image: url("deck/xenocide/kh.webp?v=ab4238e3"); mask-image: url("deck/xenocide/kh.webp?v=ab4238e3");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KH"]::after {
  background-image: url("deck/xenocide/kh.webp?v=ab4238e3");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KH"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/kh-detail.webp?v=c384c4cb"); mask-image: url("deck/xenocide/kh-detail.webp?v=c384c4cb");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KH"].is-zoom::after {
  background-image: url("deck/xenocide/kh-detail.webp?v=c384c4cb");
}
.lb[data-card="KH"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KS"] {
  -webkit-mask-image: url("deck/xenocide/ks.webp?v=d6424114"); mask-image: url("deck/xenocide/ks.webp?v=d6424114");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KS"]::after {
  background-image: url("deck/xenocide/ks.webp?v=d6424114");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KS"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/ks-detail.webp?v=20881857"); mask-image: url("deck/xenocide/ks-detail.webp?v=20881857");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KS"].is-zoom::after {
  background-image: url("deck/xenocide/ks-detail.webp?v=20881857");
}
.lb[data-card="KS"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KC"] {
  -webkit-mask-image: url("deck/xenocide/kc.webp?v=d56dca9e"); mask-image: url("deck/xenocide/kc.webp?v=d56dca9e");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KC"]::after {
  background-image: url("deck/xenocide/kc.webp?v=d56dca9e");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KC"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/kc-detail.webp?v=9f92e692"); mask-image: url("deck/xenocide/kc-detail.webp?v=9f92e692");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KC"].is-zoom::after {
  background-image: url("deck/xenocide/kc-detail.webp?v=9f92e692");
}
.lb[data-card="KC"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KD"] {
  -webkit-mask-image: url("deck/xenocide/kd.webp?v=be4576a5"); mask-image: url("deck/xenocide/kd.webp?v=be4576a5");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KD"]::after {
  background-image: url("deck/xenocide/kd.webp?v=be4576a5");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KD"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/kd-detail.webp?v=2edb28ec"); mask-image: url("deck/xenocide/kd-detail.webp?v=2edb28ec");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="KD"].is-zoom::after {
  background-image: url("deck/xenocide/kd-detail.webp?v=2edb28ec");
}
.lb[data-card="KD"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="EC"] {
  -webkit-mask-image: url("deck/xenocide/ec.webp?v=529ec1de"); mask-image: url("deck/xenocide/ec.webp?v=529ec1de");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="EC"]::after {
  background-image: url("deck/xenocide/ec.webp?v=529ec1de");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="EC"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/ec-detail.webp?v=3f3844ee"); mask-image: url("deck/xenocide/ec-detail.webp?v=3f3844ee");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="EC"].is-zoom::after {
  background-image: url("deck/xenocide/ec-detail.webp?v=3f3844ee");
}
.lb[data-card="EC"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="OS"] {
  -webkit-mask-image: url("deck/xenocide/os.webp?v=9162f03f"); mask-image: url("deck/xenocide/os.webp?v=9162f03f");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="OS"]::after {
  background-image: url("deck/xenocide/os.webp?v=9162f03f");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="OS"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/os-detail.webp?v=2760316d"); mask-image: url("deck/xenocide/os-detail.webp?v=2760316d");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="OS"].is-zoom::after {
  background-image: url("deck/xenocide/os-detail.webp?v=2760316d");
}
.lb[data-card="OS"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="ED"] {
  -webkit-mask-image: url("deck/xenocide/ed.webp?v=985d1a2d"); mask-image: url("deck/xenocide/ed.webp?v=985d1a2d");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="ED"]::after {
  background-image: url("deck/xenocide/ed.webp?v=985d1a2d");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="ED"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/ed-detail.webp?v=869aae78"); mask-image: url("deck/xenocide/ed-detail.webp?v=869aae78");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="ED"].is-zoom::after {
  background-image: url("deck/xenocide/ed-detail.webp?v=869aae78");
}
.lb[data-card="ED"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="EH"] {
  -webkit-mask-image: url("deck/xenocide/eh.webp?v=5da2c024"); mask-image: url("deck/xenocide/eh.webp?v=5da2c024");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="EH"]::after {
  background-image: url("deck/xenocide/eh.webp?v=5da2c024");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="EH"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/eh-detail.webp?v=a8595895"); mask-image: url("deck/xenocide/eh-detail.webp?v=a8595895");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="EH"].is-zoom::after {
  background-image: url("deck/xenocide/eh-detail.webp?v=a8595895");
}
.lb[data-card="EH"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QC"] {
  -webkit-mask-image: url("deck/xenocide/qc.webp?v=68e98a88"); mask-image: url("deck/xenocide/qc.webp?v=68e98a88");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QC"]::after {
  background-image: url("deck/xenocide/qc.webp?v=68e98a88");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QC"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/qc-detail.webp?v=ed517885"); mask-image: url("deck/xenocide/qc-detail.webp?v=ed517885");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QC"].is-zoom::after {
  background-image: url("deck/xenocide/qc-detail.webp?v=ed517885");
}
.lb[data-card="QC"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QD"] {
  -webkit-mask-image: url("deck/xenocide/qd.webp?v=1286353f"); mask-image: url("deck/xenocide/qd.webp?v=1286353f");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QD"]::after {
  background-image: url("deck/xenocide/qd.webp?v=1286353f");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QD"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/qd-detail.webp?v=434df153"); mask-image: url("deck/xenocide/qd-detail.webp?v=434df153");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QD"].is-zoom::after {
  background-image: url("deck/xenocide/qd-detail.webp?v=434df153");
}
.lb[data-card="QD"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QH"] {
  -webkit-mask-image: url("deck/xenocide/qh.webp?v=82471357"); mask-image: url("deck/xenocide/qh.webp?v=82471357");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QH"]::after {
  background-image: url("deck/xenocide/qh.webp?v=82471357");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QH"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/qh-detail.webp?v=018998a0"); mask-image: url("deck/xenocide/qh-detail.webp?v=018998a0");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QH"].is-zoom::after {
  background-image: url("deck/xenocide/qh-detail.webp?v=018998a0");
}
.lb[data-card="QH"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QS"] {
  -webkit-mask-image: url("deck/xenocide/qs.webp?v=d812e165"); mask-image: url("deck/xenocide/qs.webp?v=d812e165");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QS"]::after {
  background-image: url("deck/xenocide/qs.webp?v=d812e165");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QS"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/qs-detail.webp?v=44dc385b"); mask-image: url("deck/xenocide/qs-detail.webp?v=44dc385b");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="QS"].is-zoom::after {
  background-image: url("deck/xenocide/qs-detail.webp?v=44dc385b");
}
.lb[data-card="QS"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JH"] {
  -webkit-mask-image: url("deck/xenocide/jh.webp?v=b86ddf0a"); mask-image: url("deck/xenocide/jh.webp?v=b86ddf0a");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JH"]::after {
  background-image: url("deck/xenocide/jh.webp?v=b86ddf0a");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JH"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/jh-detail.webp?v=1a460dd4"); mask-image: url("deck/xenocide/jh-detail.webp?v=1a460dd4");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JH"].is-zoom::after {
  background-image: url("deck/xenocide/jh-detail.webp?v=1a460dd4");
}
.lb[data-card="JH"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JD"] {
  -webkit-mask-image: url("deck/xenocide/jd.webp?v=3d2326f0"); mask-image: url("deck/xenocide/jd.webp?v=3d2326f0");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JD"]::after {
  background-image: url("deck/xenocide/jd.webp?v=3d2326f0");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JD"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/jd-detail.webp?v=7351e017"); mask-image: url("deck/xenocide/jd-detail.webp?v=7351e017");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JD"].is-zoom::after {
  background-image: url("deck/xenocide/jd-detail.webp?v=7351e017");
}
.lb[data-card="JD"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JC"] {
  -webkit-mask-image: url("deck/xenocide/jc.webp?v=a440d34c"); mask-image: url("deck/xenocide/jc.webp?v=a440d34c");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JC"]::after {
  background-image: url("deck/xenocide/jc.webp?v=a440d34c");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JC"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/jc-detail.webp?v=bbf134a3"); mask-image: url("deck/xenocide/jc-detail.webp?v=bbf134a3");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JC"].is-zoom::after {
  background-image: url("deck/xenocide/jc-detail.webp?v=bbf134a3");
}
.lb[data-card="JC"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JS"] {
  -webkit-mask-image: url("deck/xenocide/js.webp?v=e083e4f4"); mask-image: url("deck/xenocide/js.webp?v=e083e4f4");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JS"]::after {
  background-image: url("deck/xenocide/js.webp?v=e083e4f4");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JS"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/js-detail.webp?v=3b6b65d3"); mask-image: url("deck/xenocide/js-detail.webp?v=3b6b65d3");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="JS"].is-zoom::after {
  background-image: url("deck/xenocide/js-detail.webp?v=3b6b65d3");
}
.lb[data-card="JS"] .lb__zoom { display: inline-flex; }
:where(html:not([data-theme^="occult"])) .lb__art[data-card="X"] {
  -webkit-mask-image: url("deck/xenocide/x.webp?v=2d1c14e0"); mask-image: url("deck/xenocide/x.webp?v=2d1c14e0");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="X"]::after {
  background-image: url("deck/xenocide/x.webp?v=2d1c14e0");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="X"].is-zoom {
  -webkit-mask-image: url("deck/xenocide/x-detail.webp?v=e437312c"); mask-image: url("deck/xenocide/x-detail.webp?v=e437312c");
}
:where(html:not([data-theme^="occult"])) .lb__art[data-card="X"].is-zoom::after {
  background-image: url("deck/xenocide/x-detail.webp?v=e437312c");
}
.lb[data-card="X"] .lb__zoom { display: inline-flex; }