/* GENERATED by scripts/build-holo-css.mjs. Do not edit; edit the app's Resources/Holo and rebuild. */

/* ---- css/cards.css ---- */

.card {

  --grain: url("/holo/img/grain.webp");
  --glitter: url("/holo/img/glitter.png");
  --glittersize: 25%;

  --space: 5%;
  --angle: 133deg;
  --imgsize: cover;

  --red: #f80e35;
  --yellow: #eedf10;
  --green: #21e985;
  --blue: #0dbde9;
  --violet: #c929f1;

  --clip: inset( 9.85% 8% 52.85% 8% );
  --clip-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 8% 9.85%, 8% 47.15%, 0 50%);

  --clip-stage: polygon(91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 92% 47.15%);
  --clip-stage-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 0 50%);

  --clip-trainer: inset(14.5% 8.5% 48.2% 8.5%);
  --clip-borders: inset(2.8% 4% round 2.55% / 1.5%);

}

.card__shine,
.card__glare {
  
  will-change: transform, opacity, background-image, background-size,
    background-position, background-blend-mode, filter;
 
}
/* ---- css/cards/base.css ---- */
/*

  BASE STYLES / VARIABLES
*/







/*

  SHINE LAYERS

*/


:root {
  
  --card-aspect: 0.718;
  --card-radius: 4.55% / 3.5%;
  --card-edge: hsl(47, 100%, 78%);
  --card-back: hsl(205, 100%, 25%);
  --card-glow: hsl(175, 100%, 90%);

  --sunpillar-1: hsl(2, 100%, 73%);
  --sunpillar-2: hsl(53, 100%, 69%);
  --sunpillar-3: hsl(93, 100%, 69%);
  --sunpillar-4: hsl(176, 100%, 76%);
  --sunpillar-5: hsl(228, 100%, 74%);
  --sunpillar-6: hsl(283, 100%, 73%);

  --sunpillar-clr-1: var(--sunpillar-1);
  --sunpillar-clr-2: var(--sunpillar-2);
  --sunpillar-clr-3: var(--sunpillar-3);
  --sunpillar-clr-4: var(--sunpillar-4);
  --sunpillar-clr-5: var(--sunpillar-5);
  --sunpillar-clr-6: var(--sunpillar-6);

}

.card {

  /* place the card on a new transform layer and
  make sure it has hardward acceleration... we gun'need that! */
  -webkit-transform: translate3d(0px, 0px, 0.01px);
  transform: translate3d(0px, 0px, 0.01px);
  pointer-events: none;
  
  /* make sure the card is above others if it's scaled up */
  z-index: calc(var(--card-scale) * 2);
  
  /* every little helps! */
  will-change: transform, visibility, z-index;

  /* this prevents major problems in firefox, but also causes a bit of
  clipping as the card animates to/from active state. worth it. */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.card,
.card * {
  /* outline is a little trick to anti-alias */
  outline: 1px solid transparent;
}

.card:not( .interactive ) .card__translater,
.card:not( .interactive ) .card__rotator,
.card:not( .interactive ) .card__shine,
.card:not( .interactive ) .card__glare {

  /* if this card is not in a framework, we can add simply
    hover effects when it's not "interactive" */
  transition: all 0.3s ease;

}
.card:not( .interactive ):hover {
  
  --pointer-x: 25% !important;
  --pointer-y: 10% !important;
  --card-scale: 1.1 !important;
  --card-opacity: 1 !important;
  --translate-x: 0px !important;
  --translate-y: -10px !important;
  --rotate-x: 7deg !important;
  --rotate-y: -19deg !important;
  --background-x: 44% !important;
  --background-y: 36% !important;
  --pointer-from-center: .9 !important;
  --pointer-from-top: .11 !important;
  --pointer-from-left: .25 !important;
  
}

.card.water       { --card-glow: hsl(192, 97%,  60%); }
.card.fire        { --card-glow: hsl(9,   81%,  59%); }
.card.grass       { --card-glow: hsl(96,  81%,  65%); }
.card.lightning   { --card-glow: hsl(54,  87%,  63%); }
.card.psychic     { --card-glow: hsl(281, 62%,  58%); }
.card.fighting    { --card-glow: rgb(145, 90, 39); }
.card.darkness    { --card-glow: hsl(189, 77%,  27%); }
.card.metal       { --card-glow: hsl(184, 20%,  70%); }
.card.dragon      { --card-glow: hsl(51, 60%, 35%); }
.card.fairy       { --card-glow: hsl(323, 100%, 89%); }

.card,
.card__rotator {
  aspect-ratio: var(--card-aspect);
  border-radius: var(--card-radius);
}

.card.interacting {
  z-index: calc(var(--card-scale) * 120);
}


.card.active .card__translater,
.card.active .card__rotator {
  /* prevent pinch/double-tap zooms on card */
  touch-action: none;
}

.card__translater,
.card__rotator {
  display: grid;
  perspective: 600px;
  will-change: transform, box-shadow;
  transform-origin: center;
  -webkit-transform-origin: center;
  transform-style: preserve-3d;
}

.card__translater {
  width: auto;
  position: relative;

  --translate-z: calc(var(--card-scale) * 150px + 0.01px); /* add 150px to the z-axis to ensure the card is always in front of the others */
  -webkit-transform: translate3d(var(--translate-x), var(--translate-y), var(--translate-z)) scale(var(--card-scale));
  transform: translate3d(var(--translate-x), var(--translate-y), var(--translate-z)) scale(var(--card-scale));
}

.card__rotator {
  -webkit-transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
  
  /* performance */
  pointer-events: auto;
  /* overflow: hidden; <-- this improves perf on mobile, but breaks backface visibility. */
  /* isolation: isolate; <-- this improves perf, but breaks backface visibility on Chrome. */
}

button.card__rotator {
  /* because the card is a button, there's some default
    browser styles which need to be subdued */
  border: none;
  background: transparent;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.card__rotator,
.card.active .card__rotator:focus {
  transition: box-shadow 0.4s ease, opacity .33s ease-out;
  box-shadow: 
    0 0 3px -1px transparent, 
    0 0 2px 1px transparent, 
    0 0 5px 0px transparent,
    0px 10px 20px -5px black, 
    0 2px 15px -5px black,
    0 0 20px 0px transparent;
}

.card.active .card__rotator,
.card__rotator:focus {
  box-shadow: 
    0 0 3px -1px white, 
    0 0 3px 1px var(--card-edge), 
    0 0 12px 2px var(--card-glow), 
    0px 10px 20px -5px black, 
    0 0 40px -30px var(--card-glow), 
    0 0 50px -20px var(--card-glow)
}

.card__rotator * {
  width: 100%;
  display: grid;
  grid-area: 1/1;
  aspect-ratio: var(--card-aspect);
  border-radius: var(--card-radius);
  image-rendering: optimizeQuality;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  pointer-events: none;
  overflow: hidden;
}

.card__rotator img {
  height: auto;
}
.card__rotator img:not(.card__back) {
  -webkit-transform: translate3d(0px, 0px, 0.01px);
  transform: translate3d(0px, 0px, 0.01px);
}

.card__back {
  background-color: var(--card-back);
  -webkit-transform: rotateY(180deg) translateZ(1px);
  transform: rotateY(180deg) translateZ(1px);
  backface-visibility: visible;
}

.card__front,
.card__front * {
  backface-visibility: hidden;
}

.card__front {
  opacity: 1;
  transition: opacity 0.33s ease-out;
  -webkit-transform: translate3d(0px, 0px, 0.01px);
  transform: translate3d(0px, 0px, 0.01px);
}

.loading .card__front {
  opacity: 0;
}

.loading .card__back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}


/**
  
Shine & Glare Effects

**/

.card__shine {

  display: grid;
  transform: translateZ(1px);
  overflow: hidden;
  z-index: 3;

  background: transparent;
  background-size: cover;
  background-position: center;

  filter: brightness(.85) contrast(2.75) saturate(.65);
  mix-blend-mode: color-dodge;

  opacity: var(--card-opacity);

}

.card__shine:before,
.card__shine:after {

  --sunpillar-clr-1: var(--sunpillar-5);
  --sunpillar-clr-2: var(--sunpillar-6);
  --sunpillar-clr-3: var(--sunpillar-1);
  --sunpillar-clr-4: var(--sunpillar-2);
  --sunpillar-clr-5: var(--sunpillar-3);
  --sunpillar-clr-6: var(--sunpillar-4);

  grid-area: 1/1;
  transform: translateZ(1px);
  border-radius: var(--card-radius);

}

.card__shine:after {

  --sunpillar-clr-1: var( --sunpillar-6 );
  --sunpillar-clr-2: var( --sunpillar-1 ); 
  --sunpillar-clr-3: var( --sunpillar-2 );
  --sunpillar-clr-4: var( --sunpillar-3 );
  --sunpillar-clr-5: var( --sunpillar-4 );
  --sunpillar-clr-6: var( --sunpillar-5 );

  transform: translateZ(1.2px);
  
}

.card__glare {

  /* make sure the glare doesn't clip */
  transform: translateZ(1.41px);
  overflow: hidden;

  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.8) 10%,
    hsla(0, 0%, 100%, 0.65) 20%,
    hsla(0, 0%, 0%, 0.5) 90%
  );

  opacity: var(--card-opacity);
  mix-blend-mode: overlay;
  
}






/**

  Masking Effects

**/

.card.masked .card__shine,
.card.masked .card__shine:before,
.card.masked .card__shine:after {

  /** masking image for cards which are masked **/
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
	-webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;

}

.card[data-rarity="rare holo"] .card__glare:after,
.card[data-rarity="rare holo cosmos"] .card__glare:after,
.card[data-rarity$="reverse holo"] .card__glare:after {
  clip-path: var(--clip);
}

.card[data-rarity="rare holo"][data-subtypes^="stage"] .card__glare:after,
.card[data-rarity="rare holo cosmos"][data-subtypes^="stage"] .card__glare:after,
.card[data-rarity$="reverse holo"][data-subtypes^="stage"] .card__glare:after {
  clip-path: var(--clip-stage);
}

.card[data-rarity="rare holo"][data-supertype="trainer"] .card__glare:after,
.card[data-rarity="rare holo cosmos"][data-supertype="trainer"] .card__glare:after,
.card[data-rarity$="reverse holo"][data-supertype="trainer"] .card__glare:after {
  clip-path: var(--clip-trainer);
}

/* ---- css/cards/basic.css ---- */
/*

  BASIC CARDS

*/



/*

  GLARE LAYERS

*/


/* ---- css/cards/regular-holo.css ---- */
/*

  REGULAR HOLO

*/

.card[data-rarity="rare holo"][data-subtypes^="stage"] .card__shine,
.card[data-rarity="rare holo"][data-subtypes^="stage"] .card__glare:after {
  clip-path: var(--clip-stage);
}
.card[data-rarity="rare holo"][data-subtypes^="supporter"] .card__shine,
.card[data-rarity="rare holo"][data-subtypes^="supporter"] .card__glare:after,
.card[data-rarity="rare holo"][data-subtypes^="item"] .card__shine,
.card[data-rarity="rare holo"][data-subtypes^="item"] .card__glare:after {
  clip-path: var(--clip-trainer);
}






/*

  SHINE LAYERS

*/

.card[data-rarity="rare holo"] .card__shine {

  --scanlines-space: 1px;
  --scanlines-light: #666;
  --scanlines-dark: black;

  --bars: 3%;
  --bar-color: hsla(0, 0%, 70%, 1);
  --bar-bg: hsla(0, 0%, 0%, 1);

  clip-path: var(--clip);

  background-image: 
    repeating-linear-gradient( 110deg, 
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red), 
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red)
    ),
    repeating-linear-gradient( 90deg, 
      var(--scanlines-dark) calc(var(--scanlines-space) * 0), var(--scanlines-dark) calc(var(--scanlines-space) * 2),
      var(--scanlines-light) calc(var(--scanlines-space) * 2), var(--scanlines-light) calc(var(--scanlines-space) * 4)
    );

  background-position: 
    calc(((50% - var(--background-x)) * 2.6) + 50%) calc(((50% - var(--background-y)) * 3.5) + 50%),
    center center;

  background-size: 
    400% 400%, 
    cover;

  background-blend-mode: overlay;
  filter: brightness(1.1) contrast(1.1) saturate(1.2);
  mix-blend-mode: color-dodge;

}

.card[data-rarity="rare holo"] .card__shine:before {
  
  content: "";

  background-image:
    repeating-linear-gradient( 90deg, 
      var(--bar-bg) calc(var(--bars)*2), 
      var(--bar-color) calc(var(--bars)*3), 
      var(--bar-bg) calc(var(--bars)*3.5), 
      var(--bar-color) calc(var(--bars)*4), 
      var(--bar-bg) calc(var(--bars)*5), 
      var(--bar-bg) calc(var(--bars)*14)
    ),
    repeating-linear-gradient( 90deg, 
      var(--bar-bg) calc(var(--bars)*2), 
      var(--bar-color) calc(var(--bars)*3), 
      var(--bar-bg) calc(var(--bars)*3.5), 
      var(--bar-color) calc(var(--bars)*4), 
      var(--bar-bg) calc(var(--bars)*5), 
      var(--bar-bg) calc(var(--bars)*10)
    );

  background-position: 
    calc((((50% - var(--background-x)) * 1.65) + 50% ) + (var(--background-y) * 0.5)) var(--background-x), 
    calc((((50% - var(--background-x)) * -0.9) + 50%) - (var(--background-y) * 0.75) ) var(--background-y);

  background-size: 
    200% 200%,
    200% 200%;

  background-blend-mode: screen;
  filter: brightness( 1.15 ) contrast( 1.1 );
  mix-blend-mode: hard-light;

}

.card[data-rarity="rare holo"] .card__shine:after {

  content: "";
    
  background-image: 
    radial-gradient( 
      farthest-corner circle 
        at var(--pointer-x) var(--pointer-y), 
        hsla(0, 0%, 90%, 0.8) 0%, 
        hsla(0, 0%, 78%, 0.1) 25%, 
        hsl(0, 0%, 0%) 90% 
    );
    
  background-position: 
    center center;

  background-size:
    cover;

  mix-blend-mode: luminosity; 
  filter: brightness(0.6) contrast(4);

}

@media screen and (max-width: 900px) {
  .card[data-rarity="rare holo"] .card__shine {
    --scanlines-space: .5px;
  }
}






/*

  GLARE LAYERS

*/

.card[data-rarity="rare holo"] .card__glare {

  opacity: calc( var(--card-opacity) * .8 );
  filter: brightness(0.8) contrast(1.5);
  mix-blend-mode: overlay;

}

.card[data-rarity="rare holo"] .card__glare:after {

  content: "";

  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.36) 110% 
    );

  mix-blend-mode: overlay;
  filter: brightness(.6) contrast(3);

}










/*

  NO MASK

*/



/* ---- css/cards/reverse-holo.css ---- */
/*

  REVERSE HOLO

*/







/*

  SHINE LAYERS

*/
.card {
  --foil-brightness: 0.55;
}

.card[data-rarity$="reverse holo"] .card__shine {
  
  background-image: 
    radial-gradient( 
      circle at var(--pointer-x) var(--pointer-y),
      #fff 5%, 
      #000 50%, 
      #fff 80% 
    ), 
    linear-gradient( 
      -45deg, 
      #000 15%, 
      #fff, 
      #000 85% 
    ), 
    var(--foil);

  background-blend-mode: soft-light, difference;
  background-size: 120% 120%, 200% 200%, cover;
  background-position: center center, calc( (100% * var(--pointer-from-left))) calc( (100% * var(--pointer-from-top))) , center center;
  
  filter: brightness(var(--foil-brightness)) contrast(1.5) saturate(1);
  mix-blend-mode: color-dodge;

  opacity: calc( (1.5 * var(--card-opacity)) - var(--pointer-from-center));
  
}

.card.lightning   { --foil-brightness: 0.7; }
.card.darkness    { --foil-brightness: 0.8; }
.card.metal       { --foil-brightness: 0.6; }









/*

  GLARE LAYERS

*/
	
.card[data-rarity$="reverse holo"] .card__glare {

  opacity: var(--card-opacity);
  
  background-image: 
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0.8) 10%,
      hsla(0, 0%, 100%, 0.5) 20%,
      hsla(0, 0%, 0%, 0.75) 90%
    );

  filter: brightness(.7) contrast(1.5);

}

.card[data-rarity$="reverse holo"] .card__glare:after {

  content: "";
  opacity: var(--card-opacity);
  
  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0, 0%, 100%) 10%, 
      hsla(0, 0%, 100%, 0.5) 20%, 
      hsla(0, 0%, 0%, 0.5) 120% 
    );

  filter: brightness(1) contrast(1.5);

}










/*

  NO MASK

*/

.card:not(.masked)[data-rarity$="reverse holo"] .card__shine {
  --foil: none;
  clip-path: var(--clip-invert);
}

.card:not(.masked)[data-rarity$="reverse holo"][data-subtypes^="stage"] .card__glare:after {
  clip-path: var(--clip-stage-invert);
}

.card:not(.masked)[data-rarity$="reverse holo"][data-supertype="trainer"] .card__glare:after {
  clip-path: var(--clip-trainer-invert);
}



/* ---- css/cards/cosmos-holo.css ---- */
/*

  COSMOS HOLO

*/

.card[data-rarity="rare holo cosmos"][data-subtypes^="stage"] .card__shine,
.card[data-rarity="rare holo cosmos"][data-subtypes^="stage"] .card__glare:after {
  clip-path: var(--clip-stage);
}
.card[data-rarity="rare holo cosmos"][data-subtypes^="supporter"] .card__shine,
.card[data-rarity="rare holo cosmos"][data-subtypes^="supporter"] .card__glare:after {
  clip-path: var(--clip-trainer);
}






/*

  SHINE LAYERS

*/

.card[data-rarity="rare holo cosmos"] .card__shine {

  --space: 4%;

  clip-path: var(--clip);

  background-image: 
    url("/holo/img/cosmos-bottom.png"), 
    repeating-linear-gradient(
      82deg, 
      hsl(53, 65%, 60%) calc(var(--space)*1), 
      hsl(93, 56%, 50%) calc(var(--space)*2), 
      hsl(176, 54%, 49%) calc(var(--space)*3), 
      hsl(228, 59%, 55%) calc(var(--space)*4), 
      hsl(283, 60%, 55%) calc(var(--space)*5), 
      hsl(326, 59%, 51%) calc(var(--space)*6), 
      hsl(326, 59%, 51%) calc(var(--space)*7), 
      hsl(283, 60%, 55%) calc(var(--space)*8), 
      hsl(228, 59%, 55%) calc(var(--space)*9), 
      hsl(176, 54%, 49%) calc(var(--space)*10), 
      hsl(93, 56%, 50%) calc(var(--space)*11), 
      hsl(53, 65%, 60%) calc(var(--space)*12) 
    ), 
    radial-gradient( 
      farthest-corner circle 
      at var(--pointer-x) var(--pointer-y), 
      hsla(180, 100%, 89%, 0.5) 5%, 
      hsla(180, 14%, 57%, 0.3) 40%, 
      hsl(0, 0%, 0%) 130% 
  );

  background-blend-mode: 
    color-burn, 
    multiply;

  background-position: 
    var(--cosmosbg, center center),
    calc( 10% + ( var(--pointer-from-left) * 80% ) ) calc( 10% + ( var(--pointer-from-top) * 80% ) ), 
    center center;

  background-size: cover, 400% 900%, cover;

  filter: brightness(1) contrast(1) saturate(.8);
  mix-blend-mode: color-dodge;

}



.card[data-rarity="rare holo cosmos"] .card__shine:before {

  content: "";
  z-index: 2;

  background-image: 
    url("/holo/img/cosmos-middle-trans.png"), 
    repeating-linear-gradient(
      82deg, 
      hsl(53, 65%, 60%) calc(var(--space)*1), 
      hsl(93, 56%, 50%) calc(var(--space)*2), 
      hsl(176, 54%, 49%) calc(var(--space)*3), 
      hsl(228, 59%, 55%) calc(var(--space)*4), 
      hsl(283, 60%, 55%) calc(var(--space)*5), 
      hsl(326, 59%, 51%) calc(var(--space)*6), 
      hsl(326, 59%, 51%) calc(var(--space)*7), 
      hsl(283, 60%, 55%) calc(var(--space)*8), 
      hsl(228, 59%, 55%) calc(var(--space)*9), 
      hsl(176, 54%, 49%) calc(var(--space)*10), 
      hsl(93, 56%, 50%) calc(var(--space)*11), 
      hsl(53, 65%, 60%) calc(var(--space)*12) 
    );

  background-blend-mode: 
    lighten, 
    multiply;

  background-position: 
    var(--cosmosbg, center center), 
    calc( 15% + ( var(--pointer-from-left) * 70% ) ) calc( 15% + ( var(--pointer-from-top) * 70% ) ), 
    center center;

  background-size: cover, 400% 900%, cover;

  filter: brightness(1.25) contrast(1.75) saturate(.8);
  mix-blend-mode: overlay;

}


.card[data-rarity="rare holo cosmos"] .card__shine:after {
  
  content: "";
  z-index: 3;

  background-image: 
    url("/holo/img/cosmos-top-trans.png"), 
    repeating-linear-gradient(
      82deg, 
      hsl(53, 65%, 60%) calc(var(--space)*1), 
      hsl(93, 56%, 50%) calc(var(--space)*2), 
      hsl(176, 54%, 49%) calc(var(--space)*3), 
      hsl(228, 59%, 55%) calc(var(--space)*4), 
      hsl(283, 60%, 55%) calc(var(--space)*5), 
      hsl(326, 59%, 51%) calc(var(--space)*6), 
      hsl(326, 59%, 51%) calc(var(--space)*7), 
      hsl(283, 60%, 55%) calc(var(--space)*8), 
      hsl(228, 59%, 55%) calc(var(--space)*9), 
      hsl(176, 54%, 49%) calc(var(--space)*10), 
      hsl(93, 56%, 50%) calc(var(--space)*11), 
      hsl(53, 65%, 60%) calc(var(--space)*12) 
    );

  background-blend-mode: 
    multiply, 
    multiply;

  background-position: 
    var(--cosmosbg, center center), 
    calc( 20% + ( var(--pointer-from-left) * 60% ) ) calc( 20% + ( var(--pointer-from-top) * 60% ) ), 
    center center;

  background-size: cover, 400% 900%, cover;

  filter: brightness(1.25) contrast(1.75) saturate(.8);
  mix-blend-mode: multiply;

}





/*

  GLARE LAYERS

*/

.card[data-rarity="rare holo cosmos"] .card__glare {
  
  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(204, 100%, 95%, 0.8) 5%, 
      hsla(250, 15%, 20%, 1) 150% 
    );
  filter: brightness(.75) contrast(2) saturate(2);
  mix-blend-mode: overlay;
  opacity: calc( var(--card-opacity) * ( 0.25 + var(--pointer-from-center) ) );
    
}

.card[data-rarity="rare holo cosmos"] .card__glare:after {

  content: "";

  background-image: 
    radial-gradient( farthest-corner circle at 
      var(--pointer-x) var(--pointer-y), 
      hsl(280, 100%, 96%) 5%, 
      hsl(0, 0%, 10%) 60%
    );

  filter: brightness(.75) contrast(2.5) saturate(2);
  mix-blend-mode: soft-light;
  opacity: calc( 1 - var(--pointer-from-top) * .75 );

}

/* ---- css/cards/era-holo.css ---- */
/*
  HISTORICAL SHEET HOLOS

  `data-rarity` says what the card is. `data-foil` says which physical sheet
  was used. Keeping those independent is what stops a 2002 Galaxy holo from
  inheriting Sword & Shield's vertical line stock.

  These treatments keep the physical pattern for each era without turning it
  into opaque RGB bars. They still need a hard white reflection and discrete
  blown-out facets: without those peaks a correct mask only looks tinted.
*/

.card[data-rarity="rare holo"][data-foil]:not([data-foil="none"]) .card__shine {
  clip-path: var(--clip);
  opacity: calc(var(--card-opacity) * .88);
}

.card[data-rarity="rare holo"][data-foil]:not([data-foil="none"]) .card__shine:before,
.card[data-rarity="rare holo"][data-foil]:not([data-foil="none"]) .card__shine:after {
  content: "";
  background-blend-mode: normal;
  background-position: center;
  background-size: cover;
  background-repeat: repeat;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
}

/*
  ONE HIGHLIGHT, NOT THREE. 17 Sep 2026.

  This rule, its `:before` and its `:after` used to put three full-coverage
  near-white layers on the glare, all `mix-blend-mode: screen`, on top of his
  own glare and on top of the shine's own dodge layers. Screen is additive:
  six near-white layers over the same box saturate to white, which is the
  "harsh and whitish" every vintage card came back with.

  IT IS ALSO WHY THEY WERE NOT SPARKLY, and that is the less obvious half. A
  cosmos or starlight sheet reads as sparkle because the field BETWEEN the
  stars is dark. A full-coverage screen wash lifts the gaps exactly as much as
  it lifts the stars, so the contrast that makes them read as discrete points
  collapses into a haze. Removing the washes does more for the glitter than
  any amount of brightening the stars themselves.

  The answer is NOT to dim everything — see the note in `CardHeroPanel`, which
  is right that `--card-opacity` lands on a `color-dodge` layer and that
  holding it at 0.55 is what turned the sparkle into a pastel wash. The shine
  keeps its headroom. Only the glare comes down.
*/
.card[data-rarity="rare holo"][data-foil]:not([data-foil="none"]) .card__glare {
  /* TAMED FOR EVERY ERA, 17 Sep 2026 (second time of asking).

     These three layers — this rule, its `:before` and its `:after` — used to
     put three full-coverage near-white `screen` washes on the glare, on top of
     his own and on top of the shine's dodge layers. Six near-white layers over
     one box; screen is additive, so they saturate to white.

     They were cut for vintage first and put back here because the change was
     scoped to vintage. Roy then sent a Diamond & Pearl Raichu with the whole
     lower half of the card blown out: "light too bright its too much glare".
     Same six layers, same result, on a modern frame. So the cut applies
     everywhere now, and there is no era split in this rule any more. */
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(205, 60%, 92%, .34) 0%,
    hsla(195, 82%, 86%, .14) 26%,
    hsla(292, 66%, 80%, .06) 44%,
    transparent 72%
  );
  filter: contrast(1.06);
  mix-blend-mode: screen;
  opacity: calc(var(--card-opacity) * .5);
}

/*
  A PATTERN IS NOT A REFLECTION.

  The era layers below describe the stock (stars, waves, vertical lines), but
  the foil still needs a moving specular response to read as metal. Keeping
  that response on its own layer is what lets the pattern stay quiet without
  making the card look matte. It has a white core and very narrow spectral
  fringes, rather than the opaque rainbow bars that previously washed out the
  illustration.

  On cards with an exact TCG Live mask this highlight is masked too, so it can
  never escape onto ink or the border. Older cards keep their measured art-box
  fallback. The highlight becomes stronger away from the face-on position;
  that change in intensity, not just a gradient sliding around, is the visual
  cue that the light is reflecting off a physical sheet.
*/
.card[data-rarity="rare holo"][data-foil]:not([data-foil="none"]) .card__glare:before {
  content: "";
  display: grid;
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: var(--card-aspect);
  border-radius: var(--card-radius);
  /* Core was a full-opacity white ellipse and the sweep band was white at
     .76; together they were most of the blow-out on Roy's Raichu. */
  background-image:
    radial-gradient(ellipse 52% 42% at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, .62) 0%,
      hsla(195, 94%, 90%, .3) 18%,
      hsla(292, 76%, 84%, .12) 34%,
      transparent 62%),
    linear-gradient(116deg,
      transparent 28%,
      hsla(200, 92%, 86%, .12) 36%,
      hsla(0, 0%, 100%, .34) 45%,
      hsla(310, 78%, 86%, .14) 52%,
      transparent 66%);
  background-size: cover, 185% 185%;
  background-position:
    center,
    var(--background-x) var(--background-y);
  filter: brightness(calc(1.0 + var(--pointer-from-center) * .16)) contrast(1.06);
  mix-blend-mode: screen;
  opacity: calc(.24 + var(--pointer-from-center) * .22);
  transform: translateZ(1.46px);
}

.card.masked[data-rarity="rare holo"][data-foil]:not([data-foil="none"]) .card__glare:before {
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.card:not(.masked)[data-rarity="rare holo"][data-foil]:not([data-foil="none"]) .card__glare:before {
  clip-path: var(--clip);
}

.card:not(.masked)[data-rarity="rare holo"][data-foil]:not([data-foil="none"])[data-subtypes^="stage"] .card__glare:before {
  clip-path: var(--clip-stage);
}

.card:not(.masked)[data-rarity="rare holo"][data-foil]:not([data-foil="none"])[data-supertype="trainer"] .card__glare:before {
  clip-path: var(--clip-trainer);
}

/* THE THIRD WASH IS GONE FOR EVERY ERA. A third white radial at .68 screened
   over the same box as the two above. His own `base.css` only ever sets
   `clip-path` on this pseudo-element and never gives it `content`, so with
   this rule removed it stops generating. */


/* Base, Jungle, Fossil, and Legendary Collection regular holos. */
.card[data-vintage="true"][data-rarity="rare holo"][data-foil="starlight"] .card__shine {
  background-image:
    url("/holo/img/galaxy.jpg"),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y),
      hsla(190, 54%, 88%, .24) 0%, hsla(265, 40%, 46%, .1) 24%, transparent 58%);
  background-size: 150% 150%, cover;
  background-position:
    calc(35% + var(--pointer-from-left) * 30%) calc(35% + var(--pointer-from-top) * 30%),
    center;
  background-blend-mode: screen, soft-light;
  /* Same move as cosmos: a darker field is what makes the distant-star stock
     read as points of light rather than as grain. */
  /* Quiet and desaturated: this is the BACKGROUND for the points now. All
     the hue lives on the two star layers below. */
  filter: brightness(.6) contrast(1.35) saturate(.55);
  mix-blend-mode: screen;

  /* SOMEWHERE DARK FOR THE STARS TO SIT — and `contrast`, not `brightness`.
     Measured against a macro of a real Base Set holo: the field between the
     stars is nearly black and every star is a small saturated point. Ours
     could never go dark, because the scan underneath is a bright printed
     picture and nothing screened on top can subtract from it.
     `brightness()` on the backdrop fixes that and takes Charizard with it —
     the whole window dims, ink included. `contrast()` is the right tool: it
     pushes the already-dark background toward black while LEAVING the bright
     printed ink bright, which is what the real card does, because there the
     art is printed OVER the foil rather than beside it. Measured limit: past
     about 1.8 the orange ink starts dulling. */
  -webkit-backdrop-filter: contrast(1.45) brightness(.92);
  backdrop-filter: contrast(1.45) brightness(.92);
}


.card[data-vintage="true"][data-rarity="rare holo"][data-foil="starlight"] .card__shine:before {
  z-index: 2;
  /* THE COLOUR WAS ON THE WRONG LAYER, AND THAT IS THE WHOLE FAULT.

     This was a card-wide rainbow at `background-size: 245%` masked by the
     starburst texture at `mask-size: 74% 70%`, so each "star" was most of a
     card wide and what arrived on screen was broad diagonal BANDS of colour
     rather than points. Switching this pair off on its own takes the smear
     with it, which is how it was found.

     A real Base Set holo has a neutral field and puts all of its colour on
     small discrete points, each a single saturated hue, a green star next to
     a blue one. So: shrink the mask until a cell is star-sized, and raise the
     gradient's frequency until neighbouring cells land on different hues.
     Same two files, same mechanism, different scale. */
  background-image: linear-gradient(126deg,
    hsl(150, 100%, 55%) 0%,  hsl(196, 100%, 58%) 12%, hsl(228, 100%, 62%) 24%,
    hsl(288, 100%, 64%) 36%, hsl(330, 100%, 60%) 48%, hsl(20, 100%, 58%) 60%,
    hsl(52, 100%, 58%) 72%,  hsl(96, 100%, 52%) 84%,  hsl(150, 100%, 55%) 100%);
  background-size: 55% 55%;
  background-position: var(--background-x) var(--background-y);
  -webkit-mask-image: url("/holo/img/lc-fireworks-mask.png");
  mask-image: url("/holo/img/lc-fireworks-mask.png");
  -webkit-mask-position:
    calc(var(--pointer-from-left) * -24px) calc(var(--pointer-from-top) * -28px);
  mask-position:
    calc(var(--pointer-from-left) * -24px) calc(var(--pointer-from-top) * -28px);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 20% 19%;
  mask-size: 20% 19%;
  filter: brightness(1.15) contrast(1.35) saturate(1.5);
  mix-blend-mode: screen;
  opacity: calc(.66 + var(--pointer-from-center) * .32);
}


.card[data-vintage="true"][data-rarity="rare holo"][data-foil="starlight"] .card__shine:after {
  z-index: 3;
  /* The second, finer pass of points: smaller cells than `:before` so the two
     never line up, and `color-dodge` so the brightest blow to white. A real
     sheet has a few stars much brighter than the rest. */
  background-image: linear-gradient(126deg,
    hsl(150, 100%, 55%) 0%,  hsl(196, 100%, 58%) 12%, hsl(228, 100%, 62%) 24%,
    hsl(288, 100%, 64%) 36%, hsl(330, 100%, 60%) 48%, hsl(20, 100%, 58%) 60%,
    hsl(52, 100%, 58%) 72%,  hsl(96, 100%, 52%) 84%,  hsl(150, 100%, 55%) 100%);
  background-size: 55% 55%;
  background-position: var(--background-x) var(--background-y);
  -webkit-mask-image: url("/holo/img/lc-fireworks-mask.png");
  mask-image: url("/holo/img/lc-fireworks-mask.png");
  -webkit-mask-position:
    calc(76% - var(--pointer-from-left) * 17px) calc(68% - var(--pointer-from-top) * 21px);
  mask-position:
    calc(76% - var(--pointer-from-left) * 17px) calc(68% - var(--pointer-from-top) * 21px);
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 14% 13%;
  mask-size: 14% 13%;
  filter: brightness(1.3) contrast(1.5) saturate(1.6);
  mix-blend-mode: color-dodge;
  opacity: calc(.50 + var(--pointer-from-center) * .34);
}


/* Base Set 2 through Call of Legends, plus explicitly named Cosmos prints. */
.card[data-vintage="true"][data-rarity="rare holo"][data-foil="cosmos"] .card__shine {
  background-image:
    url("/holo/img/cosmos.png"),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y),
      hsla(55, 62%, 83%, .42), hsla(205, 52%, 58%, .16) 28%, transparent 62%);
  background-size: 142% 142%, cover;
  background-position:
    calc(45% + var(--pointer-from-left) * 16%) calc(42% + var(--pointer-from-top) * 18%),
    center;
  /* The field is pulled down and the contrast up so the stars sit on
     something dark. Overlay rather than soft-light on the tint keeps the
     midtones from lifting with it. */
  background-blend-mode: screen, overlay;
  filter: brightness(.82) contrast(1.62) saturate(1.06);
  mix-blend-mode: screen;

  /* Same backdrop as starlight, same reason — see the note there. Cosmos
     draws its own stars from `cosmos.png` rather than a masked gradient, so
     only the field needed the help. */
  -webkit-backdrop-filter: contrast(1.45) brightness(.92);
  backdrop-filter: contrast(1.45) brightness(.92);
}

.card[data-vintage="true"][data-rarity="rare holo"][data-foil="cosmos"] .card__shine:before {
  z-index: 2;
  background-image: url("/holo/img/cosmos-top-trans.png");
  background-size: 165% 165%;
  background-position:
    calc(64% - var(--pointer-from-left) * 28%) calc(64% - var(--pointer-from-top) * 28%);
  /* STILL color-dodge, deliberately. This is the layer that blows the star
     cores to white and makes them read as thousands of discrete points; it is
     the one thing that must keep its headroom. Brightness comes down because
     the field beneath it is darker now, contrast goes up to hold the points. */
  filter: brightness(1.18) contrast(1.9) saturate(.9);
  mix-blend-mode: color-dodge;
  opacity: calc(.30 + var(--pointer-from-center) * .26);
}

.card[data-vintage="true"][data-rarity="rare holo"][data-foil="cosmos"] .card__shine:after {
  z-index: 3;
  background-image: radial-gradient(circle at var(--pointer-x) var(--pointer-y),
    hsla(45, 85%, 88%, .25), hsla(190, 70%, 78%, .08) 20%, transparent 48%);
  background-size: cover;
  mix-blend-mode: screen;
  /* Was .82 — a fourth full-coverage wash in all but name. */
  opacity: .4;
}

/* Black & White: extremely fine horizontal tinsel threads. */
.card[data-rarity="rare holo"][data-foil="tinsel"] .card__shine {
  background-image:
    repeating-linear-gradient(0deg,
      hsla(0, 0%, 100%, .08) 0 1px, transparent 1px 4px),
    linear-gradient(110deg,
      hsla(280, 62%, 64%, .12), hsla(190, 62%, 66%, .16),
      hsla(52, 68%, 72%, .14), hsla(325, 58%, 66%, .1)),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), #cfeff2 0%, #263445 52%, #050505 100%);
  background-size: 100% 8px, 260% 260%, cover;
  background-position:
    0 calc(var(--pointer-from-top) * 8px),
    calc(var(--pointer-from-left) * 100%) calc(var(--pointer-from-top) * 100%),
    center;
  background-blend-mode: screen, color, multiply;
  filter: brightness(.94) contrast(1.18) saturate(.72);
  mix-blend-mode: screen;
  opacity: calc(var(--card-opacity) * .68);
}

.card[data-rarity="rare holo"][data-foil="tinsel"] .card__shine:before {
  background-image: repeating-linear-gradient(0deg,
    transparent 0 6px, hsla(0, 0%, 100%, .26) 7px, transparent 8px 13px);
  background-position: 0 calc(var(--pointer-from-top) * -13px);
  background-size: 100% 13px;
  mix-blend-mode: screen;
  opacity: .42;
}

.card[data-rarity="rare holo"][data-foil="tinsel"] .card__shine:after,
.card[data-rarity="rare holo"][data-foil="line"] .card__shine:after,
.card[data-rarity="rare holo"][data-foil="mirage"] .card__shine:after {
  background-image: radial-gradient(circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, .62),
    hsla(195, 82%, 86%, .18) 18%,
    hsla(300, 64%, 80%, .1) 30%,
    transparent 48%);
  background-size: cover;
  filter: none;
  mix-blend-mode: screen;
  opacity: calc(.42 + var(--pointer-from-center) * .38);
}

/* XY: diagonal pearlescent sheen, without opaque rainbow bands. */
.card[data-rarity="rare holo"][data-foil="sheen"] .card__shine {
  background-image:
    repeating-linear-gradient(128deg,
      transparent 0 8px, hsla(0, 0%, 100%, .18) 9px,
      transparent 10px 22px),
    linear-gradient(128deg,
      hsla(215, 70%, 74%, .18), hsla(300, 56%, 68%, .26),
      hsla(50, 72%, 76%, .22), hsla(170, 58%, 70%, .22),
      hsla(215, 70%, 74%, .18));
  background-size: 46px 46px, 340% 340%;
  background-position:
    calc(var(--pointer-from-left) * -24px) calc(var(--pointer-from-top) * 24px),
    calc(var(--pointer-from-left) * 100%) calc(var(--pointer-from-top) * 100%);
  background-blend-mode: screen, soft-light;
  filter: brightness(.96) contrast(1.08) saturate(.7);
  mix-blend-mode: color-dodge;
}

.card[data-rarity="rare holo"][data-foil="sheen"] .card__shine:before {
  background-image: linear-gradient(128deg,
    transparent 28%, hsla(0, 0%, 100%, .32) 44%,
    hsla(190, 58%, 80%, .16) 50%, transparent 68%);
  background-size: 230% 230%;
  background-position:
    calc(var(--pointer-from-left) * 100%) calc(var(--pointer-from-top) * 100%);
  mix-blend-mode: screen;
  opacity: .58;
}

.card[data-rarity="rare holo"][data-foil="sheen"] .card__shine:after {
  background-image: radial-gradient(circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, .4), transparent 46%);
  background-size: cover;
  mix-blend-mode: soft-light;
  opacity: .66;
}

/* Sun & Moon: the wave-like Water Web sheet. */
.card[data-rarity="rare holo"][data-foil="water-web"] .card__shine {
  background-image:
    linear-gradient(112deg,
      hsla(200, 68%, 72%, .1), hsla(285, 55%, 68%, .1),
      hsla(48, 72%, 76%, .1), hsla(165, 62%, 70%, .12)),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), #d8f1f4, #17242d 62%, #050607);
  background-size: 300% 300%, cover;
  background-position:
    calc(var(--pointer-from-left) * 100%) calc(var(--pointer-from-top) * 100%),
    center;
  background-blend-mode: color, multiply;
  filter: brightness(.9) contrast(1.2) saturate(.68);
  mix-blend-mode: screen;
  opacity: calc(var(--card-opacity) * .66);
}

.card[data-rarity="rare holo"][data-foil="water-web"] .card__shine:before {
  background-image:
    repeating-radial-gradient(ellipse at 12% 18%,
      transparent 0 9px, hsla(0, 0%, 100%, .2) 10px,
      transparent 11px 19px);
  background-size: 54px 38px;
  background-position:
    calc(var(--pointer-from-left) * 26px) calc(var(--pointer-from-top) * 20px);
  filter: blur(.15px);
  mix-blend-mode: screen;
  opacity: .34;
}

.card[data-rarity="rare holo"][data-foil="water-web"] .card__shine:after {
  background-image: radial-gradient(circle at var(--pointer-x) var(--pointer-y),
    hsla(190, 75%, 90%, .46), transparent 42%);
  background-size: cover;
  mix-blend-mode: screen;
  opacity: .65;
}

/* Sword & Shield: vertical line stock, kept fine and low-contrast. */
.card[data-rarity="rare holo"][data-foil="line"] .card__shine {
  background-image:
    linear-gradient(112deg,
      hsla(275, 58%, 66%, .1), hsla(198, 64%, 68%, .14),
      hsla(54, 70%, 75%, .12), hsla(330, 55%, 67%, .09));
  background-size: 300% 300%;
  background-position:
    calc(var(--pointer-from-left) * 100%) calc(var(--pointer-from-top) * 100%);
  background-blend-mode: soft-light;
  filter: brightness(.94) contrast(1.08) saturate(.68);
  mix-blend-mode: screen;
  opacity: calc(var(--card-opacity) * .64);
}

.card[data-rarity="rare holo"][data-foil="line"] .card__shine:before {
  background-image: repeating-linear-gradient(90deg,
    transparent 0 8px, hsla(0, 0%, 100%, .12) 9px, transparent 10px 18px);
  background-position: calc(var(--pointer-from-left) * 18px) 0;
  background-size: 18px 100%;
  mix-blend-mode: screen;
  opacity: .38;
}

/* Scarlet & Violet and current stock: fine horizontal mirage threads. */
.card[data-rarity="rare holo"][data-foil="mirage"] .card__shine {
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0 2px, hsla(0, 0%, 100%, .07) 3px,
      transparent 4px 7px),
    linear-gradient(100deg,
      hsla(185, 58%, 72%, .12), hsla(255, 55%, 70%, .09),
      hsla(330, 58%, 72%, .11), hsla(54, 65%, 76%, .1),
      hsla(185, 58%, 72%, .12));
  background-size: 100% 12px, 350% 350%;
  background-position:
    0 calc(var(--pointer-from-top) * -12px),
    calc(var(--pointer-from-left) * 100%) calc(var(--pointer-from-top) * 100%);
  background-blend-mode: screen, soft-light;
  filter: brightness(.94) contrast(1.1) saturate(.66);
  mix-blend-mode: screen;
  opacity: calc(var(--card-opacity) * .64);
}

.card[data-rarity="rare holo"][data-foil="mirage"] .card__shine:before {
  background-image: repeating-linear-gradient(0deg,
    transparent 0 10px, hsla(0, 0%, 100%, .2) 11px, transparent 12px 24px);
  background-position: 0 calc(var(--pointer-from-top) * 24px);
  background-size: 100% 24px;
  mix-blend-mode: screen;
  opacity: .26;
}

/*
  Exact masks also carry per-pixel foil strength: most pixels are transparent
  and only the strongest facets are fully opaque. A soft-light treatment gets
  attenuated twice there and can leave the correct pattern looking printed on.
  Color dodge restores the sharp, high-energy glints only inside those measured
  facets; it cannot wash across the rest of the card because the exact mask is
  still the final compositing boundary.
*/
.card.masked[data-rarity="rare holo"][data-foil]:not([data-foil="none"]) .card__shine {
  filter: brightness(1.2) contrast(1.42) saturate(1.2);
  mix-blend-mode: color-dodge;
  opacity: calc(var(--card-opacity) * .96);
}

/*
  Legendary Collection reverse: dense fractured silver foil across the
  printed face, never the illustration. This is a separate material from the
  sparse star field used by the regular holo above.
*/
.card[data-rarity$="reverse holo"][data-foil="fireworks"] .card__shine {
  --foil: none;
  -webkit-backdrop-filter: saturate(1.08) brightness(.9) contrast(1.16);
  backdrop-filter: saturate(1.08) brightness(.9) contrast(1.16);
  background-image:
    radial-gradient(ellipse 46% 42% at var(--pointer-x) var(--pointer-y),
      hsla(186, 100%, 75%, .52) 0%,
      hsla(224, 88%, 55%, .28) 32%,
      hsla(292, 84%, 57%, .2) 52%,
      transparent 76%),
    linear-gradient(126deg,
      hsla(220, 78%, 22%, .78) 0%,
      hsla(190, 94%, 58%, .66) 16%,
      hsla(245, 72%, 44%, .7) 31%,
      hsla(314, 86%, 58%, .62) 45%,
      hsla(45, 92%, 62%, .64) 58%,
      hsla(171, 88%, 52%, .66) 72%,
      hsla(218, 86%, 50%, .72) 87%,
      hsla(226, 70%, 20%, .78) 100%);
  background-size: cover, 260% 260%;
  background-position: center, var(--background-x) var(--background-y);
  background-blend-mode: screen, normal;
  /* 17 Sep 2026, measured against a macro of a real Legendary Collection
     reverse: the card's colour is far more saturated than this was drawing,
     and the veil over it was hiding the burst layers underneath. */
  /* 21 Sep 2026: toned down from .72 / saturate(1.9). Unmasked, this layer
     covers the whole frame of the card, and at full strength it replaced the
     card's own colour with a rainbow — Aaron voted the Magikarp down. At
     .42 the card stays blue and the bursts carry the foil. */
  filter: brightness(.8) contrast(1.35) saturate(1.35);
  mix-blend-mode: hard-light;
  opacity: calc(var(--card-opacity) * .42);
}

.card[data-rarity$="reverse holo"][data-foil="fireworks"] .card__shine:before {
  content: "";

  /* THE PATTERN CARRIES LIGHTNESS, THE GRADIENT CARRIES HUE. 17 Sep 2026.

     This is the fix for "it's just white", and it is not a tuning value — it
     is a different way of assembling the layer.

     WHAT WE WERE DOING: put the rainbow through the burst texture as an ALPHA
     mask, then `color-dodge` the result onto the card. An alpha mask only
     cuts holes; every surviving pixel is full-strength gradient, and
     `color-dodge` of a bright colour onto an already-bright card clips to
     white. On the Legendary Collection frame — the palest card we draw on —
     it clipped everywhere, so the bursts came out as white specks.

     WHAT WORKS, from the Yu-Gi-Oh OCG Secret Rare recreation
     (jialiang.github.io/ygo-ocg-secret-rare), which has exactly our problem —
     foil over a light card: blend the gradient with the PATTERN first, in
     `color` mode, so the result takes hue and saturation from the gradient
     and LIGHTNESS from the pattern. Only then dodge it onto the card. Now the
     dark parts of the burst texture dodge by almost nothing and the bright
     parts dodge hard, and what arrives is coloured light rather than white.

     `background-color: #000` matters: the texture is transparent between the
     bursts, and without a black backdrop those areas would composite as
     full-strength gradient and dodge the whole card. Black is lightness 0, so
     they contribute nothing. This is also why there is no `mask-image` any
     more — the texture is a background layer now, not a mask.

     The gradient is radial and tiled to the same cell as the texture so each
     burst gets one set of concentric spectral rings and its spokes band
     outward, the way the print does. A linear gradient gave every spoke in a
     burst the same colour and a burst read as a flat blob. */
  background-color: #000;
  background-image:
    repeating-radial-gradient(circle at 50% 50%,
      hsl(196, 100%, 66%) 0%,
      hsl(150, 100%, 55%) 2.5%,
      hsl(52, 100%, 60%) 5%,
      hsl(326, 100%, 62%) 7.5%,
      hsl(268, 100%, 66%) 10%,
      hsl(196, 100%, 66%) 12.5%),
    url("/holo/img/lc-fireworks-mask.png");
  background-size: 45% 42%, 45% 42%;
  background-position: calc(var(--pointer-from-left) * -22px) calc(var(--pointer-from-top) * -26px), calc(var(--pointer-from-left) * -22px) calc(var(--pointer-from-top) * -26px);
  background-repeat: repeat, repeat;
  background-blend-mode: color, normal;
  filter:
    brightness(calc(1.05 + var(--pointer-from-center) * .4))
    contrast(1.8)
    saturate(1.6);
  mix-blend-mode: color-dodge;
  opacity: .7;
}



.card[data-rarity$="reverse holo"][data-foil="fireworks"] .card__shine:after {
  content: "";

  /* The fine glitter pass, assembled the same way — see the note above. This
     one keeps `lc-reverse-foil-mask.png`, which is what that texture actually
     is: a field of several thousand tiny specks with no structure. Between
     the bursts above and this, the card carries both scales the real print
     has, and both are coloured rather than white. */
  background-color: #000;
  background-image:
    repeating-radial-gradient(circle at 50% 50%,
      hsl(196, 100%, 66%) 0%,
      hsl(150, 100%, 55%) 2.5%,
      hsl(52, 100%, 60%) 5%,
      hsl(326, 100%, 62%) 7.5%,
      hsl(268, 100%, 66%) 10%,
      hsl(196, 100%, 66%) 12.5%),
    url("/holo/img/lc-reverse-foil-mask.png");
  background-size: 26% 24%, 26% 24%;
  background-position: calc(78% - var(--pointer-from-left) * 18px) calc(72% - var(--pointer-from-top) * 20px), calc(78% - var(--pointer-from-left) * 18px) calc(72% - var(--pointer-from-top) * 20px);
  background-repeat: repeat, repeat;
  background-blend-mode: color, normal;
  filter:
    brightness(calc(1.1 + var(--pointer-from-center) * .6))
    contrast(2.2)
    saturate(2);
  mix-blend-mode: color-dodge;
  opacity: .55;
}


.card[data-rarity$="reverse holo"][data-foil="fireworks"] .card__glare {
  /* The generic reverse-holo glare is a large white disc. It reads as a phone
     flashlight and erases the texture, so this stock gets no second bloom;
     the narrow band above supplies the moving reflection. */
  opacity: 0;
}

/*
  Wizards-era scans were being covered by the same high-energy lamp built for
  current textured cards. Keep the direction cue, but cap every broad white
  component for old regular and reverse foils. Modern cards are untouched.
*/
.card[data-vintage="true"][data-rarity="rare holo"][data-foil]:not([data-foil="none"]) .card__glare {
  filter: brightness(.52) contrast(1.04) saturate(.72);
  opacity: calc(var(--card-opacity) * .07);
}

.card[data-vintage="true"][data-rarity="rare holo"][data-foil]:not([data-foil="none"]) .card__glare:before {
  filter: brightness(.48) contrast(1.06) saturate(.68);
  opacity: calc(.025 + var(--pointer-from-center) * .045);
}

.card[data-vintage="true"][data-rarity="rare holo"][data-foil]:not([data-foil="none"]) .card__glare:after {
  filter: brightness(.48) contrast(1.06);
  opacity: calc(var(--card-opacity) * .035);
}

.card[data-vintage="true"][data-rarity$="reverse holo"] .card__glare,
.card[data-vintage="true"][data-rarity$="reverse holo"] .card__glare:after {
  filter: brightness(.5) contrast(1.04) saturate(.7);
  opacity: calc(var(--card-opacity) * .06);
}

/* The reverse material supplies its own narrow moving reflection. */
.card[data-vintage="true"][data-rarity$="reverse holo"][data-foil="fireworks"] .card__glare,
.card[data-vintage="true"][data-rarity$="reverse holo"][data-foil="fireworks"] .card__glare:after {
  opacity: 0;
}


/*
  A PRE-BLACK & WHITE REVERSE HAD NOTHING TO SHINE WITH. 21 Sep 2026.

  His reverse style lights `var(--foil)`, the card's own etch texture, and
  every card before Black & White has none — his unmasked rule sets
  `--foil: none`. What was left was a radial white gradient differenced
  against a diagonal, colour-dodged onto the card: a white bloom on the text
  box at one angle and a flat card at every other. Five of the seven vintage
  reverses Aaron saw were voted down on "shine" (Team Rocket Returns Dark
  Gyarados and Dark Dragonite, Skyridge Gyarados and Machamp, and Legendary
  Collection Magikarp, which is the fireworks rule above).

  The EX, e-Card, Diamond & Pearl and HeartGold reverses are a plain mirror
  foil with no printed pattern: what reads is a band of rainbow that moves as
  the card turns. So:

  - the shine carries the light — a radial highlight at the pointer, taken as
    LUMINOSITY over a rainbow and a fine grain, so the highlight is coloured
    rather than white (the same assembly as the fireworks fix: the texture
    carries lightness, the gradient carries hue);
  - `:before` lays a soft-light rainbow over the whole frame so the colour
    survives when the highlight is elsewhere.

  Clipped by his own `--clip-invert`, so the picture is never touched.
  Legendary Collection keeps its fireworks sheet.
*/
.card[data-rarity$="reverse holo"]:not([data-foil="fireworks"]):is([data-vintage="true"], [data-era="dp"], [data-era="hgss"]) .card__shine {
  background-color: #000;
  background-image:
    radial-gradient(ellipse 70% 60% at var(--pointer-x) var(--pointer-y),
      hsl(0, 0%, 82%) 0%, hsl(0, 0%, 46%) 45%, hsl(0, 0%, 20%) 100%),
    repeating-linear-gradient(110deg,
      hsl(0, 90%, 60%) 0%, hsl(45, 95%, 58%) 6%, hsl(120, 80%, 52%) 12%,
      hsl(190, 90%, 56%) 18%, hsl(260, 85%, 62%) 24%, hsl(320, 85%, 60%) 30%,
      hsl(360, 90%, 60%) 36%),
    url("/holo/img/grain.webp");
  background-size: 100% 100%, 300% 300%, 180px 180px;
  background-position: center, var(--background-x) var(--background-y), center;
  background-blend-mode: luminosity, overlay, normal;
  filter: brightness(.78) contrast(1.3) saturate(2);
  mix-blend-mode: color-dodge;
  opacity: var(--card-opacity);
}

.card[data-rarity$="reverse holo"]:not([data-foil="fireworks"]):is([data-vintage="true"], [data-era="dp"], [data-era="hgss"]) .card__shine:before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background-image:
    repeating-linear-gradient(110deg,
      hsl(0, 90%, 60%) 0%, hsl(45, 95%, 58%) 6%, hsl(120, 80%, 52%) 12%,
      hsl(190, 90%, 56%) 18%, hsl(260, 85%, 62%) 24%, hsl(320, 85%, 60%) 30%,
      hsl(360, 90%, 60%) 36%);
  background-size: 300% 300%;
  background-position: var(--background-x) var(--background-y);
  mix-blend-mode: soft-light;
  opacity: calc(.3 + var(--pointer-from-center) * .25);
}

/*
  A GALAXY HOLO ON DARK ARTWORK SHOWED ALMOST NO GLITTER. 21 Sep 2026.

  His cosmos sheet is colour-dodged onto the card, and dodge does nothing to
  black. Dark Charizard, Rocket's Mewtwo, Neo Destiny Dark Gengar and Neo
  Genesis Lugia all put their foil behind a near-black sky, and those are the
  WotC holos Aaron voted down. On the real card that sky is exactly where the
  glitter is loudest.

  So one more layer of sparse coloured points is SCREENED over the picture.
  Screen adds light and cannot subtract it, and the gaps between the points
  are black, so on a pale card it adds a few points and nothing else — the
  white wash that the earlier era sheets caused came from full-coverage
  screen layers, not sparse ones. It sits on `.card__front::after` because
  every layer inside the shine is inside the shine's colour-dodge group and
  would be dodged again; `::after` on the front blends straight onto the
  artwork. Masked by the card's own foil mask, or clipped to the window when
  it has none, so it only ever lands where the foil is.
*/
.card[data-vintage="true"][data-rarity="rare holo cosmos"] .card__front::after {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: var(--card-aspect);
  border-radius: var(--card-radius);
  transform: translateZ(1.2px);
  pointer-events: none;
  z-index: 4;
  background-color: #000;
  background-image:
    repeating-linear-gradient(82deg,
      hsl(53, 90%, 62%) 0%, hsl(93, 85%, 55%) 4%, hsl(176, 90%, 55%) 8%,
      hsl(228, 90%, 62%) 12%, hsl(283, 85%, 62%) 16%, hsl(326, 90%, 60%) 20%,
      hsl(53, 90%, 62%) 24%),
    url("/holo/img/cosmos-middle-trans.png");
  background-size: 400% 900%, cover;
  background-position:
    calc(15% + var(--pointer-from-left) * 70%) calc(15% + var(--pointer-from-top) * 70%),
    var(--cosmosbg, center center);
  background-blend-mode: color, normal;
  filter: brightness(calc(.6 + var(--pointer-from-center) * .6)) contrast(2.2) saturate(1.6);
  mix-blend-mode: screen;
  opacity: calc(var(--card-opacity) * .9);
  clip-path: var(--clip);
}
.card:not(.masked)[data-vintage="true"][data-rarity="rare holo cosmos"][data-subtypes^="stage"] .card__front::after {
  clip-path: var(--clip-stage);
}
.card:not(.masked)[data-vintage="true"][data-rarity="rare holo cosmos"][data-supertype="trainer"] .card__front::after {
  clip-path: var(--clip-trainer);
}
.card.masked[data-vintage="true"][data-rarity="rare holo cosmos"] .card__front::after {
  clip-path: none;
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center center;
  mask-position: center center;
}

/* ---- css/cards/amazing-rare.css ---- */
/*

  AMAZING RARE

*/






/*

  SHINE LAYERS

*/

.card[data-rarity="amazing rare"] .card__shine {

  background-image:
    var(--glitter),
    var(--glitter), 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(150, 20%, 10%, 1) 10%, 
      hsla(177, 22%, 80%, 0.1) 50%, 
      hsla(0, 0%, 95%, .98) 90% 
    );

  background-size: var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), cover;
  background-position: 40% 45%, 55% 55%, center center;
  background-blend-mode: soft-light, color-burn;
  filter: brightness(1) contrast(1) saturate(.9);

}

.card[data-rarity="amazing rare"] .card__shine:before {
  
  content: "";
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image:
    var(--foil),
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(50, 20%, 90%, 0.95) 10%, 
      rgba(181, 139, 164, 0.5) 50%, 
      hsl(0, 0%, 0%) 60% 
    );

  background-size: cover, cover;
  background-position: center center, center center;
  background-blend-mode: color-burn;

  mix-blend-mode: lighten;
  filter: brightness(1) contrast(1) saturate(1);
  opacity: 0.5;

}

.card[data-rarity="amazing rare"] .card__shine:after {

  content: "";
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image: 
    repeating-linear-gradient( 
      calc( var(--angle) ), 
      var(--sunpillar-clr-1) calc(var(--space)*1), 
      var(--sunpillar-clr-2) calc(var(--space)*2), 
      var(--sunpillar-clr-3) calc(var(--space)*3), 
      var(--sunpillar-clr-4) calc(var(--space)*4), 
      var(--sunpillar-clr-5) calc(var(--space)*5), 
      var(--sunpillar-clr-6) calc(var(--space)*6),
      var(--sunpillar-clr-1) calc(var(--space)*7)
    );

  background-size: 400% 800%;
  background-position: calc( 50% + (50% - (var(--background-x))) * 3 ) calc( 50% + (50% - (var(--background-y))) * 3 );
  filter: brightness(calc( 0.75 - ( var(--pointer-from-center) * 0.5 ))) contrast(1) saturate(1);
  mix-blend-mode: saturation;

}






/*

  GLARE LAYERS

*/

.card.masked[data-rarity="amazing rare"] .card__glare {
	
	background-image: 
		radial-gradient( 
			farthest-corner circle at 
			var(--pointer-x) var(--pointer-y), 
			hsla(50, 20%, 90%, 0.45) 0%, 
			hsla(150, 20%, 30%, 0.45) 45%, 
			hsla(0, 0%, 0%, .9) 120% 
		);

	filter: brightness(.9) contrast(2);

}

.card.masked[data-rarity="amazing rare"] .card__glare:after {
	
  content: "";
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
	-webkit-mask-size: cover;
  mask-size: cover;

	background-image: 
		radial-gradient( 
			farthest-corner circle at 
			var(--pointer-x) var(--pointer-y), 
			hsla(50, 20%, 90%, 0.75) 0%, 
			hsla(150, 20%, 30%, 0.65) 45%, 
			hsla(0, 0%, 0%, 1) 90% 
		);

  filter: brightness(1) contrast(1.5);
  mix-blend-mode: overlay;
	opacity: 1;

}










/*

  NO MASK

*/

.card:not(.masked)[data-rarity="amazing rare"] .card__shine {
  clip-path: var(--clip);
}

.card:not(.masked)[data-rarity="amazing rare"] .card__glare {
  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(0, 0%, 100%, 1) 10%, 
      hsla(0, 0%, 100%, 0.85) 20%, 
      hsla(0, 0%, 0%, 0.35) 90% 
    );
  mix-blend-mode: multiply;
}
/* ---- css/cards/radiant-holo.css ---- */
/*

  RADIANT HOLO

*/

.card[data-rarity="radiant rare"] .card__shine {
  clip-path: var(--clip-borders);
}

.card[data-rarity="radiant rare"] .card__shine:after {
  clip-path: var(--clip);
}





/*

  SHINE LAYERS

*/

.card[data-rarity="radiant rare"] .card__shine {

  --barwidth: 1.2%;
  --space: 200px;
  --hue: 50;
  --imgsize: cover;

  background-image: 
    radial-gradient( 
      farthest-corner ellipse 
      at calc( ((var(--pointer-x)) * 0.5) + 25% ) calc( ((var(--pointer-y)) * 0.5) + 25% ), 
      hsl(0, 0%, 95%) 20%, 
      var(--card-glow) 130% 
    ),
    repeating-linear-gradient( 
      45deg, 
      hsl(0,0%,10%) 0% ,  
      hsl(0,0%,10%) 1% , 
      hsl(0,0%,10%) var(--barwidth),
      hsl(0,0%,20%) calc( var(--barwidth) + 0.01% ) ,
      hsl(0,0%,20%) calc( var(--barwidth) * 2 ),
      hsl(0,0%,35%) calc( var(--barwidth) * 2 + 0.01% ) ,
      hsl(0,0%,35%) calc( var(--barwidth) * 3 ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 3 + 0.01% ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 4 ) ,
      hsl(0,0%,50%) calc( var(--barwidth) * 4 + 0.01% ) ,
      hsl(0,0%,50%) calc( var(--barwidth) * 5 ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 5 + 0.01% ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 6 ) ,
      hsl(0,0%,35%) calc( var(--barwidth) * 6 + 0.01% ) ,
      hsl(0,0%,35%) calc( var(--barwidth) * 7 ) ,
      hsl(0,0%,20%) calc( var(--barwidth) * 7 + 0.01% ) ,
      hsl(0,0%,20%) calc( var(--barwidth) * 8 )  ,
      hsl(0,0%,10%) calc( var(--barwidth) * 8 + 0.01% ) ,
      hsl(0,0%,10%) calc( var(--barwidth) * 9 )  ,
      hsl(0,0%,0%) calc( var(--barwidth) * 9 + 0.01% ) ,
      hsl(0,0%,0%) calc( var(--barwidth) * 10 ) 
    ),
    repeating-linear-gradient( 
      -45deg, 
      hsl(0,0%,10%) 0% ,  
      hsl(0,0%,10%) 1% , 
      hsl(0,0%,10%) var(--barwidth),
      hsl(0,0%,20%) calc( var(--barwidth) + 0.01% ) ,
      hsl(0,0%,20%) calc( var(--barwidth) * 2 ),
      hsl(0,0%,35%) calc( var(--barwidth) * 2 + 0.01% ) ,
      hsl(0,0%,35%) calc( var(--barwidth) * 3 ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 3 + 0.01% ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 4 ) ,
      hsl(0,0%,50%) calc( var(--barwidth) * 4 + 0.01% ) ,
      hsl(0,0%,50%) calc( var(--barwidth) * 5 ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 5 + 0.01% ) ,
      hsl(0,0%,42.5%) calc( var(--barwidth) * 6 ) ,
      hsl(0,0%,35%) calc( var(--barwidth) * 6 + 0.01% ) ,
      hsl(0,0%,35%) calc( var(--barwidth) * 7 ) ,
      hsl(0,0%,20%) calc( var(--barwidth) * 7 + 0.01% ) ,
      hsl(0,0%,20%) calc( var(--barwidth) * 8 )  ,
      hsl(0,0%,10%) calc( var(--barwidth) * 8 + 0.01% ) ,
      hsl(0,0%,10%) calc( var(--barwidth) * 9 )  ,
      hsl(0,0%,0%) calc( var(--barwidth) * 9 + 0.01% ) ,
      hsl(0,0%,0%) calc( var(--barwidth) * 10 ) 
    );

  background-size: cover, 210% 210%, 210% 210%;
  background-position: 
    center, 
    calc( ((var(--background-x) - 50%) * 1.5) + 50% ) calc( ((var(--background-y) - 50%) * 1.5) + 50% ), 
    calc( ((var(--background-x) - 50%) * 1.5) + 50% ) calc( ((var(--background-y) - 50%) * 1.5) + 50% );

  background-blend-mode: exclusion, darken, color-dodge;

  filter: brightness(.5) contrast(2) saturate(1.75);
  mix-blend-mode: color-dodge;

}

.card[data-rarity="radiant rare"] .card__shine:after {

  content: "";

  background-image: 
    var(--foil), 
    repeating-linear-gradient( 55deg, 
    hsl(3, 95%, 85%) calc(var(--space)*1), 
    hsl(207, 100%, 84%) calc(var(--space)*2), 
    hsl(29, 100%, 85%) calc(var(--space)*3), 
    hsl(160, 100%, 86%) calc(var(--space)*4), 
    hsl(309, 94%, 87%) calc(var(--space)*5), 
    hsl(188, 95%, 85%) calc(var(--space)*6), 
    hsl(3, 95%, 85%) calc(var(--space)*7) 
  );

  background-size: var(--imgsize), 400% 100%;
  background-position: center, calc( ((var(--background-x) - 50%) * -2.5) + 50% ) calc( ((var(--background-y) - 50%) * -2.5) + 50% );
  
  filter: brightness(.6) contrast(3) saturate(2);
  mix-blend-mode: color-dodge;

  background-blend-mode: hard-light;
  
}

.card[data-rarity="radiant rare"] .card__shine:before {
  
  content: "";
  z-index: 2;
  grid-area: 1/1;

  background-image: 
    var(--glitter), 
    radial-gradient( 
      farthest-corner ellipse at calc( ((var(--pointer-x)) * 0.5) + 25% ) calc( ((var(--pointer-y)) * 0.5) + 25% ), 
      hsla(0, 0%, 58%, 0.8) 10%, 
      hsla(0, 0%, 20%, 0.9) 20%, 
      hsla(0, 0%, 20%, 0.5) 50% 
    );

  background-position: center;
  background-size: 15% 15%, 350% 350%;
  background-blend-mode: color-dodge;

  mix-blend-mode: overlay;
  filter: brightness(.66) contrast(2) saturate(.5);

}







/*

  GLARE LAYERS

*/
		
.card[data-rarity="radiant rare"] .card__glare {
  
  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0.33) 0%, 
      hsl(0, 0%, 25%) 110% 
    );
  
  filter: brightness(1) contrast(1.5);
  mix-blend-mode: hard-light;

}










/*

  NO MASK

*/

.card:not(.masked)[data-rarity="radiant rare"] .card__shine,
.card:not(.masked)[data-rarity="radiant rare"] .card__shine:after {

  --mask: none;
  --foil: url("/holo/img/trainerbg.png"); 
  --imgsize: 25% auto;

}
  
.card:not(.masked)[data-rarity="radiant rare"] .card__shine:after {

  background-blend-mode: difference;
  
}


/* ---- css/cards/rainbow-holo.css ---- */
/*

  RAINBOW (SECRET) HOLO

*/







/*

  SHINE LAYERS

*/

.card[data-rarity="rare rainbow"] .card__shine {

  --r-clr-1: hsl(0, 57%, 37%);
  --r-clr-2: hsl(40, 53%, 39%);
  --r-clr-3: hsl(90, 60%, 35%);
  --r-clr-4: hsl(180, 60%, 35%);
  --r-clr-5: hsl(180, 60%, 35%);
  --r-clr-6: hsl(210, 57%, 39%);
  --r-clr-7: hsl(280, 55%, 31%);

  background-image: 
    linear-gradient(-45deg, var(--r-clr-1), var(--r-clr-5)),
    var(--glitter),
    linear-gradient( -30deg, 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1)
    );

  background-blend-mode: luminosity, soft-light;

  background-size: 
    200% 200%, 
    var(--glittersize) var(--glittersize), 
    400% 400%;
  
  background-position: 
    calc( 25% + (50% * var(--pointer-from-left) )) calc( 25% + (50% * var(--pointer-from-top) )), 
    center center, 
    calc( 25% + (var(--pointer-x) / 2 ) ) calc( 25% + (var(--pointer-y) / 2 ) );
  
  filter: brightness(calc((var(--pointer-from-center)*0.25) + 0.6))  contrast(2.2) saturate(0.75);

}

.card[data-rarity="rare rainbow"] .card__shine:after {

  content: "";

  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image: 
    var(--glitter),
    linear-gradient( -60deg, 
        var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
        var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
        var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
        var(--r-clr-1)
    );

    background-blend-mode: soft-light;
    background-size: var(--glittersize) var(--glittersize), 400% 400%;
    background-position: center center, var(--pointer-x) var(--pointer-y);

    filter: brightness(calc((var(--pointer-from-center)*0.3) + 0.55)) contrast(2) saturate(1);
    mix-blend-mode: color-dodge;

}

.card[data-rarity="rare rainbow"] .card__shine:before {

  content: "";

  background-image: var(--foil);
  background-size: var(--imgsize);
  background-position: center center;
  filter: brightness(2.5) contrast(1);

  opacity: calc((var(--pointer-from-center) + 0.4 ) * 0.6 );
  background-blend-mode: difference;
  mix-blend-mode: darken;

}






/*

  GLARE LAYERS

*/

.card[data-rarity="rare rainbow"] .card__glare {
	
	background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0,0%,80%), 
      hsla(187, 10%, 85%, 0.25) 30%, 
      hsl(197, 6%, 25%) 120% 
    );

	filter: brightness(.9) contrast(1.75);
	opacity: calc( var(--pointer-from-center) * 0.9 );
  mix-blend-mode: hard-light;

}










/*

  NO MASK

*/


.card:not(.masked)[data-rarity="rare rainbow"] .card__shine {

  --foil: url("/holo/img/illusion-mask.png"); 
  --imgsize: 33%;

}
/* ---- css/cards/rainbow-alt.css ---- */
/*

  RAINBOW (ALTERNATE ART) HOLO

*/






/*

  SHINE LAYERS

*/

.card[data-rarity="rare rainbow alt"] .card__shine,
.card[data-rarity="rare holo vmax"][data-trainer-gallery="true"] .card__shine {

  --imgsize: cover;

  --r-clr-1: hsl(0, 57%, 37%);
  --r-clr-2: hsl(40, 53%, 39%);
  --r-clr-3: hsl(90, 60%, 35%);
  --r-clr-4: hsl(180, 60%, 35%);
  --r-clr-5: hsl(180, 60%, 35%);
  --r-clr-6: hsl(210, 57%, 39%);
  --r-clr-7: hsl(280, 55%, 31%);

  background-image: 
    repeating-linear-gradient( 
      var(--angle), 
        hsla(283, 49%, 60%, 0.75) calc(var(--space)*1), 
        hsla(2, 70%, 58%, 0.75) calc(var(--space)*2), 
        hsla(53, 67%, 53%, 0.75) calc(var(--space)*3), 
        hsla(93, 56%, 52%, 0.75) calc(var(--space)*4), 
        hsla(176, 38%, 50%, 0.75) calc(var(--space)*5), 
        hsla(228, 100%, 77%, 0.75) calc(var(--space)*6), 
        hsla(283, 49%, 61%, 0.75) calc(var(--space)*7) 
      ),
    var(--glitter),
    linear-gradient( -30deg, 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1)
    );

  background-size: 200% 400%, var(--glittersize) var(--glittersize), 400% 400%;
  background-position: 0% calc(var(--background-y) * 1), center center, calc( var(--background-x) * 1.5) calc( var(--background-y) * 1.5 );
  background-blend-mode: luminosity, overlay;
  filter: brightness(calc((var(--pointer-from-center)*0.3) + 0.3)) contrast(3) saturate(1.8);

}

.card[data-rarity="rare rainbow alt"] .card__shine:after,
.card[data-rarity="rare holo vmax"][data-trainer-gallery="true"] .card__shine:after {

  content: "";
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image: 
    var(--glitter), 
    linear-gradient( -60deg, 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1) 
    );
  background-blend-mode: overlay;
  background-size: var(--glittersize) var(--glittersize), 400% 400%;
  background-position: center center, calc( var(--background-x) * -1.5) calc( var(--background-y) * -1.5 );
  filter: brightness(calc((var(--pointer-from-center)*0.5) + 0.6)) contrast(3) saturate(1);
  mix-blend-mode: color-dodge;

  opacity: calc(1.2 + (var(--pointer-from-center)/2) * -1);

}

.card[data-rarity="rare rainbow alt"] .card__shine:before,
.card[data-rarity="rare holo vmax"][data-trainer-gallery="true"] .card__shine:before {
  
  content: "";

  background-image: var(--foil);
  background-size: var(--imgsize);
  background-position: center center;
  filter: brightness(1.5) contrast(1.5);
  opacity: calc((var(--pointer-from-center) + 0.6 ) * 0.4 );
  background-blend-mode: difference;
  mix-blend-mode: color-dodge;

}






/*

  GLARE LAYERS

*/

.card[data-rarity="rare rainbow alt"] .card__glare {
	
	background-image: 
		radial-gradient( 
			farthest-corner circle at 
			var(--pointer-x) var(--pointer-y), 
			hsla(50, 20%, 90%, 0.75) 0%, 
			hsla(150, 20%, 30%, 0.65) 45%, 
			hsla(0, 0%, 0%, 1) 100% 
		);

	filter: brightness(.9) contrast(2);
	opacity: calc( var(--card-opacity) * 0.75 );

}










/*

  NO MASK

*/


.card:not(.masked)[data-rarity="rare rainbow alt"] .card__shine,
.card:not(.masked)[data-rarity="rare holo vmax"][data-trainer-gallery="true"] .card__shine {

  --mask: none;
  --foil: none;
  --imgsize: 25% auto;

}





/* ---- css/cards/secret-rare.css ---- */
/*

  SECRET RARE (GOLD)

*/




/*

  SHINE LAYERS

*/

.card[data-rarity="rare secret"] .card__shine,
.card[data-set="swshp"][data-number="swsh145"] .card__shine {

  --shift: 1px;
  --imgsize: cover;

  background-image:
    var(--glitter), 
    var(--glitter), 
    conic-gradient( 
      var(--sunpillar-clr-4), 
      var(--sunpillar-clr-5),
      var(--sunpillar-clr-6), 
      var(--sunpillar-clr-1), 
      var(--sunpillar-clr-4) 
    ), 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(150, 00%, 0%, .98) 10%, 
      hsla(0, 0%, 95%, .15) 90% 
    );

  background-size: var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), cover, cover;
  background-position: 45% 45%, 55% 55%, center center, center center;
  background-blend-mode: soft-light, hard-light, overlay;
  mix-blend-mode: color-dodge;
  filter: brightness(calc( 0.4 + (var(--pointer-from-center) * 0.2) )) contrast(1) saturate(2.7);

}

.card[data-rarity="rare secret"] .card__shine:before,
.card[data-set="swshp"][data-number="swsh145"] .card__shine:before {
  
  content: "";
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image:
    var(--foil), 
    linear-gradient( 45deg, hsl(46, 95%, 50%), hsl(52, 100%, 69%) ), 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(10, 20%, 90%, 0.95) 10%, 
      hsl(0, 0%, 0%) 70% 
    );

  background-size: var(--imgsize), cover, cover;
  background-position: center center, center center, center center;
  background-blend-mode: hard-light, multiply;

  mix-blend-mode: lighten;
  filter: brightness(1.25) contrast(1.25) saturate(0.35);
  opacity: .8;

}

.card[data-rarity="rare secret"] .card__shine:after,
.card[data-set="swshp"][data-number="swsh145"] .card__shine:after {

  content: "";

  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image: var(--glitter);
  background-size: var(--glittersize) var(--glittersize);
  background-position: calc(50% - ((var(--shift)*2) * var(--pointer-from-left)) + var(--shift)) calc(50% - ((var(--shift)*2) * var(--pointer-from-top)) + var(--shift));

  filter: brightness(calc((var(--pointer-from-center)*0.6) + 0.6)) contrast(1.5);
  mix-blend-mode: overlay;

}






/*

  GLARE LAYERS

*/

.card[data-rarity="rare secret"] .card__glare,
.card[data-set="swshp"][data-number="swsh145"] .card__glare {
	
	background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(45, 8%, 80%, 0.3) 0%, 
      hsl(22, 15%, 12%) 180%
    );

	filter: brightness(1.3) contrast(1.5);
  mix-blend-mode: hard-light;

}










/*

  NO MASK

*/


.card:not(.masked)[data-rarity="rare secret"] .card__shine,
.card:not(.masked)[data-set="swshp"][data-number="swsh145"] .card__shine {

  --foil: url("/holo/img/geometric.png"); 
  --imgsize: 33%;
  
  filter: brightness( calc( ( var( --pointer-from-center ) * 0.3 ) + 0.2 ) ) contrast(2) saturate(0.75);

}



























/* ---- css/cards/shiny-rare.css ---- */
/*

  SHINY RARE (HOLO)

*/







/*

  SHINE LAYERS

*/

.card[data-rarity="rare shiny"] .card__shine {
  clip-path: var(--clip);
}
.card[data-rarity="rare shiny"][data-subtypes^="stage"] .card__shine {
  clip-path: var(--clip-stage);
}

.card[data-rarity="rare shiny"] .card__shine,
.card[data-rarity="rare shiny"] .card__shine:after {

  --space: 5%;
  --angle: 133deg;
  --imgsize: cover;

  background-image:
    var(--foil),
    repeating-linear-gradient( 0deg, 
      var(--sunpillar-clr-1) calc(var(--space)*1), 
      var(--sunpillar-clr-2) calc(var(--space)*2), 
      var(--sunpillar-clr-3) calc(var(--space)*3), 
      var(--sunpillar-clr-4) calc(var(--space)*4), 
      var(--sunpillar-clr-5) calc(var(--space)*5), 
      var(--sunpillar-clr-6) calc(var(--space)*6), 
      var(--sunpillar-clr-1) calc(var(--space)*7)
    ),
    repeating-linear-gradient( 
      var(--angle), 
      #0e152e 0%, 
      hsl(180, 10%, 60%) 3.8%, 
      hsl(180, 29%, 66%) 4.5%, 
      hsl(180, 10%, 60%) 5.2%, 
      #0e152e 10% , 
      #0e152e 12% 
      ),
    radial-gradient(
      farthest-corner circle 
      at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%, 
      hsla(0, 0%, 0%, 0.15) 20%, 
      hsla(0, 0%, 0%, 0.25) 120%
    );

  background-position: 
    center center, 
    0% var(--background-y), 
    calc( var(--background-x) + (var(--background-y)*0.2) ) var(--background-y), 
    var(--background-x) var(--background-y);

  background-blend-mode: soft-light, hue, hard-light;
  background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;

  filter: brightness(calc((var(--pointer-from-center)*0.4) + .4)) contrast(1.4) saturate(2.25);

}

.card[data-rarity="rare shiny"] .card__shine:after {

  content: "";

  background-position: 
    center center, 
    0% var(--background-y), 
    calc( (var(--background-x) + (var(--background-y)*0.2)) * -1) calc( var(--background-y) * -1), 
    var(--background-x) var(--background-y);

  background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;

  filter: brightness(calc((var(--pointer-from-center)*.4) + .8)) contrast(1.5) saturate(1.25);
  mix-blend-mode: exclusion;

}

.card[data-rarity="rare shiny"] .card__shine:before {

  content: "";
  -webkit-mask-image: none;
  mask-image: none;
  
  background-image: 
    radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0, 0%, 100%) 0%, 
      hsla(0, 0%, 0%, 0) 40% 
    );
  background-position: center;
  background-size: cover;
  mix-blend-mode: overlay;
  
  opacity: 0.75;
  z-index: 1;

}









/*

  GLARE LAYERS

*/

.card[data-rarity="rare shiny"] .card__glare {

  background-image: 
    radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), 
    hsl(0, 0%, 100%) 0%, 
    hsl(320, 5%, 15%) 150%
    );

  background-size: cover;
  background-position: center center;

  mix-blend-mode: multiply;
  filter: brightness(1.2) contrast(1) saturate(.7);
  
  opacity: calc( var(--card-opacity) * var(--pointer-from-center) );

}







/*

  NO MASK

*/

.card:not(.masked).card[data-rarity="rare shiny"] .card__shine,
.card:not(.masked).card[data-rarity="rare shiny"] .card__shine:after {

  --mask: none;
  --foil: url("/holo/img/illusion.png"); 
  --imgsize: 33%;

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  -webkit-mask-size: var(--imgsize);
  mask-size: var(--imgsize);

  background-blend-mode: exclusion, hue, hard-light;
  filter: brightness(calc((var(--pointer-from-center)*.3) + .35)) contrast(2) saturate(1.5);

}

.card:not(.masked).card[data-rarity*="rare shiny"] .card__shine:after {

  filter: brightness(calc((var(--pointer-from-center)*.4) + .5)) contrast(1.4) saturate(1.2);
  mix-blend-mode: difference;

}


/* ---- css/cards/shiny-v.css ---- */
/*

  SHINY V (ULTRA RARE)

*/







/*

  SHINE LAYERS

*/

.card[data-rarity="rare shiny v"] .card__shine,
.card[data-rarity="rare shiny v"] .card__shine:after {

  --space: 5%;
  --angle: 133deg;
  --imgsize: cover;

  background-image:
    var(--foil),
    repeating-linear-gradient( 0deg, 
      var(--sunpillar-clr-1) calc(var(--space)*1), 
      var(--sunpillar-clr-2) calc(var(--space)*2), 
      var(--sunpillar-clr-3) calc(var(--space)*3), 
      var(--sunpillar-clr-4) calc(var(--space)*4), 
      var(--sunpillar-clr-5) calc(var(--space)*5), 
      var(--sunpillar-clr-6) calc(var(--space)*6), 
      var(--sunpillar-clr-1) calc(var(--space)*7)
    ),
    repeating-linear-gradient( 
      var(--angle), 
      #0e152e 0%, 
      hsl(180, 10%, 60%) 3.8%, 
      hsl(180, 29%, 66%) 4.5%, 
      hsl(180, 10%, 60%) 5.2%, 
      #0e152e 10% , 
      #0e152e 12% 
      ),
    radial-gradient(
      farthest-corner circle 
      at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%, 
      hsla(0, 0%, 0%, 0.15) 20%, 
      hsla(0, 0%, 0%, 0.25) 120%
    );

  background-position: 
    center center, 
    0% var(--background-y), 
    calc( var(--background-x) + (var(--background-y)*0.2) ) var(--background-y), 
    var(--background-x) var(--background-y);

  background-blend-mode: soft-light, hue, hard-light;
  background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;

  filter: brightness(calc((var(--pointer-from-center)*0.4) + .4)) contrast(1.4) saturate(2.25);

}

.card[data-rarity="rare shiny v"] .card__shine:after {

  content: "";

  background-position: 
    center center, 
    0% var(--background-y), 
    calc( (var(--background-x) + (var(--background-y)*0.2)) * -1) calc( var(--background-y) * -1), 
    var(--background-x) var(--background-y);

  background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;

  filter: brightness(calc((var(--pointer-from-center)*.4) + .8)) contrast(1.5) saturate(1.25);
  mix-blend-mode: exclusion;

}


.card[data-rarity="rare shiny v"] .card__shine:before {

  content: "";
  -webkit-mask-image: none;
  mask-image: none;
  
  background-image: 
    radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0, 0%, 100%) 0%, 
      hsla(0, 0%, 0%, 0) 40% 
    );
  background-position: center;
  background-size: cover;
  mix-blend-mode: overlay;
  
  opacity: 0.75;
  z-index: 1;

}







/*

  GLARE LAYERS

*/

.card[data-rarity="rare shiny v"] .card__glare {

  background-image: 
    radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0, 0%, 90%) 5%, 
      hsl(200, 5%, 45%) 80%, 
      hsl(320, 40%, 10%) 150% 
    );

  background-size: 120% 140%;
  background-position: center center;

  mix-blend-mode: darken;
  filter: brightness(.88) contrast(2.25) saturate(.7);
  
  opacity: calc( var(--card-opacity) * var(--pointer-from-center) * 0.75 );

}










/*

  NO MASK

*/


.card:not(.masked)[data-rarity="rare shiny v"] .card__shine,
.card:not(.masked)[data-rarity="rare shiny v"] .card__shine:after {

  --mask: none;
  --foil: url("/holo/img/illusion.png"); 
  --imgsize: 33%;

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
	-webkit-mask-size: var(--imgsize);
  mask-size: var(--imgsize);

  background-blend-mode: exclusion, hue, hard-light;
  filter: brightness(calc((var(--pointer-from-center)*.3) + .35)) contrast(2) saturate(1.5);

}

.card:not(.masked)[data-rarity="rare shiny v"] .card__shine:before {
  content: none;
  display: none;
}

.card:not(.masked)[data-rarity="rare shiny v"] .card__shine:after {
  filter: brightness(calc((var(--pointer-from-center)*.5) + .8)) contrast(1.6) saturate(1.4);
}



/* ---- css/cards/shiny-vmax.css ---- */
/*

  SHINY RARE (VMAX)

*/







/*

  SHINE LAYERS

*/

.card[data-rarity="rare shiny vmax"] .card__shine {

  --imgsize: cover;
  --angle: -30deg;

  --r-clr-1: hsl(0, 57%, 37%);
  --r-clr-2: hsl(40, 53%, 39%);
  --r-clr-3: hsl(90, 60%, 35%);
  --r-clr-4: hsl(180, 60%, 35%);
  --r-clr-5: hsl(180, 60%, 35%);
  --r-clr-6: hsl(210, 57%, 39%);
  --r-clr-7: hsl(280, 55%, 31%);

  background-image:
    var(--glitter),
    var(--glitter),
    linear-gradient( var(--angle), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1)
    ),
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(248, 5%, 10%, 1) 10%, 
      hsla(206, 5%, 80%, 0.1) 50%, 
      hsla(0, 0%, 95%, .98) 90% 
    );

  background-size: var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), 400% 400%, cover;
  background-position: 40% 45%, 55% 55%, calc( var(--background-x) * 1.5) calc( var(--background-y) * 1.5 ), center center;
  background-blend-mode: soft-light, overlay, color-burn;
  filter: brightness(1) contrast(1) saturate(.85);

}

.card[data-rarity="rare shiny vmax"] .card__shine:before {
  
  content: "";
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image:
    var(--foil),
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(248, 5%, 91%, 0.95) 10%, 
      hsla(206, 5%, 68%, 0.5) 50%, 
      hsl(0, 0%, 0%) 120% 
    );

  background-size: var(--imgsize), cover;
  background-position: center center, center center;
  background-blend-mode: color-burn;

  mix-blend-mode: lighten;
  filter: brightness(1) contrast(1) saturate(.4);
  opacity: 0.35;

}

.card[data-rarity="rare shiny vmax"] .card__shine:after {

  content: "";
  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image: 
    repeating-linear-gradient( 
      calc( var(--angle) ), 
      var(--sunpillar-clr-1) calc(var(--space)*1), 
      var(--sunpillar-clr-2) calc(var(--space)*2), 
      var(--sunpillar-clr-3) calc(var(--space)*3), 
      var(--sunpillar-clr-4) calc(var(--space)*4), 
      var(--sunpillar-clr-5) calc(var(--space)*5), 
      var(--sunpillar-clr-6) calc(var(--space)*6),
      var(--sunpillar-clr-1) calc(var(--space)*7)
    );

  background-size: 400% 800%;
  background-position: calc( 50% + (50% - (var(--background-x))) * 3 ) calc( 50% + (50% - (var(--background-y))) * 3 );
  filter: brightness(calc( 0.75 - ( var(--pointer-from-center) * 0.5 ))) contrast(1) saturate(1);
  mix-blend-mode: hue;

}






/*

  GLARE LAYERS

*/

.card[data-rarity="rare shiny vmax"] .card__glare {
	
	background-image: 
		radial-gradient( 
			farthest-corner circle at 
			var(--pointer-x) var(--pointer-y), 
			hsla(248, 5%, 90%, 0.45) 0%, 
			hsla(206, 5%, 30%, 0.45) 45%, 
			hsla(0, 0%, 0%, .33) 120% 
		);

	filter: brightness(1) contrast(1.25);

}

.card[data-rarity="rare shiny vmax"] .card__glare:after {
	
  content: "";
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
	-webkit-mask-size: cover;
  mask-size: cover;

	background-image: 
		radial-gradient( 
			farthest-corner circle at 
			var(--pointer-x) var(--pointer-y), 
			hsla(248, 5%, 90%, 0.75) 0%, 
			hsla(206, 5%, 30%, 0.65) 45%, 
			hsla(0, 0%, 0%, .75) 100% 
		);

  filter: brightness(1) contrast(1.25);
  mix-blend-mode: overlay;
	opacity: 1;

}










/* ---- css/cards/swsh-pikachu.css ---- */
/*

  RAINBOW (SECRET) HOLO

*/







/*

  SHINE LAYERS

*/

.card[data-rarity="rare secret"][data-set="swsh12pt5"][data-number="160"] .card__shine {

  --r-clr-1: hsl(0, 57%, 37%);
  --r-clr-2: hsl(40, 53%, 39%);
  --r-clr-3: hsl(90, 60%, 35%);
  --r-clr-4: hsl(180, 60%, 35%);
  --r-clr-5: hsl(180, 60%, 35%);
  --r-clr-6: hsl(210, 57%, 39%);
  --r-clr-7: hsl(280, 55%, 31%);

  background-image: 
    linear-gradient(-45deg, var(--r-clr-1), var(--r-clr-5)),
    var(--glitter),
    linear-gradient( -30deg, 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1)
    );

  background-blend-mode: luminosity, soft-light;

  background-size: 
    200% 200%, 
    var(--glittersize) var(--glittersize), 
    400% 400%;
  
  background-position: 
    calc( 25% + (50% * var(--pointer-from-left) )) calc( 25% + (50% * var(--pointer-from-top) )), 
    calc(50% - ((var(--shift)*2) * var(--pointer-from-left)) + var(--shift)) calc(50% - ((var(--shift)*2) * var(--pointer-from-top)) + var(--shift)), 
    calc( 25% + (var(--pointer-x) / 2 ) ) calc( 25% + (var(--pointer-y) / 2 ) );
  
  filter: brightness(calc((var(--pointer-from-center)*0.5) + .75)) contrast(2) saturate(1);

}

.card[data-rarity="rare secret"][data-set="swsh12pt5"][data-number="160"] .card__shine:after {

  content: "";

  -webkit-mask-image: none !important;
  mask-image: none !important;

  background-image: 
    var(--glitter),
    linear-gradient( -60deg, 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7), 
      var(--r-clr-1)
    );

  background-blend-mode: soft-light;
  
  background-size: 
    var(--glittersize) var(--glittersize), 
    400% 400%;
  
  background-position: 
    calc(50% - ((var(--shift)*2) * var(--pointer-from-left)) - var(--shift)) calc(50% - ((var(--shift)*2) * var(--pointer-from-top)) - var(--shift)), 
    var(--pointer-x) var(--pointer-y);

  filter: brightness(calc((var(--pointer-from-center)*0.35) + 0.35)) contrast(2) saturate(1);
  mix-blend-mode: exclusion;

}

.card[data-rarity="rare secret"][data-set="swsh12pt5"][data-number="160"] .card__shine:before {

  content: "";

  background-image: var(--foil);
  background-size: var(--imgsize);
  background-position: center center;
  filter: brightness(2.5) contrast(1);

  opacity: calc((var(--pointer-from-center) + 0.4 ) * 0.6 );
  mix-blend-mode: multiply;

}






/*

  GLARE LAYERS

*/

.card[data-rarity="rare secret"][data-set="swsh12pt5"][data-number="160"] .card__glare {
	
	background-image: 
    radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(0,0%,80%), hsla(0, 0%, 74.9%, 0.25) 30%, hsl(0, 0%, 21.6%) 130% );

	filter: brightness(.9) contrast(2);
	opacity: calc( var(--pointer-from-center) * .9 );
  mix-blend-mode: hard-light;

}










/*

  NO MASK

*/


.card:not(.masked)[data-rarity="rare secret"][data-set="swsh12pt5"][data-number="160"] .card__shine {

  --foil: url("/holo/img/illusion-mask.png"); 
  --imgsize: 33%;

}
/* ---- css/cards/trainer-full-art.css ---- */
/*

  ULTRA RARE (FULL ART TRAINER)
  some styles inherited from v-full-art.css

*/





/*

  SHINE LAYERS

*/

.card[data-subtypes*="supporter"][data-rarity="rare ultra"] .card__shine {
  
  filter: brightness(calc((var(--pointer-from-center)*0.05) + .8)) contrast(1.75) saturate(1.2);

}

.card[data-subtypes*="supporter"][data-rarity="rare ultra"] .card__shine:after {

  filter: brightness(calc((var(--pointer-from-center)*.4) + .85)) contrast(2) saturate(.5);

}

.card[data-subtypes*="supporter"][data-rarity="rare ultra"] .card__shine:before {

  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0, 0%, 100%) 0%, 
      hsla(0, 0%, 0%, 0) 80% 
    );
  
  mix-blend-mode: screen;
  opacity: 0.5;
  
}










/*

  GLARE LAYERS

*/

.card[data-rarity="rare ultra"][data-subtypes*="supporter"] .card__glare {

  opacity: calc( var(--card-opacity) * .75 );
  mix-blend-mode: multiply;
  filter: brightness(1.5) contrast(1.4) saturate(1);
  background-size: 170% 170%;

}










/*

  NO MASK

*/

.card:not(.masked)[data-subtypes*="supporter"][data-rarity="rare ultra"] .card__shine,
.card:not(.masked)[data-subtypes*="supporter"][data-rarity="rare ultra"] .card__shine:after {

  --mask: none;
  --foil: url("/holo/img/trainerbg.png"); 
  --imgsize: 20%;
  
  background-blend-mode: color-burn, hue, hard-light;
  filter: brightness(calc((var(--pointer-from-center)*0.05) + .6)) contrast(1.5) saturate(1.2);

}
/* ---- css/cards/trainer-gallery-holo.css ---- */
/*

  TRAINER GALLERY HOLO

*/







/*

  SHINE LAYERS

*/

.card[data-rarity="trainer gallery rare holo"] .card__shine,
.card[data-rarity="rare holo"][data-trainer-gallery="true"] .card__shine,
.card[data-set="swshp"][data-number="swsh020"] .card__shine {

  --space: 5%;
  --angle: -22deg;
  --imgsize: 300% 400%;

  clip-path: var(--clip-borders);

  background-image:
    repeating-linear-gradient( var(--angle),  
      hsla(283, 49%, 60%, 0.75) calc(var(--space)*1),
      hsla(2, 74%, 59%, 0.75) calc(var(--space)*2), 
      hsla(53, 67%, 53%, 0.75) calc(var(--space)*3),  
      hsla(93, 56%, 52%, 0.75) calc(var(--space)*4),  
      hsla(176, 38%, 50%, 0.75) calc(var(--space)*5),  
      hsla(228, 100%, 77%, 0.75) calc(var(--space)*6), 
      hsla(283, 49%, 61%, 0.75) calc(var(--space)*7)
    );
    
    background-blend-mode: color-dodge;
    background-size: var(--imgsize);
    background-position: 0% calc(var(--background-y) * 1), var(--background-x) var(--background-y);
    
    filter: brightness(calc((var(--pointer-from-center)*0.3) + 0.5)) contrast(2.3) saturate(1);

}

.card[data-rarity="trainer gallery rare holo"] .card__shine:after,
.card[data-rarity="rare holo"][data-trainer-gallery="true"] .card__shine:after,
.card[data-set="swshp"][data-number="swsh020"] .card__shine:after {
  
  content: "";

  background-image: 
    radial-gradient( 
      farthest-corner ellipse 
      at calc( ((var(--pointer-x)) * 0.5) + 25% ) calc( ((var(--pointer-y)) * 0.5) + 25% ), 
      hsl(0, 0%, 100%) 5%, 
      hsla(300, 100%, 11%, 0.6) 40%, 
      hsl(0, 0%, 22%) 120% 
    );

  background-position: center center;
  background-size: 400% 500%;

  filter: brightness(calc((var(--pointer-from-center)*0.2) + 0.4)) contrast(.85) saturate(1.1);
  mix-blend-mode: hard-light;

}

.card[data-rarity="trainer gallery rare holo"] .card__shine:before,
.card[data-rarity="rare holo"][data-trainer-gallery="true"] .card__shine:before,
.card[data-set="swshp"][data-number="swsh020"] .card__shine:before {
  content: none;
  display: none;
}











/*

  GLARE LAYERS

*/

.card[data-rarity="trainer gallery rare holo"] .card__glare,
.card[data-rarity="rare holo"][data-trainer-gallery="true"] .card__glare,
.card[data-set="swshp"][data-number="swsh020"] .card__glare {

  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(0, 0%, 100%, 1) 10%, 
      hsla(0, 0%, 100%, 0.6) 35%, 
      hsla(180, 11%, 35%, 1) 60% 
    );

  mix-blend-mode: soft-light;

}


.card[data-rarity="trainer gallery rare holo"] .card__glare:before,
.card[data-rarity="rare holo"][data-trainer-gallery="true"] .card__glare:before,
.card[data-rarity="trainer gallery rare holo"] .card__glare:after,
.card[data-rarity="rare holo"][data-trainer-gallery="true"] .card__glare:after {
  content: none;
  display: none;
}
/* ---- css/cards/trainer-gallery-secret-rare.css ---- */





/*

  TRAINER GALLERY SECRET RARE (GOLD & BLACK)

*/






.card:not(.masked)[data-rarity="rare secret"][data-trainer-gallery="true"] .card__shine {

  --foil: url("/holo/img/geometric.png"); 
  --imgsize: 33%;
  
  filter: brightness( calc( ( var( --pointer-from-center ) * 0.3 ) + 0.2 ) ) contrast(2) saturate(0.75);

}

.card:not(.masked)[data-rarity="rare secret"][data-trainer-gallery="true"] .card__glare {

  filter: brightness(.5) contrast(1);

}



/*

  SHINE LAYERS

*/

.card[data-rarity="rare secret"][data-trainer-gallery="true"] .card__shine,
.card[data-rarity="rare secret"][data-trainer-gallery="true"] .card__shine::before,
.card[data-rarity="rare secret"][data-trainer-gallery="true"] .card__shine::after {

  -webkit-mask-image: none !important;
  mask-image: none !important;

}


.card[data-rarity="rare secret"][data-trainer-gallery="true"] .card__shine {

  background-image: 
    var(--glitter), 
    var(--glitter), 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(152.7, 21.6%, 10%) 10%, 
      hsla(177, 22%, 80%, 0.1) 50%, 
      hsla(0, 0%, 95%, .98) 90% 
    ), 
    linear-gradient( 45deg, hsl(46, 95%, 50%), hsl(52, 100%, 69%) );

  background-size: 
    var(--glittersize) var(--glittersize), 
    var(--glittersize) var(--glittersize), 
    cover, 
    cover;

  background-position: 
    40% 45%, 
    55% 55%, 
    center center, 
    center center;

  background-blend-mode: soft-light, darken, color;
  filter: brightness(1) contrast(1) saturate(1);
  mix-blend-mode: color-dodge;

}

.card[data-rarity="rare secret"][data-trainer-gallery="true"] .card__shine::before {

  content: "";
  
  background-image: 
    var(--foil), 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(50, 20%, 90%, 0.95) 10%,
      hsla(324, 22%, 63%, 0.5) 50%, 
      hsl(0, 0%, 0%) 90% 
    );
  background-size: var(--imgsize), cover;
  background-position: center center, center center;
  background-blend-mode: color-burn;

  mix-blend-mode: exclusion;
  filter: brightness(1) contrast(1) saturate(1);
  opacity: 1;

}

.card[data-rarity="rare secret"][data-trainer-gallery="true"] .card__shine::after {

  content: "";

  background-image: 
    var(--glitter), 
    conic-gradient(  
      var(--sunpillar-clr-4),
      var(--sunpillar-clr-5), 
      var(--sunpillar-clr-6), 
      var(--sunpillar-clr-1), 
      var(--sunpillar-clr-2), 
      var(--sunpillar-clr-3), 
      var(--sunpillar-clr-4)
    );
  background-size: var(--glittersize) var(--glittersize), cover;
  background-blend-mode: luminosity;

  filter: brightness(calc((var(--pointer-from-center)*0.5) + 0.6)) contrast(2) saturate(3);
  mix-blend-mode: soft-light;

}






/*

  GLARE LAYERS

*/

.card[data-rarity="rare secret"][data-trainer-gallery="true"] .card__glare {

  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsla(40, 100%, 95%, 0.2) 10%, 
      hsla(40, 20%, 5%, 1) 180%
    );
  filter: brightness(1) contrast(1);
  mix-blend-mode: hard-light;
  
}
/* ---- css/cards/trainer-gallery-v-max.css ---- */
/*

  TRAINER GALLERY (V MAX)
	some styles inherited from rainbow-alt.css

*/




/*

  SHINE LAYERS

*/







/*

  GLARE LAYERS

*/    


.card[data-rarity="rare holo vmax"][data-trainer-gallery="true"] .card__glare {
  
	background-image: 
		radial-gradient( 
			farthest-corner circle at 
			var(--pointer-x) var(--pointer-y), 
			hsl(50, 30%, 90%) 0%, 
			hsl(162, 5%, 40%), 
			hsl(0, 0%, 0%) 120%
		);

	filter: brightness(1) contrast(1);
	opacity: calc( var(--card-opacity) * var(--pointer-from-center) * 0.85 );

}
/* ---- css/cards/trainer-gallery-v-regular.css ---- */
/*

  TRAINER GALLERY (V)
	some styles inherited from v-full-art.css

*/




/*

  SHINE LAYERS

*/







/*

  GLARE LAYERS

*/    


.card[data-rarity="rare holo v"][data-trainer-gallery="true"] .card__glare {

  opacity: calc(var(--card-opacity)*.4);

}
/* ---- css/cards/v-full-art.css ---- */
/*

  V FULL ART (ULTRA RARE)

*/







/*

  SHINE LAYERS

*/

.card[data-rarity="rare ultra"][data-supertype="pokémon"] .card__shine,
.card[data-rarity="rare ultra"][data-supertype="pokémon"] .card__shine:after,
.card[data-rarity="rare ultra"][data-subtypes*="supporter"] .card__shine,
.card[data-rarity="rare ultra"][data-subtypes*="supporter"] .card__shine:after,
.card[data-rarity="rare holo v"][data-trainer-gallery="true"] .card__shine,
.card[data-rarity="rare holo v"][data-trainer-gallery="true"] .card__shine:after {

  --space: 5%;
  --angle: 133deg;
  --imgsize: cover;

  background-image:
    var(--foil),
    repeating-linear-gradient( 0deg, 
      var(--sunpillar-clr-1) calc(var(--space)*1), 
      var(--sunpillar-clr-2) calc(var(--space)*2), 
      var(--sunpillar-clr-3) calc(var(--space)*3), 
      var(--sunpillar-clr-4) calc(var(--space)*4), 
      var(--sunpillar-clr-5) calc(var(--space)*5), 
      var(--sunpillar-clr-6) calc(var(--space)*6), 
      var(--sunpillar-clr-1) calc(var(--space)*7)
    ),
    repeating-linear-gradient( 
      var(--angle), 
      #0e152e 0%, 
      hsl(180, 10%, 60%) 3.8%, 
      hsl(180, 29%, 66%) 4.5%, 
      hsl(180, 10%, 60%) 5.2%, 
      #0e152e 10% , 
      #0e152e 12% 
      ),
    radial-gradient(
      farthest-corner circle 
      at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%, 
      hsla(0, 0%, 0%, 0.15) 20%, 
      hsla(0, 0%, 0%, 0.25) 120%
    );

  background-position: 
    center center, 
    0% var(--background-y), 
    calc( var(--background-x) + (var(--background-y)*0.2) ) var(--background-y), 
    var(--background-x) var(--background-y);

  background-blend-mode: soft-light, hue, hard-light;
  background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;

  filter: brightness(calc((var(--pointer-from-center)*0.4) + .4)) contrast(1.4) saturate(2.25);

}

.card[data-supertype="pokémon"][data-rarity="rare ultra"] .card__shine:after,
.card[data-subtypes*="supporter"][data-rarity="rare ultra"] .card__shine:after,
.card[data-trainer-gallery="true"][data-rarity="rare holo v"] .card__shine:after {

  content: "";

  background-position: 
    center center, 
    0% var(--background-y), 
    calc( (var(--background-x) + (var(--background-y)*0.2)) * -1) calc( var(--background-y) * -1), 
    var(--background-x) var(--background-y);

  background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;

  filter: brightness(calc((var(--pointer-from-center)*.4) + .8)) contrast(1.5) saturate(1.25);
  mix-blend-mode: exclusion;

}


.card[data-supertype="pokémon"][data-rarity="rare ultra"] .card__shine:before,
.card[data-subtypes*="supporter"][data-rarity="rare ultra"] .card__shine:before {

  content: "";
  -webkit-mask-image: none;
  mask-image: none;
  
  background-image: 
    radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0, 0%, 100%) 0%, 
      hsla(0, 0%, 0%, 0) 40% 
    );
  background-position: center;
  background-size: cover;
  mix-blend-mode: overlay;
  
  opacity: 0.75;
  z-index: 1;

}







/*

  GLARE LAYERS

*/

.card[data-supertype="pokémon"][data-rarity="rare ultra"] .card__glare,
.card[data-subtypes*="supporter"][data-rarity="rare ultra"] .card__glare {

  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(0, 0%, 75%) 5%, 
      hsl(200, 5%, 35%) 60%, 
      hsl(320, 40%, 10%) 150% 
    );

  background-size: 120% 150%;
  background-position: center center;

  mix-blend-mode: hard-light;
  filter: brightness(1) contrast(1.2) saturate(1);
  
  opacity: calc(var(--card-opacity) * .75 );

}










/*

  NO MASK

*/


.card:not(.masked)[data-supertype="pokémon"][data-rarity="rare ultra"] .card__shine,
.card:not(.masked)[data-supertype="pokémon"][data-rarity="rare ultra"] .card__shine:after,
.card:not(.masked)[data-trainer-gallery="true"][data-rarity="rare holo v"] .card__shine,
.card:not(.masked)[data-trainer-gallery="true"][data-rarity="rare holo v"] .card__shine:after {

  --mask: none;
  --foil: url("/holo/img/illusion.png"); 
  --imgsize: 33%;

  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
	-webkit-mask-size: var(--imgsize);
  mask-size: var(--imgsize);

  background-blend-mode: exclusion, hue, hard-light;
  filter: brightness(calc((var(--pointer-from-center)*.3) + .35)) contrast(2) saturate(1.5);

}

.card:not(.masked)[data-supertype="pokémon"][data-rarity="rare ultra"] .card__shine:before,
.card:not(.masked)[data-trainer-gallery="true"][data-rarity="rare holo v"] .card__shine:before {
  content: none;
  display: none;
}

.card:not(.masked)[data-supertype="pokémon"][data-rarity="rare ultra"] .card__shine:after,
.card:not(.masked)[data-trainer-gallery="true"][data-rarity="rare holo v"] .card__shine:after {
  filter: brightness(calc((var(--pointer-from-center)*.5) + .8)) contrast(1.6) saturate(1.4);
}



/* ---- css/cards/v-max.css ---- */
/*

  V MAX

*/






.card:not(.masked)[data-rarity="rare holo vmax"][data-supertype="pokémon"] .card__shine,
.card:not(.masked)[data-rarity="rare holo vmax"][data-supertype="pokémon"] .card__shine:after {

  --mask: none;
  --foil: url("/holo/img/vmaxbg.jpg"); 
  --imgsize: 60% 30%;

}

/*

  SHINE LAYERS

*/

.card[data-rarity="rare holo vmax"] .card__shine {

  --space: 6%;
  --angle: 133deg;
  --imgsize: cover;

  background-image:
    var(--foil),
    repeating-linear-gradient( -33deg, 
      hsl(2, 70%, 47%) calc(var(--space)*1),  
      hsl(228, 60%, 64%) calc(var(--space)*2), 
      hsl(176, 55%, 39%) calc(var(--space)*3), 
      hsl(123, 68%, 35%) calc(var(--space)*4), 
      hsl(283, 75%, 57%) calc(var(--space)*5), 
      hsl(2, 70%, 47%) calc(var(--space)*6)
    ),
    repeating-linear-gradient( 
      var(--angle), 
      hsla(227, 53%, 12%, 0.5) 0%, 
      hsl(180, 10%, 50%) 2.5%, 
      hsl(83, 50%, 35%) 5%, 
      hsl(180, 10%, 50%) 7.5%, 
      hsla(227, 53%, 12%, 0.5) 10% , 
      hsla(227, 53%, 12%, 0.5) 15% 
      ),
    radial-gradient(
      farthest-corner circle 
      at var(--pointer-x) var(--pointer-y),
      hsla(189, 76%, 77%, 0.6) 0%, 
      hsla(147, 59%, 77%, 0.6) 25%, 
      hsla(271, 55%, 69%, 0.6) 50%, 
      hsla(355, 56%, 72%, 0.6) 75%
    );

  background-blend-mode: difference, luminosity, soft-light;
  background-size: var(--imgsize), 1100% 1100%, 600% 600%, 200% 200%;
  background-position: 
    center, 
    var(--background-x) var(--background-y), 
    var(--background-x) var(--background-y), 
    var(--background-x) var(--background-y);

  filter: brightness(calc((var(--pointer-from-center) * .4) + .4)) contrast(2) saturate(1);

}


.card[data-rarity="rare holo vmax"] .card__shine:after {

  content: "";

  background-image: repeating-linear-gradient( 0deg, 
    var(--sunpillar-clr-1) calc(var(--space)*1), 
    var(--sunpillar-clr-2) calc(var(--space)*2), 
    var(--sunpillar-clr-3) calc(var(--space)*3), 
    var(--sunpillar-clr-4) calc(var(--space)*4), 
    var(--sunpillar-clr-5) calc(var(--space)*5), 
    var(--sunpillar-clr-6) calc(var(--space)*6), 
    var(--sunpillar-clr-1) calc(var(--space)*7)
  ),
  repeating-linear-gradient( 
    var(--angle), 
    #0e152e 0%, 
    hsl(180, 10%, 60%) 3.8%, 
    hsl(180, 29%, 66%) 4.5%, 
    hsl(180, 10%, 60%) 5.2%, 
    #0e152e 10% , 
    #0e152e 12% 
  );

  background-blend-mode: hue, hard-light;
  background-size: 200% 700%, 300% 100%, 200% 100%;
  background-position: 0% var(--background-y), var(--background-x) var(--background-y), var(--background-x) var(--background-y);

  mix-blend-mode: lighten;
  opacity: calc( (0.3 * var(--card-opacity)) + var(--card-opacity) * var(--pointer-from-center) * 0.5 );
  filter: saturate(1.5);

}










/*

  GLARE LAYERS

*/

.card[data-rarity="rare holo vmax"] .card__glare {

  mix-blend-mode: hard-light;
  filter: brightness(1) contrast(1);

  background-image: 
    radial-gradient( 
      farthest-corner circle at 
      var(--pointer-x) var(--pointer-y), 
      hsla(0, 0%, 100%, 0.75) 0%, 
      hsl(0, 0%, 0%) 120% 
    );

    opacity: calc( (0.2 * var(--card-opacity)) + var(--card-opacity) * var(--pointer-from-center) * 0.8 );

}










/*

  NO MASK

*/



.card:not(.masked) [data-rarity="rare holo vmax"] .card__shine {

  filter: brightness(calc((var(--pointer-from-center) * .4) + .4)) contrast(2) saturate(1);

}









/* ---- css/cards/v-regular.css ---- */
/*

  V REGULAR

*/







/*

  SHINE LAYERS

*/

.card[data-rarity="rare holo v"]:not(.masked) .card__shine,
.card[data-subtypes="v-union"]:not(.masked) .card__shine {

  filter: brightness(.7) contrast(2) saturate(.5);

}

.card[data-rarity="rare holo v"] .card__shine,
.card[data-rarity="rare holo v"] .card__shine:after,
.card[data-subtypes="v-union"] .card__shine,
.card[data-subtypes="v-union"] .card__shine:after {

  --space: 5%;
  --angle: 133deg;
  --imgsize: 500px;

  background-image:
    var(--grain),
    repeating-linear-gradient( 0deg, 
      var(--sunpillar-clr-1) calc(var(--space)*1), 
      var(--sunpillar-clr-2) calc(var(--space)*2), 
      var(--sunpillar-clr-3) calc(var(--space)*3), 
      var(--sunpillar-clr-4) calc(var(--space)*4), 
      var(--sunpillar-clr-5) calc(var(--space)*5), 
      var(--sunpillar-clr-6) calc(var(--space)*6), 
      var(--sunpillar-clr-1) calc(var(--space)*7)
    ),
    repeating-linear-gradient( 
      var(--angle), 
      #0e152e 0%, 
      hsl(180, 10%, 60%) 3.8%, 
      hsl(180, 29%, 66%) 4.5%, 
      hsl(180, 10%, 60%) 5.2%, 
      #0e152e 10% , 
      #0e152e 12% 
      ),
    radial-gradient(
      farthest-corner circle 
      at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%, 
      hsla(0, 0%, 0%, 0.15) 20%, 
      hsla(0, 0%, 0%, 0.25) 120%
    );

  background-blend-mode: screen, hue, hard-light;
  background-size: var(--imgsize) 100%, 200% 700%, 300% 100%, 200% 100%;
  background-position: center, 0% var(--background-y), var(--background-x) var(--background-y), var(--background-x) var(--background-y);
  
  filter: brightness(.8) contrast(2.95) saturate(.65);

}

.card[data-rarity="rare holo v"] .card__shine:after,
.card[data-subtypes="v-union"] .card__shine:after {

  content: "";

  background-position: center, 0% var(--background-y), calc( var(--background-x) * -1) calc( var(--background-y) * -1), var(--background-x) var(--background-y);
  background-size: var(--imgsize) 100%, 200% 400%, 195% 100%, 200% 100%;

  filter: brightness(1) contrast(2.5) saturate(1.75);
  mix-blend-mode: soft-light;

}












/*

  GLARE LAYERS

*/

.card[data-rarity="rare holo v"] .card__glare,
.card[data-subtypes="v-union"] .card__glare {

  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
        hsl(0, 0%, 100%) 0%, 
        hsla(210, 3%, 54%, 0.33) 45%, 
        hsla(0, 0%, 20%, 0.9) 130% 
      );

  opacity: calc(var(--card-opacity)*.5);
  
  mix-blend-mode: hard-light;
  filter: brightness(.9) contrast(1.75);

}
/* ---- css/cards/v-star.css ---- */
/*

  V STAR

*/


.card.masked[data-rarity="rare holo vstar"] .card__shine, 
.card.masked[data-rarity="rare holo vstar"] .card__shine::before, 
.card.masked[data-rarity="rare holo vstar"] .card__shine::after {

  -webkit-mask-image:  
    var(--mask), 
    radial-gradient(
      farthest-corner circle 
      at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0) 0%, 
      hsla(0, 0%, 100%, .5) 120%
    ); 

  mask-image: 
    var(--mask), 
    radial-gradient(
      farthest-corner circle 
      at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0) 0%, 
      hsla(0, 0%, 100%, .5) 120%
    );

}

/*

  SHINE LAYERS

*/

.card[data-rarity="rare holo vstar"] .card__shine,
.card[data-rarity="rare holo vstar"] .card__shine:after {

  --space: 5%;
  --angle: 133deg;
  --imgsize: cover;

  background-image:
    var(--foil),
    repeating-linear-gradient( 0deg, 
      var(--sunpillar-clr-1) calc(var(--space)*1), 
      var(--sunpillar-clr-2) calc(var(--space)*2), 
      var(--sunpillar-clr-3) calc(var(--space)*3), 
      var(--sunpillar-clr-4) calc(var(--space)*4), 
      var(--sunpillar-clr-5) calc(var(--space)*5), 
      var(--sunpillar-clr-6) calc(var(--space)*6), 
      var(--sunpillar-clr-1) calc(var(--space)*7)
    ),
    repeating-linear-gradient( 
      var(--angle), 
      #0e152e 0%, 
      hsl(180, 10%, 60%) 3.8%, 
      hsl(180, 29%, 66%) 4.5%, 
      hsl(180, 10%, 60%) 5.2%, 
      #0e152e 10% , 
      #0e152e 12% 
    ),
    radial-gradient(
      farthest-corner circle 
      at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%, 
      hsla(0, 0%, 0%, 0.15) 20%, 
      hsla(0, 0%, 0%, 0.25) 120%
    );

  background-blend-mode: soft-light, hue, hard-light;
  background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
  background-position: center center, 0% var(--background-y), var(--background-x) var(--background-y), var(--background-x) var(--background-y);
  
  filter: brightness(calc((var(--pointer-from-center) * .75) + .25)) contrast(2) saturate(1.25);

}

.card[data-rarity="rare holo vstar"] .card__shine:after {

  content: "";

  background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
  background-position: center center, 0% var(--background-y), calc( var(--background-x) * -1) calc( var(--background-y) * -1), var(--background-x) var(--background-y);

  filter: brightness(calc((var(--pointer-from-center) * .75) + .5)) contrast(1.5) saturate(1.5);
  mix-blend-mode: exclusion;

}

.card[data-rarity="rare holo vstar"] .card__shine::before {

  content: "";
  background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(190, 7%, 80%, 0.75) 0%, hsla(260, 7%, 50%, 0.25) 45%, hsl(310, 7%, 50%) 120% );
  mix-blend-mode: hard-light;
  z-index: 2;
  opacity: 0.8;
  
}






/*

  GLARE LAYERS

*/


.card[data-rarity="rare holo vstar"] .card__glare {
  
  filter: brightness(.7) contrast(2);

  background-image: 
    radial-gradient( 
      farthest-corner circle at var(--pointer-x) var(--pointer-y), 
      hsl(195, 90%, 90%) 5%, 
      hsl(300, 3%, 60%) 60%, 
      hsl(350, 0%, 15%) 150% 
    );
  
  mix-blend-mode: hard-light;
  opacity: calc(var(--card-opacity)*(var(--pointer-from-center)*.75));

}










/*

  NO MASK

*/


.card:not(.masked)[data-rarity="rare holo vstar"] .card__shine,
.card:not(.masked)[data-rarity="rare holo vstar"] .card__shine:after {

  --mask: none;
  --foil: url("/holo/img/ancient.png"); 
  --imgsize: 18% 15%;

  background-blend-mode: exclusion, hue, hard-light;
  filter: brightness(calc((var(--pointer-from-center) * .25) + .35)) contrast(1.8) saturate(1.75);

}

.card:not(.masked)[data-rarity="rare holo vstar"] .card__shine:after {

  filter: brightness(calc((var(--pointer-from-center) * .75) + .5)) contrast(1.5) saturate(1.5);

}


.card:not(.masked)[data-rarity="rare holo vstar"] .card__glare {
  
  filter: brightness(.55) contrast(2);

}
/* ---- app.css ---- */
/* OURS. Nothing in css/ is touched — that is the reference's own code and it
   stays byte for byte, so it can be replaced wholesale if it is ever updated.
   This only sizes the stage the cards sit on. */



/* THE MODERN WINDOW STOPS THREE PER CENT SHORT OF THE PICTURE.

   His `--clip` ends at 47.15% down the card. Measured off scans on a
   percentage grid, the illustration runs to 50% — and it does so on every
   modern frame there is: Diamond & Pearl 2007, HeartGold 2010, Black & White
   2011, XY 2014, Sun & Moon 2017, Sword & Shield 2020 all read 9–10% at the
   top and 50% at the bottom. So this is one number, wrong by the same amount,
   for thirteen years of cards.

   What it looks like is a thin unlit band along the bottom edge of the
   artwork — foil above it, flat card below it, with the seam running straight
   across the picture rather than along anything printed.

   ONLY UNMASKED CARDS SEE IT. A card with a real foil mask ignores `--clip`
   entirely (see the `.card.masked` rule below), so in practice this is the
   2003–2019 middle: too late for the vintage window, too early for TCG Live
   to have a mask. That is most of what a collector opens.

   Set here rather than in `css/cards.css`, which stays byte for byte. Same
   specificity as his rule and loaded after it, so this wins. The stage polygon
   keeps its notch — that one is right for modern cards, it is only the bottom
   edge that moves.

   I also expected EX, DP and B&W to each need a window of their own and they
   do not; the measurements above are why there is still exactly one modern
   bucket. */
.card {
  --clip: inset(9.85% 8% 50% 8%);
  --clip-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 50%, 91.5% 50%, 91.5% 9.85%, 8% 9.85%, 8% 50%, 0 52.85%);
  --clip-stage: polygon(91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 50%, 92% 50%);
  --clip-stage-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 50%, 91.5% 50%, 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 50%, 0 52.85%);
}

/* THE HERO IS INSET, AND THAT IS NOT A MARGIN FOR LOOKS.
   `.card__rotator` turns the card in 3D through a 600px perspective. A card
   rotated twelve degrees puts its near corners OUTSIDE its own layout box, so
   a card sized to the full stage has its corners clipped off by the web view's
   bounds — which is exactly the "cut off on the edges" that showed on device.
   The inset is the room the rotation needs. */





/* A pocket with nothing in it draws nothing; the native sleeve is the hole. */


/* NO 3D IN A GRID. A binder page is one rigid sheet: sixteen pockets each
   turning on their own axis is a page of loose cards flapping, and it also
   overflows every pocket. The light still moves; the cardboard does not. */



/* A MASK OUTRANKS THE CLIP.

   His CSS is already mask-aware: nearly every per-rarity shine rule is written
   `.card:not(.masked)[data-rarity=...]`, so supplying `--mask` takes the
   rectangle out of play and the real foil shape takes over. He built that for
   his own 151 masks.

   `rare holo` is the one that was missed. `regular-holo.css:29` sets
   `clip-path: var(--clip)` on the shine with no `:not(.masked)` guard, so a
   masked rare holo gets the mask INTERSECTED with the era rectangle — the mask
   can then only ever subtract foil, never restore it where the rectangle cut
   it off. On a card whose window is a couple of per cent out, that is exactly
   the seam masks were fetched to remove, still there.

   Fixed here rather than in his file, because `css/**` stays byte for byte so
   it can be replaced wholesale if he ever updates it. Scoped to `.masked`, so
   a card without a mask keeps every clip path he wrote.

   The GLARE is deliberately left alone. Its `::after` is clipped to the window
   too (base.css:334), but that highlight is his design rather than a stand-in
   for foil — a soft spot under the finger, confined to the picture — and it
   reads correctly whether or not the foil around it is masked. */
.card.masked .card__shine,
.card.masked .card__shine:before,
.card.masked .card__shine:after {
  clip-path: none !important;

  /* NO `mask-mode` HERE, AND THAT IS A CONCLUSION RATHER THAN AN OMISSION.

     A CSS mask reads TRANSPARENCY. TCG Live's foil masks are opaque greyscale
     — the shape lives entirely in their brightness — so handed straight to a
     browser they keep every pixel and the shine covers the whole card, which
     looks exactly like a card that was never masked.

     `mask-mode: luminance` is the obvious fix and it does not work here. iOS
     WebKit PARSES it and hands it back through `getComputedStyle` while still
     compositing by alpha, so a diagnostic reads `mode:luminance,alpha` on a
     card that is plainly unmasked. Every measurement agrees and the card is
     still wrong. Do not re-add it.

     The shape is moved into the alpha channel at conversion instead — see
     `fetch-holo-masks.command` — which is also what the reference project's
     own masks do, and why his CSS never had to say anything about modes. The
     files now carry the shape in all four channels, so they are correct
     whichever rule a browser follows and no stylesheet has to choose. */
}

/* A CRYSTAL CARD IS FOILED CORNER TO CORNER.

   The e-Card secret rares — Aquapolis and Skyridge "Crystal Type" — are the
   one vintage print an illustration window is the wrong answer for at any
   size: the foil covers the whole face, border and text box included.
   `MBHoloRarity` maps them to `rare holo` because his CSS has no crystal
   style and pouring Sword & Shield gold over a 2003 card is worse, so the
   material is a sheet holo and only the SHAPE needed fixing.

   Same mechanism as `.card.masked` above and for the same reason: drop the
   clip on the shine layers and let the sheet cover the card. The glare keeps
   its own clip, which is his design — a soft spot under the finger. */
.card[data-fullface="true"] .card__shine,
.card[data-fullface="true"] .card__shine:before,
.card[data-fullface="true"] .card__shine:after {
  clip-path: none !important;
}

/* A WIZARDS-ERA TRAINER'S FOIL WAS NEVER ACTUALLY MOVED.

   `holo.js` has set `--clip-trainer` for vintage cards since the window work
   started, and it had no effect on the foil, because in his CSS only the
   GLARE reads that variable (`base.css:347`). The shine itself is clipped to
   `var(--clip)` with no supertype test at all (`regular-holo.css:36`), so a
   Gym Heroes Misty got the Pokemon rectangle — measured 11.6%-52.6% against
   her picture's real 22.8%-55.8%. Eleven per cent of the card's height out:
   lit across the TRAINER banner and her name plate, and a third of the
   picture left matte at the bottom.

   Scoped to `wotc` deliberately. It is the only era where a Trainer's window
   differs from a Pokemon's — on the e-Card and EX frames the picture sits in
   the same box whatever the card is, and `holo.js` sets both to the same
   rectangle there — so a blanket trainer rule would change modern cards,
   which nothing in the feedback log asks for.

   `:not(.masked)` so a card with a real TCG Live mask still ignores every
   rectangle, which is the whole point of having one. */
.card[data-era="wotc"][data-supertype="trainer"]:not(.masked) .card__shine,
.card[data-era="wotc"][data-supertype="trainer"]:not(.masked) .card__shine:before,
.card[data-era="wotc"][data-supertype="trainer"]:not(.masked) .card__shine:after {
  clip-path: var(--clip-trainer) !important;
}