/* 排行榜沿用原型：左侧榜单导航、三列紧凑排名，移动端变为横向导航和单列。 */
.ranking-page { padding: 28px 0 32px; }
.ranking-layout { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 42px; align-items: start; }
.ranking-nav { display: grid; gap: 4px; border-right: 1px solid var(--line); padding-right: 18px; position: sticky; top: 24px; }
.ranking-nav a { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; color: var(--muted); font-size: 15px; }
.ranking-nav a:hover, .ranking-nav a[aria-current="page"] { color: var(--primary); font-weight: 700; background: var(--lavender); }
.ranking-nav .rank-arrow { opacity: 0; }
.ranking-nav a:hover .rank-arrow, .ranking-nav a[aria-current="page"] .rank-arrow { opacity: 1; }
.ranking-content { min-width: 0; }
.ranking-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin: 2px 0 20px; }
.ranking-heading h2 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.ranking-heading span { color: var(--muted); font-size: 12px; }
.ranking-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
.rank-entry { min-width: 0; display: grid; grid-template-columns: 44px 92px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 206px; padding: 20px 16px 20px 10px; }
.rank-entry:nth-child(6n+4), .rank-entry:nth-child(6n+5), .rank-entry:nth-child(6n+6) { background: var(--surface); }
.rank-position { align-self: start; padding-top: 2px; color: var(--muted); font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.rank-position.rank-podium { color: oklch(.52 .10 55); font-size: 38px; }
.rank-cover { position: relative; width: 92px; aspect-ratio: 92 / 127; overflow: hidden; border-radius: 6px; background: var(--lavender) url("../images/logo.svg") center / 36px no-repeat; }
.rank-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.rank-cover:has(.cover-link:focus-visible) { outline: 3px solid var(--primary); outline-offset: 5px; }
.rank-cover .cover-feedback { padding: 6px; gap: 6px; }
.rank-info { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.rank-work-title { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; text-wrap: balance; }
.rank-work-title a:hover { color: var(--primary); }
.rank-author, .rank-genres, .rank-chapters { margin: 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-chapters { color: var(--ink); }
.ranking-page .catalog-empty h3 { margin: 0 0 12px; font-size: 21px; }
@media (max-width: 1200px) {
    .ranking-layout { gap: 24px; grid-template-columns: 130px minmax(0, 1fr); }
    .ranking-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rank-entry:nth-child(6n+4), .rank-entry:nth-child(6n+5), .rank-entry:nth-child(6n+6) { background: transparent; }
    .rank-entry:nth-child(4n+3), .rank-entry:nth-child(4n+4) { background: var(--surface); }
}
@media (min-width: 761px) and (max-width: 940px) {
    .rank-entry { grid-template-columns: 30px 68px minmax(0, 1fr); gap: 8px; padding-inline: 8px; }
    .rank-cover { width: 68px; }
    .rank-position.rank-podium { font-size: 30px; }
    .rank-work-title { font-size: 14px; }
}
@media (max-width: 760px) {
    .ranking-page { padding-top: 20px; }
    .ranking-layout { display: block; }
    .ranking-nav { position: static; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px 5px 8px; gap: 5px; margin-bottom: 20px; }
    .ranking-nav a { flex: 0 0 auto; min-height: 44px; padding: 0 13px; border-radius: 5px; }
    .ranking-nav .rank-arrow { display: none; }
    .ranking-heading h2 { font-size: 23px; }
    .ranking-grid { grid-template-columns: 1fr; }
    .ranking-grid .rank-entry { grid-template-columns: 36px 80px minmax(0, 1fr); min-height: 148px; padding: 14px 8px; background: transparent; }
    .ranking-grid .rank-entry:nth-child(even) { background: var(--surface); }
    .rank-position { font-size: 20px; }
    .rank-position.rank-podium { font-size: 30px; }
    .rank-cover { width: 80px; }
    .rank-work-title { font-size: 14px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .rank-entry:hover .rank-cover img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
    .rank-cover img { transition: none; }
}