body {
  /* background: #0f1a14; */
  background-image: url("./background.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #0f1a14;
  color: #f9e6b3;
  font-family: "Amiri", "Inter", serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
}
.container {
  /* background: rgba(8, 20, 12, 0.8); */
  /* backdrop-filter: blur(10px); */
  /* border: 1px solid #f7c35c40; */
  border-radius: 32px;
  padding: 40px;
  width: 90%;
  max-width: 600px;
  /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7); */
}
#statsCards {
  flex-wrap: nowrap; /* ❗ force 1 row */
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}

/* 👇 reduce gap on large screens */
@media (min-width: 992px) {
  #statsCards {
    gap: 2px; /* tighter */
  }
}

/* 👇 even tighter on very big screens */
@media (min-width: 1400px) {
  #statsCards {
    gap: 8px;
  }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 2755.14px !important;
    }
}

#statsCards::-webkit-scrollbar {
  display: none; /* Chrome */
}
.card {
  background-image: url("./Vector.png");
  background-size: contain; /* 👈 show full image */
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent !important;

  width: 100%;
  /* flex: 0 0 auto; */
  max-width: 231.26px; /* 👈 limit width */
  aspect-ratio: 231.26 / 277.34; /* 👈 keep exact ratio */

  border: none;
}
/* center content */
.card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
h1 {
  text-align: center;
  color: #f7c35c;
  margin-bottom: 30px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  text-align: left;
  color: #f7c35c;
  font-weight: normal;
  border-bottom: 1px solid #f7c35c40;
  padding-bottom: 10px;
}
td {
  padding: 8px 0;
  border-bottom: 1px solid #f7c35c20;
}
.count {
  text-align: right;
  font-weight: bold;
  color: #f9e6b3;
}
.mt-55 {
  margin-top: 20rem;
}
#loading {
  text-align: center;
  color: #6b8b74;
  padding: 20px;
}
#wsStatus {
  margin-top: 14px;
  text-align: center;
  color: #f7c35c80;
  font-size: 0.9rem;
}