.wide-dialog {
  width: min(920px, calc(100vw - 28px));
}

.round-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin-bottom: 18px;
}

.round-summary > div {
  padding: 11px;
  border: 1px solid #23483c;
  border-radius: 9px;
  background: #091a16;
}

.round-summary small,
.round-summary b {
  display: block;
}

.round-summary small {
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
}

.timeline {
  max-height: 48vh;
  overflow: auto;
  margin-left: 9px;
  padding-left: 22px;
  border-left: 1px solid #31584d;
}

.timeline-entry {
  position: relative;
  padding: 0 0 17px;
}

.timeline-entry::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 3px;
  width: 9px;
  height: 9px;
  border: 2px solid #0d211b;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 1px #4ec99e;
}

.timeline-entry b {
  font-size: 12px;
}

.timeline-entry p {
  margin: 5px 0 0;
  color: var(--muted);
  font: 10px/1.55 ui-monospace, monospace;
  white-space: normal;
  word-break: break-word;
}

@media (max-width: 720px) {
  nav {
    grid-template-columns: repeat(6, 1fr);
  }

  .round-summary {
    grid-template-columns: 1fr 1fr;
  }
}