/*
 * Diamond & Pearl generation (2007-2011), family h2: Pokémon LV.X, Pokémon Prime and LEGEND (SP LV.X shares the LV.X foil).
 *
 *  dp-lvx     Rare Holo LV.X (dp1-dp7, pl1-pl4; Platinum's SP LV.X use the same foil, their mask only cuts the trainer badge).
 *             Real card: cosmos holofoil in the art window (multicolour confetti glints over a silver sheen), a silver border
 *             and strips that sparkle with fine sand and one sliding hot spot, a gold LEVEL-UP rule box, a matte text box.
 *  dp-prime   Pokémon Prime (hgss1-hgss4, HGSS promos). Real card: the FRAME is foil (cream-silver border, spiky ring round
 *             the art, plates), glitter dust and a broad pearl/gold/rainbow band across it; the art, the text box and the
 *             STAGE line are plain print; the name is GOLD foil lettering that gleams.
 *  dp-legend  LEGEND halves (`dp-legend-top` first card of a pair, `dp-legend-bottom` second). Real card: the whole face is
 *             galaxy holofoil, text printed over it. The two halves are one picture: a field twice a card wide is laid
 *             across the pair (--lg-join 0 on the top half, 1 on the bottom), so a glint leaves one card where it enters
 *             the other.
 *
 * Where the foil is comes from a drawn mask per frame (assets/foil/dp-special/, scripts/make_dp_special_masks.py; TCG Live
 * has none for this generation) that js/dp-foil.js hands out through dpMap(): alpha = foil here, luminance = the zone a layer
 * lights specially (LV.X art window, Prime name box). maps.css cuts `.foil` to it; layers that want only the zone add the same
 * file as a luminance mask.
 *
 * Recipe family: screen blend (adds light, never darkens) so no colour-dodge chain is used; a resting card paints `.foil`
 * alone (sheen + a dim glitter), `::before` / `::after` / `.glare` wake with the pointer. Glare dark ends stay under 0.3 alpha.
 * Photo references and what each was judged against: /mnt/project-files/every-era/dp/texture-refs/h2/ (SOURCES.txt) and
 * .claude/skills/card-textures/reference/dp-lvx-prime-legend.md.
 *
 * Specificity: `era-dp` five times in every selector (like sm.css) so the rules beat the shared sheets.
 * Bump this sheet's ?v= tag in index.html on every change.
 */

/* ---- Shared shape ---------------------------------------------------------------
   Clear what the older recipes (rarities.css, realism.css) put on the pseudo layers; each finish sets its own. */
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp {
  --dp-flecks: url("/assets/foil/glitter-fine.webp");
  --dp-cosmos-mid: url("/assets/foil/promo/cosmos-middle-trans.webp");
  --dp-cosmos-top: url("/assets/foil/promo/cosmos-top-trans.webp");
  --dp-seed: calc(var(--seed-x, 0.5) * 100%) calc(var(--seed-y, 0.5) * 100%);
  --dp-spectrum: linear-gradient(90deg,
    hsl(2, 100%, 70%) 0%, hsl(53, 100%, 66%) 16%, hsl(93, 90%, 62%) 32%, hsl(176, 100%, 68%) 48%,
    hsl(228, 100%, 72%) 64%, hsl(283, 100%, 70%) 80%, hsl(2, 100%, 70%) 100%);
}
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp:is(.dp-lvx, .dp-prime, .dp-legend) .foil {
  background-repeat: repeat;
  filter: none;
  opacity: calc((0.3 + var(--card-opacity) * 0.7) * var(--foil-strength, 1));
}
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp:is(.dp-lvx, .dp-prime, .dp-legend):not(.lit):not(.settling) .foil {
  opacity: calc(0.34 * var(--foil-strength, 1));
}
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp:is(.dp-lvx, .dp-prime, .dp-legend) .foil::before,
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp:is(.dp-lvx, .dp-prime, .dp-legend) .foil::after {
  background-image: none;
  background-size: auto;
  background-position: center;
  background-repeat: repeat;
  background-blend-mode: normal;
  mix-blend-mode: normal;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: none;
  border-radius: 0;
  opacity: 1;
}
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp:is(.dp-lvx, .dp-prime, .dp-legend) .glare::after {
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
  mix-blend-mode: normal;
  filter: none;
  opacity: 1;
}

/* ---- Pokémon LV.X ---------------------------------------------------------------
   Photos (Bleeding Cool's Mesprit, Uxie, Azelf, Shaymin, Raichu and Leafeon LV.X; Pokemon Holo's clips of Gengar, Palkia G,
   Dialga G, Absol G, Electivire FB, Garchomp C ...): the art window is cosmos holofoil, a galaxy of confetti glints in
   cyan, pink and gold over a silver sheen; the silver border, the strips round the window and the bar under it carry
   a fine multicolour sand and one hot spot that slides with the tilt; the LEVEL-UP ribbon, the name plate, the
   rules text and the footer are plain print (the mask, dpSpecialMap). `.foil` is the sheen, the hot spot and
   a dim copy of the galaxy; `::before` the galaxy lit in a moving sweep, window only; `::after` the sand over
   frame and window. All screened: they only add light. */
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-lvx .foil {
  background-image:
    var(--dp-flecks),
    var(--dp-cosmos-mid),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.03) 36%, hsla(0, 0%, 100%, 0) 70%),
    linear-gradient(112deg, hsla(0, 0%, 0%, 0) 26%, hsla(200, 45%, 84%, 0.11) 43%, hsla(46, 70%, 88%, 0.12) 52%,
      hsla(320, 45%, 86%, 0.09) 61%, hsla(0, 0%, 0%, 0) 76%);
  background-size: 46% auto, 100% auto, 100% 100%, 300% 100%;
  background-position: var(--dp-seed), var(--dp-seed), center, calc(100% - var(--background-x)) 0;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-blend-mode: screen, screen, normal, normal;
  mix-blend-mode: screen;
}
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-lvx .foil::before {
  background-image:
    repeating-linear-gradient(82deg,
      hsl(53, 100%, 62%) 0%, hsl(93, 85%, 54%) 4%, hsl(176, 90%, 56%) 8%, hsl(228, 95%, 66%) 12%,
      hsl(283, 90%, 66%) 16%, hsl(326, 90%, 62%) 20%, hsl(326, 90%, 62%) 24%, hsl(283, 90%, 66%) 28%,
      hsl(228, 95%, 66%) 32%, hsl(176, 90%, 56%) 36%, hsl(93, 85%, 54%) 40%, hsl(53, 100%, 62%) 44%);
  background-size: 400% 900%;
  background-position: calc(18% + var(--pointer-from-left, 0.5) * 64%) calc(18% + var(--pointer-from-top, 0.5) * 64%);
  background-repeat: repeat;
  filter: brightness(1) saturate(0.9);
  -webkit-mask-image: var(--foil-map), var(--dp-cosmos-mid), var(--dp-cosmos-top);
  mask-image: var(--foil-map), var(--dp-cosmos-mid), var(--dp-cosmos-top);
  -webkit-mask-mode: luminance, alpha, alpha;
  mask-mode: luminance, alpha, alpha;
  -webkit-mask-size: 100% 100%, 110% auto, 110% auto;
  mask-size: 100% 100%, 110% auto, 110% auto;
  -webkit-mask-position: center, var(--dp-seed), var(--dp-seed);
  mask-position: center, var(--dp-seed), var(--dp-seed);
  -webkit-mask-repeat: no-repeat, repeat, repeat;
  mask-repeat: no-repeat, repeat, repeat;
  -webkit-mask-composite: source-in, source-over, source-over;
  mask-composite: intersect, add, add;
  mix-blend-mode: screen;
  opacity: calc(0.12 + var(--card-opacity) * 0.26);
}
/* Sand: the fine tile tinted by a spectrum (multiplied, so a speck takes one colour), screened over the frame. */
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-lvx .foil::after {
  background-image: var(--dp-flecks), var(--dp-spectrum);
  background-size: 30% auto, 300% 100%;
  background-position: calc(100% - var(--seed-x, 0.4) * 100%) 60%, calc(var(--pointer-from-left, 0.5) * 100%) 0;
  background-repeat: repeat, no-repeat;
  background-blend-mode: multiply;
  mix-blend-mode: screen;
  filter: brightness(1.5) contrast(1.6);
  opacity: calc(0.28 + var(--pointer-from-center) * 0.4);
}
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-lvx .glare {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(180, 100%, 95%) 5%, hsla(0, 0%, 39%, 0.25) 55%, hsla(0, 0%, 0%, 0.3) 110%);
  mix-blend-mode: overlay;
  filter: brightness(0.8) contrast(1.5);
  opacity: calc(var(--card-opacity) * 0.3);
}

/* ---- Pokémon Prime -------------------------------------------------------------
   Photos (Bleeding Cool's Mew and Umbreon in hand, Pokemon Holo's Typhlosion promo clip, a Steelix close-up): the holofoil
   is the FRAME. The silver-yellow border, the spikes round the art window, the name plate and the plates under it
   are mirror foil that catches a broad band of pearl, gold and rainbow, with a fine multicolour sand over it. The art
   is plain print (the dark window is matte: no cosmos, no sheen), the text box is matte, and the name is gold foil
   text: it gleams where the light finds it. The mask (dpSpecialMap) is the frame; its luminance is the name box.
   `.foil` is the sheen and the hot spot; `::before` a rainbow lobe that slides across the frame with the tilt;
   `::after` the sand; `.glare::after` the gold on the name. */
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-prime .foil {
  /* Review rv-h2: the frame of a Prime scans cream-white, and screen (what the other two finishes use) cannot add colour
     to near-white: the first pass just bleached the spikes away. So this finish paints translucent colour over the frame
     (normal blend: a cool silver cast, a pearl / gold / blue / pink band that slides with the tilt and a pointer-centred
     brightening) and keeps every alpha low enough that the printed shading of the spikes and the stain show through. */
  background-image:
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0.34) 0%, hsla(0, 0%, 100%, 0.1) 36%, hsla(0, 0%, 100%, 0) 70%),
    linear-gradient(104deg, hsla(0, 0%, 0%, 0) 20%, hsla(48, 90%, 70%, 0.5) 38%, hsla(190, 75%, 76%, 0.55) 49%,
      hsla(330, 75%, 80%, 0.5) 58%, hsla(0, 0%, 0%, 0) 76%),
    linear-gradient(180deg, hsla(214, 26%, 62%, 0.42), hsla(214, 20%, 74%, 0.3));
  background-size: 100% 100%, 300% 100%, 100% 100%;
  background-position: center, calc(100% - var(--background-x)) 0, center;
  background-repeat: no-repeat;
  background-blend-mode: normal;
  mix-blend-mode: normal;
}
/* The foil is the frame: the scan's alpha and the map's alpha, minus the map's luminance (the name box, alpha 1 / luminance 1
   in the -v2 masks), so the gold lettering takes no sheen at all. The gleam on the lettering is `.glare::after` below. */
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-prime.has-foil-map .foil {
  -webkit-mask-image: var(--art), var(--foil-map), var(--foil-map);
  mask-image: var(--art), var(--foil-map), var(--foil-map);
  -webkit-mask-mode: alpha, alpha, luminance;
  mask-mode: alpha, alpha, luminance;
  -webkit-mask-composite: source-in, source-out, source-over;
  mask-composite: intersect, subtract, add;
  -webkit-mask-size: contain, 100% 100%, 100% 100%;
  mask-size: contain, 100% 100%, 100% 100%;
  -webkit-mask-position: center, center, center;
  mask-position: center, center, center;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat, no-repeat;
}
/* A rainbow lobe, one tenth to a fifth of the card wide, sliding across the frame. */
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-prime .foil::before {
  background-image: linear-gradient(115deg,
    hsl(2, 100%, 74%) 0%, hsl(53, 100%, 70%) 16%, hsl(93, 90%, 68%) 32%, hsl(176, 100%, 72%) 48%,
    hsl(228, 100%, 78%) 64%, hsl(283, 100%, 76%) 80%, hsl(330, 100%, 76%) 100%);
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0, 0, 0, 0.7) 44%, #000 50%, rgba(0, 0, 0, 0.7) 56%, transparent 62%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0, 0, 0, 0.7) 44%, #000 50%, rgba(0, 0, 0, 0.7) 56%, transparent 62%, transparent 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: calc(100% - var(--background-x) * 1) 0;
  mask-position: calc(100% - var(--background-x) * 1) 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: normal;
  filter: none;
  opacity: calc(0.4 + var(--pointer-from-center) * 0.3);
}
/* Glitter dust: the sparse fleck tile used as a luminance mask over a spectrum, so a speck is one saturated light colour
   (it never darkens by more than a pale pigment does; a screened tile would vanish on the near-white frame). */
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-prime .foil::after {
  background-image: linear-gradient(90deg,
    hsl(2, 100%, 80%) 0%, hsl(53, 100%, 74%) 16%, hsl(93, 90%, 74%) 32%, hsl(176, 100%, 78%) 48%,
    hsl(228, 100%, 84%) 64%, hsl(283, 100%, 82%) 80%, hsl(2, 100%, 80%) 100%);
  background-size: 300% 100%;
  background-position: calc(var(--pointer-from-left, 0.5) * 100%) 0;
  background-repeat: no-repeat;
  -webkit-mask-image: var(--dp-flecks), var(--dp-flecks), var(--dp-flecks);
  mask-image: var(--dp-flecks), var(--dp-flecks), var(--dp-flecks);
  -webkit-mask-mode: luminance, luminance, luminance;
  mask-mode: luminance, luminance, luminance;
  -webkit-mask-size: 60% auto, 47% auto, 36% auto;
  mask-size: 60% auto, 47% auto, 36% auto;
  -webkit-mask-position: var(--dp-seed), 37% 53%, 71% 19%;
  mask-position: var(--dp-seed), 37% 53%, 71% 19%;
  -webkit-mask-repeat: repeat, repeat, repeat;
  mask-repeat: repeat, repeat, repeat;
  -webkit-mask-composite: source-over, source-over, source-over;
  mask-composite: add, add, add;
  mix-blend-mode: normal;
  filter: none;
  opacity: calc(0.7 + var(--pointer-from-center) * 0.3);
}
/* Gold foil name: a warm band of light over the name box only. Overlay, not soft-light: it lifts the mid-tone gold of the
   lettering and leaves the near-white plate (and the black one) alone, so only the letters gleam. */
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-prime .glare::after {
  background-image: linear-gradient(100deg, hsla(44, 100%, 70%, 0) 8%, hsla(44, 100%, 66%, 0.85) 34%,
    hsla(48, 100%, 82%, 1) 48%, hsla(44, 100%, 66%, 0.85) 62%, hsla(44, 100%, 70%, 0) 88%);
  background-size: 360% 100%;
  background-position: calc(100% - var(--background-x) * 1) 0;
  background-repeat: no-repeat;
  -webkit-mask-image: var(--foil-map);
  mask-image: var(--foil-map);
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  mix-blend-mode: overlay;
  opacity: 1;
}
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-prime .glare {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(180, 100%, 95%) 5%, hsla(0, 0%, 39%, 0.25) 55%, hsla(0, 0%, 0%, 0.3) 110%);
  mix-blend-mode: overlay;
  filter: brightness(0.8) contrast(1.5);
  opacity: calc(var(--card-opacity) * 0.3);
}

/* ---- LEGEND ----------------------------------------------------------------------
   Photos (Bleeding Cool's Darkrai & Cresselia pair and a binder page of Rayquaza & Deoxys and Kyogre & Groudon; Pokemon
   Holo-channel clips are all flat): the ENTIRE face is foil, the picture, the gold-dust border and the plates, with
   the classic galaxy holofoil of the era: a silver-blue sheen veiled over the painting with pastel patches and a few
   glints, the text printed over it. The two halves are one picture: the top half's right edge is the bottom half's left
   edge, so a field twice the card wide is laid across the pair, the top showing its left part (`--lg-join: 0`), the bottom
   its right (`1`), and what one half does at its join the other does at its own. The text (name bar, rules, attacks,
   stats) is cut out of the foil by the mask (dpSpecialMap). */
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-legend-top { --lg-join: 0; }
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-legend-bottom { --lg-join: 1; }
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-legend .foil {
  background-image:
    var(--dp-flecks),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.03) 36%, hsla(0, 0%, 100%, 0) 70%),
    linear-gradient(112deg, hsla(0, 0%, 0%, 0) 22%, hsla(200, 50%, 80%, 0.13) 38%, hsla(48, 70%, 84%, 0.13) 48%,
      hsla(320, 50%, 82%, 0.11) 58%, hsla(140, 50%, 80%, 0.1) 68%, hsla(0, 0%, 0%, 0) 84%);
  background-size: 46% auto, 100% 100%, 300% 100%;
  background-position: var(--dp-seed), center, calc((var(--pointer-from-left, 0.5) * 0.8 + var(--lg-join, 0)) * 50%) 0;
  background-repeat: repeat, no-repeat, no-repeat;
  background-blend-mode: screen, normal, normal;
  mix-blend-mode: screen;
}
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-legend .foil::before {
  background-image: repeating-linear-gradient(82deg,
      hsl(53, 100%, 62%) 0%, hsl(93, 85%, 54%) 4%, hsl(176, 90%, 56%) 8%, hsl(228, 95%, 66%) 12%,
      hsl(283, 90%, 66%) 16%, hsl(326, 90%, 62%) 20%, hsl(326, 90%, 62%) 24%, hsl(283, 90%, 66%) 28%,
      hsl(228, 95%, 66%) 32%, hsl(176, 90%, 56%) 36%, hsl(93, 85%, 54%) 40%, hsl(53, 100%, 62%) 44%);
  background-size: 500% 900%;
  background-position: calc((var(--pointer-from-left, 0.5) * 0.5 + var(--lg-join, 0)) * 25%) calc(18% + var(--pointer-from-top, 0.5) * 64%);
  background-repeat: repeat;
  -webkit-mask-image: var(--dp-cosmos-mid), var(--dp-cosmos-top);
  mask-image: var(--dp-cosmos-mid), var(--dp-cosmos-top);
  -webkit-mask-size: 200% auto, 200% auto;
  mask-size: 200% auto, 200% auto;
  -webkit-mask-position: calc(var(--lg-join, 0) * 100%) 30%, calc(var(--lg-join, 0) * 100%) 30%;
  mask-position: calc(var(--lg-join, 0) * 100%) 30%, calc(var(--lg-join, 0) * 100%) 30%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-over;
  mask-composite: add;
  mix-blend-mode: screen;
  filter: saturate(1.1);
  opacity: calc(0.1 + var(--card-opacity) * 0.28);
}
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-legend .foil::after {
  background-image: var(--dp-flecks), var(--dp-spectrum);
  background-size: 30% auto, 300% 100%;
  background-position: calc(100% - var(--seed-x, 0.4) * 100%) 60%, calc(var(--pointer-from-left, 0.5) * 100%) 0;
  background-repeat: repeat, no-repeat;
  background-blend-mode: multiply;
  mix-blend-mode: screen;
  filter: brightness(1.5) contrast(1.6);
  opacity: calc(0.26 + var(--pointer-from-center) * 0.4);
}
body.fx-holo.fx-holo.fx-holo .tcg.era-dp.era-dp.era-dp.era-dp.era-dp.dp-legend .glare {
  background-image: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(180, 100%, 95%) 5%, hsla(0, 0%, 39%, 0.25) 55%, hsla(0, 0%, 0%, 0.3) 110%);
  mix-blend-mode: overlay;
  filter: brightness(0.8) contrast(1.5);
  opacity: calc(var(--card-opacity) * 0.3);
}