/* ===== BOUTON TAP AMÉLIORÉ ===== */
.tap-button {
  width: clamp(220px, 50vw, 320px) !important;
  height: clamp(220px, 50vw, 320px) !important;
  min-width: 180px;
  min-height: 180px;
  border: 4px solid rgba(100, 181, 246, 0.4) !important;
  background: radial-gradient(circle at 30% 30%, rgba(100, 181, 246, 0.2), rgba(255, 255, 255, 0.05)) !important;
  box-shadow: 
    0 0 60px rgba(100, 181, 246, 0.15),
    0 0 120px rgba(100, 181, 246, 0.05),
    inset 0 0 80px rgba(100, 181, 246, 0.05) !important;
  transition: transform 0.05s ease-out, box-shadow 0.1s ease !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
  will-change: transform;
}

.tap-button:active:not(:disabled) {
  transform: scale(0.88) !important;
  box-shadow: 
    0 0 80px rgba(100, 181, 246, 0.3),
    0 0 160px rgba(100, 181, 246, 0.1),
    inset 0 0 100px rgba(100, 181, 246, 0.1) !important;
}

.tap-button.tap-active {
  transform: scale(0.88) !important;
  box-shadow: 
    0 0 80px rgba(100, 181, 246, 0.3),
    0 0 160px rgba(100, 181, 246, 0.1),
    inset 0 0 100px rgba(100, 181, 246, 0.1) !important;
}

.tap-button:not(:disabled):hover {
  transform: scale(1.02);
  box-shadow: 0 0 80px rgba(100, 181, 246, 0.2) !important;
}

.tap-img-bg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 15%;
  opacity: 0.9 !important;
  mix-blend-mode: screen !important;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Animation de pulsation quand le jeu est actif */
.tap-button:not(:disabled)::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(100, 181, 246, 0.15);
  animation: tapPulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tapPulse {
  0% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1); opacity: 0.5; }
}

/* Animation de l'onde au tap */
.tap-ripple {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(100, 181, 246, 0.6);
  pointer-events: none;
  animation: rippleOut 0.4s ease-out forwards;
  z-index: 1;
}

@keyframes rippleOut {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}