/* Custom styles for the community platform */

.rarity-common {
  color: #64748b;
}

.rarity-rare {
  color: #3b82f6;
}

.rarity-epic {
  color: #a855f7;
}

.rarity-legendary {
  color: #f59e0b;
}

.btn-primary {
  @apply bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition duration-200;
}

.btn-secondary {
  @apply bg-gray-500 hover:bg-gray-600 text-white font-semibold py-2 px-4 rounded transition duration-200;
}

.btn-success {
  @apply bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded transition duration-200;
}

.btn-danger {
  @apply bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded transition duration-200;
}

.card {
  @apply bg-white rounded-lg shadow-md p-6 mb-4;
}

.input-field {
  @apply w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.nav-link {
  @apply text-gray-600 hover:text-blue-500 px-3 py-2 rounded transition duration-200;
}

.nav-link.active {
  @apply text-blue-500 font-semibold bg-blue-50;
}

/* Toast UI Editor custom styles */
.toastui-editor-defaultUI {
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
}

.toastui-editor-contents {
  font-size: 16px;
  line-height: 1.6;
}

/* Message bubble styles */
.message-sent {
  @apply bg-blue-500 text-white rounded-lg p-3 max-w-xs ml-auto;
}

.message-received {
  @apply bg-gray-200 text-gray-800 rounded-lg p-3 max-w-xs;
}

/* Lottery animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.lottery-spinning {
  animation: spin 1s linear infinite;
}

/* Item card hover effect */
.item-card {
  @apply transition-transform duration-200;
}

.item-card:hover {
  @apply transform scale-105;
}

/* Badge styles */
.badge {
  @apply inline-block px-2 py-1 text-xs font-semibold rounded;
}

.badge-common {
  @apply bg-gray-200 text-gray-800;
}

.badge-rare {
  @apply bg-blue-200 text-blue-800;
}

.badge-epic {
  @apply bg-purple-200 text-purple-800;
}

.badge-legendary {
  @apply bg-yellow-200 text-yellow-800;
}

/* Loading spinner */
.spinner {
  @apply inline-block w-8 h-8 border-4 border-gray-200 border-t-blue-500 rounded-full;
  animation: spin 1s linear infinite;
}