/*
  Local Google Fonts
  From: https://google-webfonts-helper.herokuapp.com/
*/

/* source-sans-pro-300 - latin_greek_cyrillic */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 300;
  src:
    local(""),
    url("/public/webfonts/source-sans-pro-v14-latin_greek_cyrillic-300.woff2")
      format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("/public/webfonts/source-sans-pro-v14-latin_greek_cyrillic-300.woff")
      format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-300italic - latin_greek_cyrillic */
@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
  font-weight: 300;
  src:
    local(""),
    url("/public/webfonts/source-sans-pro-v14-latin_greek_cyrillic-300italic.woff2")
      format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("/public/webfonts/source-sans-pro-v14-latin_greek_cyrillic-300italic.woff")
      format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-italic - latin_greek_cyrillic */
@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
  font-weight: 400;
  src:
    local(""),
    url("/public/webfonts/source-sans-pro-v14-latin_greek_cyrillic-italic.woff2")
      format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("/public/webfonts/source-sans-pro-v14-latin_greek_cyrillic-italic.woff")
      format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* source-sans-pro-regular - latin_greek_cyrillic */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  src:
    local(""),
    url("/public/webfonts/source-sans-pro-v14-latin_greek_cyrillic-regular.woff2")
      format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("/public/webfonts/source-sans-pro-v14-latin_greek_cyrillic-regular.woff")
      format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*
  Font Awesome 5 fixes
*/

input[type="checkbox"] + label:before,
input[type="radio"] + label:before,
.icon:before,
#navButton .toggle:before {
  font-family: "Font Awesome 5 Free";
}

/*
  Alpha edits
*/

#header a {
  cursor: pointer;
}

#header a.disabled {
  cursor: not-allowed;
}

.button {
  /* Disable the ugly black border that appears when we click on a button */
  outline: none;
}

.button.icon {
  /* Center the button around the icon and the text, instead of just the text */
  padding-right: 1.35em;
}

.row {
  border-bottom: 0;
}

a {
  /* The default link style is a dotted bottom border, which is quite ugly */
  border-bottom: 0;
  text-decoration: underline;
  color: blue;
}

.name-me {
  color: var(--color-name-me);
}

.friend {
  color: var(--color-friend);
}

/* Sets fill color of the select arrow to #777 */
select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23777777' /%3E%3C/svg%3E");
}

/*
  Light-mode palette custom properties.
  Dark-mode overrides live in "dark.css" (scoped to "html[data-theme=dark]"); the canvas palette
  in "packages/client/src/theme.ts" reads these variables so that both CSS and the Konva canvas
  share a single source of truth for the colors.
*/
:root {
  --body-bg: #00420f;

  --canvas-action-log-number: #d3d3d3;
  --canvas-current-player-text: #ffffcc;
  --canvas-replay-shuttle: #d1d1d1;
  --canvas-surface-area: #b3b3b3;
  --canvas-loading-label-stroke: #747278;

  /* Shared component colors */
  --color-text-on-accent: #fff;
  --color-name-me: #e69500;
  --color-friend: hotpink;

  /* Lobby table row variants (light-mode values) */
  --lobby-table-joined: #f2f2ff;
  --lobby-table-joined-hover: #e0e0ff;
  --lobby-table-unstarted: #fffff0;
  --lobby-table-unstarted-hover: #ffffe1;
  --lobby-table-unstarted-password: #ffeaea;
  --lobby-table-unstarted-password-hover: #ffd5d5;
  --lobby-table-started: #e6ffee;
  --lobby-table-started-hover: #cdffdd;
  --lobby-table-replay: #fff0ff;
  --lobby-table-replay-hover: #ffe1ff;

  /* Login alert (error box; based on the Bootstrap alert color) */
  --login-alert-bg: #f2dede;
  --login-alert-border: #ebccd1;
  --login-alert-text: #a94442;

  --note-input-bg: #f8f8f8;
  --note-input-border: #e5e5e5;
  --note-input-border-focus: #e89980;
}

/*
  Common
*/

html,
body,
#page-wrapper {
  height: 100%;
}

body {
  background-color: var(--body-bg);
  background-image: url(../img/dark-wood.png);
  background-repeat: repeat;
  background-attachment: fixed;
}

table td {
  /* In Chrome, middle is default, but in Firefox, bottom is default */
  vertical-align: middle;
}

/*
  The "align-center" class will do horizontal centering (in "alpha.css")
  The "align-center-v" class will do vertical centering
*/
.align-center-v {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden {
  display: none;
}

.margin0 {
  margin: 0 !important;
}

.margin3 {
  margin-bottom: 3em;
}

.padding0 {
  padding: 0 !important;
}

.padding0p5 {
  padding-bottom: 0.5em;
}

.padding0p75 {
  padding-bottom: 0.75em;
}

.padding-top1 {
  padding-top: 1em !important;
}

.padding-top1p5 {
  padding-top: 1.5em !important;
}

.padding-right1 {
  padding-right: 1em;
}

.slim-table {
  margin-bottom: 0.5em;
}

.slim-table td {
  padding: 0.25em 0.25em; /* vanilla is 0.75em 0.75em */
}

/* For text input labels */
.input-text {
  position: relative;
  top: 0.75em;
}

/* For text input labels with 2 lines */
.input-text2 {
  position: relative;
  top: 0.25em;
}

/* For checkbox labels */
.label-text {
  position: relative;
  top: 0.25em;
}

/*
  For inserting elements without changing the surrounding formatting
  https://stackoverflow.com/questions/6040005/relatively-position-an-element-without-it-taking-up-space-in-document-flow
*/
.relative-container {
  position: relative;
  width: 0;
  height: 0;
}

/*
  Title
*/

#title-text {
  color: white;
  position: relative;
  top: 0.1em;
}

#title-sub {
  color: #f2f2f2 !important;
}

#title-sub strong {
  color: white !important;
}

.login-icon {
  position: relative;
  top: 0.275em;
  right: 0.5em;
}

#login-ajax {
  height: 3em;
}

/* Based on the Bootstrap alert color */
#login-alert {
  color: var(--login-alert-text);
  background-color: var(--login-alert-bg);
  border-color: var(--login-alert-border);
  padding: 15px;
  margin-bottom: 1em;
  border: 1px solid transparent;
  border-radius: 4px;
}

.login-text {
  color: #f2f2f2;
  text-align: center;
}

.login-header {
  margin-top: 4em;
}

#main-login,
#main-tutorial {
  padding: 4em 0;
}

#main-login > header,
#main-tutorial > header {
  text-align: center;
  margin: 0 0 3em 0;
}

#main-login > header h2,
#main-tutorial > header h2 {
  font-size: 2.75em;
  margin: 0;
}

#main-login > header p,
#main-tutorial > header p {
  border-top: solid 2px #e5e5e5;
  color: #777;
  display: inline-block;
  font-style: normal;
  margin: 0;
  padding: 1em 0 1.25em 0;
}

@media screen and (max-width: 980px) {
  #main-login,
  #main-tutorial {
    padding: 0.5em 0;
  }
  #main-login > header,
  #main-tutorial > header {
    text-align: center;
    margin: 0 0 1em 0;
  }
  .login-header {
    margin-top: 1em;
  }
}
@media screen and (max-width: 640px) {
  .row > .login-box {
    width: 90% !important;
    margin-left: 5% !important;
  }
}

.login-logo {
  min-width: 180px;
  max-width: 306px;
  width: 30%;
}

#title-discord {
  width: 5em;
}

/*
  Nav (the top bar)
*/
.nav-icon {
  position: relative;
  top: 0.05em;
  margin-right: 0.3em;
}

.nav-hotkey-indicator {
  border-bottom: 1px solid #999;
}

.help-button {
  background-color: rgb(68, 150, 68) !important;
}

.help-button:hover {
  background-color: #84c884 !important;
}

/*
  Lobby
*/

#lobby {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  /* Left and right margins are handled on the rows in "alpha.css" */
  height: calc(100% - 3em); /* The header is 3em */
}

#lobby > div > div {
  height: 100%;
}

#lobby > div > div > section {
  padding: 1.5em;
  margin-bottom: 0;
  height: 100%;
}

.lobby-half {
  height: calc((100% - 1.5em) / 2);
}

#lobby-separator {
  height: 1.5em;
}

.lobby-full {
  height: 100%;
}

.lobby-table-container {
  overflow-y: auto;
  height: 100%;
}

.lobby-button-icon {
  font-size: 1.5em;
  position: relative;
  top: 0.22em;
}

.lobby-title {
  /* We want to make h3 elements a bit smaller */
  font-size: 1.3em;
}

/*
  Row overlay div
*/
.overlay {
  display: none;
  position: absolute;
  z-index: 999;
  opacity: 0.1;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  background-color: black;
}

/*
  The list of ongoing tables / games
*/

#lobby-games-table {
  margin-bottom: 0;
}

.lobby-games-table-joined {
  background-color: var(--lobby-table-joined) !important;
}
.lobby-games-table-unstarted {
  background-color: var(--lobby-table-unstarted) !important;
}
.lobby-games-table-unstarted-password {
  background-color: var(--lobby-table-unstarted-password) !important;
}
.lobby-games-table-started {
  background-color: var(--lobby-table-started) !important;
}
.lobby-games-table-replay {
  background-color: var(--lobby-table-replay) !important;
}

.lobby-games-table-joined:hover {
  background-color: var(--lobby-table-joined-hover) !important;
}
.lobby-games-table-joined:hover {
  /* rejoin */
  cursor:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='23.713' height='23.713' viewBox='0 0 6.274 6.274'><g stroke='%232e3436' stroke-linecap='round' stroke-linejoin='round' stroke-width='.1' transform='translate(-88.655 -55.22)'><circle cx='91.792' cy='58.356' r='3.087' fill='%23e6cf04'/><path fill='%23fff' d='m93.809 58.356-1.583.914-1.583.913v-3.655l1.583.914z'/></g></svg>")
      12 12,
    pointer;
}
.lobby-games-table-unstarted:hover {
  background-color: var(--lobby-table-unstarted-hover) !important;
}
.lobby-games-table-unstarted-password:hover {
  background-color: var(--lobby-table-unstarted-password-hover) !important;
}
.lobby-games-table-unstarted:hover,
.lobby-games-table-unstarted-password:hover {
  /* join */
  cursor:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='23.096' height='18.894' viewBox='0 0 6.111 4.999'><g fill='%23aad400' stroke='%23000' stroke-linejoin='round' stroke-width='.1'><path d='M.051 1.628H1.91V.06l2.444 2.444L1.91 4.949V3.382H.05z'/><path d='M3.863.05h1.52c.314 0 .678.34.678.654v3.31c0 .33-.347.724-.678.724h-1.52v-.725h1.52V.703h-1.52z'/></g></svg>")
      12 10,
    pointer;
}
.lobby-games-table-unstarted.full:hover,
.lobby-games-table-unstarted-password.full:hover {
  /* full */
  cursor:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='23.713' height='23.713' viewBox='0 0 6.274 6.274'><g stroke='%23000' stroke-linecap='round' stroke-width='.1' transform='translate(-105.376 -101.255)'><circle cx='108.513' cy='104.392' r='2.778' fill='%23fff'/><path fill='%238b0000' d='M108.513 101.305a3.087 3.087 0 0 0-3.087 3.087 3.087 3.087 0 0 0 3.087 3.087 3.087 3.087 0 0 0 3.087-3.087 3.087 3.087 0 0 0-3.087-3.087zm0 .644a2.443 2.443 0 0 1 2.443 2.443 2.443 2.443 0 0 1-.428 1.381l-3.581-3.256a2.443 2.443 0 0 1 1.566-.568zm-2.015 1.061 3.582 3.256a2.443 2.443 0 0 1-1.567.57 2.443 2.443 0 0 1-2.444-2.444 2.443 2.443 0 0 1 .43-1.382z'/></g></svg>")
      12 12,
    pointer;
}
.lobby-games-table-started:hover {
  background-color: var(--lobby-table-started-hover) !important;
}
.lobby-games-table-replay:hover {
  background-color: var(--lobby-table-replay-hover) !important;
}
.lobby-games-table-started,
.lobby-games-table-replay,
.lobby-games-table-unstarted .lobbySpectators,
.lobby-games-table-unstarted-password .lobbySpectators {
  /* eyes */
  cursor:
    url("data:image/svg+xml;utf8,<svg width='28.343' height='25.001' viewBox='0 0 7.499 6.615' xmlns='http://www.w3.org/2000/svg'><g stroke-dasharray='.265 .265' stroke-width='.265'><g offset='50%' transform='translate(-10.083 -12.47) scale(.17804)'><rect x='56.63' y='70.043' width='21.116' height='37.155' rx='11' ry='11'/><rect x='59.258' y='72.769' width='15.881' height='31.881' rx='8' ry='8' fill='%23fff'/><circle cx='65.925' cy='92.591' r='6.667' fill='%23060'/><circle cx='67.821' cy='90.635' r='2.044' fill='%23fff'/></g><g transform='translate(-6.343 -12.47) scale(.17804)'><rect x='56.63' y='70.043' width='21.116' height='37.155' rx='11' ry='11'/><rect x='59.258' y='72.769' width='15.881' height='31.881' rx='8' ry='8' fill='%23fff'/><circle cx='65.925' cy='92.591' r='6.667' fill='%23060'/><circle cx='67.821' cy='90.635' r='2.044' fill='%23fff'/></g></g></svg>")
      14 12,
    pointer;
}
.lobby-pregame-players .shadow:hover,
#lobby-games-table-tbody .shadow:hover {
  /* detective */
  cursor:
    url("data:image/svg+xml;utf8,<svg width='23.713' height='23.713' viewBox='0 0 23.713 23.713' xmlns='http://www.w3.org/2000/svg'><text y='15'>🕵️</text></svg>")
      12 12,
    pointer;
  color: #3350cb;
}
.lobby-pregame-players .unShadow:hover {
  /* eyes */
  cursor:
    url("data:image/svg+xml;utf8,<svg width='23.713' height='23.713' viewBox='0 0 23.713 23.713' xmlns='http://www.w3.org/2000/svg'><text y='15'>👀</text></svg>")
      12 12,
    pointer;
  color: #3350cb;
}

/*
  Lobby chat
*/

.lobby-chat-text-box {
  overflow-y: auto;
  overflow-wrap: break-word;
  border-style: solid !important;
  border-color: #e5e5e5 !important;
  border: 1px;
  margin-bottom: 1em;
  padding: 0 0.5em 0 0.5em;
  height: calc(100% - 3.5em - 2.5em);
  /* (the height of the input box is 3.5em and the height of the "Lobby Chat" text is 2.5em) */
}

.chat-emote {
  height: 1.6em; /* This is derived from how Twitch does it */
}

.chat-input-container {
  position: relative;
}

.chat-input-container > input[type="text"] {
  padding-right: 2.5em;
}

.emoji-button {
  position: absolute;
  top: 50%;
  right: 1em;
  padding: 0;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #777;
}

.emoji-button:hover {
  color: #646464;
}

.emoji-button > .fas {
  font-size: 1.6em;
}

.istyping {
  font-size: 0.75em;
  position: relative;
  bottom: 0.3em;
}

/*
  User list
*/

#lobby-users-container {
  overflow-y: auto;
  height: calc(100% - 3em); /* The height of the "Online Users" text is 3em */
}

.lobby-users-box-container {
  padding-left: 1.5em !important;
}

#lobby-users-table-tbody a {
  text-decoration-skip-ink: none;
}

/*
  Pregame
*/

.lobby-pregame-container {
  height: 100%;
  display: flex;
}

.lobby-pregame-info {
  font-size: 0.85em;
  width: 200px;
  padding-right: 0.5em;
  overflow-y: auto;
}

.lobby-pregame-players {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 100%;
  height: 100%;
  overflow-y: auto;
  justify-content: flex-start;
}

.lobby-pregame-player {
  border: 1px solid black;
  border-radius: 5px;
  padding: 0.8em;
  flex: 1 1 160px;
  margin: 0 0.5em 0.5em 0;
  max-width: 300px;
  max-height: calc(100% - 0.5em);
  overflow-y: auto;
}

.lobby-pregame-player-away {
  margin-top: 1em;
  margin-bottom: 0;
}

#lobby-pregame-options,
#lobby-pregame-spectators {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#lobby-pregame-options-title {
  font-weight: 400;
}

.lobby-games-table-options li,
#lobby-pregame-options li {
  padding-left: 0;
  display: inline-block;
  margin-right: 0.5em;
}

.lobby-games-table-options {
  list-style-type: none;
  margin: 0;
}

.lobby-games-table-tooltip,
.lobby-pregame-tooltip {
  font-size: 0.75em;
  width: 8em;
}

.lobby-games-table-tooltip-icon,
.lobby-pregame-tooltip-icon {
  font-size: 0.75em;
}

.lobby-pregame-tooltip > div {
  /* Alpha sets this to -2em, so we have to reset it */
  margin-left: 0em;
  text-align: left;
}

.lobby-pregame-tooltip > div > div {
  padding-left: 0;
}

.lobby-pregame-col {
  width: 13.75%;
}

#lobby-chat-pregame-container {
  /* Make the pre-game chat padding match that of the user list */
  padding-left: 1.5em !important;
}

/*
  Create Game modal
*/
.create-game-icon {
  display: inline-block;
  width: 2em;
  text-align: center;
}

.create-game-info-icon {
  position: relative;
  top: 0.35em;
}

.create-game-text-label {
  /* Annoyingly, the text does not line up with the checkbox */
  position: relative;
  top: 0.25em;
}

#create-game-timed-row {
  min-height: 3em;
}

#create-game-timed-option-1,
#create-game-timed-option-3 {
  line-height: 1.2em;
}

#create-game-timed-label {
  /* We need to move the "Timed" label even more */
  position: relative;
  top: 0.75em;
}

#create-game-timed-container {
  /* We need to move this down so that it is centered with the input elements */
  position: relative;
  top: 0.5em;
}

#create-game-submit,
#change-variant-submit {
  font-size: 1em;
}

.question-mark:hover {
  color: #6666ff;
}

/* The default arrow on input lists */
input::-webkit-list-button, /* iOS */
input::-webkit-calendar-picker-indicator /* Chrome */ {
  /* This needs to be important since Chrome 91 */
  display: none !important;
}

#create-game-variant-dropdown2 {
  padding-right: 2.25em;
  float: left;
}

#create-game-variant-dropdown2-icon {
  position: relative;
  right: 1.8em;
  pointer-events: none; /* We want to "click through" this element */
}

#dice {
  color: green;
  position: relative;
  left: 0.2em;
}

#dice:hover {
  color: #00cc00;
  cursor: pointer;
}

/*
  Show History
*/

.lobby-history-table-tooltip-ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lobby-history-table-tooltip-ul > li {
  padding-left: 0.2em;
  margin-bottom: 0.3em;
}

.lobby-history-table-tooltip-ul > li:last-child {
  margin-bottom: 0;
}

/*
  Watch Specific Replay Dialog
*/
#replay-json {
  resize: none;
}

#replay-error-row-text {
  color: red;
}

.replay-radio-container {
  position: absolute;
}

.replay-radio {
  top: 0.6em;
}

.replay-radio-label {
  position: relative;
  top: 0.4em;
}

/*
  Settings
*/
#settings-modal {
  min-width: unset;
  max-width: 100vw;
  width: min(1100px, 90vw);
}

#settings-modal .settings-content {
  display: block;
  width: 100%;
  columns: 20em;
  column-gap: 2em;
}

#settings-modal .settings-content > div {
  break-inside: avoid;
}

#settings-modal h5 {
  font-weight: normal;
  font-size: 1.2em;
}

#settings-modal p {
  margin-bottom: 0.5em;
}

#settings-modal div p:last-child {
  margin-bottom: 2em;
}

.horizontal {
  margin: 0;
  padding: 0;
}

.horizontal > li {
  vertical-align: center;
  list-style-type: none;
  float: left;
  margin-right: 1em;
}

#settings-volume > li {
  height: 2.25em;
  line-height: 2.25em;
}

#settings-volume-slider {
  position: relative;
  bottom: 0.25em;
  width: 12.5em;
  height: 0.25em;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

/*
  Modals
*/

#page-cover {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  animation: pageCoverHide 0.4s forwards 1;
  align-items: center;
  justify-content: center;
}

#page-cover.show {
  animation: pageCoverShow 0.4s forwards 1;
}

@keyframes pageCoverHide {
  0% {
    background-color: rgba(0, 24, 5, 0.7);
    z-index: 99999;
  }
  100% {
    background-color: rgba(0, 0, 0, 0);
    z-index: -1;
  }
}

@keyframes pageCoverShow {
  0% {
    background-color: rgba(0, 0, 0, 0);
    z-index: -1;
  }
  100% {
    background-color: rgba(0, 24, 5, 0.7);
    z-index: 99999;
  }
}

.modal {
  align-self: flex-start;
  background-color: white;
  border: 2px solid #308943;
  border-radius: 5px;
  max-height: calc(100% - 4em);
  max-width: 80vw;
  overflow-y: auto;
  padding: 20px 30px;
  position: absolute;
  scrollbar-gutter: stable;
  top: 3.5em;
  min-width: 40vw;
}

.modal .row {
  margin-bottom: 1em;
}

.modal-message {
  border: 0;
  left: 5em;
  max-width: 100%;
  right: 5em;
  overflow: auto;
  padding: 30px 30px 0 30px;
  scrollbar-gutter: unset;
  top: 15vh;
}

.modal-prompt {
  min-width: unset;
}

@media screen and (max-width: 510px) {
  .modal,
  .modal-message {
    left: 0;
    right: 0;
    max-width: unset;
  }
}

#resources-modal ul {
  margin: 0;
}

#set-modifier-current {
  margin-left: 15px;
}

#play-discard-title {
  text-transform: capitalize;
}

#morph-modal h2 {
  margin: 0;
}

#morph-modal-description {
  margin: 0;
}

#morph-modal form {
  margin-bottom: 0.5em;
}

#morph-modal-suits,
#morph-modal-ranks {
  display: flex;
  justify-content: center;
}

#morph-modal-ranks {
  margin-bottom: 1em;
}

#morph-modal input[type="checkbox"] {
  display: none;
}

#morph-modal .faded {
  opacity: 50%;
}

#morph-modal label {
  border: 1px solid gray;
  padding: 10px;
  display: block;
  position: relative;
  margin: 5px 10px;
  cursor: pointer;
  line-height: 1em;
  max-height: 73px;
  overflow: hidden;
}

#morph-modal label:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

#morph-modal label canvas {
  height: 10vh;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

#morph-modal :checked + label {
  border-color: orange;
}

#morph-modal :checked + label:before {
  background-color: grey;
  content: "✓";
  line-height: 1.2em;
  transform: scale(1);
  z-index: 1;
  border: unset;
}

#morph-modal :checked + label canvas {
  transform: scale(0.9);
  z-index: -1;
}

#morph-modal .row {
  margin-top: 1em;
  margin-bottom: 0;
}

#morph-modal form .row {
  margin-top: 1em;
  margin-bottom: 1em;
}

#morph-modal .input-text {
  top: 1.5em;
}

#emoji-modal {
  min-width: unset;
}

#emoji-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-height: 50vh;
  overflow-y: auto;
}

#emoji-picker > .emoji-item {
  font-size: 1.5em;
  cursor: pointer;
}

#emoji-picker > .chat-emote {
  cursor: pointer;
}

/*
  Game
*/

#game {
  height: 100%;
}

/*
  In-game tooltips
*/

#game-tooltips > div {
  position: absolute;
}

.tooltipster-sidetip.tooltipster-shadow.tooltipster-shadow-big
  .tooltipster-content {
  font-size: 1.5em;
  padding: 0.5em;
  line-height: 1em;
}

.game-tooltips-ul {
  list-style-type: none;
  margin-top: 0.5em;
  margin-bottom: 0;
  text-indent: -0.5em;
}

.game-tooltips-ul > li {
  margin-bottom: 0.1em;
}

.game-tooltips-icon {
  display: inline-block;
  width: 0.5em;
  text-align: center;
}

.game-tooltips-ol {
  margin-top: 0.5em;
  margin-bottom: 0;
  padding-left: 0.9em;
}

/* prevent unwanted selection when double clicking */
.konvajs-content canvas,
.tooltipster-arrow-border {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/*
  In-game modals
*/

#game-chat-modal {
  position: absolute;
  z-index: 1;
  /* The modal is automatically positioned in the "chat.js" file */
  background-color: black;
  border-radius: 10px; /* This has to match the border-radius below */
  border: 3px solid black;
  touch-action: none;
}

#game-chat-modal-header {
  height: 1.25em;
  text-align: right;
}

#game-chat-modal-header-close {
  cursor: pointer;
  color: white;
  margin-right: 0.3em;
  padding: 0.25em; /* We want some padding so that the activation range is bigger */
  position: relative;
  bottom: 0.3em;
}

#game-chat-modal-white {
  width: calc(100% - 0.3em);
  height: calc(100% - 1.25em - 0.3em);
  /* We have to move it further down because of the header */
  padding: 1em;
  margin: 0;
  position: relative;
  top: 0.05em;
  left: 0.15em;
}

#game-chat-text {
  /*
    The height of the in-game chat text box is bigger than the lobby text boxes
    (e.g. ".lobby-chat-text-box") because there is no title to account for
  */
  height: calc(100% - 4em);
}

/* From: https://codepen.io/ZeroX-DG/pen/vjdoYe */
.resizable .resizers {
  width: 100%;
  height: 100%;
  border: 3px solid black;
  border-radius: 10px; /* This has to match the border-radius above */
  box-sizing: border-box;
}

.efficiency-description {
  display: inline-block;
  width: 12em;
}

.turns-description {
  display: inline-block;
  width: 8em;
}

.container.max {
  width: 80%;
}

/*
  Profile
*/

#filter-players > li {
  height: 3em;
  line-height: 3em;
}

.score-modifier {
  font-size: 0.75em;
}

.green {
  color: green;
}

.red {
  color: red;
}

.profile-tooltip {
  font-size: 0.75em;
}

.stat-description {
  display: inline-block;
  width: 19em;
}

/* Make pregame name, variant, and number of players appear on next line always */
#lobby-pregame-name,
#lobby-pregame-variant,
#lobby-pregame-seats {
  display: block;
}

/*
  Media Responsive Utilities
  Breakpoints:
    Alpha names   Max Res   Media names
    Wide:          1680px   xxl
    Normal:        1280px   xl
    Narrow:         980px   lg
    Narrower:       840px   md
    Mobile:         736px   sm
    Portrait:       480px   xs

    hidden-*:      hidden on this and all smaller screens
*/
@media screen and (max-width: 1680px) {
  .hidden-xxl {
    display: none !important;
  }
}
@media screen and (max-width: 1280px) {
  .hidden-xl {
    display: none !important;
  }
}
@media screen and (max-width: 980px) {
  .hidden-lg {
    display: none !important;
  }
}
@media screen and (max-width: 840px) {
  .hidden-md {
    display: none !important;
  }
}
@media screen and (max-width: 736px) {
  .hidden-sm {
    display: none !important;
  }
}
@media screen and (max-width: 480px) {
  .hidden-xs {
    display: none !important;
  }
}

/*
  Media edits
*/
@media screen and (max-width: 1500px) {
  .lobby-pregame-info {
    width: 150px;
  }
  .container.max {
    width: calc(100% - 2em) !important;
  }
}

/* Tighter nav buttons before text disappears */
@media screen and (max-width: 1086px) {
  #header nav > ul > li .button {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
}

@media screen and (max-width: 980px) {
  .lobby-pregame-player {
    max-width: 200px;
  }
}

/* Hide the logo text */
@media screen and (max-width: 950px) {
  #logo-text {
    display: none;
  }
}

/* Reinstate the containers round box */
@media screen and (max-width: 480px) {
  .box {
    border-radius: 6px;
  }
}

/* Make the pre-game nav bar show only the button icons on smaller resolutions */
@media screen and (max-width: 400px) {
  #nav-buttons-pregame .nav-icon {
    margin-right: 0em;
  }
}

/* Make the history nav bar show only the button icons on smaller resolutions */
@media screen and (max-width: 290px) {
  #nav-buttons-history .nav-icon {
    margin-right: 0em;
  }
}

/* Stack the profile buttons on top of each other if they would go off screen otherwise */
@media screen and (max-width: 840px) {
  #profile-buttons {
    /* These lines are copied from alpha.css which has breakpoint 480 px */
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    align-items: stretch;
  }

  /* Remove extra space from nav icons */
  .nav-icon {
    margin-right: 0;
  }

  #profile-buttons li {
    padding-top: 1em;
  }

  /* Make the main screen appear the same way, even on smaller resolutions */
  #page-wrapper {
    padding-top: 3em;
  }
}

/* Fix the box margins on smaller resolutions */
@media screen and (max-width: 736px) {
  .container.max {
    width: calc(100% - 2em) !important;
    margin-left: 1em;
    margin-right: 1em;
  }

  .box {
    margin: 0em;
    padding: 1.5em !important;
    overflow-y: hidden;
  }
}

/*
  Tables headers
*/
table th {
  padding: 0 0.75em 0.25em 0.75em;
  font-size: 0.8em;
}

/*
  Media queries for lobby redesign on smaller screens
*/
@media screen and (max-width: 980px) {
  /* make nav items in between space smaller */
  #header nav > ul > li a:not(.button) {
    padding: 0 0.8em;
  }
}
@media screen and (max-width: 840px) {
  /* override alpha.css default behavior */
  #header {
    display: block;
  }

  /* make nav items in between space smaller */
  #header nav > ul > li a:not(.button) {
    padding: 0 0.5em;
  }

  /* hide column '# of Players' */
  #lobby-games-table th:nth-child(2),
  #lobby-games-table td:nth-child(2) {
    display: none;
  }
}
@media screen and (max-width: 670px) {
  /* hide column 'Name' */
  #lobby-games-table th:nth-child(1),
  #lobby-games-table td:nth-child(1) {
    display: none;
  }

  /* fix border of column 'Variant' */
  #lobby-games-table th:nth-child(3),
  #lobby-games-table td:nth-child(3) {
    border-left-width: 1px;
  }
}

@media screen and (max-width: 620px) {
  /* hide column 'Spectators' */
  #lobby-games-table th:nth-child(7),
  #lobby-games-table td:nth-child(7) {
    display: none;
  }
}

@media screen and (max-width: 570px) {
  /* hide 'help' nav menu */
  #header nav > ul > li a#nav-buttons-lobby-stats,
  #header nav > ul > li a#nav-buttons-lobby-resources {
    display: none;
  }
}

@media screen and (max-width: 530px) {
  /* hide column 'Spectators' */
  #lobby-games-table th:nth-child(4),
  #lobby-games-table td:nth-child(4) {
    display: none;
  }
}
@media screen and (max-width: 410px) {
  /* make nav items in between space smaller */
  #header nav > ul > li a:not(.button) {
    padding: 0 0.3em;
  }
  /* hide column 'Status' */
  #lobby-games-table th:nth-child(5),
  #lobby-games-table td:nth-child(5) {
    display: none;
  }
}

/*
  Small screen toggle buttons
*/
#lobby-small-screen-buttons {
  margin-top: 1em;
  height: 2em;
  display: none;
}
#lobby-small-screen-buttons nav > ul {
  display: block;
  list-style: none;
  margin: 0;
  padding-left: 0;
}
#lobby-small-screen-buttons nav > ul li:first-child {
  padding-left: 0;
}

.only-on-narrow-screen {
  display: none;
}

@media screen and (max-height: 530px) {
  /* Put pregame chat boxes side by side */
  #lobby-chat-container.pregame-chat-layout,
  #lobby-chat-pregame-container.pregame-chat-layout,
  #lobby-users-box-container.pregame-chat-layout {
    flex: 1 1 33%;
    height: 100%;
  }
  #lobby-toggle-show-online {
    display: none;
  }
}

@media screen and (max-width: 530px) {
  /* Put pregame chat boxes on top of each other */
  #lobby-chat-container.pregame-chat-layout,
  #lobby-chat-pregame-container.pregame-chat-layout,
  #lobby-users-box-container.pregame-chat-layout {
    flex: 1 1 100%;
    height: calc((100% - 1em) / 2);
  }
  #lobby-chat-pregame-container {
    margin-left: 0.5em !important;
  }
  .narrow-screen-hidden {
    display: none !important;
  }
}

@media screen and (max-height: 530px) and (max-width: 620px) {
  #lobby-toggle-show-online {
    display: inline-block;
  }
}

@media screen and (max-height: 530px), screen and (max-width: 620px) {
  #lobby-top-half,
  #lobby-bottom-half {
    display: none;
    height: calc(100% - 4em);
  }
  #lobby-separator {
    display: none;
  }
  #lobby-top-half.toggle-active {
    display: flex;
  }
  #lobby-bottom-half.toggle-active {
    display: flex;
  }

  #lobby-small-screen-buttons {
    display: block;
  }

  #lobby-top-half.hidden,
  #lobby-bottom-half.hidden,
  #lobby-small-screen-buttons.hidden {
    display: none;
  }

  #lobby {
    height: calc(100% - 1.25em); /* The header is 3em */
  }

  .pregame-hidden {
    display: none;
  }
  .pregame-lobby-chat {
    margin-bottom: 1em;
  }
}

@media screen and (max-width: 620px) {
  #small-screen-toggle-users-h3 {
    display: none;
  }
  .only-on-narrow-screen {
    display: inline;
  }
  .lobby-users-box-container {
    padding-left: 2em !important;
  }
  .narrow-screen-hidden {
    display: none !important;
  }
  .row > #lobby-chat-container {
    width: 100%;
  }
  .row > #lobby-online-users {
    width: 100%;
  }
}

a.toggle-active {
  background-color: rgb(68, 150, 68) !important;
}

/* Chat padding for options proposal */
span.cp {
  padding-left: 52px;
  display: block;
}

/* Make all chat text display as block */
#lobby-chat-pregame-text > span {
  display: block;
}

#lobby-chat-pregame-text > span.hidden {
  display: none;
}

/* Wrong input indicator */
input[type="text"].wrongInput {
  border: 2px solid red;
}

/* Dialogs */
#backdrop {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  animation: backdropHide 0.4s forwards 1;
  align-items: center;
  justify-content: center;
}

#backdrop.show {
  animation: backdropShow 0.4s forwards 1;
}

@keyframes backdropHide {
  0% {
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99999;
  }
  100% {
    background-color: rgba(0, 0, 0, 0);
    z-index: -1;
  }
}

@keyframes backdropShow {
  0% {
    background-color: rgba(0, 0, 0, 0);
    z-index: -1;
  }
  100% {
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99999;
  }
}

.dialog {
  background-color: white;
  border: 2px solid #308943;
  border-radius: 5px;
  max-height: 90vh;
  max-width: 80vw;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 20px 30px;
}

#leader-placeholder {
  display: flex;
  justify-content: center;
  align-content: space-evenly;
  column-gap: 10px;
}

#set-turn-label {
  text-align: center;
  font-size: 2em;
  margin-bottom: 1em;
}

#set-turn-range-container {
  text-align: center;
  background-color: rgba(102, 102, 102, 0.3);
  border-radius: 5px;
  margin-bottom: 1em;
  padding-bottom: 10px;
}

#set-turn-range {
  -webkit-appearance: none;
  appearance: none;
  width: 90%;
  height: 2px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.3);
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

#set-turn-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  cursor: pointer;
}

#set-turn-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  cursor: pointer;
}

#set-turn-label::after {
  content: attr(data-value);
}

/* Cursors styles for game container */
.game-cursor-default {
  cursor: auto;
}
.game-cursor-look {
  cursor: url("/public/img/cursors/look.png"), auto;
}
.game-cursor-edit {
  cursor: url("/public/img/cursors/edit.png"), auto;
}
.game-cursor-hand {
  cursor: grab;
}
.game-cursor-dragging {
  cursor: grabbing;
}

/* History Pages */
section.history-page {
  padding: 0 !important;
}

.history-page > header {
  margin: 0 !important;
}

table.history {
  margin-top: 2em;
}

.history th.center,
.history td.center,
.history th.center .tablesorter-header-inner,
.history td.center .tablesorter-header-inner {
  text-align: center;
}

.history td.hard {
  color: white;
  background-color: darkgoldenrod;
}

.history td.very-hard {
  color: white;
  background-color: darkred;
}

.pager {
  font-size: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pager select {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0 0.5em;
}

.pager i {
  margin: 0 0.5em;
  cursor: pointer;
}

.pager .pagedisplay {
  display: inline-block;
  padding: 0 1em;
  font-weight: 400;
}

.tablesorter .filtered {
  display: none;
}

.tablesorter .tablesorter-errorRow td {
  text-align: center;
  cursor: pointer;
  background-color: #e6bf99;
}

.tablesorter thead .disabled {
  display: none;
}

.tablesorter thead select {
  width: auto;
  max-width: 150px;
  height: auto;
  padding: 0 2.5em 0 0.5em;
}

.tablesorter thead input {
  width: auto;
  height: auto;
  border: 1px solid lightgray;
  border-radius: 6px;
}

.tablesorter thead input[aria-label='Filter "ID" column by...'],
.tablesorter thead input[aria-label='Filter "Score" column by...'],
.tablesorter thead input[aria-label='Filter "Other Scores" column by...'] {
  max-width: 50px;
}

.history-bullets {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  align-items: flex-start;
  justify-content: space-around;
}
.history-bullets ul {
  flex-direction: column;
}

@media screen and (max-width: 640px) {
  .history.variant.tablesorter th:nth-child(5),
  .history.variant.tablesorter td:nth-child(5) {
    display: none !important;
  }
  .history.personal-history.tablesorter th:nth-child(6),
  .history.personal-history.tablesorter td:nth-child(6) {
    display: none !important;
  }
}

.tablesorter-header {
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  background-position: center right;
  background-repeat: no-repeat;
  cursor: pointer;
  white-space: normal;
}
.tablesorter-header:hover {
  background-color: unset;
}
.tablesorter-headerAsc {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
  background-color: lightblue !important;
}
.tablesorter-headerDesc {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
  background-color: lightblue !important;
}
.tablesorter .sorter-false {
  background-image: none;
  cursor: default;
  padding: 4px;
}

/* Spinner during ajax */
div.tableSpinner {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.3);
}
span.tableSpinner {
  width: 48px;
  height: 48px;
  display: inline-block;
  position: relative;
  border-width: 3px 2px 3px 2px;
  border-style: solid dotted solid dotted;
  border-color: #de3500 rgba(255, 255, 255, 0.3) #fff rgba(151, 107, 93, 0.3);
  border-radius: 50%;
  box-sizing: border-box;
  animation: 1s rotate linear infinite;
}
span.tableSpinner:before,
span.tableSpinner:after {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  border: 10px solid transparent;
  border-bottom-color: #fff;
  transform: translate(-10px, 19px) rotate(-35deg);
}
span.tableSpinner:after {
  border-color: #de3500 #0000 #0000 #0000;
  transform: translate(32px, 3px) rotate(-35deg);
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

/* Discord replacements */
.spoiler {
  background: black;
  color: black;
}
.spoiler:hover {
  background: unset;
  color: unset;
}

/* Hyphenated empty placeholder */
.lobby-hyphen-empty {
  width: 0.75em;
  display: inline-block;
}

div.noteTitle {
  width: 100%;
  height: 10px;
  border-bottom: 1px solid #777;
  text-align: center;
  margin-bottom: 7px;
  line-height: 10px;
}

div.noteTitle span {
  font-size: 14px;
  background-color: #fff;
  text-align: center;
  padding: 0 10px;
}