/* /ranking (public/ranking.js): tabs, then a numbered list; top three a little larger. Tokens from styles.css. */
.rank-page { padding-block: 8px 48px; }
.rank-page h1 { margin: 12px 0 6px; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -0.03em; }
.rank-lead, .rank-note { color: var(--ink-2); margin: 0 0 12px; font-size: 0.95rem; }
.rank-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 8px; }
.rank-tab { text-decoration: none; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); font-weight: 600; }
.rank-tab[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rank-tab:focus-visible { outline: 3px solid var(--lantern); outline-offset: 2px; }
.rank-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.rank-item { display: grid; grid-template-columns: 2.4rem 1fr; align-items: center; gap: 8px; }
.rank-no { font-size: 1.3rem; font-weight: 800; text-align: center; color: var(--ink-2); }
.rank-top .rank-no { color: var(--lantern); font-size: 1.6rem; }
.rank-card { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; min-width: 0; }
.rank-top .rank-card { grid-template-columns: 160px 1fr; }
.rank-card:hover, .rank-card:focus-visible { outline: 2px solid var(--lantern); outline-offset: 2px; }
.rank-pic { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 10px; background: var(--rule); display: grid; place-items: center; height: auto; }
.rank-body { display: grid; gap: 4px; min-width: 0; }
.rank-name { font-weight: 700; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-meta { color: var(--ink-2); font-size: 0.85rem; }
.rank-empty { color: var(--ink-2); padding: 24px 0; }
@media (max-width: 459px) { .rank-card, .rank-top .rank-card { grid-template-columns: 96px 1fr; } }