/**
 * Leaderboard-Home Module — RFDD.org · "Hero World" redesign (INDEX-REDESIGN P4)
 * Ported verbatim from the signed-off design file (`.lb__*`). Homepage-only.
 * Shared chrome (.sect, .btn, .rv) lives in home-shell.css.
 */

.lb__panel { position: relative; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(8, 18, 13, .9), rgba(5, 10, 9, .92)); clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); overflow: hidden; }
.lb__panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; background: repeating-linear-gradient(0deg, transparent 0 2px, #39ff14 2px 3px); }
.lb__panel::after { content: ""; position: absolute; left: -40%; top: -120%; width: 60%; height: 340%; transform: rotate(24deg); background: linear-gradient(90deg, transparent, rgba(0, 245, 255, .045), transparent); animation: lb-sweep 9s ease-in-out infinite; }
@keyframes lb-sweep { 0%, 100% { left: -60%; } 50% { left: 110%; } }
@media (prefers-reduced-motion: reduce) { .lb__panel::after { animation: none; } }
.lb__bar { display: flex; align-items: center; gap: 8px; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.lb__bar-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--neon-green); text-shadow: 0 0 10px rgba(57, 255, 20, .6); }
.lb__tabs { margin-left: auto; display: flex; gap: 4px; }
.lb__tab { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); background: transparent; border: 1px solid transparent; padding: 7px 12px; cursor: pointer; transition: color .2s, border-color .2s; }
.lb__tab:hover { color: var(--text); }
.lb__tab.is-on { color: var(--neon-cyan); border-color: rgba(0, 245, 255, .45); background: rgba(0, 245, 255, .06); text-shadow: 0 0 8px rgba(0, 245, 255, .7); }
.lb__tab:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }

.lb__podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; padding: 30px 22px 8px; align-items: end; }
.lb__pod { position: relative; text-align: center; border: 1px solid var(--line); background: rgba(10, 20, 14, .5); padding: 18px 10px 14px; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px); }
.lb__pod--1 { border-color: rgba(57, 255, 20, .55); background: rgba(57, 255, 20, .05); padding-top: 26px; padding-bottom: 22px; box-shadow: 0 0 34px rgba(57, 255, 20, .12), inset 0 0 24px rgba(57, 255, 20, .05); }
.lb__pod-medal { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; padding: 3px 10px; background: #08120c; border: 1px solid var(--line); color: var(--text-dim); }
.lb__pod--1 .lb__pod-medal { color: var(--neon-green); border-color: rgba(57, 255, 20, .6); text-shadow: 0 0 8px rgba(57, 255, 20, .8); }
.lb__pod canvas { width: 52px; height: 52px; image-rendering: pixelated; border: 1px solid var(--line); background: #050a08; margin-bottom: 8px; }
.lb__pod--1 canvas { width: 64px; height: 64px; }
.lb__pod-h { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.lb__pod-rank { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; }
.lb__pod-v { font-family: var(--font-display); font-size: 26px; color: var(--neon-green); margin-top: 6px; text-shadow: 0 0 14px rgba(57, 255, 20, .5); }
.lb__pod--1 .lb__pod-v { font-size: 34px; }
.lb__pod-v small { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }

.lb__rows { padding: 14px 22px 20px; }
.lb__row { display: grid; grid-template-columns: 30px 40px 1fr auto auto 84px; gap: 12px; align-items: center; padding: 10px 8px; border-bottom: 1px solid rgba(57, 255, 20, .09); transition: background .15s; }
.lb__row:last-child { border-bottom: 0; }
.lb__row:hover { background: rgba(57, 255, 20, .045); }
.lb__row-n { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }
.lb__row canvas { width: 32px; height: 32px; image-rendering: pixelated; border: 1px solid rgba(57, 255, 20, .18); background: #050a08; }
.lb__row-h { font-family: var(--font-mono); font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb__row-h i { font-style: normal; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); margin-left: 8px; }
.lb__row-streak { font-family: var(--font-mono); font-size: 11px; color: #ffb454; }
.lb__badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border: 1px solid; }
.lb__badge--sync { color: var(--neon-cyan); border-color: rgba(0, 245, 255, .35); }
.lb__badge--self { color: var(--text-dim); border-color: rgba(232, 255, 233, .2); }
.lb__row-v { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--neon-green); text-align: right; }
.lb__foot { display: flex; gap: 10px; justify-content: center; padding: 6px 22px 24px; flex-wrap: wrap; }

/* loading / empty states */
.lb__loading, .lb__empty { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--text-dim); text-align: center; padding: 26px 8px; }
.lb__empty a { color: var(--neon-green); text-decoration: none; }

@media (max-width: 720px) {
  .lb__podium { grid-template-columns: 1fr; gap: 10px; }
  .lb__pod { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; }
  .lb__pod canvas { margin-bottom: 0; }
  .lb__row { grid-template-columns: 24px 32px 1fr 70px; }
  .lb__row-streak, .lb__badge { display: none; }
}