/* ============================================================
   KALEIDOSCOPE BUTTON
   Fixed:
   - radial-gradient(50% 50%, circle contain, ...)
     → radial-gradient(circle at 50% 50%, ...)
   - radial-gradient(farthest-corner circle at left bottom, ...)
     → radial-gradient(farthest-corner at left bottom, ...)
   - mix-blend-mode: xor (invalid)
     → mix-blend-mode: difference (similar effect, valid)
   - Duplicate .kaleidoscope-button rule consolidated
   ============================================================ */

.kaleidoscope-button {
  --button-size: 150px;
  --primary-color: hsl(145, 54%, 50%);
  --secondary-color: hsl(243, 100%, 24%);

  position: relative;
  width: var(--button-size);
  height: var(--button-size);
  border: none;
  padding: 0;
  border-radius: 100%;
  cursor: pointer;
  overflow: hidden;
  background: transparent;
  outline: none;
  transition: transform 0.3s ease;
}

.kaleidoscope-button:hover {
  transform: scale(1.05);
}

.kaleidoscope-content {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 100%;
  /* Fixed: removed stray "circle" keyword */
  background-image: radial-gradient(
    farthest-corner at left bottom,
    hsl(145, 54%, 50%),
    hsl(243, 100%, 24%)
  );
}

#bg {
  width: 10vmin;
  height: 10vmin;
  position: absolute;
  border-radius: 100%;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url(images/treats.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset 0vh 0.5vh 0.5vh hsla(180, 90%, 15%, 0.7);
  animation: bg 20s infinite ease-in-out;
  /* Fixed: xor → difference */
  mix-blend-mode: difference;
}

@keyframes bg {
  0% {
    background-size: 100%;
  }
  20% {
    background-size: cover;
    background-position: center top;
    transform: rotate(180deg) translate(50%, 50%);
  }
  40%,
  44% {
    background-size: cover;
    background-position: center bottom;
  }
  60% {
    background-size: 80%;
  }
  100% {
    background-size: 100%;
  }
}

canvas {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100%;
  box-shadow: inset 0.5vh 4.5vh 2.5vh hsla(280, 90%, 8%, 0.4);
  position: absolute;
  transform: scale(1) rotate(0deg);
  animation: turn 38s cubic-bezier(1, -0.07, 0.06, 1.37) infinite;
}

@keyframes turn {
  0%, 100% {
    transform: scale(0.7) translate(0%) rotate(95deg);
    mix-blend-mode: normal;
  }
  25% {
    transform: scale(0.5);
    box-shadow: inset 5.5vh 2.5vh 4.5vh hsla(20, 90%, 18%, 0.5);
    /* Fixed: xor → difference */
    mix-blend-mode: difference;
  }
  40%, 50% {
    filter: invert(1);
  }
  60%, 80% {
    transform: scale(0.7) translate(0%) rotate(95deg);
    mix-blend-mode: hard-light;
  }
}

#r,
#g,
#b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vmin;
  height: 10vmin;
  transform: translate(-50%, -50%);
}

#r {
  animation: red 10s cubic-bezier(0.04, -10.67, 1, -2.97) infinite;
  border-radius: 100%;
  /* Fixed: radial-gradient(50% 50%, circle contain, ...)
            → radial-gradient(circle at 50% 50%, ...) */
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(0, 0, 0, 0.65),
    hsla(302, 69%, 58%, 0.3) 100%
  );
}

#b {
  animation: blue 11s ease-in-out infinite;
  border-radius: 100%;
  background-image: radial-gradient(
    circle at 50% 50%,
    hsla(226, 52%, 29%, 0.85),
    hsla(202, 75%, 72%, 0.3) 100%
  );
}

#g {
  border-radius: 100%;
  animation: green 12s linear infinite;
  background-image: radial-gradient(
    circle at 50% 50%,
    hsla(95, 91%, 45%, 0.87),
    hsla(63, 90%, 46%, 0.3) 100%
  );
}

@keyframes red {
  0%   { transform: rotate(0deg)    scale(1, 1); }
  50%  { transform: rotate(-180deg) scale(2, 2); }
  100% { transform: rotate(-360deg) scale(1, 1); }
}

@keyframes green {
  0%   { transform: rotate(0deg)   scale(1, 3); opacity: 1; }
  66%  { transform: rotate(180deg) scale(3, 1); opacity: 0.33; }
  100% { transform: rotate(360deg) scale(1, 3); opacity: 1; }
}

@keyframes blue {
  0%   { transform: rotate(0deg)   scale(1, 1); }
  33%  { transform: rotate(180deg) scale(3, 3); }
  100% { transform: rotate(360deg) scale(1, 1); }
}