.chibi-button {
  --action-color: #a9f1c5;
  --action-glow: #8be6ad66;
  --attack-tilt: -9deg;
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 100px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.character-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  pointer-events: none;
  contain: strict;
}
html[data-motion="off"] .character-stage,
html.page-hidden .character-stage {
  display: none;
}
.chibi-button .chibi {
  display: block;
  width: 100%;
  transform-origin: 50% 85%;
  pointer-events: none;
  animation: chibi-idle var(--float-duration, 4.2s) ease-in-out
    var(--float-delay, 0s) infinite alternate;
  animation-play-state: var(--motion-state, paused);
}
.chibi-button:nth-of-type(even) {
  --float-delay: -2s;
}
.chibi-button:nth-of-type(3n) {
  --float-duration: 4.8s;
  --float-delay: -1.2s;
}
.chibi-button.hades-one {
  display: none;
}
.chibi-button:hover,
.chibi-button:focus-visible {
  background: color-mix(in srgb, var(--action-color) 8%, transparent);
}
.chibi-hint {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.5px;
}
.chibi-fx {
  position: absolute;
  right: -4px;
  top: -26%;
  width: 180%;
  height: 150%;
  z-index: 3;
  overflow: hidden;
  fill: none;
  color: var(--action-color);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 5px var(--action-glow));
}
.chibi-button[data-playing] .chibi-fx {
  opacity: 1;
}
.chibi-button[data-playing] .chibi {
  animation:
    chibi-idle var(--float-duration, 4.2s) ease-in-out var(--float-delay, 0s)
      infinite alternate,
    chibi-strike 1s ease-in-out both;
  animation-play-state:
    var(--motion-state, paused), var(--motion-state, paused);
}
.fx-slash,
.fx-bolt {
  fill: currentColor;
}
.fx-ring,
.fx-bark,
.fx-shield,
.fx-arrow {
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fx-ring,
.fx-shield {
  transform-origin: center;
  transform-box: fill-box;
}
.fx-sparks {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1;
  transform-origin: center;
}
.chibi-button[data-playing] .fx-slash {
  animation: blade-arc 1s ease-out both;
  transform-origin: center;
}
.chibi-button[data-playing] .fx-ring {
  animation: action-ring 1s ease-out both;
}
.chibi-button[data-playing] .fx-sparks {
  animation: action-sparks 1s ease-out both;
}
.chibi-button[data-character="zagreus"] {
  --action-color: #ffcc85;
  --action-glow: #f2783977;
  --attack-tilt: -13deg;
}
.chibi-button[data-character="melinoe"] {
  --action-color: #b1ffcf;
  --attack-tilt: 11deg;
}
.chibi-button[data-character="hecate"] {
  --action-color: #a2f4c5;
  --attack-tilt: 3deg;
}
.chibi-button[data-character="hecate"][data-playing] .fx-flames {
  fill: currentColor;
  transform-origin: 50% 80%;
  animation: witchfire-cast 1s ease-out both;
}
.chibi-button[data-character="cerberus"] {
  --action-color: #f4af8c;
  --action-glow: #e27c6355;
}
.chibi-button[data-character="cerberus"][data-playing] .chibi {
  animation-name: chibi-idle, cerberus-bounce;
}
.chibi-button[data-playing] .fx-bark {
  animation: bark-waves 1s ease-out both;
  transform-origin: 50% 60%;
}
.chibi-button[data-character="zeus"] {
  --action-color: #ffe697;
  --action-glow: #e3b94599;
  --attack-tilt: 4deg;
}
.chibi-button[data-playing] .fx-bolt {
  animation: lightning-strike 1s ease-out both;
  transform-origin: 50% 0;
}
.chibi-button[data-character="athena"] {
  --action-color: #f7d98b;
  --action-glow: #dfba5977;
  --attack-tilt: 2deg;
}
.chibi-button[data-playing] .fx-shield {
  fill: color-mix(in srgb, currentColor 12%, transparent);
  animation: shield-barrier 1s ease-out both;
}
.chibi-button[data-character="artemis"] {
  --action-color: #b6e6a2;
  --action-glow: #a5e39177;
  --attack-tilt: 6deg;
}
.chibi-button[data-playing] .fx-arrow {
  animation: arrow-shot 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.fx-arrow-trail {
  stroke-dasharray: 8 5;
  opacity: 0.5;
}
.chibi-button[data-character="nemesis"] {
  --action-color: #b8c9f2;
  --action-glow: #ab9bdc77;
  --attack-tilt: 14deg;
}
@keyframes chibi-idle {
  from {
    translate: 0 0;
    rotate: -1deg;
  }
  to {
    translate: 0 -6px;
    rotate: 1deg;
  }
}
@keyframes chibi-strike {
  0%,
  100% {
    transform: none;
  }
  20% {
    transform: translateY(-3px) rotate(var(--attack-tilt));
  }
  45% {
    transform: translateY(-5px) rotate(calc(var(--attack-tilt) * -0.65));
  }
  70% {
    transform: translateY(-1px) rotate(2deg);
  }
}
@keyframes blade-arc {
  0%,
  15% {
    opacity: 0;
    transform: rotate(-45deg) scale(0.4);
  }
  35% {
    opacity: 0.95;
  }
  70%,
  100% {
    opacity: 0;
    transform: rotate(45deg) scale(1.1);
  }
}
@keyframes action-ring {
  0%,
  20% {
    opacity: 0;
    transform: scale(0.35);
  }
  40% {
    opacity: 0.7;
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}
@keyframes action-sparks {
  0%,
  25% {
    opacity: 0;
    transform: scale(0.5);
  }
  45% {
    opacity: 0.9;
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes witchfire-cast {
  0%,
  10% {
    opacity: 0;
    transform: scale(0.7, 0.4);
  }
  35% {
    opacity: 0.85;
    transform: scale(1, 1.15);
  }
  70%,
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(0.85, 1.2);
  }
}
@keyframes cerberus-bounce {
  0%,
  45%,
  100% {
    transform: none;
  }
  20% {
    transform: translateY(-7px) rotate(-3deg);
  }
  65% {
    transform: translateY(-4px) rotate(3deg);
  }
}
@keyframes bark-waves {
  0%,
  15% {
    opacity: 0;
    transform: scale(0.7);
  }
  35% {
    opacity: 0.85;
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}
@keyframes lightning-strike {
  0%,
  15% {
    opacity: 0;
    transform: scaleY(0.1);
  }
  28% {
    opacity: 1;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.8;
  }
  90%,
  100% {
    opacity: 0;
    transform: scaleY(1.05);
  }
}
@keyframes shield-barrier {
  0%,
  10% {
    opacity: 0;
    transform: scale(0.55);
  }
  40% {
    opacity: 0.9;
    transform: scale(1);
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(1.1);
  }
}
@keyframes arrow-shot {
  0%,
  18% {
    opacity: 0;
    transform: translateX(32px);
  }
  26% {
    opacity: 1;
    transform: translateX(12px);
  }
  70%,
  100% {
    opacity: 0;
    transform: translateX(-75px);
  }
}
html[data-motion="off"] .chibi-button[data-playing] .chibi,
html[data-motion="off"] .chibi-fx * {
  animation: none;
}
html[data-motion="off"] .chibi-fx {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .character-stage {
    display: none;
  }
  .chibi-button .chibi,
  .chibi-fx * {
    animation: none !important;
  }
  .chibi-fx {
    display: none;
  }
}
@media print {
  .character-stage {
    display: none;
  }
  .chibi-button,
  .chibi-hint {
    display: none !important;
  }
}