.card-stack {
  display: flex;
  flex-wrap: wrap;
  /* gap: 0.125in; */
  justify-content: center;
  margin-block-start: 0.375in;
  margin-block-end: 0.75in;
  margin-inline: -1em;
  padding-inline: 0.25in;
}

.card-stack > div {
  filter:
    drop-shadow(0 0.25em 0.25em color-mix(in srgb, var(--purple) 25%, transparent))
    drop-shadow(0 0 0.5em color-mix(in srgb, var(--purple) 25%, transparent));
  position: relative;
  transition:
    filter 200ms cubic-bezier(0,.5,.5,1),
    transform 200ms cubic-bezier(0,.5,.5,1);
}

.card-stack > :nth-of-type(7n + 1) { transform: perspective(12in) rotate(calc(-3deg / 3)); }
.card-stack > :nth-of-type(7n + 2) { transform: perspective(12in) rotate(calc( 1deg / 3)); }
.card-stack > :nth-of-type(7n + 3) { transform: perspective(12in) rotate(calc(-2deg / 3)); }
.card-stack > :nth-of-type(7n + 4) { transform: perspective(12in) rotate(calc( 2deg / 3)); }
.card-stack > :nth-of-type(7n + 5) { transform: perspective(12in) rotate(calc(-1deg / 3)); }
.card-stack > :nth-of-type(7n + 6) { transform: perspective(12in) rotate(calc( 3deg / 3)); }
.card-stack > :nth-of-type(7n + 7) { transform: perspective(12in) rotate(calc( 0deg / 3)); }

.card-stack > div:is(:hover, :active, :focus) {
  filter:
    drop-shadow(0 0.5em 0.5em color-mix(in srgb, var(--purple) 12.5%, transparent))
    drop-shadow(0 0 1em color-mix(in srgb, var(--purple) 12.5%, transparent));
  transform:
    perspective(12in)
    translateZ(1in)
    translateY(-0.4375in)
    rotateX(-6deg)
    rotateY(-3deg);
  z-index: 1;
}

@media (width < 5.5in) and (prefers-reduced-motion: no-preference) {
  .card-stack > div:is(:hover, :active, :focus) + div {
    transform: perspective(12in) translateY(1in) rotateX(3deg);
    transition-duration: 200ms;
  }

  .card-stack > div:is(:hover, :active, :focus) + div + div {
    transform: perspective(12in) translateY(1in);
    transition-duration: 200ms;
  }
}

@media (5.5in <= width < 8in) and (prefers-reduced-motion: no-preference) {
  .card-stack > div:not(:nth-of-type(2n)):has(+ div:is(:hover, :active, :focus)) {
    transform: perspective(12in) rotateY(3deg) rotate(-6deg);
  }

  .card-stack > div:not(:nth-of-type(2n)):is(:hover, :active, :focus) + div {
    transform: perspective(12in) rotateY(-3deg) rotate(6deg);
  }

  .card-stack > div:is(:hover, :active, :focus) + div + div {
    transform: perspective(12in) translateY(1in) rotateX(3deg);
    transition-duration: 200ms;
  }

  .card-stack > div:is(:hover, :active, :focus) + div + div + div + div {
    transform: perspective(12in) translateY(1in);
    transition-duration: 200ms;
  }
}

@media (8in <= width < 10.5in) and (prefers-reduced-motion: no-preference) {
  .card-stack > div:not(:nth-of-type(3n)):has(+ div:is(:hover, :active, :focus)) {
    transform: perspective(12in) rotateY(3deg) rotate(-6deg);
  }

  .card-stack > div:not(:nth-of-type(3n)):is(:hover, :active, :focus) + div {
    transform: perspective(12in) rotateY(-3deg) rotate(6deg);
  }

  .card-stack > div:is(:hover, :active, :focus) + div + div + div {
    transform: perspective(12in) translateY(1in) rotateX(3deg);
    transition-duration: 200ms;
  }

  .card-stack > div:is(:hover, :active, :focus) + div + div + div + div + div + div {
    transform: perspective(12in) translateY(1in);
    transition-duration: 200ms;
  }
}

@media (10.5in <= width < 13in) and (prefers-reduced-motion: no-preference) {
  .card-stack > div:not(:nth-of-type(4n)):has(+ div:is(:hover, :active, :focus)) {
    transform: perspective(12in) rotateY(3deg) rotate(-6deg);
  }

  .card-stack > div:not(:nth-of-type(4n)):is(:hover, :active, :focus) + div {
    transform: perspective(12in) rotateY(-3deg) rotate(6deg);
  }

  .card-stack > div:is(:hover, :active, :focus) + div + div + div + div {
    transform: perspective(12in) translateY(1in) rotateX(3deg);
    transition-duration: 200ms;
  }

  .card-stack > div:is(:hover, :active, :focus) + div + div + div + div + div + div + div + div {
    transform: perspective(12in) translateY(1in);
    transition-duration: 200ms;
  }
}

@media (13in <= width < 15.5in) and (prefers-reduced-motion: no-preference) {
  .card-stack > div:not(:nth-of-type(5n)):has(+ div:is(:hover, :active, :focus)) {
    transform: perspective(12in) rotateY(3deg) rotate(-6deg);
  }

  .card-stack > div:not(:nth-of-type(5n)):is(:hover, :active, :focus) + div {
    transform: perspective(12in) rotateY(-3deg) rotate(6deg);
  }

  .card-stack > div:is(:hover, :active, :focus) + div + div + div + div + div {
    transform: perspective(12in) translateY(1in) rotateX(3deg);
    transition-duration: 200ms;
  }

  .card-stack > div:is(:hover, :active, :focus) + div + div + div + div + div + div + div + div + div + div {
    transform: perspective(12in) translateY(1in);
    transition-duration: 200ms;
  }
}

@media (15.5in <= width < 18in) and (prefers-reduced-motion: no-preference) {
  .card-stack > div:not(:nth-of-type(6n)):has(+ div:is(:hover, :active, :focus)) {
    transform: perspective(12in) rotateY(3deg) rotate(-6deg);
  }

  .card-stack > div:not(:nth-of-type(6n)):is(:hover, :active, :focus) + div {
    transform: perspective(12in) rotateY(-3deg) rotate(6deg);
  }

  .card-stack > div:is(:hover, :active, :focus) + div + div + div + div + div + div {
    transform: perspective(12in) translateY(1in) rotateX(3deg);
    transition-duration: 200ms;
  }

  .card-stack > div:is(:hover, :active, :focus) + div + div + div + div + div + div + div + div + div + div + div + div {
    transform: perspective(12in) translateY(1in);
    transition-duration: 200ms;
  }
}

@media (18in <= width) and (prefers-reduced-motion: no-preference) {
  .card-stack > div:has(+ div:is(:hover, :active, :focus)) {
    transform: perspective(12in) rotateY(3deg) rotate(-6deg);
  }

  .card-stack > div:is(:hover, :active, :focus) + div {
    transform: perspective(12in) rotateY(-3deg) rotate(6deg);
  }
}

@property --gray {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --border {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --fade {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --radius1 {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 2.25in;
}

@property --radius2 {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

.card {
  --black: #10181e;
  --gray: #d9d9d7;
  --white: #f8f7f3;
  --border: #fede00;
  --color: var(--white);
  --fade: transparent;
  --radius1: 2.5in;
  --radius2: 3in;
  --background: color-mix(in srgb, var(--color) 79%, var(--white));
  box-sizing: border-box;
  color: var(--black);
  flex-shrink: 0;
  font-feature-settings: "ss01", "cv30", "cv67";
  height: 3.5in;
  margin-block: -0.75in;
  margin-inline: -0.0625in;
  mask-image: radial-gradient(
    circle farthest-side at top center,
    white var(--radius1),
    var(--fade) var(--radius2)
  );
  position: relative;
  transition:
    --gray 200ms cubic-bezier(0,2,.5,1),
    --border 200ms cubic-bezier(0,2,.5,1),
    --fade 200ms cubic-bezier(0,.5,.5,1),
    --radius1 200ms cubic-bezier(0,.5,.5,1),
    --radius2 200ms cubic-bezier(0,.5,.5,1);
  width: 2.5in;
}

.card, .card:is(:hover, :active, :focus) {
  background-color: var(--background);
  background-repeat: no-repeat;
  background-position: top 0.0625in right 0.0625in;
  background-size: 0.25in;
  border: 0.0625in solid var(--border);
  border-radius: 0.125in;
  outline: none;
}

.card:is(:hover, :active, :focus) {
  --gray: var(--white);
  --border: #ffe900;
  /* --fade: white; */
  --radius1: 3.7165171868in;
  --radius2: 3.7165171868in;
}

.card-stack > div:has(> .card:focus) {
  z-index: 2;
}

.card-stack > div:has(> .card:focus)::after {
  border-radius: 0.125in;
  content: "";
  display: block;
  inset-block: -0.75in;
  inset-block-end: -0.6875in;
  inset-inline: -0.0625in;
  outline: 0.0625in solid var(--yellow);
  outline-offset: 0.0625in;
  position: absolute;
}

.card.grass {
  --color: #0db14b;
  background-image: url("/assets/energy-grass.png");
}

.card.fire {
  --color: #ed1a3b;
  background-image: url("/assets/energy-fire.png");
}

.card.water {
  --color: #00b1eb;
  background-image: url("/assets/energy-water.png");
}

.card.lightning {
  --color: #ffd400;
  background-image: url("/assets/energy-lightning.png");
}

.card.fighting {
  --color: #c3692f;
  background-image: url("/assets/energy-fighting.png");
}

.card.psychic {
  --color: #9d85be;
  background-image: url("/assets/energy-psychic.png");
}

.card.colorless {
  --color: #d6d5d8;
  background-image: url("/assets/energy-colorless.png");
}

.card.darkness {
  --color: #2f7a87;
  --background: color-mix(in srgb, var(--color) 38%, var(--black));
  background-image: url("/assets/energy-darkness.png");
  color: var(--white);
}

.card.metal {
  --color: #b6baa7;
  background-image: url("/assets/energy-metal.png");
}

.card.dragon {
  --color: #9b952d;
  background-image: url("/assets/energy-dragon.png");
}

.card.fairy {
  --color: #e54c8b;
  background-image: url("/assets/energy-fairy.png");
}

.card .name {
  block-size: 0.25in;
  font-weight: bold;
  inset-block-start: 0.0625in;
  inset-inline-start: 0.0625in;
  inset-inline-end: 0.375in;
  line-height: 0.25in;
  position: absolute;
}

.card .name::before {
  background: var(--gray);
  block-size: 0.125in;
  border-radius: 0.03125in;
  border-end-end-radius: 0.125in;
  border-start-start-radius: 0.125in;
  color: #7d878f;
  display: inline-block;
  font-size: 0.5em;
  font-style: italic;
  inset-block-start: -0.09375in;
  inset-inline-start: -0.09375in;
  text-transform: uppercase;
  letter-spacing: calc(2em / 72);
  line-height: 0.125in;
  padding-inline: 0.03125in;
  padding-inline-end: 0.0625in;
  position: absolute;
}

.card.fusion,
.card.fusion2 {
  --border: var(--gray);
}

.card.fusion .name::before {
  box-shadow: 0.03125in 0.015625in 0 var(--color);
  content: "Fusion";
}

.card.fusion2 .name::before {
  box-shadow:
    0.03125in 0.015625in 0 var(--color),
    0.0625in 0.015625in 0 #d9d9d7;
  content: "Fusion Lv.2";
}

.card.little .name::before {
  content: "Little";
}

.card.mirror {
  --border: var(--black);
}

.card.mirror:is(:hover, :active, :focus) {
  --border: black;
}

.card.mirror .name::before {
  background: var(--border);
  color: #a7a9ab;
  content: "Mirror";
}

.card img {
  background-color: var(--color);
  block-size: 1.5in;
  border-radius: 2px;
  inline-size: 2.25in;
  inset-block-start: 0.375in;
  inset-inline: 0.0625in;
  overflow: clip;
  position: absolute;
}