/* PSP TRUCK v0.18.2 — compact online list, aligned community cards and Discord CTA. */

@media (min-width: 821px) {
  .home-community-grid {
    align-items: stretch;
  }
  .home-community-grid > .latest-topics-scroll,
  .home-community-grid > .home-forum-stats {
    height: 306px;
    min-height: 306px;
  }
  .home-community-grid > .latest-topics-scroll {
    max-height: 306px !important;
    grid-auto-rows: calc((306px - 14px) / 2);
    align-content: start;
  }
  .home-community-grid .news-card {
    min-height: 146px;
    height: 146px;
    margin: 0;
  }
  .home-community-grid > .home-forum-stats {
    display: flex;
    flex-direction: column;
  }
  .home-community-grid > .home-forum-stats .topic-list {
    flex: 1;
  }
}

.latest-topics-scroll {
  scrollbar-color: rgba(32,214,199,.45) rgba(255,255,255,.04);
  scrollbar-width: thin;
}
.latest-topics-scroll::-webkit-scrollbar { width: 8px; }
.latest-topics-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,.035); border-radius: 999px; }
.latest-topics-scroll::-webkit-scrollbar-thumb { background: rgba(32,214,199,.42); border-radius: 999px; }
.latest-topics-scroll::-webkit-scrollbar-thumb:hover { background: rgba(32,214,199,.66); }

.online-card-compact { padding: 0; }
.online-card-compact .forum-category-head { margin: 0; }
.online-subtitle { margin: 8px 0 0; font-size: .84rem; }
.online-name-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 20px 24px;
}
.online-name-link {
  --online-name-color: #dceaf4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid color-mix(in srgb, var(--online-name-color) 28%, rgba(74,111,139,.32));
  border-radius: 12px;
  background: color-mix(in srgb, var(--online-name-color) 7%, rgba(9,18,29,.86));
  color: var(--online-name-color);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.online-name-link:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--online-name-color) 55%, transparent);
  background: color-mix(in srgb, var(--online-name-color) 12%, rgba(9,18,29,.88));
}
.online-name-link strong { color: inherit; font-size: .94rem; }
.online-name-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.online-card-compact .rank-legend {
  margin: 0 24px;
  padding: 18px 0 22px;
}
.online-card-compact .rank-legend > strong { white-space: nowrap; }
.online-card-compact .custom-rank-list { justify-content: flex-start; }

.live-panel-community {
  grid-template-columns: minmax(315px,1.45fr) repeat(3,minmax(115px,.72fr)) auto;
  align-items: stretch;
}
.live-main-stack {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 13px 18px;
}
.live-server-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.live-discord-row {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid rgba(88,101,242,.38);
  border-radius: 13px;
  background: linear-gradient(135deg,rgba(88,101,242,.13),rgba(88,101,242,.035));
  color: #eef1ff;
  text-decoration: none;
}
.live-discord-row:hover { border-color: rgba(88,101,242,.75); background: linear-gradient(135deg,rgba(88,101,242,.22),rgba(88,101,242,.07)); }
.discord-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #5865f2;
  color: #fff;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .04em;
  box-shadow: 0 0 18px rgba(88,101,242,.3);
}
.live-discord-row > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.live-discord-row strong { color: #fff; font-size: .88rem; }
.live-discord-row small { color: #aeb8dc; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-discord-row > b { color: #bfc6ff; font-size: .78rem; white-space: nowrap; }

@media (max-width: 1120px) {
  .live-panel-community { grid-template-columns: 1.35fr repeat(2,1fr); }
  .live-panel-community .live-main-stack { grid-column: 1 / -1; border-bottom: 1px solid var(--border); }
  .live-panel-community > .btn { grid-column: 3; }
}

@media (max-width: 820px) {
  .home-community-grid > .latest-topics-scroll,
  .home-community-grid > .home-forum-stats {
    height: auto;
    min-height: 0;
  }
  .latest-topics-scroll { max-height: 300px !important; }
  .home-community-grid .news-card { min-height: 132px; height: auto; }
  .live-panel-community { grid-template-columns: 1fr 1fr; }
  .live-panel-community > .btn { grid-column: 1 / -1; }
  .online-name-cloud { padding: 17px; }
  .online-card-compact .rank-legend { margin: 0 17px; }
}

@media (max-width: 560px) {
  .live-panel-community { grid-template-columns: 1fr; }
  .live-panel-community .live-main-stack,
  .live-panel-community > .btn { grid-column: auto; }
  .live-discord-row { grid-template-columns: 36px minmax(0,1fr); }
  .live-discord-row > b { grid-column: 2; }
  .online-name-link { width: 100%; justify-content: flex-start; }
  .online-card-compact .rank-legend { align-items: flex-start; flex-direction: column; }
}