@font-face {
  font-family: 'Fortune Letters';
  src: url('../assets/fortune-letters.ttf') format('truetype');
}

@font-face {
  font-family: 'Fortune Widgets';
  src: url('../assets/fortune_widgets.ttf') format('truetype');
}

:root {
  --gameboard-width: min(60vh, 100vw);
  --desktop-gameboard-width: min(90vh, 49vw);
  --gameboard-dimensions: 6;
  --card-size: calc(
    var(--gameboard-width) / var(--gameboard-dimensions) - 0.25em
  );
  --border-radius: calc(var(--gameboard-width) / 70);
  --border-width: calc(var(--gameboard-width) / 200);
  --text-large: calc(var(--gameboard-width) / 20);
  --body-background: #659dbf;
  --title-text: #f2f2f2;
  --dark-text: #2d2e2c;
  --box-background: #50514f94;
  --icon-text-color: #94eb6b;
  --icon-label-text: #a3a79f;
  --menu-border: #8c6746;
  --link-color: #528c42;
  --link-hover: var(--icon-text-color);
  --enemy-color: #d93b18;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-image: url('../assets/building_grey2.png'),
    url('../assets/funky-lines-blue.png');
  /* background-color: var(--body-background); */
  background-size: 100vw, auto;
  background-blend-mode: multiply;
  background-repeat: no-repeat, repeat;
  background-position: top center, top left;
  font-family: 'Fortune Letters', Futura, Geneva, sans-serif;
  border-style: none;
  overflow-x: hidden;
}

/* main menu and in game button styling */

button,
input[type='submit'] {
  all: unset;
  font-family: 'Fortune Letters';
}

button:hover,
input[type='submit']:hover {
  cursor: pointer;
  color: var(--icon-text-color);
}

/* in game button container */

.button-Container {
  display: grid;
  grid-template-columns: auto auto;
  background-color: var(--box-background);
  border-radius: var(--border-radius);
  padding: 5px;
}

.inGameButton {
  position: relative;
  color: var(--icon-text-color);
  background-color: var(--box-background);
  border: calc(0.005 * var(--gameboard-width)) solid rgb(75, 75, 75);
  border-radius: var(--border-radius);
  margin: 0px;
  width: var(--card-size);
  height: var(--card-size);
  display: grid;
  justify-content: center;
  align-content: center;
  font-size: var(--text-large);
  user-select: none;
  cursor: pointer;
}

.inGameButton:hover {
  color: white;
}

.inGameButton:disabled {
  color: rgb(107, 107, 107);
  cursor: unset;
}

.menu-button {
  font-size: 1.5rem;
  background-color: var(--box-background);
  padding: 6px;
  color: white;
  border-radius: calc(var(--border-radius) * 0.5);
  margin: 5px;
  text-justify: center;
  cursor: pointer;
}

.menu_button:hover {
  color: var(--icon-text-color);
}

.auth-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: stretch;
}

/* .menuBar-item .auth-button {
  font-size: 1.2rem;
} */

.menuBar-item button {
  font-size: 1.2rem;
}

.main-grid {
  display: grid;
  grid-gap: 0.5em;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: start;
  align-content: start;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
    'menuBar'
    'enemyHUD'
    'gameboard'
    'playerHUD'
    'playerHandContainer';
}

.HUD-container {
  user-select: none;
  align-content: end;
  display: grid;
  grid-template-columns: auto 1fr;
  justify-content: start;
  align-items: end;
  align-content: end;
  justify-items: stretch;
  justify-content: start;
  margin: 0em 0.25em;
}

.HUDText {
  background-color: var(--box-background);
  color: white;
  border-radius: 0em var(--border-radius) var(--border-radius) 0em;
  display: grid;
  grid-template-columns: auto auto;
  align-content: end;
  align-items: end;
  justify-content: start;
}

.name {
  text-transform: uppercase;
  font-size: 1.5em;
}

.HUDelement {
  margin: 0.25em;
}

.enemyHUD {
  grid-area: enemyHUD;
}

.playerHUD {
  grid-area: playerHUD;
}

.playerIcon {
  position: relative;
  width: var(--card-size);
  height: var(--card-size);
  background-color: #f2f2f27e;
  border-radius: var(--border-radius) var(--border-radius) 0
    var(--border-radius);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
}

.playerIcon.active::after {
  border-radius: var(--border-radius);
  background-color: rgba(255, 255, 255, 0.644);
  position: absolute;
  content: ' ';
  z-index: -3;
  border: solid calc(var(--border-width) * 2) white;
  left: 0em;
  top: 0em;
  right: 0em;
  bottom: 0em;
}

.player1Icon.losing {
  background-image: url('../assets/penitent_losing.svg');
}

.player1Icon.winning {
  background-image: url('../assets/penitent_winning.svg');
}

.player2Icon.losing {
  background-image: url('../assets/sailor_losing.svg');
}

.player2Icon.winning {
  background-image: url('../assets/sailor_winning.svg');
}

.menuBar {
  grid-area: menuBar;
  display: flex;
  align-items: center;
  align-content: start;
  justify-items: center;
  justify-content: space-between;
  justify-self: stretch;
  padding: 0.25em 0em;
}

/* tabs rules */

#tabSet {
  grid-area: tabSet;
  grid-gap: 1rem;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.tab {
  font-size: 2rem;
  background-color: var(--icon-label-text);
  padding: 1rem;
  color: black;
  border-radius: var(--border-radius);
  text-justify: center;
  cursor: pointer;
}

.tab:hover {
  color: white;
}

.tab.active {
  background-color: white;
  color: var(--icon-text-color);
}

.tabs {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

[data-tab-content] {
  display: none;
}

.active[data-tab-content] {
  display: grid;
}

#tabbedContentContainer {
  grid-area: tabbedContent;
  width: 100%;
}

/* end tabs rules */

/* profile page CSS */

.hideOnMobile {
  display: none;
}

#profile-grid {
  display: grid;
  padding: 1rem;
  justify-content: stretch;
  justify-items: center;
  align-items: start;
  align-content: start;
  grid-gap: 1rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    'menuBar'
    'nickName'
    'tabSet'
    'tabbedContent';
}

#nickNameContainer {
  width: 100%;
  grid-area: nickName;
  display: grid;
  grid-template-columns: auto 1fr auto;
  justify-content: stretch;
  justify-items: stretch;
  align-items: center;
  align-content: center;
  background-color: white;
  border-radius: var(--border-radius);
  padding: 6px;
}

#nickname {
  font-size: 1.5rem;
  padding: 6px;
  display: grid;
  justify-content: center;
  align-content: center;
  margin: 5px;
}

#editNickBttn {
  font-size: 1rem;
}

input[type='text'] {
  border: 1px solid var(--icon-label-text);
  border-radius: calc(var(--border-radius) * 0.5);
  background-color: whitesmoke;
  padding: 6px;
}

.statsGridContainer {
  justify-content: stretch;
  justify-items: center;
  align-items: start;
  align-content: start;
  grid-gap: 1rem;
  grid-template-columns: 1fr;
}

.removeGridGaps {
  grid-gap: none;
}

#spGridContainer {
  grid-template-areas:
    'spTitle'
    'spPieChart'
    'spBarGraph'
    'spData';
}

#mpGridContainer {
  grid-template-areas:
    'mpTitle'
    'mpPieChart'
    'mpBarGraph'
    'mpData';
}

#spTitle {
  grid-area: spTitle;
}

#mpTitle {
  grid-area: mpTitle;
}

.profileTitleContainer {
  background-color: white;
  display: grid;
  width: 100%;
  justify-content: stretch;
  justify-items: stretch;
}

.profileHud {
  display: grid;
  justify-content: space-evenly;
  align-content: center;
  align-items: center;
  grid-template-columns: auto auto;
  padding: 1rem;
  grid-gap: 1rem;
}

.profileHudTitle {
  display: grid;
  grid-column-start: span 2;
  font-size: 1.5rem;
  justify-content: center;
  width: 100%;
}

.profileHudItem {
  font-size: 1.5rem;
}

.hudNumbers {
  font-size: 2rem;
  font-weight: bold;
  color: var(--icon-text-color);
  padding: 1rem;
  border-radius: var(--border-radius);
  background-color: var(--title-text);
}

#spData {
  grid-area: spData;
}

#mpData {
  grid-area: mpData;
}

#spPieChart {
  grid-area: spPieChart;
}

#spPieChart2 {
  grid-area: spBarGraph;
}

#mpPieChart {
  grid-area: mpPieChart;
}

#mpPieChart2 {
  grid-area: mpBarGraph;
}

.pieChart {
  width: 100%;
  background-color: white;
  overflow: hidden;
}

.dataDiv {
  border-radius: var(--border-radius);
}

.fullWidth {
  width: 100%;
}

table {
  border-collapse: collapse;
  border-radius: var(--border-radius);
  overflow: hidden;
  font-size: 1rem;
  font-family: 'Open Sans', sans-serif;
}

thead tr {
  background-color: var(--box-background);
  color: #ffffff;
  text-align: left;
}

thead th {
  font-weight: bold;
}

th,
td {
  padding: 12px 15px;
}

tbody tr {
  background-color: white;
}

tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

table td:last-child {
  border-bottom: 0;
}

/* responsive tables */

table,
thead,
tbody,
th,
td,
tr {
  display: block;
}

table thead {
  display: none;
}

table td {
  border-bottom: 1px solid rgba(221, 221, 221, 0.692);
  text-align: right;
}

table td::before {
  content: attr(data-label);
  float: left;
  font-weight: bold;
}

/* end responsive tables */

/* end profile page css*/

.light_shadow {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  overflow: hidden;
}

.dark_shadow {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 8px;
  overflow: hidden;
}

.menuBar-item {
  color: rgb(255, 255, 255);
  padding: 0em;
  font-size: var(--text-large);
  text-align: center;
}

#roomNumber {
  font-size: 1em;
}

.player-hand-container {
  width: calc(var(--gameboard-width) - 0.5em);
  grid-area: playerHandContainer;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  position: relative;
}

.player-hand {
  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-items: center;
  background-color: var(--box-background);
  border-radius: var(--border-radius);
  padding: 3px;
  align-items: center;
  justify-content: stretch;
}

.gameboard {
  background-color: rgba(255, 250, 240, 0.13);
  grid-area: gameboard;
  border-radius: var(--border-radius);
  display: grid;
  width: var(--gameboard-width);
  height: var(--gameboard-width);
  grid-template-columns: repeat(var(--gameboard-dimensions), 1fr);
  grid-template-rows: repeat(var(--gameboard-dimensions), 1fr);
}

.boardSpace {
  position: relative;
  padding: 0px;
  margin: 0px;
  width: calc(var(--gameboard-width) / var(--gameboard-dimensions)-0.25em);
  height: calc(var(--gameboard-width) / var(--gameboard-dimensions)-0.25em);
  display: grid;
  align-content: center;
  justify-content: center;
}

.boardSpace::after {
  z-index: -2;
  content: ' ';
  position: absolute;
  left: 0.5em;
  top: 0.5em;
  right: 0.5em;
  bottom: 0.5em;
  background-color: rgba(255, 250, 240, 0.178);
  border-radius: var(--border-radius);
}

.dark-square::after {
  background-color: rgba(255, 250, 240, 0.329);
}

.playable-space::before {
  z-index: 2;
  content: ' ';
  position: absolute;
  left: 0.3em;
  top: 0.3em;
  right: 0.3em;
  bottom: 0.3em;
  border: solid calc(var(--border-width) * 2) #94eb6be5;
  border-radius: var(--border-radius);
}

.dragenter::before {
  border-color: white;
  border-style: dashed;
}

.influenceTokenContainer {
  position: relative;
  border-radius: var(--border-radius);
  border: calc(0.005 * var(--gameboard-width)) solid rgb(75, 75, 75);
  border-radius: 10px;
  margin: 0px;
  padding: 1px;
  width: var(--card-size);
  height: var(--card-size);
  display: grid;
  justify-content: center;
  align-content: center;
}

.influenceToken {
  position: absolute;
  left: 25%;
  top: 25%;
  z-index: 3;
  margin: 0px;
  padding: 0px;
  font-size: 1.5em;
  user-select: none;
  width: calc(var(--card-size) * 0.5);
  height: calc(var(--card-size) * 0.5);
  display: grid;
  justify-content: center;
  align-content: center;
  background-size: 95%;
  background-position: center;
  background-repeat: no-repeat;
}

.influenceToken.Player1Token {
  background-image: url('../assets/meeple_player.svg');
}

.influenceToken.Player2Token {
  background-image: url('../assets/meeple_enemy.svg');
}

.influenceToken.enemyToken {
  -webkit-animation: bounce-in-top 1.1s 0.5s both;
  animation: bounce-in-top 1.1s 0.5s both;
}

.card {
  background-color: #fffcd8;
  color: var(--dark-text);
  border: var(--border-width) solid rgb(75, 75, 75);
  border-radius: var(--border-radius);
  margin: 0px;
  padding: 4px;
  width: var(--card-size);
  height: var(--card-size);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 2px;
  grid-auto-flow: column;
  justify-content: center;
  box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.1),
    inset -2px -2px 2px rgba(0, 0, 0, 0.1);
  position: relative;
}

.draggable {
  cursor: pointer;
}

.draggable:hover {
  border: solid var(--border-width) white;
  border-radius: var(--border-radius);
}

.roll-in-top {
  -webkit-animation: roll-in-top 0.4s ease-out both;
  animation: roll-in-top 0.4s ease-out both;
}

.card-cell {
  font-family: 'Fortune Widgets';
  color: #2d2e2c;
  text-align: center;
  align-content: center;
  font-size: calc(var(--gameboard-width) / 16);
  margin: 0px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  user-select: none;
  position: relative;
}

.p1-control::after {
  z-index: 3;
  content: ' ';
  position: absolute;
  left: calc(-1 * var(--border-width));
  top: calc(-1 * var(--border-width));
  right: calc(-1 * var(--border-width));
  bottom: calc(-1 * var(--border-width));
  border: solid calc(var(--border-width) * 1.5) #4ceb02e1;
  border-radius: 1000px;
}

.p1-control::before {
  z-index: 2;
  content: ' ';
  position: absolute;
  left: -0.1em;
  top: -0.1em;
  right: -0.1em;
  bottom: -0.1em;
  border-radius: 1000px;
  animation: ripple 3s linear infinite;
}

.p2-control::after {
  z-index: 3;
  content: ' ';
  position: absolute;
  left: calc(-1 * var(--border-width));
  top: calc(-1 * var(--border-width));
  right: calc(-1 * var(--border-width));
  bottom: calc(-1 * var(--border-width));
  border: solid calc(var(--border-width) * 1.5) #d93b18da;
  border-radius: 1000px;
}

.p2-control::before {
  z-index: 2;
  content: ' ';
  position: absolute;
  left: -0.1em;
  top: -0.1em;
  right: -0.1em;
  bottom: -0.1em;
  border-radius: 1000px;
  animation: ripple 3s linear infinite;
}

/* choose nick form styling */
#resultDiv {
  display: none;
}
#resultDiv.active {
  display: inline;
  font-family: 'Open Sans', sans-serif;
  border-radius: var(--border-radius);
  padding: 0.5rem;
  animation: fadeIn linear 200ms;
}

#nickFormButtons {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.nickButton,
#nickSubmitButton {
  width: 100%;
}

.error {
  color: var(--enemy-color);
  background-color: #d93b1823;
}

.success {
  color: var(--link-color);
  background-color: #94eb6b42;
}

.formTitle {
  font-size: 1.5rem;
}

.subtext {
  font-size: 0.9rem;
  font-family: 'Open Sans', sans-serif;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0rem rgba(255, 255, 255, 0.6),
      0 0 0 0.5rem rgba(255, 255, 255, 0.6);
  }
  100% {
    box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.6),
      0 0 0 1rem rgba(255, 255, 255, 0);
  }
}

.Knots {
  background-image: url('../assets/knots.svg');
}
.Leaves {
  background-image: url('../assets/leaves.svg');
}
.Moons {
  background-image: url('../assets/moons.svg');
}
.Suns {
  background-image: url('../assets/suns.svg');
}
.Waves {
  background-image: url('../assets/waves.svg');
}
.Wyrms {
  background-image: url('../assets/wyrms.svg');
}

a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: var(--icon-text-color);
}

.link {
  text-decoration: none;
  font-weight: bold;
  color: var(--link-color);
}

.link:hover {
  text-decoration: none;
  color: var(--link-hover);
}

#gameOverBox {
  visibility: hidden;
  z-index: 4;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--body-background);
  background-image: url('../assets/funky-lines.png');
  background-blend-mode: multiply;
  color: rgb(255, 255, 255);
  font-size: calc(var(--text-large) * 1.25);
  border-radius: var(--border-radius);
  border: solid var(--border-width) white;
  display: grid;
  justify-content: center;
  align-content: center;
  text-align: center;
}

#winnerText {
  font-size: calc(var(--text-large) * 0.75);
}

#disconnectedBox {
  visibility: hidden;
  z-index: 4;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--body-background);
  background-image: url('../assets/funky-lines.png');
  background-blend-mode: multiply;
  color: rgb(255, 0, 0);
  font-size: calc(var(--text-large) * 1.25);
  border-radius: var(--border-radius);
  border: solid var(--border-width) white;
  display: grid;
  justify-content: center;
  align-content: center;
  text-align: center;
}

#disconnectedInfo {
  color: white;
  font-size: calc(var(--text-large) * 0.75);
}

/* Menus styling */

#titlePageBackground {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--gameboard-width);
  max-width: 98vw;
  /* max-height: 98vh; */
  border-radius: calc(var(--border-radius) * 2);
}

#overlay {
  z-index: 8;
  position: fixed;
  opacity: 0;
  transition: 200ms ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

#overlay.active {
  opacity: 1;
  pointer-events: all;
}

.menu-popup {
  z-index: 10;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 200ms ease-in-out;
  border-radius: var(--border-radius);
  background-color: white;
  display: grid;
  align-items: top;
  grid-template-columns: auto;
  justify-items: stretch;
  align-content: center;
  align-items: center;
  justify-content: center;
  padding: 30px 20px 20px 20px;
  text-align: center;
}

.menu-popup.active {
  transform: translate(-50%, -50%) scale(1);
}

.title-menu {
  background-color: rgba(255, 250, 240, 0.849);
}

.menu-header {
  margin-bottom: 10px;
  text-align: center;
  font-size: 5em;
  color: #333;
}

.subheader {
  font-size: 2rem;
}

.menu-popup .close {
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 25px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  cursor: pointer;
}

.menu-popup .close:hover {
  color: var(--icon-text-color);
}

#howToPlayInfo {
  width: calc(0.9 * var(--gameboard-width));
  justify-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-family: 'Open Sans', sans-serif;
}

/* New Game Options Menu */
#newGameOptionsOverlay {
  z-index: 8;
  position: fixed;
  transition: 200ms ease-in-out;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

#newGameOptionsOverlay.active {
  pointer-events: all;
}

#difficulty {
  display: grid;
  grid-template-columns: auto auto;
  justify-self: center;
  justify-content: center;
}

#layoutRadioButtons {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-self: center;
  justify-content: center;
}

#tokenRadioButtons {
  display: grid;
  grid-template-columns: auto auto;
  justify-self: center;
  justify-content: center;
}

input[type='radio'] {
  display: none;
}

input[type='radio']:hover + label > .layoutButton {
  filter: brightness(1.2) opacity(0.7);
  cursor: pointer;
}

input[type='radio']:checked + label > .layoutButton {
  background-color: var(--icon-text-color);
}

input[type='radio']:hover + label > img {
  filter: brightness(1.2) opacity(0.7);
  cursor: pointer;
}

input[type='radio']:checked + label > img {
  background-color: var(--icon-text-color);
}

#layoutTitle {
  font-size: 2em;
}

.optionsButton {
  font-size: 1.5em;
  background-color: var(--box-background);
  padding: 10px;
  color: white;
  border-radius: var(--border-radius);
  margin: 5px;
  text-justify: center;
  cursor: pointer;
}

.layoutButton {
  padding: 10px;
  margin: 10px;
  background: rgb(163, 163, 163);
  width: calc(0.25 * var(--gameboard-width));
  border-radius: var(--border-radius);
  /* justify-self: center; */
}

.tokenButton {
  padding: 10px;
  margin: 10px;
  background: rgb(163, 163, 163);
  width: calc(0.1 * var(--gameboard-width));
  height: calc(0.1 * var(--gameboard-width));
  border-radius: var(--border-radius);
  /* justify-self: center; */
}

.layoutButton img {
  width: 100%;
}

/* Rules styling */

#rules {
  z-index: 20;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: 200ms ease-in-out;
  display: grid;
  justify-content: stretch;
  justify-items: center;
  align-items: start;
  height: 100vh;
  overflow-y: auto;
  pointer-events: none;
}

#rules.active {
  opacity: 1;
  pointer-events: all;
}

#dinner {
  width: 100%;
  border-radius: var(--border-radius);
}

.rules-content {
  margin: 20px 0px;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.2rem;
  width: var(--gameboard-width);
  background-color: floralwhite;
  padding: 20px;
  border-radius: var(--border-radius);
  position: relative;
  text-justify: auto;
}

.rules-close {
  position: absolute;
  top: 0px;
  right: 15px;
  font-size: 25px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  cursor: pointer;
}

.rules-close:hover {
  color: var(--icon-text-color);
}

.rules-content img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

.rules-content h1 {
  text-align: center;
  font-family: 'Fortune Letters', Futura, Geneva, sans-serif;
}

.rules-content h2 {
  text-align: center;
  font-family: 'Fortune Letters', Futura, Geneva, sans-serif;
}

.rules-content h3 {
  text-align: center;
  font-family: 'Fortune Letters', Futura, Geneva, sans-serif;
}

/* Scores modal styling */
#scores {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: 200ms ease-in-out;
  display: grid;
  justify-content: stretch;
  justify-items: center;
  align-items: start;
  height: 100vh;
  overflow-y: auto;
  pointer-events: none;
}

#scores.active {
  opacity: 1;
  pointer-events: all;
  z-index: 50;
}

.scores-content {
  margin: 20px 0px;
  width: var(--gameboard-width);
  background-color: whitesmoke;
  padding: 25px;
  border-radius: var(--border-radius);
  position: relative;
  text-justify: auto;
}

.scores-close {
  position: absolute;
  top: 0px;
  right: 15px;
  font-size: 25px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  cursor: pointer;
}

.scores-close:hover {
  color: var(--icon-text-color);
}

/* Load screen styling */

#loadScreen {
  background-color: #0e517a;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  display: grid;
  align-content: center;
  justify-content: center;
  font-size: 3em;
  color: white;
  justify-items: center;
  transition: 600ms ease-in-out;
}

#loadScreen.active {
  opacity: 1;
  pointer-events: all;
}

#spinner {
  animation: spin 8s linear infinite;
  /* background-color: #d93b18; */
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Drag and drop mobile polyfill */

.dnd-poly-drag-image {
  opacity: 0.5 !important;
}

.dnd-poly-drag-image.dnd-poly-snapback {
  transition-property: transform, -webkit-transform !important;
  transition-duration: 250ms !important;
  transition-timing-function: ease-out !important;
}

/* Animations */

/* ----------------------------------------------
 * Generated by Animista on 2021-6-11 17:19:16
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-in-top
 * ----------------------------------------
 */
@-webkit-keyframes roll-in-top {
  0% {
    -webkit-transform: translateY(-800px) rotate(-540deg);
    transform: translateY(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes roll-in-top {
  0% {
    -webkit-transform: translateY(-800px) rotate(-540deg);
    transform: translateY(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2021-6-11 17:30:32
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-top
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

/* Desktop / tablet settings */

@media (orientation: landscape) {
  :root {
    --gameboard-width: var(--desktop-gameboard-width);
  }

  .main-grid {
    grid-template-columns: auto auto;
    grid-template-areas:
      'menuBar menuBar gameboard'
      'enemyHUD playerHUD gameboard'
      'playerHandContainer playerHandContainer gameboard'
      '. . gameboard'
      '. . gameboard'
      '. . gameboard'
      '. . gameboard'
      '. . gameboard';
  }

  #profile-grid {
    width: 80vw;
    margin: auto;
  }

  #spGridContainer {
    grid-template-columns: auto auto;
    grid-template-areas:
      'spTitle spTitle'
      'spPieChart spBarGraph'
      'spData spData';
  }

  #mpGridContainer {
    grid-template-columns: auto auto;
    grid-template-areas:
      'mpTitle mpTitle'
      'mpPieChart mpBarGraph'
      'mpData mpData';
  }

  /* responsive tables */

  table thead {
    display: table-header-group;
  }

  table {
    display: table;
  }
  thead {
    display: table-header-group;
  }
  tbody {
    display: table-row-group;
  }
  th {
    display: table-cell;
  }
  td {
    display: table-cell;
  }
  tr {
    display: table-row;
  }

  table td {
    text-align: left;
  }

  table td::before {
    content: none;
    float: unset;
  }

  /* end responsive tables */

  .hideOnMobile {
    display: inherit;
  }

  .profileHud {
    grid-template-columns: auto auto auto auto;
  }

  .HUDText {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .gameboard {
    grid-row-start: span 8;
  }

  .card {
    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.4),
      inset -2px -2px 2px rgba(0, 0, 0, 0.4);
  }

  #titlePageBackground {
    width: auto;
    height: var(--gameboard-width);
  }
}