/* lb-* namespace — KS HackZone Leaderboard */
:root {
  --stroke: var(--stroke, rgba(155, 140, 243, .23));
  --text: var(--text, #e9e6ff);
  --muted: var(--muted, #b8b2d6);
  --accent: var(--accent, #a176ff);
  --accent-2: var(--accent-2, #6c3cff);
  --cyan: var(--cyan, #6be2ff);
  --shadow: 0 22px 60px rgba(0, 0, 0, .45);
  --glass: linear-gradient(180deg, #ffffff22, #ffffff10);
  --glass-2: linear-gradient(180deg, #ffffff18, #ffffff0a);
}

/* general glass helper */
.glass {
  background: var(--glass-2);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* ===== HERO ===== */
.lb-hero {
  position: relative;
  padding: 14px;
  margin: 6px 0 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
}

.lb-hero h1 {
  margin: 0 0 .25rem;
  font-size: 1.7rem;
  display: flex;
  align-items: center;
  gap: .5rem
}

.lb-crown {
  font-size: 1.25rem
}

.lb-hero .muted {
  max-width: 70ch;
  color: var(--muted)
}

.lb-tabs {
  display: flex;
  gap: .35rem;
  margin-top: .55rem;
  flex-wrap: wrap
}

.lb-tab {
  padding: .45rem .7rem;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: var(--glass);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  transition: .18s transform, .18s filter, .18s border-color;
}

.lb-tab.is-on {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent
}

.lb-tab:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  border-color: rgba(162, 118, 255, .45)
}

/* decorative bg glows */
.lb-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none
}

.lb-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .18
}

.lb-glow.g1 {
  left: -120px;
  top: -160px;
  background: radial-gradient(circle at 30% 30%, #7a5bff, transparent 60%)
}

.lb-glow.g2 {
  right: -160px;
  bottom: -180px;
  background: radial-gradient(circle at 60% 60%, #6be2ff, transparent 60%)
}

/* right stats box */
.lb-hero-statsbox {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem 1rem;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(162, 118, 255, .20), rgba(108, 60, 255, .16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 26px rgba(108, 60, 255, .18);
}

.lb-iconwrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff22, #ffffff10);
  border: 1px solid var(--stroke);
  color: #cfe4ff
}

.lb-count b {
  font-size: 1.28rem
}

.lb-count .muted {
  display: block;
  font-weight: 700;
  font-size: .86rem;
  color: var(--muted)
}

/* ===== PODIUM ===== */
.lb-podium {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: .8rem;
  margin: 10px 0
}

.lb-card {
  position: relative;
  padding: .6rem
}

.lb-card-inner {
  --edge: rgba(161, 118, 255, .66);
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  /* rank, ava, name, badge, stats/points */
  justify-items: center;
  gap: .45rem;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, #ffffff22, #ffffff10);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.lb-card-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from 210deg at 10% -10%, var(--edge), transparent 18%, transparent 82%, var(--edge));
  filter: blur(18px);
  opacity: .35;
  mix-blend-mode: screen;
}

.lb-card-inner::after {
  content: "";
  position: absolute;
  inset: -40%;
  transform: translateX(-60%) rotate(18deg);
  background: linear-gradient(90deg, transparent 45%, #ffffff18 50%, transparent 55%);
  transition: transform .6s ease;
}

.lb-card-inner:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 14px 34px rgba(108, 60, 255, .22)
}

.lb-card-inner:hover::after {
  transform: translateX(40%) rotate(18deg)
}

/* gold/silver/bronze edges */
.lb-card.gold .lb-card-inner {
  --edge: rgba(255, 216, 107, .65);
  background: linear-gradient(180deg, #fffbe622, #ffffff10)
}

.lb-card.silver .lb-card-inner {
  --edge: rgba(201, 214, 226, .65);
  background: linear-gradient(180deg, #f0f5ff22, #ffffff10)
}

.lb-card.bronze .lb-card-inner {
  --edge: rgba(255, 178, 122, .65);
  background: linear-gradient(180deg, #fff0e222, #ffffff10)
}

/* LEGEND FX for #1 */
.lb-card.gold .lb-card-inner::before {
  opacity: .52;
  filter: blur(22px);
  animation: lb-spin 12s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes lb-spin {
  to {
    transform: rotate(360deg)
  }
}

.lb-card.gold .lb-card-ava::after {
  /* twinkling particle grid rotating slowly */
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 28px;
  pointer-events: none;
  background:
    radial-gradient(#fff8 1px, transparent 2px) 0 0/14px 14px,
    radial-gradient(#ffd86b88 1px, transparent 3px) 7px 7px/20px 20px;
  opacity: .35;
  animation: twinkle 10s linear infinite;
}

@keyframes twinkle {
  to {
    transform: rotate(360deg)
  }
}

.lb-card.gold .lb-card-ava img {
  box-shadow: 0 0 0 3px rgba(255, 216, 107, .25), 0 0 26px rgba(255, 216, 107, .25);
}

/* podium anatomy */
.lb-card-rank {
  font-weight: 900;
  border: 1px solid var(--stroke);
  padding: .18rem .5rem;
  border-radius: 999px;
  background: #ffffff18
}

.lb-card-ava {
  position: relative
}

.lb-card-ava img {
  width: 90px;
  height: 90px;
  border-radius: 20px;
  border: 1px solid var(--stroke);
  object-fit: cover;
  background: #160b31
}

.lb-card-ava .lb-ring {
  position: absolute;
  inset: -7px;
  border-radius: 24px;
  border: 2px dashed rgba(161, 118, 255, .55);
  animation: lb-ring 8s linear infinite;
  pointer-events: none
}

@keyframes lb-ring {
  to {
    transform: rotate(360deg)
  }
}

.lb-card-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  text-align: center
}

.lb-user {
  font-weight: 900
}

/* NEW: badge line under username (bare-bone badge holder) */
.lb-card-badge {
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  font-weight: 900;
  font-size: .82rem;
  line-height: 1;
  /* bare-bone: no padding, border, bg — your dynamic class will style it */
}

/* stats + points */
.lb-card-stats {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  opacity: .95;
  justify-content: center
}

.lb-card-points .lb-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, #ffffff22, #ffffff10);
  font-weight: 900
}

/* ===== YOUR POSITION ===== */
.lb-your {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .7rem .9rem;
  margin: 10px 0;
}

.lb-your-left {
  display: flex;
  align-items: center;
  gap: .6rem
}

.lb-rankpill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 34px;
  padding: 0 .6rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(135deg, #6be2ff22, #a176ff22);
  font-weight: 900
}

.lb-ava {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  object-fit: cover;
  background: #160b31
}

.lb-your-stats {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap
}

.lb-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, #ffffff22, #ffffff10);
  font-weight: 900
}

/* ===== TABLE ===== */
.lb-table {
  overflow: hidden;
  position: relative
}

.lb-th,
.lb-row {
  display: grid;
  grid-template-columns: 96px 1.8fr 140px 140px 140px 200px;
  align-items: center;
  gap: .5rem;
}

.lb-th {
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(10px) saturate(140%);
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--stroke);
  font-weight: 900;
  color: var(--muted);
  letter-spacing: .02em;
  background: linear-gradient(180deg, #ffffff1e, #ffffff10);
}

.lb-rows {
  position: relative
}

.lb-row {
  --edge: rgba(161, 118, 255, .66);
  --pct: 50%;
  position: relative;
  text-decoration: none;
  color: var(--text);
  padding: .6rem .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: .18s transform, .18s filter, .18s background, .18s box-shadow;
}

.lb-row:last-child {
  border-bottom: 0
}

.lb-row:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  background: #ffffff08;
  box-shadow: 0 12px 28px rgba(108, 60, 255, .18)
}

/* left neon aura */
.lb-row::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 36px;
  border-radius: 10px;
  background: radial-gradient(10px 42px at 0% 50%, var(--edge), transparent);
  filter: blur(6px);
  opacity: .9;
  pointer-events: none;
}

/* hover sheen */
.lb-row::after {
  content: "";
  position: absolute;
  inset: -40%;
  transform: translateX(-65%) rotate(18deg);
  background: linear-gradient(90deg, transparent 45%, #ffffff16 50%, transparent 55%);
  transition: transform .6s ease;
}

.lb-row:hover::after {
  transform: translateX(40%) rotate(18deg)
}

.c-user {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  flex-wrap: wrap
}

.c-user .lb-user {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.c-solves,
.c-writeups,
.c-loves,
.c-points {
  font-weight: 800
}

.lb-ava {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  object-fit: cover;
  background: #160b31
}

.lb-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, #ffffff22, #ffffff10);
  font-weight: 900
}

.lb-medal {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: .4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff8, transparent 60%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .14) inset
}

.lb-medal.m1 {
  background: radial-gradient(circle at 30% 30%, #fff8, transparent 60%), linear-gradient(135deg, #ffd86b, #ffb13b)
}

.lb-medal.m2 {
  background: radial-gradient(circle at 30% 30%, #fff8, transparent 60%), linear-gradient(135deg, #e2e8ef, #c9d6e2)
}

.lb-medal.m3 {
  background: radial-gradient(circle at 30% 30%, #fff8, transparent 60%), linear-gradient(135deg, #ffb27a, #ff8b3b)
}

/* progress bar (relative to #1 points) */
.lb-progress {
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, #ffffff20, #ffffff0a);
  overflow: hidden;
}

.lb-progress .fill {
  width: var(--pct);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--edge), rgba(108, 60, 255, .55));
  box-shadow: 0 2px 12px rgba(108, 60, 255, .25);
}

/* top rows visual accent */
.lb-row.is-top .lb-rank {
  border-color: transparent;
  background: linear-gradient(135deg, #a176ff, #6c3cff);
  color: #fff
}

/* footer */
.lb-foot {
  padding: .55rem .9rem;
  color: var(--muted)
}

/* Responsive tweaks */
@media (max-width: 980px) {

  .lb-th,
  .lb-row {
    grid-template-columns: 80px 1.7fr 120px 120px 120px 160px
  }
}

@media (max-width: 860px) {
  .lb-podium {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .lb-hero {
    grid-template-columns: 1fr
  }

  .lb-hero-statsbox {
    justify-self: start
  }

  .lb-th {
    display: none
  }

  .lb-row {
    display: grid;
    grid-template-columns: 70px auto 1fr;
    grid-template-areas:
      "rank user points"
      ". meta meta";
    row-gap: .28rem;
  }

  .c-rank {
    grid-area: rank
  }

  .c-user {
    grid-area: user
  }

  .c-points {
    grid-area: points;
    justify-self: end
  }

  .c-solves,
  .c-writeups,
  .c-loves {
    grid-area: meta;
    display: inline-flex;
    gap: .6rem;
    align-items: center;
    margin-right: .8rem;
  }
}