html, body {
  font-size: 2vmax;
  min-width: 300px;
  height: 100vh;
}
#app {
  height: 100vh;
}
body .fs-big-1 {
  font-size: 3.5rem;
}
body .fs-big-1 small {
  font-size: 0.8rem !important;
  display:block;
}
.server span {
  visibility: hidden;
}
.serve span {
  visibility: visible;
  color: var(--bs-yellow);
}
.scroll-top-gradient {
  background: linear-gradient(0deg, rgba(var(--bs-secondary-rgb), 0), rgba(var(--bs-secondary-rgb), 0.2)) no-repeat, linear-gradient(180deg, rgba(var(--bs-light-rgb), 0), rgba(var(--bs-light-rgb), 1)) no-repeat;
  background-size: 100% 2%, 100% 2%;
  background-position: 0 0, 0 100%;
}
.messages::after {
  display: block;
  content: '----------------------------';
  color: var(--bs-gray-400);
  text-align: center;
}
.message {
  display: block !important;
}
.message, .message.server {
  text-align: left !important;
}
.message.server {
  margin-top: 0.8rem;
}
.message.game {
  margin-top: 0.8rem;
}
.message.points {
  display: inline-block !important;
  margin-right: 0.4rem;
}
.message.system {
  text-align: center !important;
  margin-top: 1.8rem;
}
.message.start {
  text-align: center !important;
  margin-top: 1rem;
}
.overflow-scroll {
  scroll-behavior: smooth;
}

.result-scores::before {
  content: "(";
}
.result-scores::after {
  content: ")";
}
.result-scores .text:last-child::after {
  content: "";
}
.result-scores .text::after {
  content: ", ";
}