/* Page container */
.zb-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 14px 60px;
}

/* Card */
.zb-card {
  border-radius: 22px;
  background: rgba(12, 16, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  padding: 18px;
}

/* Header area */
.zb-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 14px;
}

/* Title + subtitle centered everywhere */
.zb-title {
  font-size: 28px;
  margin: 0 0 6px;
  letter-spacing: 0.2px;
  text-align: center;
}

.zb-subtitle {
  margin: 0;
  opacity: 0.86;
  line-height: 1.35;
  text-align: center;
  max-width: 720px;
}

/* Link "affilié" */
.zb-affiliate-link {
  color: #a88bff;
  font-weight: 800;
  text-decoration: none;
  position: relative;
}

.zb-affiliate-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.zb-affiliate-link:hover {
  color: #c9b8ff;
}

/* Alert (error) */
.zb-alert {
  width: 100%;
  margin: 8px 0 0;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255, 77, 77, 0.1);
  border: 1px solid rgba(255, 77, 77, 0.25);
  color: rgba(255, 255, 255, 0.95);
  text-align: left;
}

/* Dates row: Début | Mis à jour | Fin */
.zb-dates {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin: 10px 0 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

.zb-date {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.zb-date__label {
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  opacity: 0.62;
}

.zb-date__value {
  font-size: 14px;
  font-weight: 800;
}

.zb-date--center .zb-date__value {
  color: #c9b6ff; /* léger accent violet premium */
}

/* =========================
   Podium
   ========================= */

.zb-podium {
  margin: 12px 0 14px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 22, 0.45);
}

.zb-pod__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.zb-pod__card {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.04);
  padding: 14px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  animation: zbFadeUp 0.45s ease-out both;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.zb-pod__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  border-color: rgba(255, 255, 255, 0.12);
}

.zb-pod__card.is-first {
  background: rgba(140, 90, 255, 0.16);
  border-color: rgba(140, 90, 255, 0.3);
  transform: translateY(-6px);
}

.zb-pod__card.is-first:hover {
  transform: translateY(-8px);
}

.zb-pod__card.is-second {
  opacity: 0.95;
}

.zb-pod__card.is-third {
  opacity: 0.92;
}

.zb-pod__badge {
  font-size: 22px;
  margin-bottom: 6px;
}

.zb-pod__user {
  font-weight: 900;
  letter-spacing: 0.2px;
  margin-bottom: 6px;
}

.zb-pod__wager {
  opacity: 0.9;
  margin-bottom: 6px;
}

.zb-pod__prize {
  font-weight: 900;
  opacity: 0.95;
}

/* =========================
   Table
   ========================= */

.zb-tablewrap {
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 22, 0.55);
}

.zb-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px; /* desktop default */
}

.zb-table thead th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.75;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
}

.zb-table tbody td {
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: middle;
}

.zb-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.zb-loading {
  text-align: center;
  opacity: 0.8;
}

/* Rank pill */
.zb-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-weight: 900;
}

.zb-rank.is-1 {
  background: rgba(255, 215, 0, 0.12);
  border-color: rgba(255, 215, 0, 0.25);
}
.zb-rank.is-2 {
  background: rgba(192, 192, 192, 0.12);
  border-color: rgba(192, 192, 192, 0.25);
}
.zb-rank.is-3 {
  background: rgba(205, 127, 50, 0.14);
  border-color: rgba(205, 127, 50, 0.25);
}

/* Username cell */
.zb-username {
  font-weight: 900;
  letter-spacing: 0.2px;
}

/* Footnote */
.zb-footnote {
  margin-top: 14px;
  opacity: 0.65;
  font-size: 12px;
}

/* =========================
   Stream box (optional)
   ========================= */
.zb-streambox {
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 22, 0.55);
}

/* =========================
   Animations
   ========================= */

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

/* table rows stagger (delay set inline in JS) */
.zb-row {
  animation: zbFadeUp 0.35s ease-out both;
}

/* =========================
   Responsive
   ========================= */

/* Medium: podium becomes vertical + table slightly smaller min width */
@media (max-width: 820px) {
  .zb-pod__grid {
    grid-template-columns: 1fr;
  }

  .zb-pod__card.is-first {
    transform: none;
  }

  .zb-pod__card.is-first:hover {
    transform: translateY(-2px);
  }

  .zb-table {
    min-width: 620px;
  }
}

/* Mobile (<= 640px): compact card + force table to fit without horizontal swipe */
@media (max-width: 640px) {
  .zb-page {
    padding: 12px 10px 40px;
  }

  .zb-card {
    padding: 14px;
    border-radius: 18px;
  }

  .zb-title {
    font-size: 22px;
  }

  .zb-subtitle {
    font-size: 13px;
    line-height: 1.4;
  }

  .zb-tablewrap {
    overflow: hidden; /* no horizontal swipe */
  }

  .zb-table {
    min-width: 0; /* kill desktop min width */
    width: 100%;
  }

  .zb-table thead th {
    padding: 10px 8px;
    font-size: 11px;
  }

  .zb-table tbody td {
    padding: 10px 8px;
    font-size: 13px;
  }

  .zb-rank {
    width: 26px;
    height: 24px;
    font-size: 13px;
  }

  .zb-username {
    font-size: 14px;
  }

  /* tighten amount/prize */
  .zb-table th:nth-child(3),
  .zb-table td:nth-child(3),
  .zb-table th:nth-child(4),
  .zb-table td:nth-child(4) {
    text-align: right;
    white-space: nowrap;
  }
}

/* Small phones (<= 380px): rename header "Amount wagered" -> "Wagered" */
@media (max-width: 380px) {
  .zb-card__head {
    padding-bottom: 12px;
  }

  .zb-table thead th:nth-child(3) {
    font-size: 0;
  }

  .zb-table thead th:nth-child(3)::after {
    content: "Wagered";
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.9;
    display: inline-block;
  }
}

/* XS phones (<= 360px): stable layout, usernames wrap max 2 lines */
@media (max-width: 360px) {
  .zb-table {
    table-layout: fixed;
    width: 100%;
  }

  .zb-table thead th,
  .zb-table tbody td {
    padding: 8px 8px;
    font-size: 12px;
  }

  /* fixed columns, prioritize username */
  .zb-table th:nth-child(1),
  .zb-table td:nth-child(1) {
    width: 46px;
  }

  .zb-table th:nth-child(3),
  .zb-table td:nth-child(3) {
    width: 92px;
    text-align: right;
  }

  .zb-table th:nth-child(4),
  .zb-table td:nth-child(4) {
    width: 52px;
    text-align: right;
  }

  /* username wrap (2 lines max) */
  .zb-table td.zb-username {
    white-space: normal;
    overflow: hidden;
    text-overflow: clip;
    overflow-wrap: break-word;
    line-height: 1.12;
  }
}