@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Animations for Shot Results */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes gradient-radial {
  0% {
    background: radial-gradient(circle, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 100%);
  }
  50% {
    background: radial-gradient(circle, var(--tw-gradient-via) 0%, var(--tw-gradient-from) 50%, var(--tw-gradient-to) 100%);
  }
  100% {
    background: radial-gradient(circle, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 100%);
  }
}

@keyframes scan {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-fadeOut {
  animation: fadeOut 0.3s ease-in forwards;
}

.animate-scan {
  animation: scan 2s ease-in-out infinite;
}

.bg-gradient-radial {
  background: radial-gradient(circle, var(--tw-gradient-stops));
}

/* NFT Card Hover Effects */
.nft-card-hover {
  transition: all 0.3s ease;
}

.nft-card-hover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 255, 255, 0.3);
}

/* Ship placement feedback */
.ship-preview-valid {
  background-color: rgba(34, 197, 94, 0.4);
  border: 2px solid rgb(34, 197, 94);
  animation: pulse 1s ease-in-out infinite;
}

.ship-preview-invalid {
  background-color: rgba(239, 68, 68, 0.4);
  border: 2px solid rgb(239, 68, 68);
  animation: pulse 1s ease-in-out infinite;
}

/* Game board cell animations */
.cell-hit {
  animation: hitFlash 0.5s ease-out;
}

.cell-miss {
  animation: missRipple 0.8s ease-out;
}

.cell-sunk {
  animation: sunkExplosion 1s ease-out;
}

@keyframes hitFlash {
  0% { background-color: rgb(239, 68, 68); transform: scale(1); }
  50% { background-color: rgb(255, 255, 255); transform: scale(1.2); }
  100% { background-color: rgb(239, 68, 68); transform: scale(1); }
}

@keyframes missRipple {
  0% { background-color: rgb(59, 130, 246); transform: scale(1); }
  50% { background-color: rgb(147, 197, 253); transform: scale(1.1); }
  100% { background-color: rgb(59, 130, 246); transform: scale(1); }
}

@keyframes sunkExplosion {
  0% { background-color: rgb(251, 146, 60); transform: scale(1); }
  25% { background-color: rgb(255, 255, 255); transform: scale(1.3); }
  50% { background-color: rgb(239, 68, 68); transform: scale(1.1); }
  100% { background-color: rgb(127, 29, 29); transform: scale(1); }
}

/* Wager system styles */
.wager-card {
  transition: all 0.3s ease;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(51, 65, 85, 0.6));
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.wager-card:hover {
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.2);
  transform: translateY(-2px);
}

.wager-card.selected {
  border-color: rgb(34, 197, 94);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(30, 41, 59, 0.8));
}

/* Custom match creation styles */
.custom-match-card {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(30, 41, 59, 0.8));
  border: 2px solid rgba(147, 51, 234, 0.4);
  transition: all 0.3s ease;
}

.custom-match-card:hover {
  border-color: rgba(147, 51, 234, 0.8);
  box-shadow: 0 8px 25px rgba(147, 51, 234, 0.3);
  transform: translateY(-3px);
}

/* Match queue styles */
.match-queue-item {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(30, 41, 59, 0.8));
  border: 1px solid rgba(59, 130, 246, 0.3);
  transition: all 0.3s ease;
}

.match-queue-item:hover {
  border-color: rgba(59, 130, 246, 0.6);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
  transform: translateY(-2px);
}

/* Avatar selection improvements */
.avatar-option {
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.avatar-option:hover {
  border-color: rgba(34, 197, 94, 0.6);
  transform: scale(1.05);
}

.avatar-option.selected {
  border-color: rgb(34, 197, 94);
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-down {
  animation: fadeInDown 0.25s ease-out both;
}

.animate-fade-in-up {
  animation: fadeInUp 0.25s ease-out both;
}

/* Generic smooth movement for hover / focus */
.transition-base {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}