/* Base icon swap */
#sp-trigger-btn {
  background: transparent !important;
  box-shadow: none;
  background-image: url('/assets/images/Sillypoint_icon.gif') !important;
  background-size: cover !important;
  background-position: center !important;
  overflow: visible !important;
  position: fixed !important;
    bottom: 15px;
    right: 15px;
    width: 88px;
    height: 88px;
}
#sp-trigger-btn svg { display: none !important; }

/* Pulsing glow ring behind the button */
#sp-trigger-btn::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(158,89,253,0.55), rgba(158,89,253,0) 70%);
  animation: sp-glow-pulse 2.2s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
  display: none;
}
@keyframes sp-glow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50%       { transform: scale(1.25); opacity: 0.25; }
}

/* Hover label pill */
#sp-trigger-btn::after {
  content: 'Silly Point';
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: #1E133A;
  color: #fff;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#sp-trigger-btn:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* LIVE badge hidden */
#sp-trigger-live {
  display: none !important;
}

/* Comet/sweep ring — sits behind the button, same fixed corner anchor */
#sp-comet-ring {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  background: conic-gradient(from 0deg, transparent 0%, transparent 85%, #9E59FD 95%, #fff 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: sp-comet-spin 3s linear infinite;
}
@keyframes sp-comet-spin {
  to { transform: rotate(360deg); }
}

/* Entrance bounce */
#sp-trigger-btn {
  animation: sp-btn-in 0.6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sp-btn-in {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}