/* Road to #2 page */
.nav-links a.active { color: var(--green); background: rgba(0, 255, 134, .08); }
.small { font-size: 12px; }
.rank-hero { padding-bottom: 90px; }
.rank-hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; min-height: min(640px, 78vh); }
.rank-title { font-size: clamp(52px, 8vw, 116px); }
.rank-title .outline { font-size: 1.9em; line-height: .95; -webkit-text-stroke-width: 6px; }

.rank-badge { position: relative; padding: 34px; border-radius: 28px; border: 1px solid var(--line-2); background: radial-gradient(120% 100% at 100% 0%, rgba(0, 255, 134, .18), transparent 60%), rgba(10, 16, 13, .8); backdrop-filter: blur(14px); box-shadow: 0 40px 100px -40px rgba(0, 255, 134, .35); }
.rank-now { display: flex; align-items: flex-start; font-family: var(--display); font-weight: 900; line-height: .9; margin: 8px 0 22px; }
.rank-now i { font-style: normal; font-size: 56px; color: var(--green); margin-top: 18px; }
.rank-now b { font-size: clamp(120px, 15vw, 190px); letter-spacing: -.05em; background: linear-gradient(180deg, #fff 35%, #7dffc0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rank-steps { display: flex; gap: 6px; margin-bottom: 26px; }
.rank-steps span { flex: 1; height: 44px; border-radius: 12px; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); position: relative; }
.rank-steps .path { border-color: var(--line-2); color: #b9f5d6; background: repeating-linear-gradient(135deg, rgba(0, 255, 134, .1) 0 6px, transparent 6px 12px); }
.rank-steps .target { border-color: var(--gold); color: var(--gold); background: rgba(255, 211, 106, .08); }
.rank-steps .target::after { content: 'GOAL'; position: absolute; top: -9px; font-size: 9px; letter-spacing: .12em; padding: 1px 6px; border-radius: 9px; background: var(--gold); color: #000; }
.rank-steps .now { background: var(--green); color: #02140b; border-color: var(--green); box-shadow: 0 0 30px rgba(0, 255, 134, .55); animation: bob 3s ease-in-out infinite; }
.rank-steps .now::after { content: 'NOW'; position: absolute; top: -9px; font-size: 9px; letter-spacing: .12em; padding: 1px 6px; border-radius: 9px; background: #fff; color: #000; }
.rank-badge-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.rank-badge-foot b { display: block; font-size: 22px; margin-top: 4px; }

.seg { display: flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.seg button { padding: 8px 18px; border-radius: 999px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--muted); transition: .2s; }
.seg button.on { background: var(--green); color: #02140b; }

.ladder { display: grid; gap: 10px; }
.l-row { position: relative; display: grid; grid-template-columns: 56px 190px 1fr 150px; align-items: center; gap: 18px; padding: 16px 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .3s; }
.l-rank { font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--muted); }
.l-name { display: flex; align-items: center; gap: 12px; font-weight: 700; min-width: 0; }
.l-logo { flex: none; width: 36px; height: 36px; border-radius: 10px; overflow: hidden; background: var(--card-2); display: grid; place-items: center; font-weight: 700; color: var(--muted); }
.l-logo img { width: 100%; height: 100%; object-fit: cover; }
.l-tag { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; }
.l-tag.goal { background: rgba(255, 211, 106, .12); color: var(--gold); border: 1px solid rgba(255, 211, 106, .4); }
.l-tag.next { background: rgba(0, 255, 134, .1); color: var(--green); border: 1px solid var(--line-2); }
.l-bar { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.l-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #3a4640; transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.l-bar i.over { background: repeating-linear-gradient(135deg, #3a4640 0 8px, #2b3530 8px 16px); }
.l-vol { text-align: right; font-family: var(--mono); font-weight: 700; }
.l-vol small { display: block; font-family: var(--body); font-weight: 600; font-size: 11px; color: var(--muted); }
.l-row.me { border-color: var(--green); background: radial-gradient(90% 200% at 0% 50%, rgba(0, 255, 134, .14), transparent 60%), var(--card); box-shadow: 0 0 60px -20px rgba(0, 255, 134, .5); }
.l-row.me .l-rank { color: var(--green); }
.l-row.me .l-bar i { background: linear-gradient(90deg, var(--green-2), var(--green)); box-shadow: 0 0 20px rgba(0, 255, 134, .7); }
.l-row.goal { border-color: rgba(255, 211, 106, .35); }
.l-row.goal .l-bar i { background: linear-gradient(90deg, #a98a3d, var(--gold)); }

.chart-card { padding: 28px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.chart-holder { position: relative; width: 100%; }
.chart-holder svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 8px; }
.chart-legend i { width: 14px; height: 3px; border-radius: 3px; background: var(--c); }
.chart-legend .me { color: var(--green); }
.tip { position: absolute; z-index: 5; pointer-events: none; padding: 10px 14px; border-radius: 12px; background: rgba(6, 10, 8, .94); border: 1px solid var(--line-2); font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity .15s; transform: translate(-50%, -110%); }
.tip b { font-family: var(--mono); color: var(--green); font-size: 15px; display: block; }
.climb-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 16px; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.chart-big { font-size: 34px; font-weight: 700; margin-top: 6px; }
.delta { padding: 6px 12px; border-radius: 99px; font-family: var(--mono); font-weight: 700; font-size: 13px; background: rgba(0, 255, 134, .1); color: var(--green); border: 1px solid var(--line-2); }
.delta.down { background: rgba(255, 107, 107, .1); color: #ff8d8d; border-color: rgba(255, 107, 107, .3); }
.gaps { display: grid; gap: 12px; margin-top: 18px; }
.gap { padding: 16px 18px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.gap.goal { border-color: rgba(255, 211, 106, .4); }
.gap-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; }
.gap-top b { font-family: var(--mono); color: var(--green); }
.gap.goal .gap-top b { color: var(--gold); }
.gap p { font-size: 13px; color: var(--muted); margin-top: 6px; }
.gap-meter { height: 6px; border-radius: 9px; background: rgba(255, 255, 255, .06); margin-top: 12px; overflow: hidden; }
.gap-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-2), var(--green)); }
.gap.goal .gap-meter i { background: linear-gradient(90deg, #a98a3d, var(--gold)); }

/* Home-page teaser */
.rank-teaser { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 26px 32px; margin-bottom: 72px; border-radius: 24px; border: 1px solid var(--line-2); background: radial-gradient(80% 200% at 0% 50%, rgba(0, 255, 134, .14), transparent 60%), var(--card); transition: transform .3s, box-shadow .3s; }
.rank-teaser:hover { transform: translateY(-3px); box-shadow: 0 30px 80px -40px rgba(0, 255, 134, .6); }
.rank-teaser-l { display: flex; align-items: center; gap: 22px; }
.rank-teaser-n { font-family: var(--display); font-weight: 900; font-size: 56px; line-height: 1; color: var(--green); }
.rank-teaser h3 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.rank-teaser p { color: var(--muted); font-size: 14px; }

@media (max-width: 980px) {
  .rank-hero-inner, .climb-grid { grid-template-columns: 1fr; }
  .l-row { grid-template-columns: 40px 1fr 110px; gap: 12px; padding: 14px 16px; }
  .l-bar { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) { .l-tag { display: none; } .rank-teaser-n { font-size: 40px; } .chart-card { padding: 18px; } }