h1 {
  margin: 2em auto;
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 16px;
}

.animal-index-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* removes blue highlight */
  outline: none;
  font-size: 0.9rem;
}

.animal-index-card a {
  text-decoration: none;
  color: #300a30;
  -webkit-tap-highlight-color: transparent; /* removes blue highlight */
}

.animal-index-card a:focus,
.animal-index-card a:active,
.animal-index-card a:focus-visible {
  outline: none;
  text-decoration: underline;
}

.animal-index-card,
.animal-index-card * {
  user-select: none;
}

/* ---- Pokémon-style card ---- */

.color-card {
  width: 180px;
  aspect-ratio: 63 / 88;
  margin: auto;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 4px 8px rgb(0 0 0 / 20%),
    0 6px 20px rgb(0 0 0 / 19%);
  background: linear-gradient(
    180deg,
    rgb(220 255 190) 0%,
    rgb(170 250 120) 25%,
    rgb(130 235 89) 60%,
    rgb(95 185 60) 100%
  );
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.color-card:focus,
.color-card:hover {
  transform: translateY(-6px) rotate3d(1, 1, 0, 5deg);
  box-shadow:
    0 10px 20px rgb(0 0 0 / 25%),
    0 0 15px rgb(255 215 0 / 40%);
}

.color-card::before {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 10px;
  z-index: 0;
  background-color: var(--card-color, #f56bfa);
  background-image:
    radial-gradient(circle at 30% 30%, rgb(255 255 255 / 80%), var(--card-color, #f56bfa) 70%),
    url("./assets/texture.webp"), url("./assets/texture.webp");
  background-size:
    100% 100%,
    cover;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  background-blend-mode: multiply, overlay, multiply;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  opacity: 0.95;
  box-shadow: inset 0 0 12px rgb(255 255 255 / 40%);
}

.color-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 25px;
  pointer-events: none;
  mix-blend-mode: overlay;
  background: linear-gradient(
    120deg,
    rgb(255 255 255 / 0%) 35%,
    rgb(255 255 255 / 25%) 50%,
    rgb(255 255 255 / 0%) 65%
  );
  background-size: 300% 300%;
  background-repeat: no-repeat;
  animation: shimmer-diag 6s ease-in-out infinite;
  z-index: 2;
}

@keyframes shimmer-diag {

  0% {
    background-position: 100% 100%;
  }

  45% {
    background-position: 0 0;
  }

  100% {
    background-position: -80% -80%;
  }
}

/* text label */

.label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  font-weight: 600;
  z-index: 3;
  text-shadow: 0 1px 2px rgb(255 255 255 / 50%);
  background: rgb(255 255 255 / 10%);
}

/* Overlay behind the popup */

#popup-overlay {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: rgb(0 0 0 / 60%);
  z-index: 9999;
  display: none; /* hidden by default */
}

/* iframe fills screen */

#popup-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  border: none;
}

/* transparent click-catcher layer */

#popup-close-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  cursor: pointer;
  z-index: 10000; /* above iframe */
}

/* show overlay when active */

#popup-overlay.show {
  display: block;
  animation: fade-in 0.45s ease-in-out forwards;
}

@keyframes fade-in {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}