.buzzer-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
}

.buzzer {
  width: var(--buzzer-size);
  height: var(--buzzer-size);
  border-radius: var(--radius-full);
  background: radial-gradient(
    circle at 35% 35%,
    var(--color-primary-light),
    var(--color-primary) 60%,
    var(--color-primary-dark)
  );
  border: none;
  box-shadow:
    0 8px 0 var(--color-primary-dark),
    0 12px 20px rgba(0, 0, 0, 0.2),
    inset 0 -4px 8px rgba(0, 0, 0, 0.15),
    inset 0 4px 8px rgba(255, 255, 255, 0.15);
  color: white;
  font-family: var(--font-family);
  font-size: var(--font-size-2xl);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  position: relative;
  outline: none;
}

.buzzer::after {
  content: '';
  position: absolute;
  top: 12%;
  left: 20%;
  width: 30%;
  height: 20%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.3), transparent);
  border-radius: var(--radius-full);
  pointer-events: none;
}

.buzzer:active:not(:disabled) {
  transform: translateY(4px) scale(0.97);
  box-shadow:
    0 4px 0 var(--color-primary-dark),
    0 6px 10px rgba(0, 0, 0, 0.15),
    inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

.buzzer:disabled {
  background: radial-gradient(
    circle at 35% 35%,
    #9e9e9e,
    var(--color-disabled) 60%,
    var(--color-disabled-dark)
  );
  box-shadow:
    0 8px 0 var(--color-disabled-dark),
    0 12px 20px rgba(0, 0, 0, 0.15),
    inset 0 -4px 8px rgba(0, 0, 0, 0.15);
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.6);
}

.buzzer.winner {
  animation: buzzer-flash 0.3s ease-in-out 3;
}

.buzzer.open-pulse {
  animation: buzzer-ready 1.5s ease-in-out infinite;
}

@keyframes buzzer-flash {
  0%,
  100% {
    box-shadow:
      0 8px 0 var(--color-primary-dark),
      0 12px 20px rgba(0, 0, 0, 0.2),
      0 0 0 0 rgba(200, 85, 61, 0);
  }
  50% {
    box-shadow:
      0 8px 0 var(--color-primary-dark),
      0 12px 20px rgba(0, 0, 0, 0.2),
      0 0 0 20px rgba(200, 85, 61, 0.3);
  }
}

@keyframes buzzer-ready {
  0%,
  100% {
    box-shadow:
      0 8px 0 var(--color-primary-dark),
      0 12px 20px rgba(0, 0, 0, 0.2),
      0 0 0 0 rgba(42, 157, 143, 0);
  }
  50% {
    box-shadow:
      0 8px 0 var(--color-primary-dark),
      0 12px 20px rgba(0, 0, 0, 0.2),
      0 0 40px 10px rgba(42, 157, 143, 0.2);
  }
}

.buzzer-label {
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}