.header {
  width: 50%;
  display: inline-flex;
  justify-content: space-between;
  padding: 8px;
}

.divider {
  height: 4px;
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--mantine-color-blue-7) 0%,
    var(--mantine-color-blue-7) 50%,
    var(--mantine-color-red-7) 50%,
    var(--mantine-color-red-7) 100%
  );
}

.player-list-column {
  width: 50%;
  display: inline-block;
  vertical-align: top;
}

.spectator-list {
  padding: 8px;
  color: var(--mantine-color-dimmed);
  border-top: 1px solid var(--mantine-color-default-border);
}

.spectator-name {
  color: var(--mantine-color-text);
}

.scroll-shadow {
  background:
    linear-gradient(var(--mantine-color-body) 33%, transparent),
    linear-gradient(transparent, var(--mantine-color-body) 66%) 0 100%,
    radial-gradient(
      farthest-side at 50% 0,
      rgba(20, 20, 20, 0.5),
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(
      farthest-side at 50% 100%,
      rgba(20, 20, 20, 0.5),
      rgba(0, 0, 0, 0)
    )
    0 100%;
  background-color: var(--mantine-color-body);
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  background-size:
    100% 45px,
    100% 45px,
    100% 15px,
    100% 15px;
}
