.coin-flip-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.coin-flip-bounce {
  animation-iteration-count: 1;
}

.coin-flip {
  position: relative;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
  border-color: gray;
  transform-style: preserve-3d;
  animation-name: coin-flip-spinning;
  animation-iteration-count: 1;
}

.coin-flip-side {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
}

.coin-flip-placeholder {
  z-index: 2;
  animation-name: coin-flip-hide-placeholder;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.coin-flip-tails {
  transform: rotateY(180deg);
}

.coin-flip-result-text {
  opacity: 0;
  animation-name: coin-flip-show-result-text;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes coin-flip-show-result-text {
  57% {
    opacity: 0;
  }
  86% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes coin-flip-hide-placeholder {
  100% {
    visibility: hidden;
  }
}

@keyframes coin-flip-spinning {
  1% {
    transform: rotateX(180deg);
  }
  2% {
    transform: rotateX(0deg);
  }
  4% {
    transform: rotateX(180deg);
  }
  6% {
    transform: rotateX(0deg);
  }
  8% {
    transform: rotateX(180deg);
  }
  10% {
    transform: rotateX(0deg);
  }
  13% {
    transform: rotateX(180deg);
  }
  16% {
    transform: rotateX(0deg);
  }
  19% {
    transform: rotateX(180deg);
  }
  22% {
    transform: rotateX(0deg);
  }
  26% {
    transform: rotateX(180deg);
  }
  30% {
    transform: rotateX(0deg);
  }
  35% {
    transform: rotateY(180deg);
  }
  40% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  60% {
    transform: rotateY(0deg);
  }
}

@keyframes coin-flip-bouncing {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  15% {
    transform: translateY(-200px);
    animation-timing-function: ease-in;
  }
  30% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  40% {
    transform: translateY(-75px);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  55% {
    transform: translateY(-25px);
    animation-timing-function: ease-in;
  }
  60% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
}

.loading-bar {
  position: relative;
  container-type: inline-size;
}

.loading-bar .card {
  position: absolute;
  height: 100%;
  aspect-ratio: 7/10;
  border-radius: 4px;
  transition: transform 0.2s ease;
  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.loading-bar .card-1 {
  z-index: 5;
  animation-duration: 4s;
  animation-name: loading-bar-card-1;
  animation-iteration-count: infinite;
}

.loading-bar .card-2 {
  z-index: 4;
  animation-duration: 4s;
  animation-name: loading-bar-card-2;
  animation-iteration-count: infinite;
}

.loading-bar .card-3 {
  z-index: 3;
  animation-duration: 4s;
  animation-name: loading-bar-card-3;
  animation-iteration-count: infinite;
}

.loading-bar .card-4 {
  z-index: 2;
  animation-duration: 4s;
  animation-name: loading-bar-card-4;
  animation-iteration-count: infinite;
}

.loading-bar .card-5 {
  z-index: 1;
  animation-duration: 4s;
  animation-name: loading-bar-card-5;
  animation-iteration-count: infinite;
}

@keyframes loading-bar-card-1 {
  0% {
  }
  25% {
    transform: translateX(calc(50cqw - 100%));
  }
  50% {
    transform: translateX(calc(100cqw - 100%));
  }
  75% {
    transform: translateX(calc(50cqw - 100%));
  }
}

@keyframes loading-bar-card-2 {
  0% {
  }
  25% {
    transform: translateX(calc(40cqw - 100%));
  }
  50% {
    transform: translateX(calc(100cqw - 100%));
  }
  75% {
    transform: translateX(calc(60cqw - 100%));
  }
}

@keyframes loading-bar-card-3 {
  0% {
  }
  25% {
    transform: translateX(calc(30cqw - 100%));
  }
  50% {
    transform: translateX(calc(100cqw - 100%));
  }
  75% {
    transform: translateX(calc(70cqw - 100%));
  }
}

@keyframes loading-bar-card-4 {
  0% {
  }
  25% {
    transform: translateX(calc(20cqw - 100%));
  }
  50% {
    transform: translateX(calc(100cqw - 100%));
  }
  75% {
    transform: translateX(calc(80cqw - 100%));
  }
}

@keyframes loading-bar-card-5 {
  0% {
  }
  25% {
    transform: translateX(calc(10cqw - 100%));
  }
  50% {
    transform: translateX(calc(100cqw - 100%));
  }
  75% {
    transform: translateX(calc(90cqw - 100%));
  }
}

.loading-spinner .card {
  position: relative;
  height: 50%;
  aspect-ratio: 7/10;
  border-radius: 4px;
  margin-left: 32.5%;
  transition: transform 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.loading-spinner .card-1 {
  z-index: 5;
  margin-top: 25%;
  animation-duration: 2s;
  animation-name: loading-spinner-card-1;
  animation-iteration-count: infinite;
}

.loading-spinner .card-2 {
  z-index: 4;
  margin-top: -50%;
  animation-duration: 2s;
  animation-name: loading-spinner-card-2;
  animation-iteration-count: infinite;
}

.loading-spinner .card-3 {
  z-index: 3;
  margin-top: -50%;
  animation-duration: 2s;
  animation-name: loading-spinner-card-3;
  animation-iteration-count: infinite;
}

.loading-spinner .card-4 {
  z-index: 2;
  margin-top: -50%;
  animation-duration: 2s;
  animation-name: loading-spinner-card-4;
  animation-iteration-count: infinite;
}

.loading-spinner .card-5 {
  z-index: 1;
  margin-top: -50%;
  animation-duration: 2s;
  animation-name: loading-spinner-card-5;
  animation-iteration-count: infinite;
}

@keyframes loading-spinner-card-1 {
  0% {
    transform: translate(0) rotate(0deg);
  }
  50% {
    transform: translate(40%, 10%) rotate(45deg);
  }
  100% {
    transform: translate(0) rotate(0deg);
  }
}

@keyframes loading-spinner-card-2 {
  0% {
    transform: translate(0) rotate(0deg);
  }
  50% {
    transform: translate(20%, 5%) rotate(15deg);
  }
  100% {
    transform: translate(0) rotate(0deg);
  }
}

@keyframes loading-spinner-card-3 {
  0% {
    transform: translate(0) rotate(0deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: translate(0) rotate(0deg);
  }
}

@keyframes loading-spinner-card-4 {
  0% {
    transform: translate(0) rotate(0deg);
  }
  50% {
    transform: translate(-20%) rotate(-25deg);
  }
  100% {
    transform: translate(0) rotate(0deg);
  }
}

@keyframes loading-spinner-card-5 {
  0% {
    transform: translate(0) rotate(0deg);
  }
  50% {
    transform: translate(-40%, 5%) rotate(-45deg);
  }
  100% {
    transform: translate(0) rotate(0deg);
  }
}

#aboutContainer {
  display: flex;
  flex-direction: column;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  padding: 20px;
}

#aboutTitle {
  font-size: xx-large;
  text-align: center;
  margin-bottom: 20px;
}

#aboutAlert {
  font-size: small;
  margin-bottom: 20px;
}

#aboutAlertTitle {
  font-weight: bold;
  text-align: center;
}

#aboutContents {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.about-section-title {
  font-weight: bold;
  margin-bottom: 10px;
  text-decoration: underline;
}

#aboutContainer table tr td:first-child {
  text-align: right;
}

#aboutContainer table tr td:last-child {
  text-align: left;
}

#animationsContainer {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  margin-bottom: 100px;
}

#animationsProgress {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px;
}

#contactList {
  text-align: left;
}

.about-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  background-color: lightgray;
}

.animation-child {
  flex: 1;
}

#bannerContainer {
  width: 100%;
  height: 50px;
  display: flex;
  background-color: darkgray;
  align-items: center;
}

#bannerMainTitle {
  margin-top: 12px;
}

#bannerUsername {
  text-align: right;
  margin: 10px;
}

#bannerHamburger {
  width: 50px;
  height: 50px;
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

#bannerBun {
  height: 60%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: column nowrap;
}

#bannerMenuItems {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: gray;
}

#bannerConnectionStatus {
  height: 10px;
  width: 10px;
  margin-top: auto;
  margin-bottom: auto;
  border-radius: 50%;
  aspect-ratio: 1;
}

.banner-item {
  flex: 1;
  display: flex;
  justify-content: center;
}

.banner-item:first-child {
  justify-content: left;
}

.banner-item:last-child {
  justify-content: right;
}

.banner-patty {
  width: 80%;
  height: 5px;
  background-color: black;
}

#loginDialogContainer {
  background-color: lightgray;
  padding: 20px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#loginDialogFields {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#loginDialogLower {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
}

#loginDialogActions {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

#loginDialogSwitch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-top: -20px;
  font-size: small;
}

#loginDialogTitle {
  text-align: center;
  font-size: larger;
}

#loginUsernameAvailableContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 20px;
}

.login-dialog-field {
  display: flex;
  flex-direction: column;
}

.login-username-validation-field {
  display: flex;
  justify-content: flex-start;
  gap: 2px;
  font-size: small;
  min-height: 20px;
}

.login-username-validation-field > svg {
  margin-top: 2px;
}

.close-button {
  display: flex;
  height: 32px;
  width: 32px;
  justify-content: center;
  align-items: center;
  background-color: darkgray;
  border-radius: 5px;
  cursor: pointer;
}

.dlc-tag-wrapper-outer {
  display: table;
  margin-top: auto;
  margin-bottom: auto;
}

.dlc-tag-wrapper-inner {
  padding: 50% 0;
  height: 0;
}

.dlc-tag {
  display: block;
  transform-origin: top left;
  transform: rotate(-90deg) translate(-100%);
  margin-top: -50%;
  white-space: nowrap;
  background-repeat: no-repeat;
  background-size: contain;
}

.progress-bar-container {
  height: 100%;
  width: 100%;
  border-radius: 5px;
}

.progress-bar-complete {
  height: 100%;
  border-radius: 5px;
}

.strength-circle-container-background {
  position: relative;
  background: #e6e6e6;
  border-radius: 50%;
  aspect-ratio: 1;
}

.strength-circle-container {
  position: relative;
  background: #e6e6e6;
  border-radius: 50%;
  aspect-ratio: 1;
}

.strength-circle-container-greater {
  background: radial-gradient(transparent 0%, transparent 35%, #267402 50%);
}

.strength-circle-container-less {
  background: radial-gradient(transparent 0%, transparent 35%, #970014 50%);
}

.strength-circle-container-hero {
  background: radial-gradient(transparent 0%, transparent 35%, #e9a018 50%);
}

.strength-circle-outer {
  position: absolute;
  border-radius: 50%;
}

.strength-circle-inner {
  position: absolute;
  top: 0;
  border-radius: 50%;
}

.strength-circle-hero {
  position: absolute;
  border-top-left-radius: 10px;
}

.strength-circle-value {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: -2px;
  font-weight: bold;
  color: black;
}

.unit-deck-card-container {
  position: relative;
  height: calc(230px + 55px);
  width: 160px;
  background-color: antiquewhite;
  border-radius: 10px;
}

.unit-deck-card-actions-upper {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.unit-deck-card-actions-upper > .unit-deck-card-maximize {
  padding: 10px;
}

.unit-deck-card-icons {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.unit-deck-card-icon {
  height: 40px;
  width: 40px;
  z-index: 1;
}

.unit-deck-card-icons > *:first-child {
  height: 50px;
  width: 50px;
}

.unit-deck-card-image {
  width: 100%;
  aspect-ratio: 309 / 444;
}

.unit-deck-card-actions-lower {
  position: absolute;
  display: flex;
  justify-content: space-between;
  margin-top: -37px;
  width: 100%;
}

.unit-deck-card-art-switcher {
  height: 30px;
  width: 30px;
}

.unit-deck-card-art-switcher-arrow {
  margin-left: 2px;
  margin-top: 2px;
  size: 1.5em;
}

.unit-deck-card-dlc {
  height: 33px;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  margin-bottom: -3px;
}

.unit-deck-card-name {
  display: table;
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
  cursor: text;
  padding-left: 5px;
  padding-right: 5px;
}

#unitFullCardContainer {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 90%;
  max-height: 90%;
  aspect-ratio: 930 / 632;
}

#unitFullCardDialog {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  padding: 10px;
  background-color: lightgray;
  border-radius: 5px;
}

#unitFullCardContentWrapper {
  height: 100%;
  flex-grow: 1;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}

#unitFullCardContents {
  display: flex;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 880 / 632;
}

#unitFullCardArt {
  margin-left: auto;
  margin-right: auto;
}

#unitFullCardImage {
  height: 100%;
  width: 50%;
  border-radius: 25px;
}

#unitFullCardInfo {
  display: flex;
  height: calc(100% - 20px);
  width: 50%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  gap: 10px;
  border-radius: 25px;
  background-color: antiquewhite;
  overflow-y: auto;
}

#unitFullCardUpper {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#unitFullCardArtSwitcher {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

#unitFullCardName {
  display: flex;
  justify-content: center;
  font-size: x-large;
  font-weight: bold;
  text-align: center;
}

#unitFullCardQuote {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  font-size: larger;
  font-style: italic;
  text-align: center;
}

#unitFullCardEffects {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}

#unitFullCardRightContainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.unit-full-card-arrow-container {
  display: flex;
  width: 32px;
  height: 100%;
  align-items: center;
  border-radius: 5px;
}

.unit-full-card-arrow-selectable-container {
  background-color: darkgray;
  cursor: pointer;
}

.unit-full-card-art-switcher {
  height: 32px;
  width: 32px;
  margin-right: 2px;
  margin-top: 2px;
  size: 1.5em;
}

.unit-full-card-art-switcher-arrow {
  margin-right: 2px;
  margin-left: 2px;
  margin-top: 2px;
  size: 1.5em;
}

.unit-full-card-info-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
}

.unit-full-card-info-row-strength {
  flex-direction: column;
}

.unit-full-card-info-strength-reason-container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.unit-full-card-info-strength-reason-number {
  text-align: center;
}

.unit-full-card-info-image-container {
  display: flex;
  height: 50px;
  width: 50px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}

.unit-full-card-info-image {
  max-height: 100%;
  max-width: 100%;
}

.unit-full-card-info-image-special {
  height: auto;
  aspect-ratio: 392 / 262;
}

.unit-full-card-info-image-dlc {
  width: 150px;
  height: auto;
}

.units-header-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 10px;
}

.units-header-upper {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.units-header-section {
  display: flex;
  align-items: center;
}

.units-header-section-outer {
  flex-grow: 1;
  flex-basis: 0;
}

.units-header-title {
  font-weight: bold;
}

.units-header-sort-container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.units-header-sort-order {
  margin-left: 2px;
  margin-top: 2px;
  margin-bottom: -2px;
}

.units-header-filter-container {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 10px;
}

.units-header-filter-expand {
  margin-top: 3px;
  margin-bottom: -3px;
  margin-left: 3px;
  margin-right: 3px;
}

.units-header-filter-clear {
  margin-top: 3px;
  margin-bottom: -3px;
}

.units-header-filter-values {
  display: flex;
  gap: 10px;
}

.units-header-filter-group-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.units-header-filter-group-name {
  text-decoration: underline;
}

.units-header-filter-group-effects {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  overflow-y: auto;
}

.units-header-filter-group-values {
  display: flex;
  flex-direction: column;
}

.units-header-filter-group-small {
  display: flex;
  align-items: flex-start;
}

.units-header-filter-checkbox {
  margin-top: 5px;
}

.progress-ring-container {
  position: relative;
  aspect-ratio: 1;
}

.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
}

.progress-ring-inner {
  fill: transparent;
}

.progress-ring-outer {
  fill: transparent;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 0.2s;
}

.progress-ring-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.progress-ring-center-text > img {
  height: 100%;
  width: 100%;
  margin-top: 3px;
}

.progress-ring-bottom-text {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#unitsStatsTop {
  display: flex;
  justify-content: space-between;
}

#unitsStatsWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  gap: 10px;
  padding-left: 10px;
  padding-right: 10px;
  overflow-y: hidden;
}

#unitsStatsContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

#unitsStatsMains {
  margin-bottom: 10px;
}

.units-stats-select-all-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.units-stats-select-all {
  height: 16px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

.units-stats-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 10px;
}

.units-stats-inline {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.units-stats-inline-icon {
  width: 30%;
}

.units-stats-separator {
  width: 100%;
  border-bottom: 1px solid;
}

.units-stats-header {
  text-align: center;
  cursor: pointer;
}

#deckEditorContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#deckEditorUpper {
  display: flex;
}

#deckEditorLower {
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#deckEditorNameFaction {
  display: flex;
  flex-direction: column;
  margin-right: 5px;
}

#deckEditorName {
  width: calc(100% - 5px);
}

#deckEditorFaction {
  width: 100%;
}

#deckEditorFactionSelected {
  height: 100%;
  display: flex;
  align-items: center;
}

#deckEditorFactionSelectedContainer {
  display: flex;
  width: 100%;
  padding: 5px;
}

#deckEditorFactionChange {
  margin-left: 10px;
}

#deckEditorFactionSelectedImage {
  height: 60px;
}

#deckEditorFactionSelectedDetails {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: 5px;
}

#deckEditorfactionSelectedName {
  font-weight: bold;
}

#deckEditorFactionPicker {
  display: flex;
  flex-direction: column;
  max-height: 90%;
  padding: 20px;
  border-radius: 5px;
  gap: 20px;
  align-items: center;
  margin: 20px;
  overflow: hidden;
  background-color: lightgray;
}

#deckEditorFactionPickerList {
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

#deckEditorLeaderContainer {
  display: flex;
  margin-left: 5px;
}

#deckEditorLeaderIcon {
  height: 50px;
  width: 50px;
  opacity: 50%;
  padding: 10px;
}

#deckEditorUnitsIcon {
  height: 100px;
  opacity: 50%;
}

#deckEditorLeader {
  width: 100%;
  margin-left: 3px;
}

#deckEditorLeaderDetailsContainer {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 10px;
  margin: 0;
}

#deckEditorLeaderDetails {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

#deckEditorLeaderNameAbilityQuoteDlc {
  display: flex;
  height: 100%;
  width: 100%;
  gap: 10px;
}

#deckEditorLeaderNameAbilityQuote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  height: 100%;
}

#deckEditorLeaderNameAbility {
  display: flex;
  flex-direction: column;
}

#deckEditorLeaderSelect {
  width: 100%;
  display: flex;
}

#deckEditorLeaderChange {
  margin-left: 10px;
}

#deckEditorLeaderImage {
  height: 150px;
  border-radius: 5px;
}

#deckEditorLeaderName {
  font-weight: bold;
}

#deckEditorLeaderQuote {
  text-align: right;
  font-style: italic;
}

#deckEditorLeaderPicker {
  display: flex;
  flex-direction: column;
  background-color: lightgray;
  padding: 20px;
  border-radius: 5px;
  gap: 20px;
  align-items: center;
  margin: 20px;
  max-height: 90%;
  overflow: hidden;
  overflow-x: auto;
}

#deckEditorLeaderPickerList {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  overflow: auto;
}

#deckEditorUnitsContainer {
  display: flex;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#deckEditorUnitsErrors {
  display: flex;
  flex-direction: column;
}

#deckEditorUnitsContainerMiddle {
  display: flex;
  flex-direction: column;
  max-width: 130px;
}

#deckEditorActions {
  display: flex;
  gap: 10px;
  padding: 10px;
}

#deckEditorError {
  height: auto;
  padding-top: 10px;
}

.deck-editor-picker-header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.deck-editor-picker-title {
  width: 100%;
  text-align: center;
  margin-left: 32px;
  margin-top: 0;
  margin-bottom: 0;
}

.deck-editor-quarter {
  width: 50%;
}

.deck-editor-table-label {
  float: right;
}

.deck-editor-table-value {
  width: 100%;
}

.deck-editor-table-value-faction {
  display: flex;
}

.deck-editor-faction-picker-faction {
  display: flex;
  gap: 10px;
  background-color: darkgray;
  border-radius: 5px;
  padding: 10px;
}

.deck-editor-faction-picker-image {
  width: 100px;
}

.deck-editor-faction-picker-name-ability {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.deck-editor-faction-picker-name {
  font-weight: bold;
}

.deck-editor-leader-picker-leader {
  display: flex;
  width: 500px;
  gap: 10px;
  background-color: darkgray;
  border-radius: 5px;
  padding: 10px;
}

.deck-editor-leader-picker-image {
  height: 100%;
  width: 50%;
  border-radius: 20px;
}

.deck-editor-leader-picker-name-ability-quote {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
}

.deck-editor-leader-picker-name {
  font-weight: bold;
}

.deck-editor-leader-picker-quote {
  font-style: italic;
}

.deck-editor-unit-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  width: 0;
}

.deck-editor-unit-border {
  flex-grow: 1;
  width: 100%;
  border-radius: 5px;
  background-color: darkgray;
  overflow: hidden;
}

.deck-editor-card-container {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 10px);
  height: calc(100% - 20px);
  overflow: auto;
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  justify-content: flex-start;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.deck-list-deck-section {
  display: flex;
  flex: 1 1 0px;
}

.deck-list-deck-sub-section {
  display: flex;
  flex-grow: 1;
  background-color: darkgray;
  border-radius: 5px;
  padding: 10px;
  gap: 10px;
}

.deck-list-deck-name-faction {
  gap: 10px;
  display: flex;
  flex-direction: column;
}

.deck-list-deck-name-created {
  justify-content: space-between;
}

.deck-list-deck-section > .deck-list-deck-name-created {
  flex-grow: 0;
}

.deck-list-deck-faction {
  flex-grow: 1;
  gap: 10px;
}

.deck-list-deck-faction-name-ability {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  gap: 10px;
}

.deck-list-deck-faction-image {
  max-height: 100px;
  max-width: 50%;
  margin-top: auto;
  margin-bottom: auto;
}

.deck-list-deck-leader-image {
  max-height: 200px;
  max-width: 50%;
  margin-top: auto;
  margin-bottom: auto;
  border-radius: 5px;
}

.deck-list-deck-leader-name-ability {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
}

.deck-list-deck-stats {
  display: flex;
  gap: 10px;
  background-color: darkgray;
  border-radius: 5px;
  padding: 10px;
  flex: 2 2 0px;
}

.deck-list-deck-stats-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 50%;
}

.deck-list-deck-actions-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.deck-list-deck-action-button {
  background-color: darkgray;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
}

.deck-stat-value {
  margin-left: 3px;
}

#deckListHeader {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
}

#deckListHeaderUpper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#deckListHeaderRight {
  display: flex;
  gap: 10px;
}

#deckListRefresh {
  display: flex;
  align-items: center;
  justify-content: center;
}

#deckListFilterSort {
  display: flex;
  gap: 10px;
}

#deckListFilterCount {
  margin-left: 5px;
}

#deckListContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 10px;
  overflow: auto;
}

#deckListContents {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  gap: 10px;
  overflow: auto;
}

.deck-list-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.deck-list-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.deck-list-header-button {
  margin-left: 2px;
  margin-top: 2px;
  margin-bottom: -2px;
}

.deck-list-header-filter-values {
  display: flex;
  gap: 10px;
}

.deck-list-filter-sort-group {
  display: flex;
  align-items: center;
}

.deck-list-deck-container {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 20px);
  gap: 10px;
  padding: 10px;
  background-color: lightgray;
  border-radius: 5px;
}

#decksContainer {
  flex-grow: 1;
  overflow: hidden;
  padding-top: 10px;
  padding-right: 10px;
  padding-left: 10px;
}

.confirm-title {
  font-size: large;
  font-weight: bold;
}

.container-fixed-aspect-ratio-outer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container-fixed-aspect-ratio-inner {
  width: 100%;
}

.unit-game-card-container {
  position: relative;
  aspect-ratio: 309 / 444;
  height: 100%;
}

.unit-game-card-image {
  height: 100%;
  width: 100%;
  border-radius: 10px;
}

.unit-game-card-strength {
  position: absolute;
  top: 0;
  width: 50%;
  aspect-ratio: 1;
}

.unit-game-card-container .unit-game-card-fullscreen {
  padding: 0;
}

.unit-game-card-fullscreen {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  max-width: 30px;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.unit-game-card-bottom {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  height: auto;
  flex-wrap: wrap-reverse;
}

.unit-game-card-bottom-icon {
  width: 33%;
}

#gameHandContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#gameHandAndSettingsOpener {
  width: 100%;
  display: flex;
  align-items: center;
}

#gameHand {
  display: flex;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  justify-content: center;
  padding: 10px;
  overflow-x: auto;
}

#gameDeckSettingsOpener {
  background-color: white;
  background-color: darkgray;
  opacity: 85%;
  border-radius: 5px 0 0 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-top: 5px;
  padding-bottom: 5px;
  z-index: 1;
}

#gameDeckSettings {
  height: calc(100px - 20px);
  width: calc(100% - 20px);
  display: flex;
  gap: 10px;
  padding: 10px;
}

#gameDeckSettingsOther {
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 10px;
}

#gameDeckSettingsFilterReverse {
  display: flex;
  justify-content: flex-end;
}

#gameDeckSettingsSort {
  display: flex;
  gap: 10px;
  align-items: center;
}

#noUnitsMatchFilter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-hand-and-deck-settings-open {
  height: calc(100% - 100px);
}

.game-hand-and-deck-settings-closed {
  height: 100%;
}

.game-deck-settings-opener-hidden {
  visibility: hidden;
}

.game-deck-settings-opener-closed {
  height: 16px;
  width: 40px;
  margin-left: -40px;
  margin-bottom: 44px;
}

.game-deck-settings-opener-open {
  height: 60px;
  width: 40px;
  margin-left: -40px;
}

.game-deck-filters {
  width: calc(100% - 200px);
}

.game-hand-icon {
  width: 50px;
  opacity: 50%;
}

.game-hand-card-wrapper {
  position: relative;
  display: flex;
  height: 100%;
  min-width: 20px;
}

.game-hand-card-wrapper:not(:last-child) {
  padding-right: 10px;
}

.game-hand-card-wrapper:last-child,
.game-hand-card-wrapper:hover,
.game-hand-card-wrapper-selected {
  min-width: 110px;
}

.game-hand-card-wrapper-not-selected {
  position: absolute;
  background-color: gray;
  aspect-ratio: 309 / 444;
  cursor: pointer;
  height: 100%;
  border-radius: 10px;
  opacity: 50%;
}

.move-impact-container {
  display: flex;
  flex-direction: column;
  width: calc(100% - 8px);
  align-items: center;
}

.move-impact-effect-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: darkgray;
}

.move-impact-effect-container-collapsed {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.move-impact-effect-member {
  width: calc(100% / 3);
}

.move-impact-effect-icon {
  height: 20px;
  margin-bottom: -3px;
}

.move-impact-units-container {
  display: flex;
  flex-direction: column;
  width: calc(100% - 10px);
  padding: 5px;
  border-radius: 5px;
  background-color: lightgray;
  border-style: solid;
  border-width: 5px;
  border-radius: 20px;
  border-color: darkgray;
}

.move-impact-units {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  text-align: center;
}

.move-impact-group-separator {
  width: calc(100% - 4px);
  height: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  border-style: solid;
  border-width: 2px;
  border-color: darkgray;
}

.move-impact-groups-container {
  width: 100%;
}

.move-impact-group-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.move-impact-unit-container {
  display: flex;
  gap: 10px;
  width: 100%;
  justify-content: center;
  background-color: darkgray;
  border-radius: 15px;
}

.move-impact-unit-info {
  display: flex;
  flex-direction: column;
  width: calc(75% - 15px);
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  justify-content: space-between;
}

.move-impact-unit-info-opponent {
  padding-left: 0;
  padding-right: 10px;
}

.move-impact-unit-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-align: end;
}

.move-impact-unit-image {
  height: 100%;
  width: 100%;
  border-radius: 10px;
}

.move-impact-unit-unknown {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: xx-large;
}

.move-impact-hide {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 10px;
}

#gameRefresh.decking {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#gameRefresh.playing {
  width: 20px;
}

#gameWeatherContainer {
  display: flex;
  align-items: center;
  width: calc(50% - 10px);
  gap: 10px;
  padding: 10px;
}

#gameWeatherContainer.game-weather-container-highlighted {
  width: calc(50% - 14px);
  margin-right: 0px;
  cursor: pointer;
}

#gameWeatherIconContainer {
  position: absolute;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: space-between;
  opacity: 0.65;
}

#gameWeatherUnits {
  position: relative;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

#gameInfoOpponentContainer {
  flex-direction: column-reverse;
}

#gameInfoSharedContainer {
  display: flex;
  height: 10%;
  gap: 10px;
  justify-content: space-between;
}

#gameInfoSharedDetails {
  width: calc(50% - 10px);
  flex-grow: 1;
  padding: 10px;
}

.game-weather-icon {
  height: 80%;
  margin-top: auto;
  margin-bottom: auto;
}

.weather-card-wrapper {
  position: relative;
  display: flex;
  height: 100%;
  min-width: 10px;
  padding-right: 10px;
  aspect-ratio: 309 / 444;
}

.weather-card-wrapper:last-child {
  margin-right: -10px;
}

.weather-card-wrapper:last-child,
.weather-card-wrapper:hover,
.weather-card-wrapper-selected {
  min-width: 40px;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background-color: lightgray;
  border-radius: 5px;
}

.form-title {
  text-align: center;
  font-size: large;
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

.form-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: auto;
  width: 100%;
}

.form-field-text-input {
  width: 100%;
}

#gameContainer {
  display: flex;
  height: 100%;
  width: calc(100% - 20px);
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}

#gameContainerUpper {
  display: flex;
  gap: 10px;
  width: 100%;
}

#gameContainerLower {
  width: 100%;
  overflow: hidden;
}

#gameCenterContainer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 50%;
  gap: 10px;
}

#gameSetDeckContainer {
  height: 100%;
}

#gameOrderingContainer {
  height: 100%;
}

#gameOrderCoinToss {
  height: 100%;
}

#gameUnitsBoardContainer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

#gameDeckRedrawInstructions {
  text-align: center;
  text-wrap: balance;
}

#gameRedrawContainer {
  height: 100%;
  width: 100%;
  display: flex;
  gap: 10px;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: center;
  margin-bottom: -100%;
}

#gameDeckOverlay {
  height: 90%;
  width: 100%;
  padding: 10px;
  margin: 20px;
  border-radius: 5px;
  background-color: white;
}

#gameAuthErrorContainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

#gameAuthErrorMessage {
  text-align: center;
}

#gameSetOrderContainer {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#gameSetOrderTable {
  border-collapse: collapse;
}

#gameSetOrderTable td,
th {
  border: 1px solid black;
  padding-left: 5px;
  padding-right: 5px;
}

#gameSetOrderTitle {
  white-space: nowrap;
  margin-bottom: 10px;
}

#gameOrderError {
  margin-bottom: -31px;
}

#gameOrderSet {
  margin-top: 10px;
}

#gameSummaryContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px;
  overflow-y: auto;
}

#gameSummaryVictorsContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#gameSummaryCongratulations {
  text-align: center;
}

#gameSummaryVictorsList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#gameSummaryRoundBreakdown th,
#gameSummaryRoundBreakdown td {
  border: 1px dotted #999;
}

#gameSummaryRoundBreakdown td {
  text-align: center;
}

#gameHistoryContainer {
  width: calc(25% - 20px);
  height: calc(100% - 20px);
  display: flex;
  flex-direction: column-reverse;
  padding: 10px;
  gap: 20px;
  overflow-y: auto;
}

.game-container-upper-deck-settings-closed {
  height: 80%;
}

.game-container-upper-deck-settings-open {
  height: calc(80% - 100px);
}

.game-container-lower-deck-settings-closed {
  height: 20%;
}

.game-container-lower-deck-settings-open {
  height: calc(20% + 100px);
}

.game-edge-container {
  display: flex;
  flex-direction: column;
  width: 25%;
  gap: 10px;
  max-width: 250px;
  overflow: hidden;
  border-radius: 5px;
}

.game-player-container {
  display: flex;
  flex-grow: 1;
  width: 100%;
  gap: 10px;
}

.game-player-passed {
  border-style: solid;
  border-color: #5e027a;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

.game-section > .game-player-section {
  flex-grow: 0;
}

.game-player-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-left: 3px;
}

.game-player-rounds-score {
  display: flex;
}

.game-player-rounds-container {
  display: flex;
  justify-content: space-between;
}

.game-player-rounds {
  display: flex;
  gap: 5px;
}

.game-player-score {
  font-size: x-large;
  line-height: 24px;
}

.game-info-section {
  display: flex;
  flex: 1 1 0px;
  padding: 10px;
}

.game-info-player-container {
  display: flex;
  flex-direction: column;
  height: calc(45% - 20px);
  gap: 10px;
  padding: 10px;
  overflow-y: auto;
}

.game-info-player-turn {
  flex-direction: column;
  height: calc(45% - 30px);
  border-width: 5px;
  border-color: #0152cc;
  border-style: solid;
  border-radius: 5px;
}

.game-info-player-future-turn {
  border-style: dotted;
}

.game-score-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.game-score-container-winning {
  border-width: 5px;
  border-style: solid;
  border-radius: 5px;
  border-color: #267402;
  padding-left: 10px;
  padding-right: 10px;
}

.game-section {
  background-color: lightgray;
  border-radius: 5px;
}

.game-sub-section {
  flex-grow: 1;
  background-color: darkgray;
  border-radius: 5px;
}

.game-center-placeholder {
  flex-direction: column;
  gap: 10px;
}

.game-set-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-set-order-ordering {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}

.game-unit-board-side {
  display: flex;
  height: calc(50% - 25px);
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.game-unit-board-side-passed {
  height: calc(50% - 35px);
  border-style: solid;
  border-color: purple;
  border-radius: 5px;
  border-width: 5px;
}

.game-combat-row-units {
  display: flex;
  justify-content: center;
  width: calc(100% - 60px);
  position: relative;
}

.game-combat-row-weather {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 50%;
  background-color: #970014;
  border-radius: 5px;
  z-index: 2;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 25%);
  pointer-events: none;
}

.game-unit-combat-row-cards {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.game-unit-board-combat-row {
  display: flex;
  height: calc((100% - 20px) / 3);
  gap: 10px;
}

.game-unit-board-combat-icon-score {
  display: flex;
  flex-direction: column;
  height: 90%;
  justify-content: center;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
  gap: 5px;
}

.game-unit-combat-row-valid {
  cursor: pointer;
}

.game-unit-combat-row-invalid {
  cursor: not-allowed;
}

.game-unit-combat-row-icon {
  position: absolute;
  height: 75%;
  top: 12.5%;
  opacity: 0.5;
}

.game-unit-combat-row-icon-start {
  left: 0;
}

.game-unit-combat-row-icon-end {
  right: 0;
  transform: scale(-1, 1);
}

.game-combat-row-modifier {
  display: flex;
  background-color: darkgray;
  border-radius: 5px;
}

.combat-row-modifier-available {
  height: 100%;
}

.game-round-token {
  height: 25px;
  border-radius: 50%;
  aspect-ratio: 1;
}

.game-round-token-lost {
  background-color: gray;
}

.game-round-token-won {
  background-color: #970014;
}

.game-deck-choosing {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-deck-redraw-cards {
  display: flex;
  flex-direction: column;
  height: 50%;
  width: 100%;
  gap: 20px;
  justify-content: space-evenly;
  align-items: center;
}

.temp {
  height: 50%;
}

.game-deck-redraw-card-container {
  display: flex;
  justify-content: center;
  height: 50%;
}

.game-deck-redraw-pair {
  display: flex;
  height: 100%;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.game-deck-redraw-transform {
  color: black;
}

.game-deck-redraw-card {
  height: 100%;
  aspect-ratio: 339 / 440;
  background-color: darkgray;
  border-radius: 10px;
}

.game-deck-redraw-available {
  cursor: pointer;
}

.game-deck-redraw-unavailable {
  cursor: not-allowed;
}

.game-deck-redraw-lower {
  display: flex;
  flex-direction: column;
  min-width: 50%;
  gap: 10px;
  align-items: center;
}

.game-player-name-lives {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: 50%;
  justify-content: space-between;
  gap: 10px;
}

.game-player-faction {
  display: flex;
  align-items: center;
  gap: 10px;
}

.game-player-faction-image {
  width: 25%;
  min-width: 50px;
}

.game-player-faction-ability {
  font-size: small;
}

.game-player-leader {
  display: flex;
  align-items: center;
  gap: 10px;
}

.game-player-leader-image {
  width: 25%;
  min-width: 50px;
  border-radius: 5px;
}

.game-player-leader-ability {
  font-size: small;
}

.game-deck-section {
  display: flex;
  gap: 10px;
}

.game-player-deck-date {
  font-size: small;
}

.game-player-deck-section {
  display: flex;
  flex-grow: 1;
  flex: 1 1 0px;
  background-color: darkgray;
  border-radius: 5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.game-player-deck-section-highlighted {
  border-style: solid;
  border-color: dimgray;
  margin-left: -2px;
  margin-right: -2px;
}

.game-player-deck-section-self {
  cursor: pointer;
}

.game-deck-container {
  flex-direction: column;
  gap: 10px;
}

.game-deck-icon {
  width: 80px;
  opacity: 50%;
}

.game-self-deck-info {
  flex-grow: 0;
}

.game-self-deck-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-battlefield-icon {
  width: 85px;
  opacity: 50%;
}

.game-combat-card-wrapper {
  position: relative;
  display: flex;
  height: 100%;
  min-width: 10px;
  padding-right: 10px;
  aspect-ratio: 309 / 444;
}

.game-combat-card-wrapper:last-child {
  margin-right: -10px;
}

.game-combat-card-wrapper:last-child,
.game-combat-card-wrapper:hover,
.game-combat-card-wrapper-selected {
  min-width: 60px;
}

.game-history-placeholder {
  flex-direction: column;
  opacity: 50%;
}

.game-history-icon {
  height: 50px;
  width: 50px;
}

.waiting-container {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 10px;
}

.game-summary-victor-round {
  border-style: solid;
  border-width: 2px;
}

.game-summary-round-won {
  border-color: #267402;
}

.game-summary-round-lost {
  border-color: #970014;
}

.game-history-round-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.game-history-round-name {
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
}

.game-history-move-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding-top: 10px;
  align-items: center;
}

.game-history-move-unit {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 10px;
  border-radius: 10px;
  background-color: darkgray;
}

.game-history-move-overview {
  display: flex;
  gap: 10px;
}

.game-history-move-self {
  flex-direction: row-reverse;
}

.game-history-move-text {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  text-align: start;
}

.game-history-move-text-wrappable {
  white-space: normal;
}

.game-history-move-text-opponent {
  text-align: right;
}

.game-history-move-image-container-outer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 25%;
}

.game-history-move-image-container-inner {
  width: 100%;
  aspect-ratio: 309 / 444;
}

.game-history-move-image {
  height: 100%;
  width: 100%;
  border-radius: 10px;
}

.game-history-move-user-description {
  display: flex;
  flex-direction: column;
  width: calc(75% - 15px);
  height: calc(100% - 10px);
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  justify-content: space-between;
}

.game-history-move-user-description-opponent {
  padding-left: 0;
  padding-right: 10px;
}

.game-history-move-texts {
  display: flex;
  flex-direction: column;
}

.game-history-loading-container {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -30px;
}

.game-list-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  background-color: lightgray;
  margin-bottom: 10px;
  border-radius: 5px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
}

.game-list-row > div {
  width: calc(100% / 6);
}

#gamesContainer {
  display: flex;
  flex-direction: column;
  height: calc(100% - 50px);
  margin-left: 10%;
  margin-right: calc(10% - 18px);
}

#gamesHeader {
  width: calc(100% - 18px);
  margin-top: 10px;
  margin-bottom: 5px;
}

#gamesHeaderUpper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#gamesHeaderActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

#gamesRefresh {
  display: flex;
  align-items: center;
  justify-content: center;
}

#gamesList {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#gamesFilterSort {
  display: flex;
  gap: 10px;
}

#gameFilterCount {
  margin-left: 5px;
}

.game-filter-sort-group {
  display: flex;
  align-items: center;
}

.game-list-headers {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  font-weight: bold;
}

.game-list-headers > div {
  width: calc(100% / 6);
}

.games-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.games-header-button {
  margin-left: 2px;
  margin-top: 2px;
  margin-bottom: -2px;
}

.games-header-filter-values {
  display: flex;
  gap: 10px;
}

.games-header-filter-group-name {
  text-decoration: underline;
}

.games-header-filter-group-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
}

.games-header-filter-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 10px;
}

.games-header-filter-group-small {
  display: flex;
  align-items: flex-start;
}

.games-header-filter-checkbox {
  margin-top: 5px;
}

#homeContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#homeOptions {
  display: flex;
  gap: 10px;
}

.home-category {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: lightgray;
  border-radius: 5px;
  gap: 20px;
  justify-content: flex-start;
}

.home-category-header {
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
}

#loginContainer {
  display: flex;
  height: 100%;
  width: 100%;
}

#loginFields {
  height: 100%;
  width: calc(100% - (100% / ((1 + sqrt(5)) / 2))); /* golden ratio */
  min-width: 210px;
  background-color: lightgray;
}

#loginInfo {
  height: 100%;
  width: calc((100% / ((1 + sqrt(5)) / 2)) - 10%); /* golden ratio */
  padding-left: 10%;
  padding-right: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

#loginSiteTitle {
  font-size: xxx-large;
}

#loginSiteDescription {
  text-align: center;
}

#loginIcons {
  display: flex;
  gap: 10px;
}

#loginIcons a {
  height: 30px;
  width: 30px;
  align-items: center;
  justify-content: center;
  display: flex;
}

#loginAlert {
  font-size: small;
  margin-top: 30px;
}

#loginAlertTitle {
  font-weight: bold;
  text-align: center;
}

#loginAlertDescription {
  text-align: center;
}

#logoutContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#logoutRetry {
  margin-top: 10px;
}

#logoutError {
  color: red;
}

#profileContainer {
  display: flex;
  flex-direction: column;
  background-color: lightgray;
  padding: 20px;
  border-radius: 5px;
}

#profileContainer table caption {
  font-weight: bold;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: 10px;
  text-decoration: underline;
}

#profileContainer table tr td:first-child {
  text-align: right;
}

#profileLogout {
  margin-top: 10px;
  margin-left: auto;
}

body {
  font-family: 'Segoe UI';
}

html,
#body,
#root {
  margin: 0;
  height: 100%;
}

#root {
  display: flex;
  flex-direction: column;
}

button {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: transparent;
  border-style: solid;
  cursor: pointer;
}

.centered {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pointable {
  cursor: pointer;
}

.error-text {
  color: red;
  text-align: center;
}

.help-text {
  font-size: small;
}

.required-field {
  color: red;
  margin-left: 2px;
}

.right-button {
  display: block;
  float: right;
}

.actions {
  display: flex;
  justify-content: flex-end;
}

.actions .primary {
  margin-left: 5px;
}

.content-block {
  background-color: lightgray;
  margin: 10px;
  border-radius: 5px;
  padding: 10px;
}

.whole-screen-overlay {
  position: fixed;
  display: flex;
  z-index: 100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.whole-screen-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 50%;
  max-width: 400px;
  margin: auto;
  gap: 10px;
  padding: 25px;
  text-align: center;
  z-index: 2;
  background-color: white;
}

.icon-container {
  border-radius: 50%;
  padding-top: 2px;
  padding-left: 2px;
  padding-right: 2px;
  background-color: rgb(128 128 128 / 50%);
}

.icon-container:hover {
  background-color: 'gray';
}

.multi-row-cell {
  display: flex;
  flex-direction: column;
}

.monsters-color {
  background-color: #970014;
}

.northern-realms-color {
  background-color: #0152cc;
}

.scoiatael-color {
  background-color: #267402;
}

.nilfgaardian-color {
  background-color: #333333;
}

.skellige-color {
  background-color: #5e027a;
}

.item-highlighted {
  border-style: solid;
  border-width: 4px;
  border-radius: 10px;
  border-color: #e9a018;
  margin: -4px;
  z-index: 1;
}