/* A small board-side community marker, using the site's shared design tokens. */
.community {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 104px;
  margin-block: 24px;
  padding: 14px 0 14px 18px;
  border-left: 2px solid var(--neural-cyan);
}
.community-board { width: 58px; height: 58px; flex: 0 0 auto; }
.community-grid { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.community-stone { fill: var(--void); stroke: var(--neural-cyan); stroke-width: 2; }
.community-stone-light { fill: var(--text); stroke: var(--text); }
.community-copy { min-width: 0; }
.community-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; }
.community-number {
  color: var(--neural-cyan);
  font: 600 clamp(1.7rem, 3vw, 2.1rem) / 1.2 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}
.community-label, .community-fallback { color: var(--text); font: 600 .9rem / 1.5 var(--body); }
.community-note { margin-top: 4px; color: var(--muted); font: 400 .72rem / 1.6 var(--mono); }
.community [hidden] { display: none; }
@media (max-width: 380px) {
  .community { gap: 12px; padding-left: 12px; }
  .community-board { width: 44px; height: 44px; }
  .community-label { font-size: .82rem; }
}
