/**
 * Rank Ladder Module — RFDD.org · "Hero World" redesign (INDEX-REDESIGN P6)
 * Ported verbatim from the signed-off design file (`.ladder`, `.lrank`).
 * Homepage-only. Shared chrome (.sect, .btn) lives in home-shell.css.
 */

.ladder { border: 1px solid var(--line); background: var(--bg-panel); padding: 34px 28px 30px; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); position: relative; overflow: hidden; }
.ladder__row { display: flex; justify-content: space-between; position: relative; margin-top: 26px; }
.ladder__row::before { content: ""; position: absolute; left: 4%; right: 4%; top: 9px; height: 2px; background: linear-gradient(90deg, rgba(57, 255, 20, .15), var(--neon-green) 55%, var(--iris-violet)); box-shadow: 0 0 10px rgba(57, 255, 20, .35); }
.lrank { position: relative; text-align: center; flex: 1; }
.lrank__dot { width: 14px; height: 14px; margin: 2px auto 10px; background: #0a140e; border: 2px solid var(--text-dim); transform: rotate(45deg); position: relative; z-index: 1; }
.lrank--done .lrank__dot { border-color: var(--neon-green); background: var(--neon-green); box-shadow: 0 0 12px rgba(57, 255, 20, .8); }
.lrank--summit .lrank__dot { border-color: var(--iris-violet); background: #0a140e; box-shadow: 0 0 14px rgba(160, 107, 255, .8); animation: hw-blink 2.2s infinite; }
.lrank__name { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.lrank--done .lrank__name { color: var(--neon-green); }
.lrank--summit .lrank__name { color: var(--iris-violet); }
.lrank__req { font-family: var(--font-mono); font-size: 9px; color: rgba(232, 255, 233, .35); margin-top: 3px; }
.ladder__you { position: absolute; top: -24px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; color: var(--neon-cyan); white-space: nowrap; left: 50%; transform: translateX(-50%); }
.ladder__you::after { content: "▼"; display: block; text-align: center; }

@media (max-width: 760px) {
  .ladder__row { flex-direction: column; gap: 16px; margin-left: 8px; }
  .ladder__row::before { left: 9px; right: auto; top: 2%; bottom: 2%; width: 2px; height: auto; background: linear-gradient(180deg, rgba(57, 255, 20, .15), var(--neon-green) 55%, var(--iris-violet)); }
  .lrank { display: flex; align-items: center; gap: 14px; text-align: left; }
  .lrank__dot { margin: 0; }
  .ladder__you { display: none; }
}