/* Standalone jelly button. Motion is CSS; JS only handles props and visibility. */
.jelly-button,
.jelly-button:hover {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  max-width: calc(100% / 1.18);
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  box-shadow: none;
  color: var(--jelly-ink, #4a2141);
  font: inherit;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  touch-action: manipulation;
  transform: none;
  transition: none;
  -webkit-tap-highlight-color: transparent;
}
.jelly-button__surface {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 24px;
  border: 3px solid var(--jelly-ink, #4a2141);
  border-radius: 20px 23px 18px 24px;
  background: var(--jelly-color, #e8def8);
  box-shadow: 0 4px 0 var(--jelly-ink, #4a2141);
  transform: scale(1);
  transform-origin: 50% 50%;
  pointer-events: none;
}
.jelly-button__label { min-width: 0; overflow-wrap: anywhere; }
.jelly-button:focus-visible { outline: 3px solid var(--jelly-ink, #4a2141); outline-offset: 7px; }
@media (hover: hover) {
  .jelly-button:hover .jelly-button__surface { transform: scale(1.04, 1.04); }
}
.jelly-button:focus-visible .jelly-button__surface,
.jelly-button.is-jelly-settled .jelly-button__surface { transform: scale(1.04, 1.04); }
.jelly-button.is-jelly-bouncing[data-jelly-visible="true"][data-jelly-enabled="true"] .jelly-button__surface {
  animation: jelly-button-bounce var(--jelly-duration, 800ms) ease-in-out 1 both;
}
@keyframes jelly-button-bounce {
  0%   { transform: scale(1, 1); }
  20%  { transform: scale(1.18, .82); }
  40%  { transform: scale(.88, 1.12); }
  60%  { transform: scale(1.07, .94); }
  80%  { transform: scale(.97, 1.03); }
  100% { transform: scale(1.04, 1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .jelly-button .jelly-button__surface {
    animation: none !important;
    transform: scale(1.04, 1.04) !important;
    transition: none !important;
  }
}