/*

  BASE STYLES / VARIABLES
*/







/*

  SHINE LAYERS

*/


:root {
  
  --card-aspect: 0.718;
  --card-radius: 4.55% / 3.5%;
  --card-width: min(320px, 80vw);
  --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;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));

  /* 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 + var(--stack-z, 0px)); /* 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 {
  --flip-rotate: 180deg;
  --card-gold-shadow: 0 0 0 transparent;
  width: var(--card-width);
  position: relative;
  -webkit-transform: rotateY(calc(var(--rotate-x) + var(--flip-rotate))) rotateX(var(--rotate-y));
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--rotate-x) + var(--flip-rotate))) rotateX(var(--rotate-y));
  /* performance */
  pointer-events: auto;
  touch-action: none;
  /* overflow: hidden; <-- this improves perf on mobile, but breaks backface visibility. */
  /* isolation: isolate; <-- this improves perf, but breaks backface visibility on Chrome. */
}

.card.preflight .card__rotator {
  transform: rotateY(calc(var(--rotate-x) + var(--flip-rotate))) rotateX(var(--rotate-y)) translateZ(0.01px);
}

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 2px -1px transparent,
    0 0 2px 1px transparent,
    0 0 5px 0px transparent,
    0px 6px 12px -6px rgba(0, 0, 0, 0.6),
    0 2px 10px -8px rgba(0, 0, 0, 0.5),
    0 0 10px 0px transparent;
}

.card.active .card__rotator,
.card__rotator:focus {
  --flip-rotate: 0deg;
  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),
    var(--card-gold-shadow)
}

.card.active:not(.flipped) .card__rotator {
  --flip-rotate: 180deg;
}

.card.active.flipped[data-rarity="rare rainbow"],
.card.active.flipped[data-rarity="rare holo cosmos"],
.card.active.flipped[data-rarity$="reverse holo"] {
  --card-gold-shadow:
    0 0 3px rgba(255, 210, 120, 0.2),
    0 0 8px rgba(255, 185, 70, 0.16),
    0 0 14px rgba(255, 155, 35, 0.12);
}

.card.active.flipped.winner-reveal .card__rotator {
  animation: winner-gold-glow 2.8s ease-in-out infinite;
}

.card.active.flipped.winner-reveal {
  --card-gold-shadow:
    0 0 2px rgba(255, 220, 140, 0.28),
    0 0 6px rgba(255, 190, 70, 0.2),
    0 0 10px rgba(255, 170, 30, 0.16);
}

.rea1-canvas,
.rea2-canvas,
.rea3-canvas,
.rea4-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(0.4px) brightness(1.5);
  z-index: 2;
}

.rea3-canvas {
  z-index: 5;
  filter: blur(0.2px) brightness(1.7);
}

.rea4-canvas {
  z-index: 5;
  filter: blur(0.2px) brightness(1.55);
}


.card.winner-reveal .rea1-canvas,
.card.winner-reveal .rea2-canvas,
.card.winner-reveal .rea3-canvas,
.card.winner-reveal .rea4-canvas {
  opacity: 1;
}

body[data-sparkle-mode="off"] .card.winner-reveal .rea1-canvas,
body[data-sparkle-mode="off"] .card.winner-reveal .rea2-canvas,
body[data-sparkle-mode="off"] .card.winner-reveal .rea3-canvas,
body[data-sparkle-mode="off"] .card.winner-reveal .rea4-canvas {
  opacity: 0;
}
body[data-sparkle-mode="rea1"] .card.winner-reveal .rea2-canvas {
  opacity: 0;
}
body[data-sparkle-mode="rea1"] .card.winner-reveal .rea3-canvas {
  opacity: 0;
}
body[data-sparkle-mode="rea1"] .card.winner-reveal .rea4-canvas {
  opacity: 0;
}
body[data-sparkle-mode="rea2"] .card.winner-reveal .rea1-canvas {
  opacity: 0;
}
body[data-sparkle-mode="rea2"] .card.winner-reveal .rea3-canvas {
  opacity: 0;
}
body[data-sparkle-mode="rea2"] .card.winner-reveal .rea4-canvas {
  opacity: 0;
}
body[data-sparkle-mode="rea3"] .card.winner-reveal .rea1-canvas,
body[data-sparkle-mode="rea3"] .card.winner-reveal .rea2-canvas {
  opacity: 0;
}
body[data-sparkle-mode="rea3"] .card.winner-reveal .rea4-canvas {
  opacity: 0;
}
body[data-sparkle-mode="srmix"] .card.winner-reveal .rea2-canvas,
body[data-sparkle-mode="srmix"] .card.winner-reveal .rea3-canvas {
  opacity: 0;
}
body[data-sparkle-mode="both"] .card.winner-reveal .rea1-canvas,
body[data-sparkle-mode="both"] .card.winner-reveal .rea2-canvas,
body[data-sparkle-mode="both"] .card.winner-reveal .rea3-canvas,
body[data-sparkle-mode="both"] .card.winner-reveal .rea4-canvas {
  opacity: 1;
}

.card[data-sparkle-mode="off"] .rea1-canvas,
.card[data-sparkle-mode="off"] .rea2-canvas,
.card[data-sparkle-mode="off"] .rea3-canvas,
.card[data-sparkle-mode="off"] .rea4-canvas {
  opacity: 0;
}
.card[data-sparkle-mode="rea1"] .rea2-canvas {
  opacity: 0;
}
.card[data-sparkle-mode="rea1"] .rea3-canvas {
  opacity: 0;
}
.card[data-sparkle-mode="rea1"] .rea4-canvas {
  opacity: 0;
}
.card[data-sparkle-mode="rea2"] .rea1-canvas {
  opacity: 0;
}
.card[data-sparkle-mode="rea2"] .rea3-canvas {
  opacity: 0;
}
.card[data-sparkle-mode="rea2"] .rea4-canvas {
  opacity: 0;
}
.card[data-sparkle-mode="rea3"] .rea1-canvas,
.card[data-sparkle-mode="rea3"] .rea2-canvas {
  opacity: 0;
}
.card[data-sparkle-mode="rea3"] .rea4-canvas {
  opacity: 0;
}
.card[data-sparkle-mode="srmix"] .rea2-canvas,
.card[data-sparkle-mode="srmix"] .rea3-canvas {
  opacity: 0;
}

body[data-sparkle-debug="1"] .card.active .rea1-canvas,
body[data-sparkle-debug="1"] .card.active .rea2-canvas,
body[data-sparkle-debug="1"] .card.active .rea3-canvas,
body[data-sparkle-debug="1"] .card.active .rea4-canvas {
  opacity: 1;
}

@keyframes winner-gold-glow {
  0% {
    box-shadow:
      0 0 3px -2px rgba(255, 220, 140, 0.3),
      0 0 8px 3px rgba(255, 190, 70, 0.16),
      0 0 14px 5px rgba(255, 170, 30, 0.1),
      0px 10px 20px -6px rgba(0, 0, 0, 0.6);
  }
  50% {
    box-shadow:
      0 0 4px -1px rgba(255, 230, 160, 0.6),
      0 0 10px 4px rgba(255, 200, 90, 0.35),
      0 0 18px 7px rgba(255, 180, 50, 0.25),
      0px 10px 20px -6px rgba(0, 0, 0, 0.6);
  }
  100% {
    box-shadow:
      0 0 3px -2px rgba(255, 220, 140, 0.3),
      0 0 8px 3px rgba(255, 190, 70, 0.16),
      0 0 14px 5px rgba(255, 170, 30, 0.1),
      0px 10px 20px -6px rgba(0, 0, 0, 0.6);
  }
}

.card.flipped .card__rotator {
  --flip-rotate: 0deg;
}
.card:not(.flipped) .card__rotator {
  --flip-rotate: 180deg !important;
}

.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: hidden;
}

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

.card__front {
  opacity: 1;
  position: relative;
  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;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  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 */
  position: relative;
  transform: translateZ(1.41px);
  z-index: 5;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: 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;
  
}

/*
  共通追従スポット（Cで作った挙動を全レアリティの土台に配布）
  既存の各ホロCSSは上からそのまま重なるので、元表現は維持される。
*/
.card[data-rarity-key] .card__front,
.card[data-set="c"] .card__front,
.card[data-set="r"] .card__front,
.card[data-set="sr"] .card__front,
.card[data-set="ssr"] .card__front,
.card[data-set="ur"] .card__front,
.card[data-set="secret"] .card__front {
  isolation: isolate;
}

.card[data-rarity-key] .card__glare:before,
.card[data-set="c"] .card__glare:before,
.card[data-set="r"] .card__glare:before,
.card[data-set="sr"] .card__glare:before,
.card[data-set="ssr"] .card__glare:before,
.card[data-set="ur"] .card__glare:before,
.card[data-set="secret"] .card__glare:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  pointer-events: none;
  opacity: calc(0.30 + (var(--pointer-from-center) * 0.20));
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 1) 7%,
    hsla(0, 0%, 100%, 0.92) 20%,
    hsla(0, 0%, 100%, 0.28) 38%,
    hsla(0, 0%, 0%, 0.3) 88%
  );
  mix-blend-mode: overlay;
  filter: brightness(1.06) contrast(1.34) saturate(1.02);
}






/**

  Masking Effects

**/

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

  /** masking image disabled to avoid missing webp requests **/
  -webkit-mask-image: none;
  mask-image: none;
	-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);
}

/* C(common): Tool/deve_horo.php と同じ「スポット追従」寄りにする */
.card[data-rarity="common"] .card__shine,
.card[data-set="c"] .card__shine,
.card[data-rarity-key="c"] .card__shine,
.card[data-rarity-key="C"] .card__shine {
  /* Cは実質glare主体。shineはほぼ無効化してTool寄せ */
  opacity: 0 !important;
}

.card[data-rarity="common"] .card__front,
.card[data-set="c"] .card__front,
.card[data-rarity-key="c"] .card__front,
.card[data-rarity-key="C"] .card__front {
  /* blend の合成先をカード面に固定 */
  isolation: isolate;
}

.card[data-rarity="common"] .card__glare,
.card[data-set="c"] .card__glare,
.card[data-rarity-key="c"] .card__glare,
.card[data-rarity-key="C"] .card__glare {
  opacity: calc(0.30 + (var(--pointer-from-center) * 0.20)) !important;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 1) 7%,
    hsla(0, 0%, 100%, 0.92) 20%,
    hsla(0, 0%, 100%, 0.28) 38%,
    hsla(0, 0%, 0%, 0.3) 88%
  ) !important;
  mix-blend-mode: overlay !important;
  filter: brightness(1.06) contrast(1.34) saturate(1.02) !important;
}

/* Rのみ: カード内部の粒アニメ(rea)は無効化（PC/SP共通） */
.card[data-rarity-key="r"] .rea1-canvas,
.card[data-rarity-key="r"] .rea2-canvas,
.card[data-rarity-key="r"] .rea3-canvas,
.card[data-rarity-key="R"] .rea1-canvas,
.card[data-rarity-key="R"] .rea2-canvas,
.card[data-rarity-key="R"] .rea3-canvas,
.card[data-set="r"] .rea1-canvas,
.card[data-set="r"] .rea2-canvas,
.card[data-set="r"] .rea3-canvas {
  opacity: 0 !important;
}

/* R(rare holo): Cで採用した追従光レシピに寄せつつ、Rの虹ホロは維持 */
.card[data-rarity="rare holo"] .card__shine,
.card[data-set="r"] .card__shine,
.card[data-rarity-key="r"] .card__shine,
.card[data-rarity-key="R"] .card__shine {
  --r-rainbow-drive: max(0, calc((var(--pointer-from-center) - 0.14) * 2.1));
  opacity: calc(0.10 + (var(--r-rainbow-drive) * 0.38)) !important;
  background-position:
    center center,
    calc(((50% - var(--background-x)) * 4.2) + 50%) calc(((50% - var(--background-y)) * 5.4) + 50%),
    center center !important;
  filter:
    brightness(calc(1.00 + (var(--r-rainbow-drive) * 0.30)))
    contrast(calc(1.12 + (var(--r-rainbow-drive) * 0.40)))
    saturate(calc(1.16 + (var(--r-rainbow-drive) * 0.48))) !important;
  mix-blend-mode: color-dodge !important;
  /* 虹の可視範囲を追従スポットの中範囲へ絞る */
  -webkit-mask-image: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.95) 24%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.24) 58%,
    rgba(0, 0, 0, 0) 72%
  ) !important;
  mask-image: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.95) 24%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.24) 58%,
    rgba(0, 0, 0, 0) 72%
  ) !important;
  -webkit-mask-size: cover !important;
  mask-size: cover !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center center !important;
  mask-position: center center !important;
}

.card[data-rarity="rare holo"] .card__glare,
.card[data-set="r"] .card__glare,
.card[data-rarity-key="r"] .card__glare,
.card[data-rarity-key="R"] .card__glare {
  opacity: calc(0.20 + (var(--pointer-from-center) * 0.14)) !important;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(198, 100%, 92%, 0.92) 6%,
    hsla(46, 100%, 85%, 0.72) 18%,
    hsla(222, 85%, 64%, 0.32) 34%,
    hsla(248, 36%, 20%, 0.52) 78%,
    hsla(0, 0%, 0%, 0.48) 100%
  ) !important;
  mix-blend-mode: overlay !important;
  filter: brightness(1.08) contrast(1.50) saturate(1.18) !important;
}

.card[data-rarity="rare holo"] .card__glare:before,
.card[data-set="r"] .card__glare:before,
.card[data-rarity-key="r"] .card__glare:before,
.card[data-rarity-key="R"] .card__glare:before {
  opacity: calc(0.08 + (var(--pointer-from-center) * 0.10)) !important;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.65) 0%,
    hsla(193, 100%, 88%, 0.36) 14%,
    hsla(265, 76%, 63%, 0.12) 30%,
    hsla(0, 0%, 0%, 0.22) 86%
  ) !important;
  mix-blend-mode: overlay !important;
  filter: brightness(1.06) contrast(1.38) saturate(1.12) !important;
}

/* SR: Rレシピベース + calc強調（Rより強め） */
.card[data-rarity-key="sr"] .card__shine,
.card[data-rarity-key="SR"] .card__shine,
.card[data-set="sr"] .card__shine {
  --sr-rainbow-drive: max(0, calc((var(--pointer-from-center) - 0.14) * 2.1));
  opacity: calc(0.121 + (var(--sr-rainbow-drive) * 0.460)) !important;
  background-position:
    center center,
    calc(((50% - var(--background-x)) * 4.2) + 50%) calc(((50% - var(--background-y)) * 5.4) + 50%),
    center center !important;
  filter:
    brightness(calc(1.00 + (var(--sr-rainbow-drive) * 0.30)))
    contrast(calc(1.12 + (var(--sr-rainbow-drive) * 0.40)))
    saturate(calc(1.16 + (var(--sr-rainbow-drive) * 0.48))) !important;
  mix-blend-mode: color-dodge !important;
  -webkit-mask-image: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.95) 24%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.24) 58%,
    rgba(0, 0, 0, 0) 72%
  ) !important;
  mask-image: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.95) 24%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.24) 58%,
    rgba(0, 0, 0, 0) 72%
  ) !important;
  -webkit-mask-size: cover !important;
  mask-size: cover !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center center !important;
  mask-position: center center !important;
}

/* SR: R-M.png を虹の上にブレンドレイヤーとして重ねる */
.card[data-rarity-key="sr"] .card__shine:before,
.card[data-rarity-key="SR"] .card__shine:before,
.card[data-set="sr"] .card__shine:before {
  content: "";
  background-image: url("../_images/foil/R-M.png?v=20250105holo2") !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: calc(0.10 + (var(--sr-rainbow-drive) * 0.26)) !important;
  mix-blend-mode: overlay !important;
  filter: brightness(1.04) contrast(1.22) saturate(1.08) !important;
}

.card[data-rarity-key="sr"] .card__glare,
.card[data-rarity-key="SR"] .card__glare,
.card[data-set="sr"] .card__glare {
  opacity: calc(0.20 + (var(--pointer-from-center) * 0.14)) !important;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(198, 100%, 92%, 0.92) 6%,
    hsla(46, 100%, 85%, 0.72) 18%,
    hsla(222, 85%, 64%, 0.32) 34%,
    hsla(248, 36%, 20%, 0.52) 78%,
    hsla(0, 0%, 0%, 0.48) 100%
  ) !important;
  mix-blend-mode: overlay !important;
  filter: brightness(1.08) contrast(1.50) saturate(1.18) !important;
}

.card[data-rarity-key="sr"] .card__glare:before,
.card[data-rarity-key="SR"] .card__glare:before,
.card[data-set="sr"] .card__glare:before {
  opacity: calc(0.08 + (var(--pointer-from-center) * 0.10)) !important;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.65) 0%,
    hsla(193, 100%, 88%, 0.36) 14%,
    hsla(265, 76%, 63%, 0.12) 30%,
    hsla(0, 0%, 0%, 0.22) 86%
  ) !important;
  mix-blend-mode: overlay !important;
  filter: brightness(1.06) contrast(1.38) saturate(1.12) !important;
}

/* SRの内部キラキラ(rea1)はPC/SPとも有効化 */
.card[data-rarity-key="sr"] .rea1-canvas,
.card[data-rarity-key="SR"] .rea1-canvas,
.card[data-set="sr"] .rea1-canvas {
  opacity: 1 !important;
}

/* SRスマホ限定: 虹のブレンドオーバーレイ強度を下げる */
@media screen and (max-width: 1024px) and (hover: none) {
  .card[data-rarity-key="sr"] .card__shine,
  .card[data-rarity-key="SR"] .card__shine,
  .card[data-set="sr"] .card__shine {
    /* 虹の出すぎを抑えて、ブレンド層が見える余地を作る */
    opacity: calc(0.073 + (var(--sr-rainbow-drive) * 0.290)) !important;
    filter:
      brightness(calc(0.98 + (var(--sr-rainbow-drive) * 0.20)))
      contrast(calc(1.08 + (var(--sr-rainbow-drive) * 0.28)))
      saturate(calc(1.00 + (var(--sr-rainbow-drive) * 0.30))) !important;
    -webkit-mask-image: radial-gradient(
      circle at var(--pointer-x) var(--pointer-y),
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.94) 20%,
      rgba(0, 0, 0, 0.64) 38%,
      rgba(0, 0, 0, 0.18) 54%,
      rgba(0, 0, 0, 0) 66%
    ) !important;
    mask-image: radial-gradient(
      circle at var(--pointer-x) var(--pointer-y),
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.94) 20%,
      rgba(0, 0, 0, 0.64) 38%,
      rgba(0, 0, 0, 0.18) 54%,
      rgba(0, 0, 0, 0) 66%
    ) !important;
  }

  .card[data-rarity-key="sr"] .card__shine:before,
  .card[data-rarity-key="SR"] .card__shine:before,
  .card[data-set="sr"] .card__shine:before {
    opacity: calc(0.066 + (var(--sr-rainbow-drive) * 0.176)) !important;
    filter: brightness(1.04) contrast(1.20) saturate(1.08) !important;
  }
}