.hub-main { min-width:0;display:flex;flex-direction:column;gap:var(--sp-5); }
.call-ranking { align-self:start;margin-top:var(--sp-6);padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface-1);min-width:0; }
.ranking-heading { display:flex;align-items:center;gap:var(--sp-3); }
.ranking-heading h2 { margin:0;font-size:1rem;letter-spacing:-.025em; }
.ranking-heading p { margin:.25rem 0 0;color:var(--fg-3);font-size:.75rem; }
.ranking-mark { display:grid;place-items:center;width:2.4rem;height:2.4rem;flex-shrink:0;border-radius:.8rem;background:var(--accent-weak);color:var(--accent); }
.ranking-caption { display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:1.25rem 0 .5rem;color:var(--fg-3);font-size:.6875rem; }
.ranking-caption > span:first-child { display:flex;gap:.35rem;align-items:center; }
#rankingState { text-align:right; }
.ranking-scroll { max-height:min(60dvh,38rem);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;margin:0 -.35rem;padding:0 .35rem; }
.ranking-list { margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.2rem; }
.ranking-row { display:grid;grid-template-columns:1.1rem 2.25rem minmax(0,1fr);column-gap:.5rem;align-items:center;border-radius:.6rem;padding:.6rem .25rem; }
.ranking-row:hover,.ranking-row:focus-within { background:var(--surface-2); }
.ranking-position { align-self:start;margin-top:.4rem;text-align:center;color:var(--fg-3);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums; }
.ranking-row[data-position="1"] .ranking-position { color:var(--warn); }
.ranking-person { grid-column:2 / -1;display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.5rem;align-items:center;padding:0;border:0;background:none;color:var(--fg);text-align:left;cursor:pointer;border-radius:.4rem;min-width:0; }
.ranking-person:focus-visible { outline:2px solid var(--accent);outline-offset:4px; }
.ranking-avatar { position:relative;display:block;width:2.25rem;height:2.25rem; }
.ranking-avatar img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.ranking-dot { position:absolute;right:-1px;bottom:-1px;width:.65rem;height:.65rem;background:var(--ok);border:2px solid var(--surface-1);border-radius:50%; }
.ranking-person-text { display:flex;flex-direction:column;min-width:0;gap:.25rem; }
.ranking-name { font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ranking-time { color:var(--fg-3);font-size:.6875rem;font-variant-numeric:tabular-nums; }
.ranking-row > .profile-insignias { grid-column:3;margin-top:.35rem;max-width:100%; }
.ranking-empty { display:flex;align-items:center;flex-direction:column;gap:.7rem;text-align:center;padding:1.5rem .4rem;color:var(--fg-3); }
.ranking-empty > .ico { font-size:1.75rem;color:var(--accent); }
.ranking-empty h3 { font-size:.875rem;color:var(--fg-2);margin:0; }
.ranking-empty p { margin:0;font-size:.75rem; }
.ranking-footer { border-top:1px solid var(--line);margin-top:var(--sp-3);padding-top:var(--sp-3);display:flex;flex-direction:column;gap:.35rem;color:var(--fg-3);font-size:.6875rem; }
.ranking-footer p { margin:0; }
.ranking-footer .btn { margin-top:.5rem;font-size:.75rem; }
@media(min-width:78rem) { .call-ranking { display:flex;flex-direction:column;max-height:calc(100dvh - var(--topbar-h) - 2rem); } .ranking-scroll { min-height:0;flex:1 1 auto; } .ranking-heading,.ranking-caption,.ranking-footer { flex-shrink:0; } }
@media(min-width:78rem) and (max-width:111.999rem) { #appView { max-width:calc(var(--page-max) + 19rem);display:grid;grid-template-columns:minmax(0,1fr) 17.5rem;gap:1.5rem;align-items:start; } .call-ranking { position:sticky;top:calc(var(--topbar-h) + 1rem);margin-top:0; } }
@media(min-width:112rem) { .call-ranking { position:fixed;right:1rem;top:calc(var(--topbar-h) + 1rem);width:17.5rem;margin:0; } }
@media(max-width:36rem) { .ranking-scroll { max-height:25rem; } }
@media(max-width:77.999rem) { .call-ranking { align-self:stretch;width:100%; } }