/* E-sport inspired CSS styles */
body {
  background-color: #1a1a2e;
  color: #ffffff;
}
.navbar,
.card {
  background-color: #162447;
  border: 1px solid #1f4068;
}
/* E-sport inspired button styles (warna baru) */
.btn-primary {
  background-color: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
  transition: background 0.2s, color 0.2s;
}
.btn-primary:hover {
  background-color: #5b21b6;
  border-color: #5b21b6;
  color: #fff;
}
.btn-warning {
  background-color: #fbbf24;
  border-color: #fbbf24;
  color: #181818;
  font-weight: bold;
  letter-spacing: 1px;
  transition: background 0.2s, color 0.2s;
}
.btn-warning:hover {
  background-color: #f59e42;
  border-color: #f59e42;
  color: #181818;
}
.btn-success {
  background-color: #10b981;
  border-color: #10b981;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
  transition: background 0.2s, color 0.2s;
}
.btn-success:hover {
  background-color: #047857;
  border-color: #047857;
  color: #fff;
}
.btn-danger {
  background-color: #f43f5e;
  border-color: #f43f5e;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
  transition: background 0.2s, color 0.2s;
}
.btn-danger:hover {
  background-color: #be123c;
  border-color: #be123c;
  color: #fff;
}
/* Badge styles */
.badge-primary,
.badge-warning,
.badge-success,
.badge-danger {
  transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.2s;
}
.badge-primary:hover,
.badge-warning:hover,
.badge-success:hover,
.badge-danger:hover {
  transform: scale(1.15) rotate(-2deg);
  box-shadow: 0 4px 16px 0 rgba(124, 58, 237, 0.18);
  animation: badge-pop 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.badge-primary {
  background-color: #7c3aed;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.badge-warning {
  background-color: #fbbf24;
  color: #181818;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.badge-success {
  background-color: #10b981;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.badge-danger {
  background-color: #f43f5e;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.5px;
}
@keyframes badge-pop {
  0% {
    transform: scale(0.7);
    opacity: 0.5;
  }
  60% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* Background color utilities */
.bg-primary {
  background-color: #7c3aed !important;
  color: #fff !important;
}
.bg-warning {
  background-color: #fbbf24 !important;
  color: #181818 !important;
}
.bg-success {
  background-color: #10b981 !important;
  color: #fff !important;
}
.bg-danger {
  background-color: #f43f5e !important;
  color: #fff !important;
}