.multiplayer-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  background: #624496;
  border: 1px solid #a58abf;
  border-radius: 10px;
  color: #fff3d4;
  font-weight: 800;
  font-size: 12px;
}
.multiplayer-button svg {
  width: 18px;
  height: 18px;
}
.race-invitation {
  position: absolute;
  top: 105px;
  right: 24px;
  z-index: 65;
  width: min(350px, calc(100vw - 32px));
  max-height: calc(100vh - 125px);
  overflow: auto;
  padding: 20px;
  background: #302044f5;
  color: #fff3d4;
  border: 2px solid #aa8bcc;
  border-radius: 16px;
  box-shadow: 0 8px 28px #10092060;
  pointer-events: auto;
}
.race-invitation h3 {
  margin: 12px 0 8px;
  font-size: 18px;
  overflow-wrap: anywhere;
}
.race-invitation p {
  line-height: 1.6;
  font-size: 13px;
}
.race-invitation small {
  display: block;
  margin-top: 12px;
  color: #d2badf;
  line-height: 1.5;
}
.race-invitation .button-pair {
  margin-top: 14px;
}
.online-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 20px 0;
}
.online-options label,
.join-lobby label {
  display: grid;
  gap: 8px;
  font-size: 12px;
  color: #d7c2eb;
}
.online-options select,
.join-lobby input {
  width: 100%;
  background: #281941;
  color: #fff1d4;
  border: 1px solid #816496;
  border-radius: 8px;
  padding: 12px;
  font: inherit;
}
.join-lobby {
  display: flex;
  align-items: end;
  gap: 12px;
  margin-top: 25px;
}
.join-lobby label {
  flex: 1;
}
.join-lobby input {
  text-transform: uppercase;
  letter-spacing: 3px;
}
.lobby-code {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #362151;
  padding: 18px;
  border: 1px solid #806196;
  border-radius: 12px;
}
.lobby-code small {
  font-size: 10px;
  max-width: 70px;
  color: #cfb8dc;
}
.lobby-code b {
  font-size: 28px;
  letter-spacing: 4px;
  color: #ffda62;
}
.online-roster {
  display: grid;
  gap: 7px;
  margin: 15px 0;
}
.online-roster > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #40285d;
  border-radius: 8px;
}
.online-roster b {
  flex: 1;
}
.online-roster span {
  font-size: 10px;
  color: #d2badf;
}
.online-roster strong {
  font-size: 12px;
  color: #ffda62;
}
.search-countdown {
  display: flex;
  align-items: center;
  gap: 22px;
  background: #4a3267;
  border: 1px solid #a18aba;
  padding: 22px;
  border-radius: 14px;
  margin: 20px 0;
}
.search-countdown strong {
  font-size: 52px;
  color: #ffda62;
}
.search-countdown span {
  font-size: 12px;
  line-height: 1.7;
}
.build-tag {
  color: #f0dfc9 !important;
  background: #2d1e42c9;
  padding: 7px 10px;
  border-radius: 7px;
}
@media (max-width: 1000px) {
  .online-options {
    grid-template-columns: 1fr;
  }
  .lobby-code {
    flex-wrap: wrap;
  }
}
.topbar nav .multiplayer-button span {
  display: inline;
}
.topbar nav .multiplayer-button {
  background: #70449c;
  border-color: #c7a2e9;
  flex-shrink: 0;
}
.topbar {
  flex-wrap: wrap;
}
.topbar nav {
  flex-shrink: 0;
  backdrop-filter: none;
}
.topbar .logo {
  flex-shrink: 0;
}
.leave-online-race {
  background: #713958;
  color: #fff3d4;
  border: 2px solid #e19abc;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 800;
}
.arcade-friends {
  margin: 22px 0;
  border-top: 1px solid #a58abf55;
  padding-top: 16px;
}
.friends-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.arcade-friends p {
  font-size: 13px;
  line-height: 1.6;
}
.friend-list {
  max-height: 230px;
  overflow-y: auto;
  margin-top: 14px;
  display: grid;
  gap: 8px;
}
.friend-list > div {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #40285d;
  padding: 10px;
  border-radius: 8px;
}
.friend-list b {
  flex: 1;
  overflow-wrap: anywhere;
  min-width: 0;
}
.friend-list span {
  font-size: 11px;
  color: #d2badf;
}
.friend-list button,
.friends-heading button {
  padding: 9px 12px;
  font-size: 11px;
}
.lobby-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: #ffda62;
}
.lobby-heading span {
  color: #d2badf;
  font-size: 12px;
}
@media (max-width: 1050px) {
  .topbar .wordmark {
    display: none;
  }
  .topbar nav button span,
  .topbar nav kbd {
    display: none;
  }
  .topbar nav .multiplayer-button span {
    display: inline;
  }
  .topbar nav {
    gap: 4px;
  }
}
@media (max-width: 600px) {
  .topbar {
    gap: 6px;
    padding: 10px;
  }
  .topbar .brand-mark {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }
  .topbar .top-right {
    width: 100%;
    justify-content: flex-end;
  }
  .friend-list > div {
    flex-wrap: wrap;
  }
}
.friend-search-form {
  margin: 18px 0 8px;
}
.friend-search-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}
.friend-search-form > div {
  display: flex;
  gap: 10px;
}
.friend-search-form input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 1px solid #aa85cb;
  border-radius: 9px;
  padding: 11px 12px;
  color: #fff8ea;
  background: #25163e;
  font: inherit;
}
.friend-search-form input::placeholder {
  color: #c9bad9;
}
.friend-search-form button {
  padding: 10px 16px;
}
.arcade-friends h4 {
  margin: 20px 0 8px;
  color: #ffe4a1;
  font-size: 14px;
}
.friend-count {
  display: inline-block;
  min-width: 22px;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 20px;
  background: #694598;
  color: #fff8ea;
  font-size: 11px;
  text-align: center;
}
.friend-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.friend-row-actions button {
  padding: 9px 12px;
  font-size: 11px;
}
.friend-action-status:empty {
  display: none;
}
.friend-action-status {
  color: #ffdf8d;
}
.multiplayer-invites {
  margin-top: 24px;
  border-top: 1px solid #a58abf55;
  padding-top: 16px;
}
.multiplayer-invites > p,
.inline-race-invite p {
  font-size: 12px;
  line-height: 1.5;
  color: #dbc8ec;
}
.inline-race-invite {
  margin: 10px 0;
  padding: 12px;
  background: #40285d;
  border: 1px solid #a58abf66;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.inline-race-invite > div:first-child {
  flex: 1;
  min-width: 170px;
}
@media (max-width: 600px) {
  .friend-search-form > div {
    flex-wrap: wrap;
  }
  .friend-search-form input {
    flex-basis: 100%;
  }
  .friend-search-form button {
    width: 100%;
  }
}