.user-roster {
  width: min(86vw, 280px);
  max-height: min(72vh, 520px);
  overflow: auto;
  margin-left: 18px;
  padding: 18px;
  border-radius: 24px;
  border: 2px solid rgba(255, 200, 61, .75);
  background: rgba(8, 5, 27, .9);
  box-shadow: 0 0 28px rgba(255, 200, 61, .18);
  z-index: 2;
}

.user-roster h2 {
  margin: 0 0 12px;
  font-size: 24px;
}

.user-roster p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-weight: 900;
}

.roster-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-row span {
  flex: none;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
}

.roster-row .ok {
  background: rgba(73, 255, 147, .18);
  color: var(--green);
}

.roster-row .wait {
  background: rgba(255, 200, 61, .18);
  color: var(--gold);
}

@media (max-width: 980px) {
  .screen.with-roster {
    flex-direction: column;
  }

  .user-roster {
    margin: 14px 0 0;
    width: min(92vw, 780px);
    max-height: 24vh;
  }
}