/* The town is the landing page; the community roster is an optional dialog. */
#lobby {
  position: fixed;
  width: min(620px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: var(--s6);
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-y: auto;
}
#lobby:not([open]) {
  display: none;
}
#lobby-title {
  margin: var(--s2) 0 0;
  font-size: var(--xl);
  line-height: 1.1;
  letter-spacing: -1px;
}
#lobby .lobby-totals {
  display: flex;
  gap: var(--s8);
  padding: var(--s4) 0;
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--border);
}
#lobby .lobby-totals strong {
  font-size: var(--xl);
}
#lobby .lobby-totals span {
  font: var(--xs) var(--mono);
  color: var(--muted);
}
#lobby-empty {
  min-height: 140px;
}
#members {
  max-height: min(340px, 35dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.people-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}
#lobby-message {
  line-height: 1.6;
}
#town-life {
  position: fixed;
  top: 236px;
  left: var(--s6);
  z-index: 4;
  max-width: 274px;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  pointer-events: none;
}
#town-population {
  color: var(--accent);
  font-size: var(--sm);
  font-weight: 700;
}
#town-legend {
  color: var(--muted);
  font-size: var(--xs);
  line-height: 1.5;
}
@media (max-width: 600px) {
  #lobby {
    padding: var(--s4);
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }
  #lobby .lobby-totals {
    gap: var(--s4);
  }
  #lobby .lobby-totals > div {
    display: block;
  }
  #lobby .lobby-totals strong {
    display: block;
  }
  #town-life {
    top: 153px;
    left: var(--s3);
    max-width: 178px;
    padding: var(--s2);
    gap: var(--s1);
  }
  #town-population {
    font-size: var(--xs);
  }
  #town-legend {
    font-size: 10px;
  }
  .header-actions #signin {
    padding-inline: var(--s2);
  }
  body.chat-open #town-life {
    visibility: hidden;
  }
}