* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(circle at 50% 30%, #eef2ff 0%, #e0e7ff 60%, #c7d2fe 100%);
}

#counter-btn {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 3.5rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 50%, #4ade80 100%);
  box-shadow:
    0 10px 30px rgba(34, 197, 94, 0.45),
    inset 0 -6px 12px rgba(0, 0, 0, 0.15),
    inset 0 4px 8px rgba(255, 255, 255, 0.25);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#counter-btn:hover {
  transform: scale(1.05);
  box-shadow:
    0 14px 36px rgba(34, 197, 94, 0.55),
    inset 0 -6px 12px rgba(0, 0, 0, 0.15),
    inset 0 4px 8px rgba(255, 255, 255, 0.3);
}

#counter-btn:active {
  transform: scale(0.93);
  box-shadow:
    0 6px 16px rgba(34, 197, 94, 0.45),
    inset 0 -4px 8px rgba(0, 0, 0, 0.2);
}

#counter-btn:focus-visible {
  outline: 3px solid #15803d;
  outline-offset: 4px;
}

@keyframes bump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

#counter-btn.bump {
  animation: bump 120ms ease;
}