* {
  -webkit-tap-highlight-color: transparent;
}

body {
  background: radial-gradient(ellipse at 50% 40%, #2a2a2a 0%, #1a1a1a 45%, #111111 100%);
}

.vk-btn {
  display: inline-block;
  padding: 10px 18px;
  background: #4680c2;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid #3b6ea8;
  transition: background 0.15s, transform 0.1s;
}

.vk-btn:hover {
  background: #3a6dab;
}

.vk-btn:active {
  transform: translateY(1px);
  background: #346394;
}

@media (min-width: 640px) {
  .vk-btn {
    padding: 11px 22px;
    font-size: 15px;
  }
}

.button-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.vk-btn,
.button-wrap {
  position: relative;
  z-index: 10;
}

.circle-btn {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease;
}

.circle-btn.is-activating {
  animation: btn-activate 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.circle-btn.is-active {
  transform: scale(1) rotate(-360deg);
}

@keyframes btn-activate {
  0% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  15% {
    transform: scale(0.82) rotate(-8deg);
    filter: brightness(1.3);
  }
  35% {
    transform: scale(1.18) rotate(12deg);
    filter: brightness(1.5) saturate(1.4);
  }
  55% {
    transform: scale(0.95) rotate(-360deg);
    filter: brightness(1.2);
  }
  75% {
    transform: scale(1.08) rotate(-380deg);
    filter: brightness(1.3);
  }
  100% {
    transform: scale(1) rotate(-360deg);
    filter: brightness(1.1) saturate(1.2);
  }
}

.circle-img {
  transition: filter 0.4s ease;
}

.circle-btn.is-activating .circle-img,
.circle-btn.is-active .circle-img {
  filter: saturate(1.15) contrast(1.03);
}

body.is-shaking {
  animation: screen-shake 0.6s ease-out;
}

@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-4px, 2px); }
  20% { transform: translate(4px, -3px); }
  30% { transform: translate(-3px, -2px); }
  40% { transform: translate(3px, 3px); }
  50% { transform: translate(-2px, 1px); }
  60% { transform: translate(2px, -1px); }
  70% { transform: translate(-1px, 2px); }
  80% { transform: translate(1px, -2px); }
}