/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

:root {
  /* nighmare bifore krissmas */
  /* Lobby & Game */
  /* --------------- */
  /* In game */
  /* Night */
  --dark-bg: hsl(0, 0%, 13%);
  --light-fg: hsl(0, 0%, 100%);
  /* Day */
  --light-bg: hsl(0, 0%, 100%);
  --dark-fg: hsl(0, 0%, 0%);
  --mission-grey: hsl(0, 0%, 95%);
  /* Lobby player slots */
  /* --slot-empty: hsl(0, 0%, 95%); */
  --dark-fg-opaque: rgba(0, 0 ,0, 0.75);
  --dark-fg-hidden: rgba(0, 0 ,0, 0);
  --slot-empty: rgba(38, 38, 38, 1);
  /* --slot-joined: hsl(0, 0%, 82%); */
  --slot-joined: rgba(110, 110, 110, 1);
  --slot-joined-other: rgba(110, 110, 110, 1);
  --slot-border-other: rgba(110, 110, 110, 0);
  --slot-border-joined: rgba(200, 200, 200, 1);
  --slot-border-empty: rgba(38, 38, 38, 0);
  /* Not ready and ready */
  --ready-fg: hsl(100, 100%, 100%);
  --ready-bg: hsl(150, 70%, 35%);
  --not-ready-fg: hsl(0, 0%, 0%);
  --not-ready-bg: hsl(0, 100%, 65%);
  /* Role tags */
  /* Good */
  --good-fg: var(--dark-fg);
  --good-bg: hsl(108, 100%, 85%);
  --good-bg-mission: hsl(108, 100%, 93%);
  --good-fg-selected: var(--light-fg);
  --good-bg-selected: hsl(108, 100%, 25%);

  /* Evil */
  --evil-fg: var(--dark-fg);
  --evil-bg: hsl(360, 100%, 85%);
  --evil-bg-mission: hsl(360, 100%, 93%);
  --evil-fg-selected: var(--light-fg);
  --evil-bg-selected: hsl(360, 100%, 50%);

  /* Neutral */
  --neutral-fg: var(--dark-fg);
  --neutral-bg: hsl(0, 0%, 83%);
  --neutral-bg-mission: hsl(0, 0%, 93%);
  --neutral-fg-selected: var(--light-fg);
  --neutral-bg-selected: hsl(0, 0%, 15%);

  /* Game settings */
  --game-setting: hsl(0, 0%, 75%);
  --game-setting-clicked: hsl(280, 100%, 60%);
  --game-setting-focus: hsl(280, 100%, 40%);
  --game-setting-active: hsl(280, 100%, 40%);
  --main-shadow: hsl(320, 49%, 17%);
  --main-highlight: hsl(320, 49%, 35%);
}
#lobby-without-logo {
  display: none;
  margin-top: 0;
}
.lobby-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
}
.no-select {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
#adjusted-close {
  margin-right: 0;
  margin-top: -0.75rem;
  margin-left: -0.75rem;
}
.no-gap {
  gap: 0 !important;
}
.no-margin {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.lobby-rolecard-container {
  display: none;
  background-color: var(--light-bg);
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1;
          animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1;
  padding: 1.5em 0.2em 1.5em 0.2em;
  border-radius: 1rem;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  min-width: 21rem;
  max-width: 21rem;
}
.lobby-rolecard-container-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--dark-fg);
  margin-bottom: 1.5rem;
  z-index: 1;
}
.lobby-rolecards-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}
.lobby-rolecard-team-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0.5em;
  gap: 0.5rem;
}
.lobby-rolecard-team-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dark-fg);
}
@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
#adjusted-close-2 {
  margin-right: 0;
  margin-top: -2rem;
  margin-bottom: 1rem;
}
@-webkit-keyframes fly-in {
  0% {
    -webkit-transform: rotate(50deg) translateX(500px) translateY(0);
            transform: rotate(50deg) translateX(500px) translateY(0);
  }
  100% {
    -webkit-transform: rotate(0) translateX(0) translateY(0) opacity(1);
            transform: rotate(0) translateX(0) translateY(0) opacity(1)
  }
}
@keyframes fly-in {
  0% {
    -webkit-transform: rotate(50deg) translateX(500px) translateY(0);
            transform: rotate(50deg) translateX(500px) translateY(0);
  }
  100% {
    -webkit-transform: rotate(0) translateX(0) translateY(0) opacity(1);
            transform: rotate(0) translateX(0) translateY(0) opacity(1)
  }
}
.lobby-rolecard-display-container {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: none;
  position: fixed;
  text-align: center;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
-webkit-animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1, fly-in 0.45s 1;
      animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1, fly-in 0.45s 1;
-webkit-animation-timing-function: cubic-bezier(0.01,0.66,0.05,1);
      animation-timing-function: cubic-bezier(0.01,0.66,0.05,1);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: var(--light-bg);
  padding: 3em 1em 3em 1em;
  border-radius: 1rem;
  min-width: 17.5rem;
  max-width: 17.5rem;
  z-index: 5;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
.lobby-rolecard-display-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
.lobby-rolecard-display-role {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s 1;
          animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s 1;
  font-size: 3rem;
  font-weight: 700;
}
.lobby-rolecard-display-description {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--dark-fg);
  font-size: 0.8765rem;
  font-weight: 400;
}
.lobby-rolecard-display-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s 1;
          animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s 1;
  width: 12.5rem;
  height: 14.786rem;
  padding: 0.15em;
  margin: 1rem;
  border-radius: 1rem;
}
.lobby-rolecard-display-mission {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--dark-fg);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.75rem 1rem 0.75rem 1rem;
  border-radius: 0.75rem;
  line-height: 1.15;
  vertical-align: center;
}
.lobby-rolecard-team-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0.15rem;
}
.lobby-rolecard {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0.5em 0.25em 0.5em 0.25em; 
  border-radius: 0.5rem;
  gap: 0.5rem;
  background-color: hsl(0, 0%, 97%);
  -webkit-transition: background-color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: background-color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: background-color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.lobby-rolecard:hover {
  background-color: hsl(0, 0%, 90%);
  -webkit-transition: background-color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: background-color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: background-color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.lobby-rolecard:active {
  background-color: hsl(0, 0%, 80%);
  -webkit-transition: background-color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: background-color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: background-color 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.lobby-rolecard-role {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dark-fg);
}
.lobby-rolecard-image {
  width: 3.15rem;
  height: 3.75rem;
  border-radius: 0.5rem;
  background-color: var(--light-bg);
  -webkit-box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.12);
          box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.12);
}
.lobby-notification {
  position: fixed;
  display: none;
  bottom: 5vh;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1rem;
  -webkit-animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1;
          animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1;
  font-weight: 500;
  padding: 1em;
  border-radius: 10rem;
  color: var(--light-fg);
  background-color: rgba(0, 0 ,0, 0.90);
  vertical-align: center;
  line-height: 1;
  backdrop-filter: blur(0.25rem);
  -webkit-backdrop-filter: blur(0.25rem);
  -webkit-box-shadow: 0 0.5rem 1rem var(--main-shadow);
          box-shadow: 0 0.5rem 1rem var(--main-shadow);
}
#overlay-rolecardinfo {
  z-index: 2;
}
.overlay {
  position: fixed;
  display: none;
  background-color: rgba(0, 0, 0, 0.35);
  -webkit-animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1;
          animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(0.25rem);
  -webkit-backdrop-filter: blur(0.25rem);
}
.info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.info-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  width: 1.35rem;
  height: 1.35rem;
  vertical-align: middle;
  border-radius: 0.5rem;
  padding: 0.25em;
  margin-left: 0.25rem;
  -webkit-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
/* Kick panel */
.lobby-kickpanel-icon {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  display: none;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
  border-radius: 0.5rem;
  padding: 0.25em;
  margin-right: -0.5rem;
  -webkit-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.lobby-kickpanel-icon:hover {
  background-color: hsl(0, 0%, 20%);
  margin-right: -0.5rem;
}
.lobby-kickpanel-icon:active {
  background-color: hsl(0, 0%, 15%);
  margin-right: -0.5rem;
}
/* Game settings */
input[type="number"] {
  background-color: var(--light-fg);
  font-family: "League Spartan", sans-serif;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0.5rem 0 0 0;
  padding: 0.5em;
  outline: none;
  border-radius: 0.5rem;
  border: 2px solid #b1b1b1;
  width: 7rem;
}
input[type="number"]:focus {
  cursor: pointer;
  outline: none;
  border: 2px solid var(--dark-fg);
}
input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
    opacity: 1;
    margin-left: 0;
}
#checkbox-check {
  opacity: 0%;
  width: 1rem;
  height: 1rem;
}
.lobby-gamesettings-checkbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  vertical-align: center;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.45rem;
  outline: 2px solid var(--dark-fg);
}
.lobby-gamesettings-radiobuttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  margin-top: 1rem;
  gap: 1rem;
}
.lobby-gamesettings-radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}
.lobby-gamesettings-radio-button-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  vertical-align: center;
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 1rem;
  outline: 1.75px solid var(--dark-fg);
}
.lobby-gamesettings-radio-button-container:focus {
  outline: 1.75px solid var(--game-setting-focus);
}
.lobby-gamesettings-radio-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  vertical-align: center;
  cursor: pointer;
  width: 1rem;
  height: 1rem;
  border-radius: 1rem;
  background-color: var(--game-setting-hover);
}
.lobby-gamesettings-radio-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  vertical-align: center;
  display: inline;
  color: var(--dark-fg);
  font-size: 0.75rem;
  font-weight: 400;
}
#adjusted-close3 {
  margin-right: 0;
  margin-top: -1.5rem;
  margin-left: -0.75rem;
}
.lobby-gamesettings-container {
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: var(--light-bg);
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1;
          animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1;
  padding: 2em 0.2em 2em 0.2em;
  border-radius: 1rem;
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  min-width: 21rem;
  max-width: 21rem;
}
.lobby-gamesettings-buttons {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-size: 1.25rem;
  font-weight: 600;
  gap: 1rem;
  margin-top: 1.5rem;
}
.lobby-gamesettings-resetbutton {
  color: var(--dark-fg);
  background-color: hsl(0, 100%, 80%);
  border-radius: 0.6rem;
  padding: 0.6em 1em 0.6em 1em;
  -webkit-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.lobby-gamesettings-resetbutton:hover {
  background-color: hsl(0, 100%, 70%);
}
.lobby-gamesettings-resetbutton:active {
  background-color: hsl(0, 100%, 65%);
}
.lobby-gamesettings-donebutton {
  color: var(--dark-fg);
  background-color: hsl(0, 0%, 80%);
  border-radius: 0.6rem;
  padding: 0.6em 1em 0.6em 1em;
  -webkit-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.lobby-gamesettings-donebutton:hover {
  background-color: hsl(0, 0%, 70%);
}
.lobby-gamesettings-donebutton:active {
  background-color: hsl(0, 0%, 65%);
}
.lobby-gamesettings-help {
  opacity: 0%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  font-weight: 400;
  font-size: 1rem;
  color: var(--dark-fg);
  margin: 0.3em 1em 0.3em 1em;
  min-height: 0.5rem;
  max-height: 0.5rem;
}
.lobby-gamesettings-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--dark-fg);
  font-size: 1.75rem;
  font-weight: 650;
  margin-bottom: 0.5rem;
}
.lobby-gamesettings-durations {
  padding: 1em;
  border-radius: 0.75rem;
  margin-top: 0.35rem;
  border: 2px dashed var(--dark-fg);
  min-width: 17.5rem;
  max-width: 17.5rem;
}
.lobby-gamesettings-messages {
  padding: 1em;
  border-radius: 0.75rem;
  border: 2px dashed var(--dark-fg);
  min-width: 17.5rem;
  max-width: 17.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
#durations-title {
  margin-bottom: 0.5rem !important;
}
.lobby-gamesettings-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--dark-fg);
  font-size: 1.25rem;
  font-weight: 550;
  margin-bottom: 1rem;
}
.lobby-gamesettings-subtitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--dark-fg);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
.lobby-gamesettings-setting {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 1rem;
}
.lobby-gamesettings-spacebetween {
  -webkit-box-pack: justify !important;
      -ms-flex-pack: justify !important;
          justify-content: space-between !important;
  gap: 0 !important;
}
.lobby-gamesettings-flexstart {
  -webkit-box-pack: start !important;
      -ms-flex-pack: start !important;
          justify-content: flex-start !important;
  width: 100%;
  margin: 0 0 0.5rem 0.75rem !important
}
.lobby-gamesettings-gap {
  gap: 2.85rem !important;
}
.lobby-gamesettings-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
  gap: 0.25rem;
}
.lobby-gamesettings-setting-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  vertical-align: center;
  color: var(--dark-fg);
  font-size: 1rem;
  font-weight: 500;
}
.lobby-gamesettings-icon {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  display: none;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
  border-radius: 0.5rem;
  padding: 0.25em;
  margin-right: -0.5rem;
  -webkit-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  -o-transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.lobby-gamesettings-icon:hover {
  background-color: hsl(0, 0%, 20%);
  margin-right: -0.5rem;
}
.lobby-gamesettings-icon:active {
  background-color: hsl(0, 0%, 25%);
  margin-right: -0.5rem;
}
.info-button:hover {
  background-color: hsl(0, 0%, 20%);
}
.info-button:active {
  background-color: hsl(0, 0%, 25%);
}
#copy-button {
  display: "inline";
  margin-left: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
}
#check-circle-icon {
  display: none;
  margin-left: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
}
.role-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 1rem;
  padding: 1em;
  background-color: var(--light-bg);
}
.lobby {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 1rem 0 1rem;
}
.dummy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding: 1rem;
}
.logo-link-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.lobby-code-container {
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
#roomcode-copy {
  vertical-align: middle;
  margin-top: 0.15rem;
}
.lobby-code {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  color: var(--light-fg);
  background-color: var(--dark-fg-opaque);
  -webkit-animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1;
          animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  padding: 0.35em;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
  border: 2px solid var(--light-fg);
  backdrop-filter: blur(3rem);
  -webkit-backdrop-filter: blur(3rem);
}
#copy-code {
  -webkit-transition: background-color 0.3s ease-out;
  -o-transition: background-color 0.3s ease-out;
  transition: background-color 0.3s ease-out;
}
#role-tip {
  margin-top: 0.25rem;
  padding: 0.25em;
}
.lobby-help {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  color: var(--light-fg);
  font-size: 1rem;
  max-width: 19rem;
  line-height: 1;
}
.lobby-card-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}
#role-card {
  margin-bottom: 0.75rem;
}
.lobby-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: var(--dark-fg-opaque);
  -webkit-animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1;
          animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  padding: 0.9em 1em 0.9em 1em;
  border-radius: 0.5em;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  min-width: 19.5rem;
  max-width: 19.5rem;
  border: 2px solid var(--dark-fg-hidden);
  -webkit-box-shadow: 0 0.5rem 1rem var(--main-shadow);
          box-shadow: 0 0.5rem 1rem var(--main-shadow);
  backdrop-filter: blur(3rem);
  -webkit-backdrop-filter: blur(3rem);
}
.lobby-card-title-container {
  display: block;
  width: 100%;
}
.lobby-card-title-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.align-baseline {
  -webkit-box-align: baseline !important;
      -ms-flex-align: baseline !important;
          align-items: baseline !important;
}
.lobby-card-title {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--light-fg);
  font-size: 1.4rem;
  font-weight: 600;
}
#role-req {
  margin-top: 0;
}
.lobby-req {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: var(--evil-bg);
  font-size: 1rem;
  margin-top: 0.25rem;
  min-height: 1.25rem;
  line-height: 1.35;
}
.lobby-icon-container {
  display: inline;
  min-height: 1.25rem;
}
.lobby-req-icon {
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
  margin-bottom: 0.15rem;
}
#player-container {
  margin-top: 0.25rem;
}
.lobby-player-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 0.25rem;
  min-height: 13rem;
  max-height: 13rem;
}
.lobby-player-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: 0.15rem;
  margin-right: 0.15rem;
}
#joined {
  background-color: var(--slot-joined-other);
}
.joined-host {
  background-color: var(--slot-joined) !important;
  border: 2px dashed var(--slot-border-joined) !important;
}
.joined-self {
  background-color: var(--slot-joined) !important;
  border: 2px solid var(--slot-border-joined) !important;
}
.joined-other {
  background-color: var(--slot-joined-other) !important;
  border: 2px solid var(--slot-border-other) !important;
}
.empty {
  background-color: var(--slot-empty) !important;
  border: 2px solid var(--slot-border-empty) !important;
}
.lobby-player-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  border-radius: 0.5em;
  background-color: var(--slot-empty);
  min-width: 9rem;
  max-width: 9rem;
  min-height: 1.25rem;
  max-height: 1.25rem;
  margin-bottom: 0.35rem;
  border: 2px solid var(--slot-border-empty);
  backdrop-filter: blur(3rem);
  -webkit-backdrop-filter: blur(3rem);
}
.lobby-player-id {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 6rem;
  max-width: 6rem;
  min-height: 0.35rem;
  max-height: 0.35rem;
}
.lobby-player {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--light-fg);
  border-radius: 0.5em;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  padding: 0.15rem;
  min-width: 6rem;
  max-width: 6rem;
  min-height: 0.35rem;
  max-height: 0.35rem;
}
#status-ready {
  visibility: visible;
  background-color: var(--ready-bg);
}
#status-notready {
  visibility: visible;
  background-color: var(--not-ready-bg);
}
.lobby-ready-status {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  visibility: hidden;
  color: var(--light-fg);
  font-weight: 500;
  text-align: center;
  padding: 0.175rem 0.25rem 0.175rem 0.25rem;
  border-radius: 0.45em;
  font-size: 0.55rem;
  margin-left: 0.25rem;
  width: 2.3rem;
  min-width: 2.3rem;
  max-width: 2.3rem;
}
.lobby-role-wrapper {
  opacity: 35%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 19.5rem;
  max-width: 19.5rem;
}
#good {
  margin-top: 0.5rem;
}
.lobby-role-container {
  display: block;
  margin-top: 1rem;
  width: 100%;
}
.selectable {
  opacity: 100%;
}
.lobby-role-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.lobby-role-title {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--light-fg);
  margin-bottom: 0.15rem;
}
/* Important */
.unpicked {
}
/* Role colors */
.good {
  color: var(--good-fg);
  background-color: var(--good-bg);
}
.good-selected {
  color: var(--good-fg-selected);
  background-color: var(--good-bg-selected);
  -webkit-box-shadow: 0 0 1rem var(--good-bg-selected);
          box-shadow: 0 0 1rem var(--good-bg-selected);
}
.good-selected-color {
  color: var(--good-bg-selected);
}
.evil {
  color: var(--evil-fg);
  background-color: var(--evil-bg);
}
.evil-selected {
  color: var(--evil-fg-selected);
  background-color: var(--evil-bg-selected);
  -webkit-box-shadow: 0 0 1rem var(--evil-bg-selected);
          box-shadow: 0 0 1rem var(--evil-bg-selected);
}
.evil-selected-color {
  color: var(--evil-bg-selected);
}
.neutral {
  color: var(--neutral-fg);
  background-color: var(--neutral-bg);
}
.neutral-selected {
  color: var(--neutral-fg-selected);
  background-color: var(--neutral-bg-selected);
  -webkit-box-shadow: 0 0 1rem hsl(0, 0%, 25%);
          box-shadow: 0 0 1rem hsl(0, 0%, 25%);
}
.neutral-selected-color {
  color: var(--neutral-bg-selected);
}
.lobby-role-tag {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 0.35rem 0.35rem 0.35rem 0.35rem;
  border-radius: 0.45em;
  font-size: 0.85rem;
  font-weight: 400;
  margin-top: 0.25rem;
  margin-right: 0.5rem;
  -webkit-transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 0.15s;
  -o-transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 0.15s;
  transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 0.15s;
}
.lobby-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  vertical-align: center;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 500;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem 0.75rem 1rem;
  min-width: 4.5rem;
}
.lobby-button-container {
  display: none;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1;
          animation: fadeIn cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s 1;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  width: 75%;
  max-width: 19rem;
  margin-bottom: 1rem;
}
.ready {
  color: var(--ready-fg);
  background-color: var(--ready-bg);
}
.not-ready {
  color: var(--not-ready-fg);
  background-color: var(--not-ready-bg);
}
.start {
  cursor: not-allowed;
  opacity: 35%;
  color: var(--ready-fg);
  background-color: var(--ready-bg);
}
@media screen and (max-width: 600px) {
  .lobby-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0.9em 1em 0.9em 1em;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    border-radius: 0.5em;
    min-width: 19.5rem;
    max-width: 19.5rem;
    -webkit-box-shadow: 0 0.5rem 1rem var(--main-shadow);
            box-shadow: 0 0.5rem 1rem var(--main-shadow);
  }
}