/* =========================================================================
   Rankingi VixenLand — prosty układ w kolorach strony (róż + ciemne tło).
   5 kart obok siebie na całą szerokość, równe wysokości.
   ========================================================================= */

:root { --lb-grid-h: 300px; }

/* --- Hero --- */
#header {
  position: relative;
  min-height: 40vh;
  display: flex;
  align-items: center;
  padding: 90px 40px 70px;
  background:
    linear-gradient(180deg, rgba(35,26,29,0.72), rgba(35,26,29,0.92)),
    url('../../images/section5.jpg') center / cover no-repeat;
}
#header .content { max-width: 900px; }
#header .info .minecraft-server-ip {
  color: var(--main-color);
  font-family: var(--display-font);
  font-weight: 700;
  letter-spacing: 1px;
}
#header .info .title {
  color: var(--white-color);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.06;
  margin: 8px 0 0;
}
#header .info .title span { color: var(--main-color); }
#header .description {
  color: var(--description-color);
  font-size: 17px;
  line-height: 1.6;
  max-width: 620px;
  margin-top: 14px;
}

/* --- Sekcja --- */
#leaderboard { padding: 56px 0 88px; background: var(--background-color); }
#leaderboard .content {
  width: 94%;
  max-width: 1800px;
  margin: 0 auto;
}

/* --- 5 kart obok siebie, cała szerokość --- */
.lb-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 1500px) { .lb-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .lb-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .lb-cards { grid-template-columns: 1fr; } }

/* --- Karta --- */
.lb-card {
  display: flex;
  flex-direction: column;
  padding: 18px 15px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(228, 59, 107, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(228, 59, 107, 0.22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lb-card:hover {
  transform: translateY(-3px);
  border-color: rgba(228, 59, 107, 0.40);
  box-shadow: 0 16px 38px rgba(228, 59, 107, 0.15);
}

/* --- Nagłówek karty --- */
.lb-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 2px;
}
.lb-card-title {
  margin: 0; min-width: 0;
  font-family: var(--display-font); font-weight: 600; font-size: 1.02rem;
  color: var(--white-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-live {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em;
  color: #fff; padding: 4px 9px; border-radius: 999px;
  background: linear-gradient(135deg, var(--main-color), var(--main-color-2));
  box-shadow: 0 2px 10px rgba(228, 59, 107, 0.40);
}
.lb-live .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: lb-pulse 1.6s ease-out infinite;
}
@keyframes lb-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  70% { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.lb-meta { margin: 8px 0 10px; color: var(--description-color); opacity: 0.75; font-size: 0.76rem; }

/* --- Nagłówek kolumn --- */
.lb-head {
  display: grid; align-items: center; gap: 8px;
  padding: 4px 10px 8px;
  color: var(--main-color);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lb-head .lb-lvl, .lb-head .lb-val { text-align: right; }

/* pet = 4 kolumny, value = 3 kolumny */
.lb-card--pet .lb-head, .lb-card--pet .lb-row {
  grid-template-columns: 42px minmax(0,1fr) minmax(0,1.2fr) 46px;
}
.lb-card--value .lb-head, .lb-card--value .lb-row {
  grid-template-columns: 42px minmax(0,1fr) auto;
}

/* --- Lista: pokazuje wszystkie miejsca (całe TOP 10) --- */
.lb-grid {
  margin-top: 8px;
  display: flex; flex-direction: column; gap: 6px;
}

/* --- Wiersz --- */
.lb-row {
  display: grid; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.lb-row:hover { background: rgba(228, 59, 107, 0.10); border-color: rgba(228, 59, 107, 0.30); }
.lb-row--1 {
  background: rgba(228, 59, 107, 0.14);
  border-color: rgba(228, 59, 107, 0.40);
  box-shadow: 0 0 0 1px rgba(228, 59, 107, 0.12), 0 4px 14px rgba(228, 59, 107, 0.12);
}
.lb-row--2 { background: rgba(255, 255, 255, 0.05); }
.lb-row--3 { background: rgba(255, 255, 255, 0.04); }

/* --- Ranga / medale --- */
.lb-rank { display: flex; align-items: center; justify-content: center; }
.lb-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; border-radius: 50%;
  font-family: var(--display-font); font-weight: 600; font-size: 0.82rem;
  color: var(--description-color); background: rgba(255,255,255,0.06);
}
.lb-medal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--display-font); font-weight: 700; font-size: 0.82rem; color: #2a1c0a;
}
.lb-medal { box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 0 2px 6px rgba(0,0,0,0.25); }
.lb-medal.gold   { background: linear-gradient(145deg, #ffe9a6, #f2c94c); }
.lb-medal.silver { background: linear-gradient(145deg, #f4f7fb, #cfd6df); }
.lb-medal.bronze { background: linear-gradient(145deg, #f0c49a, #d79457); }

/* --- Gracz --- */
.lb-player {
  min-width: 0; font-weight: 600; font-size: 0.9rem; color: var(--white-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- Pet --- */
.lb-pet {
  min-width: 0; display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lb-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.lb-petname { color: var(--description-color); font-weight: 500; font-style: italic; font-size: 0.76rem; opacity: 0.85; }

/* --- Poziom / Wartość --- */
.lb-lvl, .lb-val {
  text-align: right; font-size: 0.8rem; color: var(--description-color);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.lb-lvl b, .lb-val b {
  font-family: var(--display-font); font-weight: 600; font-size: 0.98rem;
  color: var(--main-color); font-variant-numeric: tabular-nums;
}

/* --- Stan pusty / błąd --- */
.lb-state {
  margin: 10px 2px; padding: 20px 14px; text-align: center;
  color: var(--description-color); font-size: 0.86rem;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.15); border-radius: 10px;
}

/* --- Pet: nazwa peta pod gracza gdy karty są węższe (tablet i mniej) --- */
@media (max-width: 1000px) {
  .lb-card--pet .lb-head { grid-template-columns: 42px minmax(0,1fr) 46px; }
  .lb-card--pet .lb-head .lb-pet { display: none; }
  .lb-card--pet .lb-row { grid-template-columns: 42px minmax(0,1fr) 46px; row-gap: 3px; }
  .lb-card--pet .lb-row .lb-pet { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 620px) {
  #header { padding: 80px 22px 56px; }
}