/* Compact community modules within the existing homepage grid. */
.home-topics .home-topic-list { display: grid; gap: 0; }
.home-topics .home-topic-list .topic-row {
    display: grid;
    position: relative;
    grid-template-columns: 40px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    margin: 0;
    padding: 14px 4px 14px 18px;
    border: 0;
    border-bottom: 1px solid #ffffff10;
    border-radius: 0;
    background: none;
}
.home-topics .home-topic-list .topic-row:last-child { border-bottom: 0; }
.home-topics .home-topic-list .topic-row::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 24px; background: var(--accent); opacity: 0; transform: translateY(-50%); transition: opacity .16s; }
.home-topics .home-topic-list .topic-row:hover,
.home-topics .home-topic-list .topic-row:focus-visible { background: none; }
.home-topics .topic-row:is(:hover, :focus-visible)::before { opacity: 1; }
.home-topics .home-topic-list .topic-row strong { font-size: 15px; line-height: 1.45; font-weight: 700; }
.home-topics .home-topic-list .topic-row:is(:hover, :focus-visible) strong { color: var(--accent); }
.home-topics .home-topic-list .topic-row-media { display: grid; place-items: center; min-width: 0; }
.home-topics .topic-row-media .steam-avatar { --avatar-size: 40px; }
.home-topics .topic-row-media .topic-thumbnail { width: 40px; height: 40px; border-radius: 0; object-fit: cover; }
.home-topics .home-topic-list .topic-row small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 11px; line-height: 1.5; color: #9aabb2; }
.home-topics .topic-row-section { color: #b3c2c6; }
.home-topics .topic-row-author { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-topics .topic-row-replies { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; padding: 0; color: #a2b2b9; font-size: 12px; }
.home-topics .topic-row-arrow { width: 18px; height: 18px; color: #6f848e; }
.home-topics .topic-row:is(:hover, :focus-visible) .topic-row-arrow { color: var(--accent); }

/* The leader and remaining places share the page, without an enclosing panel. */
.home-ranking { container-type: inline-size; }
.home-ranking .home-ranking-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: start; gap: 28px; padding: 8px 0; }
.home-ranking .home-ranking-solo { grid-template-columns: minmax(0, 1fr); }
.home-ranking .home-ranking-leader { display: grid; grid-template-columns: 38px 64px minmax(0, 1fr); align-items: center; gap: 18px 16px; padding: 4px 0; min-width: 0; }
.home-ranking .home-rank-place { color: #e1e8eb; font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.2; }
.home-ranking .home-ranking-leader > .home-rank-place { justify-self: start; padding-bottom: 8px; border-bottom: 2px solid var(--accent); color: var(--accent); font-size: 32px; font-style: italic; }
.home-ranking .home-ranking-leader > .steam-avatar { --avatar-size: 64px; }
.home-ranking .home-rank-identity { display: grid; gap: 4px; min-width: 0; }
.home-ranking .home-rank-identity > strong { color: var(--text); font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; transition: color .16s; }
.home-ranking .home-ranking-leader .home-rank-identity > strong { font-size: 21px; }
.home-ranking .home-rank-identity > small { color: #9aabb2; font-size: 11px; line-height: 1.4; }
.home-ranking .home-ranking-leader .home-rank-identity > small { font-size: 12px; }
.home-ranking .home-rank-score { color: var(--text); white-space: nowrap; font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.1; }
.home-ranking .home-rank-score > small { color: #aab8be; font-size: 10px; font-style: normal; font-weight: 500; }
.home-ranking .home-ranking-leader > .home-rank-score { grid-column: 2 / -1; color: var(--accent); font-size: clamp(30px, 3vw, 44px); font-style: italic; letter-spacing: -1px; }
.home-ranking .home-ranking-leader > .home-rank-score > small { font-size: 20px; letter-spacing: 0; }
.home-ranking .home-ranking-runners { min-width: 0; padding-left: 24px; border-left: 1px solid #ffffff12; }
.home-ranking .home-ranking-rest { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; border-top: 1px solid #ffffff12; }
.home-ranking .home-ranking-runner { display: grid; grid-template-columns: 24px 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 66px; padding: 14px 0; border-bottom: 1px solid #ffffff10; }
.home-ranking .home-ranking-runners > .home-ranking-runner:first-child { padding-top: 4px; }
.home-ranking .home-ranking-runners > .home-ranking-runner:last-child { border-bottom: 0; }
.home-ranking .home-ranking-runner > .steam-avatar { --avatar-size: 36px; }
.home-ranking :is(.home-ranking-leader, .home-ranking-runner):is(:hover, :focus-visible) .home-rank-identity > strong { color: var(--accent); }
.home-visitors .recent-visitors { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); align-items: start; gap: 20px 14px; padding: 8px 0; margin: 0; list-style: none; }
.home-visitors .recent-visitors > li { min-width: 0; }
.home-visitors .recent-visitors .recent-visitor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 8px 4px;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: center;
}
.home-visitors .recent-visitors .recent-visitor:hover,
.home-visitors .recent-visitors .recent-visitor:focus-visible { background: none; }
.home-visitors .recent-visitor:hover .visitor-info > strong { color: var(--accent); }
.home-visitors .visitor-avatar .steam-avatar { --avatar-size: 72px; }
.home-visitors .visitor-avatar > .status-dot { width: 9px; height: 9px; box-shadow: 0 0 0 3px #19262c; }
.home-visitors .visitor-info { flex: 0; width: 100%; min-height: 0; justify-items: center; gap: 5px; font-size: 13px; line-height: 1.25; }
.home-visitors .visitor-info > strong { max-width: 100%; }
.home-visitors .visitor-badge { min-width: 0; max-width: 100%; }
.home-visitors .visitor-badge .badge { max-width: 100%; margin: 0; overflow: hidden; text-overflow: ellipsis; font-size: 9px; }
.home-visitors .recent-visitors .recent-visitor > small { max-width: 100%; margin-top: 0; color: #8e9fa6; text-align: center; font-size: 11px; line-height: 1.4; }
.home-visitors .recent-visitors .recent-visitor > small .accent { font-weight: 600; }
.home-topic-list > .empty-copy { padding: 12px 0; }
.home-visitor-grid > .empty-copy { padding: 8px 0; }
@media (max-width: 1100px) and (min-width: 701px) {
    .home-visitors .recent-visitors { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}
@media (max-width: 700px) {
    .home-topics .home-topic-list .topic-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 14px 0 14px 12px; }
    .home-topics .topic-row-media .topic-thumbnail { width: 32px; height: 32px; }
    .home-topics .topic-row-media .steam-avatar { --avatar-size: 32px; }
    .home-topics .topic-row-arrow { display: none; }
    .home-topics .home-topic-list .topic-row strong { font-size: 14px; }
    .home-topics .home-topic-list .topic-row small { gap: 4px 6px; font-size: 11px; }
    .home-topics .topic-row-replies { min-width: 28px; gap: 4px; }
    .home-visitors .recent-visitors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 620px) {
    .home-ranking .home-ranking-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .home-ranking .home-ranking-runners { padding: 6px 0 0; border-left: 0; border-top: 1px solid #ffffff12; }
    .home-ranking .home-ranking-rest { grid-template-columns: minmax(0, 1fr); }
    .home-ranking .home-ranking-leader > .home-rank-score { font-size: 40px; }
}
@media (max-width: 420px) {
    .home-visitors .recent-visitors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .home-topics .home-topic-list .topic-row::before, .home-ranking .home-rank-identity > strong, .home-visitors .recent-visitors .recent-visitor { transition: none; }
}