/**
 * card-finishes.css — Card finish overlays shared by the game and the static pages.
 *
 * WHAT THIS FILE DOES
 * The glitter, holo, foil and gold surface treatments used by `CardFront` and by
 * the finish previews on the static wiki. Extracted from `src/index.css` so the
 * build script can serve the exact same CSS to the static pages instead of
 * duplicating the effect by hand.
 *
 * USE CASES
 * - `src/index.css` imports this file for the game.
 * - `scripts/static-pages` copies it to `dist/card-finishes.css`.
 *
 * DEPENDENCIES
 * Texture files under `public/images/textures/`.
 */
.card-finish-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 1rem;
  z-index: 25;
  mix-blend-mode: normal;
  overflow: hidden;
}

.card-finish-glitter {
  background: linear-gradient(
    calc(135deg + var(--tilt-x, 0) * 4deg),
    #ff007f 0%,
    #ffaa00 20%,
    #00ffaa 40%,
    #00aaff 60%,
    #aa00ff 80%,
    #ff007f 100%
  );
  background-size: 200% 200%;
  background-position: calc(50% + var(--tilt-x, 0) * 6%) calc(50% + var(--tilt-y, 0) * 6%);

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 19 L21.5 23.5 L26 25 L21.5 26.5 L20 31 L18.5 26.5 L14 25 L18.5 23.5 Z' fill='white' opacity='0.9'/%3E%3Cpolygon points='45,10 49,15 45,20 41,15' fill='white' opacity='0.8'/%3E%3Cpath d='M75 33 L76.5 38.5 L81 40 L76.5 41.5 L75 47 L73.5 41.5 L69 40 L73.5 38.5 Z' fill='white' opacity='0.95'/%3E%3Cpolygon points='10,76 14,80 10,84 6,80' fill='white' opacity='0.75'/%3E%3Cpath d='M50 89 L51.5 93.5 L56 95 L51.5 96.5 L50 101 L48.5 96.5 L44 95 L48.5 93.5 Z' fill='white' opacity='0.85'/%3E%3Cpolygon points='85,105 89,110 85,115 81,110' fill='white' opacity='0.8'/%3E%3Cpath d='M30 128 L31.5 133.5 L36 135 L31.5 136.5 L30 141 L28.5 136.5 L24 135 L28.5 133.5 Z' fill='white' opacity='0.9'/%3E%3Cpolygon points='65,66 69,70 65,74 61,70' fill='white' opacity='0.7'/%3E%3Cpath d='M90 9 L91.5 13.5 L96 15 L91.5 16.5 L90 21 L88.5 16.5 L84 15 L88.5 13.5 Z' fill='white' opacity='0.85'/%3E%3Cpolygon points='15,116 19,120 15,124 11,120' fill='white' opacity='0.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 19 L21.5 23.5 L26 25 L21.5 26.5 L20 31 L18.5 26.5 L14 25 L18.5 23.5 Z' fill='white' opacity='0.9'/%3E%3Cpolygon points='45,10 49,15 45,20 41,15' fill='white' opacity='0.8'/%3E%3Cpath d='M75 33 L76.5 38.5 L81 40 L76.5 41.5 L75 47 L73.5 41.5 L69 40 L73.5 38.5 Z' fill='white' opacity='0.95'/%3E%3Cpolygon points='10,76 14,80 10,84 6,80' fill='white' opacity='0.75'/%3E%3Cpath d='M50 89 L51.5 93.5 L56 95 L51.5 96.5 L50 101 L48.5 96.5 L44 95 L48.5 93.5 Z' fill='white' opacity='0.85'/%3E%3Cpolygon points='85,105 89,110 85,115 81,110' fill='white' opacity='0.8'/%3E%3Cpath d='M30 128 L31.5 133.5 L36 135 L31.5 136.5 L30 141 L28.5 136.5 L24 135 L28.5 133.5 Z' fill='white' opacity='0.9'/%3E%3Cpolygon points='65,66 69,70 65,74 61,70' fill='white' opacity='0.7'/%3E%3Cpath d='M90 9 L91.5 13.5 L96 15 L91.5 16.5 L90 21 L88.5 16.5 L84 15 L88.5 13.5 Z' fill='white' opacity='0.85'/%3E%3Cpolygon points='15,116 19,120 15,124 11,120' fill='white' opacity='0.75'/%3E%3C/svg%3E");
  mask-size: 80px 120px;
  -webkit-mask-size: 80px 120px;

  mix-blend-mode: color-dodge;
  opacity: 0.8;
}

.card-finish-glitter::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 40% at calc(50% + var(--tilt-x, 0) * 6%) calc(50% + var(--tilt-y, 0) * 6%),
    rgba(255, 255, 255, 1) 0%,
    rgba(251, 191, 36, 0.4) 30%,
    transparent 70%
  );

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 19 L21.5 23.5 L26 25 L21.5 26.5 L20 31 L18.5 26.5 L14 25 L18.5 23.5 Z' fill='white' opacity='0.9'/%3E%3Cpolygon points='45,10 49,15 45,20 41,15' fill='white' opacity='0.8'/%3E%3Cpath d='M75 33 L76.5 38.5 L81 40 L76.5 41.5 L75 47 L73.5 41.5 L69 40 L73.5 38.5 Z' fill='white' opacity='0.95'/%3E%3Cpolygon points='10,76 14,80 10,84 6,80' fill='white' opacity='0.75'/%3E%3Cpath d='M50 89 L51.5 93.5 L56 95 L51.5 96.5 L50 101 L48.5 96.5 L44 95 L48.5 93.5 Z' fill='white' opacity='0.85'/%3E%3Cpolygon points='85,105 89,110 85,115 81,110' fill='white' opacity='0.8'/%3E%3Cpath d='M30 128 L31.5 133.5 L36 135 L31.5 136.5 L30 141 L28.5 136.5 L24 135 L28.5 133.5 Z' fill='white' opacity='0.9'/%3E%3Cpolygon points='65,66 69,70 65,74 61,70' fill='white' opacity='0.7'/%3E%3Cpath d='M90 9 L91.5 13.5 L96 15 L91.5 16.5 L90 21 L88.5 16.5 L84 15 L88.5 13.5 Z' fill='white' opacity='0.85'/%3E%3Cpolygon points='15,116 19,120 15,124 11,120' fill='white' opacity='0.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 19 L21.5 23.5 L26 25 L21.5 26.5 L20 31 L18.5 26.5 L14 25 L18.5 23.5 Z' fill='white' opacity='0.9'/%3E%3Cpolygon points='45,10 49,15 45,20 41,15' fill='white' opacity='0.8'/%3E%3Cpath d='M75 33 L76.5 38.5 L81 40 L76.5 41.5 L75 47 L73.5 41.5 L69 40 L73.5 38.5 Z' fill='white' opacity='0.95'/%3E%3Cpolygon points='10,76 14,80 10,84 6,80' fill='white' opacity='0.75'/%3E%3Cpath d='M50 89 L51.5 93.5 L56 95 L51.5 96.5 L50 101 L48.5 96.5 L44 95 L48.5 93.5 Z' fill='white' opacity='0.85'/%3E%3Cpolygon points='85,105 89,110 85,115 81,110' fill='white' opacity='0.8'/%3E%3Cpath d='M30 128 L31.5 133.5 L36 135 L31.5 136.5 L30 141 L28.5 136.5 L24 135 L28.5 133.5 Z' fill='white' opacity='0.9'/%3E%3Cpolygon points='65,66 69,70 65,74 61,70' fill='white' opacity='0.7'/%3E%3Cpath d='M90 9 L91.5 13.5 L96 15 L91.5 16.5 L90 21 L88.5 16.5 L84 15 L88.5 13.5 Z' fill='white' opacity='0.85'/%3E%3Cpolygon points='15,116 19,120 15,124 11,120' fill='white' opacity='0.75'/%3E%3C/svg%3E");
  mask-size: 80px 120px;
  -webkit-mask-size: 80px 120px;

  mix-blend-mode: screen;
  opacity: calc(
    0.3 + (var(--tilt-x, 0) * var(--tilt-x, 0) + var(--tilt-y, 0) * var(--tilt-y, 0)) * 0.002
  );
  pointer-events: none;
}

/* Holo Finish: Cosmos Holo Dreischicht-Modell */
.card-finish-holo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 25;
  overflow: hidden;

  --space: 4%;
  background-image:
    url('/images/textures/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(--glare-x, 50%) var(--glare-y, 50%),
      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:
    center center,
    calc(10% + (var(--pointer-from-left, 0.5) * 80%))
      calc(10% + (var(--pointer-from-top, 0.5) * 80%)),
    center center;
  background-size:
    cover,
    400% 900%,
    cover;
  filter: brightness(1) contrast(1) saturate(0.8);
  mix-blend-mode: color-dodge;
  opacity: 0.8;
}

.card-finish-holo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background-image:
    url('/images/textures/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:
    center center,
    calc(15% + (var(--pointer-from-left, 0.5) * 70%))
      calc(15% + (var(--pointer-from-top, 0.5) * 70%)),
    center center;
  background-size:
    cover,
    400% 900%,
    cover;
  filter: brightness(1.25) contrast(1.75) saturate(0.8);
  mix-blend-mode: overlay;
}

.card-finish-holo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  background-image:
    url('/images/textures/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:
    center center,
    calc(20% + (var(--pointer-from-left, 0.5) * 60%))
      calc(20% + (var(--pointer-from-top, 0.5) * 60%)),
    center center;
  background-size:
    cover,
    400% 900%,
    cover;
  filter: brightness(1.25) contrast(1.75) saturate(0.8);
  mix-blend-mode: multiply;
}

/* Foil Finish: Trainer Gallery V */
.card-finish-foil {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 25;
  overflow: hidden;

  --space: 5%;
  --angle: 133deg;
  --imgsize: 135%;
  --foil: url('/images/textures/illusion.png');

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

  --background-x: var(--glare-x, 50%);
  --background-y: var(--glare-y, 50%);

  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(--glare-x, 50%) var(--glare-y, 50%),
      hsla(0, 0%, 0%, 0.1) 12%,
      hsla(0, 0%, 0%, 0.15) 20%,
      hsla(0, 0%, 0%, 0.25) 120%
    );

  background-position:
    calc(45% + (var(--pointer-from-left, 0.5) * 10%))
      calc(45% + (var(--pointer-from-top, 0.5) * 10%)),
    0% var(--background-y),
    calc(var(--background-x) + (var(--background-y) * 0.2)) var(--background-y),
    center center;

  background-repeat: repeat, repeat, repeat, no-repeat;
  background-blend-mode: exclusion, hue, hard-light;
  background-size:
    var(--imgsize),
    200% 700%,
    300% 100%,
    200% 100%;
  mix-blend-mode: color-dodge;
  filter: brightness(calc((var(--pointer-from-center, 0) * 0.3) + 0.35)) contrast(2) saturate(1.5);
  opacity: 0.85;
}

.card-finish-foil::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  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(--glare-x, 50%) var(--glare-y, 50%),
      hsla(0, 0%, 0%, 0.1) 12%,
      hsla(0, 0%, 0%, 0.15) 20%,
      hsla(0, 0%, 0%, 0.25) 120%
    );

  background-position:
    calc(55% - (var(--pointer-from-left, 0.5) * 10%))
      calc(55% - (var(--pointer-from-top, 0.5) * 10%)),
    0% var(--background-y),
    calc((var(--background-x) + (var(--background-y) * 0.2)) * -1) calc(var(--background-y) * -1),
    center center;

  background-repeat: repeat, repeat, repeat, no-repeat;
  background-size:
    var(--imgsize),
    200% 400%,
    195% 100%,
    200% 100%;
  filter: brightness(calc((var(--pointer-from-center, 0) * 0.5) + 0.8)) contrast(1.6) saturate(1.4);
  mix-blend-mode: exclusion;
}

.card-art-gold-tint {
  filter: sepia(0.75) saturate(2.2) hue-rotate(-5deg) brightness(1.12) contrast(1.18) !important;
}

/* Gold Shiny borders and glow */
.card-finish-gold-frame {
  border-color: #d4af37 !important;
  box-shadow:
    0 0 25px rgba(212, 175, 55, 0.65),
    inset 0 0 15px rgba(212, 175, 55, 0.5) !important;
}

.card-finish-holo-text {
  background-image: linear-gradient(
    calc(90deg + var(--tilt-x, 0) * 1.5deg),
    hsla(calc(0 + var(--tilt-x, 0) * 4 + var(--tilt-y, 0) * 4), 100%, 75%, 0.95) 0%,
    hsla(calc(60 + var(--tilt-x, 0) * 4 + var(--tilt-y, 0) * 4), 100%, 70%, 0.95) 20%,
    hsla(calc(120 + var(--tilt-x, 0) * 4 + var(--tilt-y, 0) * 4), 100%, 65%, 0.9) 40%,
    hsla(calc(180 + var(--tilt-x, 0) * 4 + var(--tilt-y, 0) * 4), 100%, 65%, 0.95) 60%,
    hsla(calc(240 + var(--tilt-x, 0) * 4 + var(--tilt-y, 0) * 4), 100%, 70%, 0.95) 80%,
    hsla(calc(300 + var(--tilt-x, 0) * 4 + var(--tilt-y, 0) * 4), 100%, 75%, 0.95) 90%,
    hsla(calc(360 + var(--tilt-x, 0) * 4 + var(--tilt-y, 0) * 4), 100%, 75%, 0.95) 100%
  ) !important;
  background-size: 200% auto;
  background-position: calc(50% - var(--tilt-x, 0) * 2%) center !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  /* Crisp 1px black outline using multi-directional drop-shadows (no inner bleed or letter-thinning) */
  filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.95))
    drop-shadow(1px -1px 0px rgba(0, 0, 0, 0.95)) drop-shadow(-1px 1px 0px rgba(0, 0, 0, 0.95))
    drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.95)) drop-shadow(0px 2.5px 3px rgba(0, 0, 0, 0.95))
    drop-shadow(
      0 0 7px
        rgba(
          0,
          242,
          254,
          calc(
            0.5 + (var(--tilt-x, 0) * var(--tilt-x, 0) + var(--tilt-y, 0) * var(--tilt-y, 0)) *
              0.002
          )
        )
    ) !important;
}

.card-finish-gold-text {
  background-image: linear-gradient(
    calc(90deg + var(--tilt-x, 0) * 1.5deg),
    #ffe885 0%,
    #fcf6ba 25%,
    #d4af37 50%,
    #fbf5b7 75%,
    #b38728 100%
  ) !important;
  background-size: 200% auto;
  background-position: calc(50% - var(--tilt-x, 0) * 2%) center !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;

  /* Crisp 1px black outline using multi-directional drop-shadows (no inner bleed or letter-thinning) */
  filter: drop-shadow(-1px -1px 0px rgba(0, 0, 0, 0.95))
    drop-shadow(1px -1px 0px rgba(0, 0, 0, 0.95)) drop-shadow(-1px 1px 0px rgba(0, 0, 0, 0.95))
    drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.95)) drop-shadow(0px 2.5px 3px rgba(0, 0, 0, 0.95))
    drop-shadow(
      0 0 6px
        rgba(
          251,
          191,
          36,
          calc(
            0.45 + (var(--tilt-x, 0) * var(--tilt-x, 0) + var(--tilt-y, 0) * var(--tilt-y, 0)) *
              0.0015
          )
        )
    ) !important;
}

/* Gold Finish: Secret Rare Gold */
.card-finish-gold {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 25;
  overflow: hidden;

  --shift: 1px;
  --imgsize: cover;
  --glittersize: 25%;
  --glitter: url('/images/textures/glitter.png');
  --foil: url('/images/textures/geometric.png');

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

  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(--glare-x, 50%) var(--glare-y, 50%),
      hsla(150, 00%, 0%, 0.98) 10%,
      hsla(0, 0%, 95%, 0.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((var(--pointer-from-center, 0) * 0.35) + 0.45)) contrast(1.8)
    saturate(1.4);
  opacity: 0.95;
}

.card-finish-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background-image:
    var(--foil), linear-gradient(45deg, hsl(46, 95%, 50%), hsl(52, 100%, 69%)),
    radial-gradient(
      farthest-corner circle at var(--glare-x, 50%) var(--glare-y, 50%),
      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-repeat: no-repeat, repeat, repeat;
  background-blend-mode: hard-light, multiply;

  mix-blend-mode: lighten;
  filter: brightness(1.3) contrast(1.3) saturate(1.3);
  opacity: 0.65;
}

.card-finish-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

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

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

/* Full Art Layout */
.card-full-art-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 1.5rem !important;
  z-index: 0 !important;
  object-fit: cover !important;
}

.card-full-art-glass-panel {
  /* Solid gradient instead of backdrop-filter: filters inside the 3D card
     raster blur text/artwork in Chromium (static cards) and force per-frame
     main-thread repaints during tilt in Firefox. */
  background: linear-gradient(
    180deg,
    rgba(23, 32, 50, 0.92) 0%,
    rgba(15, 23, 42, 0.88) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.2),
    0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
/* Transferable XP range: WebKit and Firefox need separate track/thumb pseudos. */
.xp-boost-slider {
  --xp-fill: 0%;
  appearance: none;
  height: 1.5rem;
  cursor: pointer;
  background: transparent;
}

.xp-boost-slider::-webkit-slider-runnable-track {
  height: 0.5rem;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 9999px;
  background: linear-gradient(90deg, #d946ef 0 50%, rgba(15, 23, 42, 0.95) 50% 100%);
  background-size: 200% 100%;
  background-position: calc(100% - var(--xp-fill)) 0;
}

.xp-boost-slider::-webkit-slider-thumb {
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.4375rem;
  border: 2px solid #fef3c7;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 30%, #fde68a, #a21caf 70%);
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.25),
    0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
}

.xp-boost-slider::-moz-range-track {
  height: 0.5rem;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.95);
}

.xp-boost-slider::-moz-range-progress {
  height: 0.5rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, #d946ef, #a855f7, #fcd34d);
}

.xp-boost-slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 2px solid #fef3c7;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 30%, #fde68a, #a21caf 70%);
  box-shadow:
    0 0 0 3px rgba(168, 85, 247, 0.25),
    0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
}

.xp-boost-slider:focus-visible {
  outline: 2px solid #fde68a;
  outline-offset: 4px;
}

body[data-reduced-motion='true'] .xp-boost-slider,
body[data-reduced-motion='true'] .xp-boost-slider::-webkit-slider-thumb,
body[data-reduced-motion='true'] .xp-boost-slider::-moz-range-thumb {
  transition: none;
}

@keyframes raidCountdownReduced {
  0% {
    opacity: 0.35;
    transform: scale(0.96);
  }

  35%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.raid-countdown-reduced {
  animation: raidCountdownReduced 450ms ease-out both;
}

/* Countdown number fly-in (normal motion): enters from the right and settles
   with a small overshoot. `w-full` on the number keeps `bg-clip-text` from
   clipping the italic overhang (owner bug report 2026-09-24). Reduced motion
   keeps the restrained `raid-countdown-reduced` pop instead. */
@keyframes raid-countdown-fly-in {
  0% {
    opacity: 0;
    transform: translate3d(150px, -10px, 0) scale(0.72) rotate(6deg);
  }

  62% {
    opacity: 1;
    transform: translate3d(-12px, 0, 0) scale(1.06) rotate(-2deg);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

.raid-countdown-fly-in {
  animation: raid-countdown-fly-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─── MASS PULL SPECIAL FINISH SHIMMERS & GLOWS ─── */

@property --tilt-x {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --tilt-y {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --glare-x {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}
@property --glare-y {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}
@property --pointer-from-center {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
@property --pointer-from-left {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.5;
}
@property --pointer-from-top {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.5;
}

@keyframes card-shimmer-loop {
  0% {
    --tilt-x: -2.5;
    --tilt-y: -2.5;
    --glare-x: 30%;
    --glare-y: 30%;
    --pointer-from-center: 0.25;
    --pointer-from-left: 0.38;
    --pointer-from-top: 0.38;
  }
  50% {
    --tilt-x: 2.5;
    --tilt-y: 2.5;
    --glare-x: 70%;
    --glare-y: 70%;
    --pointer-from-center: 0.75;
    --pointer-from-left: 0.62;
    --pointer-from-top: 0.62;
  }
  100% {
    --tilt-x: -2.5;
    --tilt-y: -2.5;
    --glare-x: 30%;
    --glare-y: 30%;
    --pointer-from-center: 0.25;
    --pointer-from-left: 0.38;
    --pointer-from-top: 0.38;
  }
}