/* ============================================================
   QUIZMASTER PRO — LEADERBOARD CSS (standalone)
   ============================================================ */

.lb-pg { background: #08080f; min-height: 100vh; }

/* Blobs */
.lb-bg  { position:fixed; inset:0; pointer-events:none; }
.lbb1   { position:absolute; width:500px; height:500px; background:#f59e0b; top:-180px; right:-150px; border-radius:50%; filter:blur(90px); opacity:.08; animation:bm 22s infinite alternate; }
.lbb2   { position:absolute; width:400px; height:400px; background:#6366f1; bottom:-100px; left:-100px; border-radius:50%; filter:blur(80px); opacity:.08; animation:bm 18s infinite alternate-reverse; }

/* Wrapper */
.lb-wrap { max-width: 780px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; position: relative; z-index: 5; }

/* Header */
.lb-head       { text-align:center; margin-bottom:2.5rem; }
.lb-head-icon  { font-size:4rem; display:block; margin-bottom:.5rem; }
.lb-head-title { font-size:clamp(1.8rem,5vw,2.8rem); font-weight:800; }
.lb-head-sub   { color:rgba(255,255,255,.5); margin-top:.35rem; font-size:.95rem; }

/* ── PODIUM ─────────────────────────────────────────────────── */
.lb-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  flex-wrap: nowrap;
}

.lbp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  max-width: 200px;
}

.lbp-crown  { font-size:1.4rem; margin-bottom:.2rem; }
.lbp-emoji  { font-size:2.2rem; margin-bottom:.4rem; }
.lbp-name   { font-weight:800; font-size:.9rem; margin-bottom:.2rem; word-break:break-word; }
.lbp-matric { font-size:.68rem; color:rgba(255,255,255,.4); margin-bottom:.15rem; font-family:monospace; }
.lbp-course { font-size:.68rem; color:rgba(255,255,255,.4); margin-bottom:.35rem; }
.lbp-score  { font-size:1.3rem; font-weight:800; color:#a5b4fc; margin-bottom:.5rem; }
.lbp-score small { font-size:.65rem; color:rgba(255,255,255,.35); font-weight:400; }

.lbp-plinth {
  width:100%;
  border-radius: 12px 12px 0 0;
  padding: .6rem;
  font-weight: 800;
  font-size: .85rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lbp-plinth-1 { background: linear-gradient(135deg,#f59e0b,#d97706); min-height:80px; }
.lbp-plinth-2 { background: linear-gradient(135deg,#9ca3af,#6b7280); min-height:60px; }
.lbp-plinth-3 { background: linear-gradient(135deg,#cd7f32,#a0522d); min-height:45px; }

/* ── FULL LIST (card rows) ───────────────────────────────────── */
.lb-list { display:flex; flex-direction:column; gap:.65rem; margin-bottom:2rem; }

.lb-row-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  transition: all .2s;
}
.lb-row-card:hover { background:rgba(99,102,241,.07); border-color:rgba(99,102,241,.25); }
.lb-row-card.lb-top { border-color:rgba(245,158,11,.2); background:rgba(245,158,11,.04); }

/* Rank */
.lbr-rank {
  font-size: 1.3rem;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.lbr-num {
  font-size: .8rem;
  font-weight: 800;
  color: rgba(255,255,255,.35);
  display: block;
}

/* Info block */
.lbr-info  { flex: 1; min-width: 0; }
.lbr-name  { font-weight: 700; font-size: .95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lbr-meta  { display:flex; align-items:center; gap:.4rem; margin-top:.2rem; flex-wrap:wrap; }
.lbr-matric { font-size:.72rem; font-family:monospace; color:#a5b4fc; background:rgba(99,102,241,.1); padding:.1rem .4rem; border-radius:5px; white-space:nowrap; }
.lbr-dot    { color:rgba(255,255,255,.2); font-size:.7rem; }
.lbr-course { font-size:.72rem; color:rgba(255,255,255,.45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }

/* Right block */
.lbr-right  { flex-shrink:0; text-align:right; }
.lbr-score  { font-size:1.25rem; font-weight:800; color:#a5b4fc; line-height:1; }
.lbr-score span { font-size:.7rem; color:rgba(255,255,255,.35); font-weight:400; }
.lbr-bar-wrap { width:100px; height:5px; background:rgba(255,255,255,.08); border-radius:3px; margin:.3rem 0 .2rem auto; }
.lbr-bar  { height:100%; background:linear-gradient(90deg,#6366f1,#8b5cf6); border-radius:3px; }
.lbr-tries { font-size:.68rem; color:rgba(255,255,255,.35); }

/* Empty */
.lb-empty      { text-align:center; padding:3rem 1rem; }
.lb-empty-icon { font-size:5rem; margin-bottom:1rem; }
.lb-empty h2   { font-size:1.5rem; font-weight:800; margin-bottom:.5rem; }
.lb-empty p    { color:rgba(255,255,255,.5); margin-bottom:1.5rem; }

/* Footer buttons */
.lb-footer-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .lb-wrap    { padding:2rem .85rem 3rem; }
  .lb-podium  { gap:.5rem; }
  .lbp-card   { max-width:120px; }
  .lbp-name   { font-size:.78rem; }
  .lbp-score  { font-size:1.1rem; }
  .lbp-plinth { font-size:.75rem; padding:.4rem; }
  .lbp-plinth-1 { min-height:60px; }
  .lbp-plinth-2 { min-height:46px; }
  .lbp-plinth-3 { min-height:34px; }

  .lb-row-card { padding:.85rem 1rem; gap:.75rem; }
  .lbr-name    { font-size:.875rem; }
  .lbr-score   { font-size:1.1rem; }
  .lbr-bar-wrap { width:70px; }
  .lbr-course  { max-width:120px; }
}

@media (max-width: 420px) {
  .lbp-matric, .lbp-course { display:none; }
  .lbr-dot, .lbr-course    { display:none; }
  .lbr-bar-wrap             { display:none; }
}