:root {
  --pow-1: var(--accent, #67e8f9);
  --pow-2: var(--gold, #f5c451);
  --pow-3: var(--green, #7ee0a8);
  --pow-4: var(--text, #e8eef6);
  --burst-1: var(--gold, #f5c451);
  --burst-2: var(--accent, #67e8f9);
  --burst-3: var(--green, #7ee0a8);
  --sk-cape: var(--gold, #f5c451);
  --sk-tunic: #c3363f;
  --sk-tights: #24304d;
  --sk-boot: #161f33;
  --sk-limb: #c3363f;
  --sk-skin: #f0c39c;
  --sk-hair: #17202f;
  --sk-mask: #12161f;
  --sk-eye: #f4f8ff;
  --sk-emblem: var(--accent, #67e8f9);
}

.sidekick {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(103, 232, 249, 0.25));
  transition: filter 0.3s ease;
}

.sidekick::after {
  content: "";
  position: absolute;
  inset: -12px;
  cursor: pointer;
}

.sidekick svg,
.sidekick svg * {
  cursor: pointer;
}

.sidekick-corner {
  position: fixed;
  top: 6px;
  left: 12px;
  z-index: 101;
}

.sidekick-atmo {
  position: absolute;
  right: 17%;
  bottom: max(24px, calc(175px - 4.83vw));
  z-index: 1;
  scale: -1 1;
}

@media (max-width: 680px) {
  .sidekick-corner {
    position: absolute;
    top: 78px;
    z-index: 1;
  }

  .sidekick-corner::after {
    inset: -8px;
  }
}

.sidekick:hover,
.sidekick:focus-visible {
  filter: drop-shadow(0 0 16px var(--accent-glow, rgba(103, 232, 249, 0.55)));
}

.sidekick svg {
  display: block;
  height: 40px;
  width: auto;
  overflow: visible;
  animation: sidekick-float 3.6s ease-in-out infinite alternate;
}

.sk-cape { fill: var(--sk-cape); }
.sk-tunic { fill: var(--sk-tunic); }
.sk-tights { fill: var(--sk-tights); }
.sk-boot { fill: var(--sk-boot); }
.sk-limb { fill: var(--sk-limb); }
.sk-belt { fill: var(--sk-cape); }
.sk-skin { fill: var(--sk-skin); }
.sk-hair { fill: var(--sk-hair); }
.sk-mask { fill: var(--sk-mask); }
.sk-emblem { fill: var(--sk-emblem); }

.sk-eye {
  fill: var(--sk-eye);
  stroke: none;
}

@keyframes sidekick-float {
  from { translate: 0 -4px; }
  to { translate: 0 4px; }
}

.pow {
  position: fixed;
  left: var(--pow-x);
  top: var(--pow-y);
  z-index: 999999;
  pointer-events: none;
  translate: var(--pow-tx) -50%;
  rotate: var(--pow-rot);
  scale: 1;
  font-family: Impact, var(--display, sans-serif);
  font-size: var(--pow-size);
  color: var(--pow-color);
  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000;
  white-space: nowrap;
  animation: pow-pop 900ms ease-out forwards;
  --animation-reduced: pow-fade 700ms ease-out forwards;
}

.pow svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--pow-size) * 5);
  height: calc(var(--pow-size) * 5);
  translate: -50% -50%;
  opacity: 0.5;
  fill: var(--pow-fill);
  stroke: #000;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.pow span {
  position: relative;
}

@keyframes pow-pop {
  from { opacity: 1; scale: 1; }
  to { opacity: 0; scale: 2; }
}

@keyframes pow-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}