/* Override button styles for game pages to match the fun design */

/* Primary buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
  border: none !important;
  border-radius: 1.5rem !important;
  font-weight: 600 !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3) !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4) !important;
  background: linear-gradient(135deg, var(--primary-hover), var(--primary-color)) !important;
  color: white !important;
}

/* Secondary buttons */
.btn-secondary, .btn-outline-secondary {
  background: linear-gradient(135deg, var(--secondary-color), var(--secondary-hover)) !important;
  border: none !important;
  border-radius: 1.5rem !important;
  font-weight: 600 !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-secondary:hover, .btn-outline-secondary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4) !important;
  color: white !important;
}

/* Danger buttons */
.btn-danger {
  background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
  border: none !important;
  border-radius: 1.5rem !important;
  font-weight: 600 !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-danger:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4) !important;
  color: white !important;
}

/* Info buttons */
.btn-info {
  background: linear-gradient(135deg, #3498db, #2980b9) !important;
  border: none !important;
  border-radius: 1.5rem !important;
  font-weight: 600 !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3) !important;
  transition: all 0.3s ease !important;
}

.btn-info:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4) !important;
  color: white !important;
}

/* Light buttons */
.btn-light {
  background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--dark-bg) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

.btn-light:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
}

/* Small buttons */
.btn-sm {
  padding: 0.4rem 1rem !important;
  font-size: 0.875rem !important;
  border-radius: 1.2rem !important;
}

/* Large buttons */
.btn-lg {
  padding: 0.75rem 2rem !important;
  font-size: 1.1rem !important;
  border-radius: 2rem !important;
}

/* Game specific button adjustments */
#submit-word, #clear-word {
  min-height: 44px;
}

#rotate-board, #hint-button, #end-game-mobile {
  padding: 0.5rem 0.75rem !important;
}

/* Mobile button adjustments */
@media (max-width: 767.98px) {
  .btn {
    border-radius: 1.2rem !important;
    padding: 0.6rem 1.2rem !important;
    font-size: 0.9rem !important;
  }
  
  .btn-sm {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.8rem !important;
    border-radius: 1rem !important;
  }
  
  .btn-lg {
    padding: 0.7rem 1.5rem !important;
    font-size: 1rem !important;
    border-radius: 1.5rem !important;
  }
}

/* How to Play popup styling - matching the fun design */
.tutorial-popup {
  background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
  animation: slideInUp 0.5s ease !important;
}

.tutorial-popup h3 {
  color: var(--primary-color) !important;
  font-weight: 700 !important;
}

.tutorial-popup .card {
  border-radius: 1rem !important;
  border: 2px solid rgba(52, 152, 219, 0.2) !important;
  transition: all 0.3s ease !important;
}

.tutorial-popup .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
}

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