* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
  font-family: "Arial", "Verdana", sans-serif;
}

section.game-setup {
  background-color: #121212;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 25px;
}
@media (max-height: 500px) {
  section.game-setup {
    gap: 15px;
  }
}
section.game-setup .mtg {
  width: 200px;
  aspect-ratio: 1/1;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  margin-inline: auto;
}
@media (max-height: 650px) {
  section.game-setup .mtg {
    width: 150px;
  }
}
@media (max-height: 600px) {
  section.game-setup .mtg {
    width: 100px;
  }
}
@media (max-height: 500px) {
  section.game-setup .mtg {
    width: 75px;
  }
}
@media (max-height: 400px) {
  section.game-setup .mtg {
    width: 75px;
  }
}
@media (max-height: 350px) {
  section.game-setup .mtg {
    width: 65px;
  }
}
section.game-setup .inputs {
  color: white;
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: 250px;
  margin-inline: auto;
  max-height: -moz-fit-content;
  max-height: fit-content;
}
@media (max-height: 650px) {
  section.game-setup .inputs {
    gap: 15px;
  }
}
@media (max-height: 400px) {
  section.game-setup .inputs {
    gap: 10px;
  }
}
section.game-setup .inputs .input h4 {
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 2px;
  font-size: 18px;
  margin-bottom: 5px;
}
@media (max-height: 400px) {
  section.game-setup .inputs .input h4 {
    font-size: 14px;
  }
}
section.game-setup .inputs .input div {
  position: relative;
}
section.game-setup .inputs .input div::after {
  content: "";
  width: 15px;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  background-image: url("img/arrow.svg");
  background-size: contain;
  background-position: center right;
  background-repeat: no-repeat;
  pointer-events: none;
}
section.game-setup .inputs input, section.game-setup .inputs select, section.game-setup .inputs #start-game, section.game-setup .inputs #continue-game {
  background: none;
  background-color: transparent;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  padding: 15px;
  width: 100%;
  font-size: 16px;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none;
}
@media (max-height: 500px) {
  section.game-setup .inputs input, section.game-setup .inputs select, section.game-setup .inputs #start-game, section.game-setup .inputs #continue-game {
    padding-block: 10px;
  }
}
@media (max-height: 400px) {
  section.game-setup .inputs input, section.game-setup .inputs select, section.game-setup .inputs #start-game, section.game-setup .inputs #continue-game {
    font-size: 14px;
  }
}
@media (max-height: 350px) {
  section.game-setup .inputs input, section.game-setup .inputs select, section.game-setup .inputs #start-game, section.game-setup .inputs #continue-game {
    padding-block: 7px;
  }
}
section.game-setup .inputs input option, section.game-setup .inputs select option, section.game-setup .inputs #start-game option, section.game-setup .inputs #continue-game option {
  background-color: #121212;
}
section.game-setup .inputs select {
  position: relative;
}
section.game-setup .inputs .btn-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
section.game-setup .inputs #start-game, section.game-setup .inputs #continue-game {
  padding-inline: 20px;
  max-width: -moz-fit-content;
  max-width: fit-content;
  transition: 0.3s;
}
section.game-setup .inputs #start-game.unavailable, section.game-setup .inputs #continue-game.unavailable {
  pointer-events: none;
  opacity: 0.25;
}
section.game-setup .inputs #start-game:hover, section.game-setup .inputs #start-game:focus, section.game-setup .inputs #continue-game:hover, section.game-setup .inputs #continue-game:focus {
  background-color: #883900;
  border-color: #883900;
}

@keyframes warningFilter {
  0% {
    filter: brightness(0) saturate(100%) invert(60%) sepia(73%) saturate(7227%) hue-rotate(338deg) brightness(98%) contrast(108%);
  }
  25% {
    filter: brightness(0) saturate(100%) invert(60%) sepia(73%) saturate(7227%) hue-rotate(338deg) brightness(98%) contrast(108%) brightness(5);
  }
  75% {
    filter: brightness(0) saturate(100%) invert(60%) sepia(73%) saturate(7227%) hue-rotate(338deg) brightness(98%) contrast(108%) brightness(5);
  }
  100% {
    filter: brightness(0) saturate(100%) invert(60%) sepia(73%) saturate(7227%) hue-rotate(338deg) brightness(98%) contrast(108%);
  }
}
@keyframes warningColor {
  0% {
    color: white;
  }
  33% {
    color: #FF3737;
  }
  66% {
    color: #FF3737;
  }
  100% {
    color: white;
  }
}
section#game-board {
  background-color: #121212;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
section#game-board:not(.active) {
  display: none;
}
section#game-board.day .players .player {
  border-color: #fff;
}
section#game-board.day .menu {
  filter: invert(1);
}
section#game-board.day .menu .day-night {
  background-image: url("img/day.svg");
  background-size: 60% 60%;
}
section#game-board.night .menu .day-night {
  background-image: url("img/night.svg");
  background-size: 60% 60%;
}
section#game-board.portrait {
  width: 100vh;
  height: 100vw;
  transform: translate(-50%, -50%) rotate(-90deg);
}
section#game-board .player .btm-btns .tax-dmg {
  display: none !important;
}
section#game-board .player .btm-btns .tax-dmg .cmdr-only {
  display: none;
}
section#game-board[format=brawl] .player .btm-btns .tax-dmg, section#game-board[format=commander] .player .btm-btns .tax-dmg {
  display: flex !important;
}
section#game-board[format=commander] .player .btm-btns .tax-dmg .cmdr-only {
  display: inline;
}
section#game-board[format=brawl] .player .btm-btns .icon {
  display: block !important;
}
section#game-board * {
  transition: 0.3s;
}
section#game-board .players {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
section#game-board .players .player {
  background-color: rgba(35, 29, 70, 0.75);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  border: 1.5px solid black;
}
section#game-board .players .player[pindex="0"] {
  background-color: #1F0621;
}
section#game-board .players .player[pindex="0"] .btn-panel .col.c2 button.b-life {
  color: #fab7ff;
}
section#game-board .players .player[pindex="1"] {
  background-color: #061D29;
}
section#game-board .players .player[pindex="1"] .btn-panel .col.c2 button.b-life {
  color: #afe3ff;
}
section#game-board .players .player[pindex="2"] {
  background-color: #242005;
}
section#game-board .players .player[pindex="2"] .btn-panel .col.c2 button.b-life {
  color: #fff5ab;
}
section#game-board .players .player[pindex="3"] {
  background-color: #081E05;
}
section#game-board .players .player[pindex="3"] .btn-panel .col.c2 button.b-life {
  color: #b4ffad;
}
section#game-board .players .player[pindex="4"] {
  background-color: #270D06;
}
section#game-board .players .player[pindex="4"] .btn-panel .col.c2 button.b-life {
  color: #ffbaac;
}
section#game-board .players .player[pindex="5"] {
  background-color: #050727;
}
section#game-board .players .player[pindex="5"] .btn-panel .col.c2 button.b-life {
  color: #afb5ff;
}
section#game-board .players .player.placeholder {
  background-color: #121212;
}
section#game-board .players .player[cod~=poison], section#game-board .players .player[cod~=cdmg], section#game-board .players .player[cod~=life] {
  background-image: url("img/dead.svg");
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #222;
  color: #555;
}
section#game-board .players .player[cod~=poison] *, section#game-board .players .player[cod~=cdmg] *, section#game-board .players .player[cod~=life] * {
  animation-name: none !important;
}
section#game-board .players .player[cod~=poison] .btn-panel .col .icon, section#game-board .players .player[cod~=cdmg] .btn-panel .col .icon, section#game-board .players .player[cod~=life] .btn-panel .col .icon {
  filter: brightness(0) saturate(100%) invert(37%) sepia(0%) saturate(8%) hue-rotate(163deg) brightness(85%) contrast(89%);
}
section#game-board .players .player[cod~=poison] .btm-btns button, section#game-board .players .player[cod~=cdmg] .btm-btns button, section#game-board .players .player[cod~=life] .btm-btns button {
  opacity: 50%;
}
section#game-board .players .player[cod~=poison] .modal .modal-container .grid .b-cdmg.current, section#game-board .players .player[cod~=cdmg] .modal .modal-container .grid .b-cdmg.current, section#game-board .players .player[cod~=life] .modal .modal-container .grid .b-cdmg.current {
  color: #555 !important;
}
section#game-board .players .player[cod~=cdmg] .btm-btns button.tax-dmg {
  opacity: 1;
}
section#game-board .players .player[cod~=cdmg] .btm-btns button.tax-dmg .icon, section#game-board .players .player[cod~=cdmg] .btm-btns button.tax-dmg .txt {
  filter: brightness(0) saturate(100%) invert(60%) sepia(73%) saturate(7227%) hue-rotate(338deg) brightness(98%) contrast(108%);
}
section#game-board .players .player[cod~=cdmg] .modal .modal-container .c-info.grid button.b-cdmg[cod=true] {
  color: #FF3737 !important;
}
section#game-board .players .player[cod~=cdmg] .modal .modal-container .c-info.grid button.b-cdmg[cod=true] .c-title, section#game-board .players .player[cod~=cdmg] .modal .modal-container .c-info.grid button.b-cdmg[cod=true] .c-row {
  filter: brightness(0) saturate(100%) invert(60%) sepia(73%) saturate(7227%) hue-rotate(338deg) brightness(98%) contrast(108%);
}
section#game-board .players .player[warn~=cdmg] .btm-btns button.tax-dmg {
  opacity: 1;
}
section#game-board .players .player[warn~=cdmg] .btm-btns button.tax-dmg .icon, section#game-board .players .player[warn~=cdmg] .btm-btns button.tax-dmg .txt {
  animation-name: warningFilter;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
section#game-board .players .player[warn~=cdmg] .modal .modal-container [warn=true] {
  animation-name: warningColor;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
section#game-board .players .player[warn~=cdmg] .modal .modal-container [warn=true] .c-title, section#game-board .players .player[warn~=cdmg] .modal .modal-container [warn=true] .c-row {
  animation-name: warningFilter;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
section#game-board .players .player[cod~=poison] .btn-panel .col .icon.b-poison {
  filter: brightness(0) saturate(100%) invert(60%) sepia(73%) saturate(7227%) hue-rotate(338deg) brightness(98%) contrast(108%);
}
section#game-board .players .player[cod~=poison] .modal .modal-container .c-info[counter=poison] .c-title, section#game-board .players .player[cod~=poison] .modal .modal-container .c-info[counter=poison] .c-row {
  filter: brightness(0) saturate(100%) invert(60%) sepia(73%) saturate(7227%) hue-rotate(338deg) brightness(98%) contrast(108%);
}
section#game-board .players .player[warn~=poison] .btn-panel .col .icon.b-poison {
  animation-name: warningFilter;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
section#game-board .players .player[warn~=poison] .modal .modal-container [counter=poison] {
  animation-name: warningColor;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
section#game-board .players .player[warn~=poison] .modal .modal-container [counter=poison] .c-title, section#game-board .players .player[warn~=poison] .modal .modal-container [counter=poison] .c-row {
  animation-name: warningFilter;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
section#game-board .players .player[cod~=life] .btn-panel .col.c2 .icon.b-life {
  filter: brightness(0) saturate(100%) invert(60%) sepia(73%) saturate(7227%) hue-rotate(338deg) brightness(98%) contrast(108%);
}
section#game-board .players .player[cod~=life] .modal .modal-container .c-info[counter=life] .c-title, section#game-board .players .player[cod~=life] .modal .modal-container .c-info[counter=life] .c-row {
  filter: brightness(0) saturate(100%) invert(60%) sepia(73%) saturate(7227%) hue-rotate(338deg) brightness(98%) contrast(108%);
}
section#game-board .players .player[warn~=life] .btn-panel .col.c2 .icon.b-life {
  animation-name: warningFilter;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
section#game-board .players .player[warn~=life] .modal .modal-container [counter=life] {
  animation-name: warningColor;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
section#game-board .players .player[warn~=life] .modal .modal-container [counter=life] .c-title, section#game-board .players .player[warn~=life] .modal .modal-container [counter=life] .c-row {
  animation-name: warningFilter;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
section#game-board .players .player button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: 0.3s;
}
section#game-board .players .player .btn-panel {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 15%;
  padding-top: 40px;
}
section#game-board .players .player .btn-panel .col {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  gap: 25%;
}
section#game-board .players .player .btn-panel .col:not(.c2) button {
  color: transparent;
  font-size: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 35px;
  aspect-ratio: 1/1;
}
section#game-board .players .player .btn-panel .col:not(.c2) button.b-poison {
  background-image: url("img/poison.svg");
}
section#game-board .players .player .btn-panel .col:not(.c2) button.b-energy {
  background-image: url("img/energy.svg");
}
section#game-board .players .player .btn-panel .col:not(.c2) button.b-storm {
  background-image: url("img/storm.svg");
}
section#game-board .players .player .btn-panel .col:not(.c2) button.b-experience {
  background-image: url("img/experience.svg");
}
section#game-board .players .player .btn-panel .col.c2 button {
  color: white;
  font-size: 90px;
}
section#game-board .players .player .btm-btns {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
section#game-board .players .player .btm-btns button {
  background-color: #121212;
  color: white;
  border: none;
  padding: 15px;
  font-size: 16px;
  display: flex;
  flex-direction: row;
  gap: 7px;
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
}
section#game-board .players .player .btm-btns button .icon img {
  height: 20px;
  width: auto;
}
section#game-board .players .player .btm-btns button .txt {
  margin-block: auto;
}
section#game-board .players .player .btm-btns button.tax-dmg {
  border-top-left-radius: 0;
}
section#game-board .players .player .btm-btns button.mana-pool {
  border-top-right-radius: 0;
  margin-left: auto;
}
section#game-board .players .player .modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  background-color: inherit;
  opacity: 0;
  pointer-events: none;
}
section#game-board .players .player .modal:not([open=false]) {
  opacity: 1;
  pointer-events: all;
}
section#game-board .players .player .modal[open=counter] .modal-container.counter {
  display: flex;
}
section#game-board .players .player .modal[open=counter] .modal-container.counter .c-btm-row .c-storm, section#game-board .players .player .modal[open=counter] .modal-container.counter .c-btm-row .c-energy {
  display: none;
}
section#game-board .players .player .modal[open=counter] .modal-container.counter .c-info[counter=storm][open=true] ~ .c-btm-row .c-storm {
  display: block;
}
section#game-board .players .player .modal[open=counter] .modal-container.counter .c-info[counter=energy][open=true] ~ .c-btm-row .c-energy {
  display: block;
}
section#game-board .players .player .modal[open=mana] .modal-container.mana {
  display: flex;
}
section#game-board .players .player .modal[open=commander] .modal-container.commander {
  display: flex;
}
section#game-board .players .player .modal .modal-container {
  width: 90%;
  margin: auto;
  padding-block: 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  display: none;
}
section#game-board .players .player .modal .modal-container button, section#game-board .players .player .modal .modal-container .c-title {
  border: 2px solid white;
  border-radius: 5px;
  color: white;
  font-size: 18px;
  font-weight: normal;
}
section#game-board .players .player .modal .modal-container .c-info {
  margin: auto;
  color: white;
  max-width: -moz-fit-content;
  max-width: fit-content;
  display: none;
}
section#game-board .players .player .modal .modal-container .c-info[open=true] {
  display: block;
}
section#game-board .players .player .modal .modal-container .c-info .c-title {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  border: none;
}
section#game-board .players .player .modal .modal-container .c-info .c-row {
  display: flex;
  flex-direction: row;
}
section#game-board .players .player .modal .modal-container .c-info .c-row .c-icon {
  height: 40px;
  width: auto;
  max-width: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center left;
     object-position: center left;
}
section#game-board .players .player .modal .modal-container .c-info .c-row p {
  margin: auto 20px;
  border: none;
}
section#game-board .players .player .modal .modal-container .c-info .c-row button, section#game-board .players .player .modal .modal-container .c-info .c-row p {
  font-size: 30px;
}
section#game-board .players .player .modal .modal-container .c-info .c-row button {
  width: 40px;
}
section#game-board .players .player .modal .modal-container .c-info .c-row button.c-plus {
  margin-left: 10px;
}
section#game-board .players .player .modal .modal-container .c-btm-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
section#game-board .players .player .modal .modal-container .c-btm-row .c-confirm, section#game-board .players .player .modal .modal-container .c-btm-row .c-reset, section#game-board .players .player .modal .modal-container .c-btm-row .c-tax, section#game-board .players .player .modal .modal-container .c-btm-row .c-storm, section#game-board .players .player .modal .modal-container .c-btm-row .c-energy {
  color: white;
  padding: 10px 20px;
}
section#game-board .players .player .modal .modal-container.mana .c-info.m-btns[open=true] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
section#game-board .players .player .modal .modal-container.mana .c-info.m-btns[open=true] button {
  border: none;
  padding: 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 7.5px;
  width: 33%;
}
section#game-board .players .player .modal .modal-container.mana .c-info.m-btns[open=true] button img {
  height: 30px;
  aspect-ratio: 1/1;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
section#game-board .players .player .modal .modal-container.mana .c-info.m-btns[open=true] button .b-value {
  margin-block: auto;
  font-size: 30px;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid #000;
  border-radius: 5px;
  min-width: 100%;
  height: 60%;
  min-height: -moz-fit-content;
  min-height: fit-content;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid[open=false] {
  display: none;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid .current {
  background-color: transparent !important;
  pointer-events: none;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid .b-cdmg[dead=true] {
  background-color: #222 !important;
  color: #555 !important;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="1"] .current, section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="2"] .current {
  display: none;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="1"] .b-cdmg, section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="2"] .b-cdmg {
  width: 100%;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="3"] .b-cdmg, section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="4"] .b-cdmg {
  width: 50%;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="3"][pindex="0"], section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="3"][pindex="1"], section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="4"][pindex="0"], section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="4"][pindex="1"] {
  transform: rotate(180deg);
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="3"][pindex="0"] button, section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="3"][pindex="1"] button, section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="4"][pindex="0"] button, section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="4"][pindex="1"] button {
  transform: rotate(180deg);
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="5"] .b-cdmg, section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="6"] .b-cdmg {
  width: 33.33%;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="5"][pindex="0"], section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="5"][pindex="1"], section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="5"][pindex="2"], section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="6"][pindex="0"], section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="6"][pindex="1"], section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="6"][pindex="2"] {
  transform: rotate(180deg);
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="5"][pindex="0"] button, section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="5"][pindex="1"] button, section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="5"][pindex="2"] button, section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="6"][pindex="0"] button, section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="6"][pindex="1"] button, section#game-board .players .player .modal .modal-container.commander .c-info.grid[players="6"][pindex="2"] button {
  transform: rotate(180deg);
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid .b-cdmg {
  border: 1px solid #000;
  padding-block: 15px;
  border-radius: 0;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid .b-cdmg[dindex="0"] {
  background-color: #1F0621;
  color: #fab7ff;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid .b-cdmg[dindex="1"] {
  background-color: #061D29;
  color: #afe3ff;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid .b-cdmg[dindex="2"] {
  background-color: #242005;
  color: #fff5ab;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid .b-cdmg[dindex="3"] {
  background-color: #081E05;
  color: #b4ffad;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid .b-cdmg[dindex="4"] {
  background-color: #270D06;
  color: #ffbaac;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid .b-cdmg[dindex="5"] {
  background-color: #050727;
  color: #afb5ff;
}
section#game-board .players .player .modal .modal-container.commander .c-tax {
  display: none;
}
section#game-board .players .player .modal .modal-container.commander .c-info.grid[open=true] ~ .c-btm-row .c-tax {
  display: block;
}
section#game-board .players[players="1"] .player {
  width: 100%;
  height: 100%;
  padding-top: 75px;
}
section#game-board .players[players="1"] ~ .menu {
  top: 0;
  transform: translate(-50%, 20%);
}
section#game-board .players[players="2"] .player {
  width: 100%;
  height: 50%;
}
section#game-board .players[players="2"] .player[pindex="0"] {
  transform: rotate(180deg);
}
section#game-board .players[players="3"] .player, section#game-board .players[players="4"] .player {
  width: 50%;
  height: 50%;
}
section#game-board .players[players="3"] .player[pindex="0"], section#game-board .players[players="3"] .player[pindex="1"], section#game-board .players[players="4"] .player[pindex="0"], section#game-board .players[players="4"] .player[pindex="1"] {
  transform: rotate(180deg);
}
section#game-board .players[players="5"] .player, section#game-board .players[players="6"] .player {
  width: 33.33%;
  height: 50%;
}
section#game-board .players[players="5"] .player[pindex="0"], section#game-board .players[players="5"] .player[pindex="1"], section#game-board .players[players="5"] .player[pindex="2"], section#game-board .players[players="6"] .player[pindex="0"], section#game-board .players[players="6"] .player[pindex="1"], section#game-board .players[players="6"] .player[pindex="2"] {
  transform: rotate(180deg);
}
section#game-board .players[players="5"] .player .btm-btns .icon, section#game-board .players[players="6"] .player .btm-btns .icon {
  display: none;
}
section#game-board .players[players="5"] .player .btm-btns .mp-hide, section#game-board .players[players="6"] .player .btm-btns .mp-hide {
  display: none;
}
section#game-board .menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row;
  gap: 10px;
}
section#game-board .menu button {
  color: transparent;
  font-size: 0;
  background-color: black;
  width: 50px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
}
section#game-board .menu button.calc {
  background-image: url("img/calc.svg");
}
section#game-board .menu button.mtg {
  background-image: url("img/mtg.svg");
  background-size: 80% 80%;
}
section#game-board .menu button.dice {
  background-image: url("img/dice.svg");
}
section#game-board .menu button.day-night {
  background-image: url("img/day-night.svg");
  background-size: 80% 80%;
}
section#game-board .main-modals {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: #121212;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
section#game-board .main-modals[open=false] {
  opacity: 0;
  pointer-events: none;
}
section#game-board .main-modals .m-modal {
  margin: auto;
  max-width: 300px;
  background-color: inherit;
}
section#game-board .main-modals .m-modal[open=false] {
  display: none !important;
}
section#game-board .main-modals .m-modal .btn {
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  padding: 15px 20px;
  font-size: 16px;
  border-radius: 5px;
  width: 200px;
  margin-inline: auto;
  cursor: pointer;
}
section#game-board .main-modals .m-modal .btn:hover, section#game-board .main-modals .m-modal .btn:focus {
  background-color: #883900;
  border-color: #883900;
}
section#game-board .main-modals .m-modal .btn-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
section#game-board .main-modals .m-modal .btn-row .btn {
  max-width: -moz-fit-content;
  max-width: fit-content;
}
section#game-board .main-modals .m-modal[mname=mtg] {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 15px;
}
section#game-board .main-modals .m-modal[mname=mtg] .are-you-sure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  background-color: inherit;
  gap: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: inherit;
}
section#game-board .main-modals .m-modal[mname=mtg] .are-you-sure[open=false] {
  opacity: 0;
  pointer-events: none;
}
section#game-board .main-modals .m-modal[mname=mtg] .are-you-sure p {
  line-height: 150%;
  font-size: 16px;
}
section#game-board .main-modals .m-modal[mname=dice] {
  color: white;
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: 250px;
  margin-inline: auto;
  max-height: -moz-fit-content;
  max-height: fit-content;
}
@media (max-height: 650px) {
  section#game-board .main-modals .m-modal[mname=dice] {
    gap: 15px;
  }
}
@media (max-height: 400px) {
  section#game-board .main-modals .m-modal[mname=dice] {
    gap: 10px;
  }
}
section#game-board .main-modals .m-modal[mname=dice] .settings {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
section#game-board .main-modals .m-modal[mname=dice] .settings .dice-input h4 {
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 2px;
  font-size: 18px;
  margin-bottom: 5px;
}
@media (max-height: 400px) {
  section#game-board .main-modals .m-modal[mname=dice] .settings .dice-input h4 {
    font-size: 14px;
  }
}
section#game-board .main-modals .m-modal[mname=dice] .settings .dice-input div {
  position: relative;
}
section#game-board .main-modals .m-modal[mname=dice] .settings .dice-input div::after {
  content: "";
  width: 15px;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  background-image: url("img/arrow.svg");
  background-size: contain;
  background-position: center right;
  background-repeat: no-repeat;
  pointer-events: none;
}
section#game-board .main-modals .m-modal[mname=dice] .settings input, section#game-board .main-modals .m-modal[mname=dice] .settings select {
  background: none;
  background-color: transparent;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  padding: 15px;
  width: 100%;
  font-size: 16px;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none;
}
@media (max-height: 500px) {
  section#game-board .main-modals .m-modal[mname=dice] .settings input, section#game-board .main-modals .m-modal[mname=dice] .settings select {
    padding-block: 10px;
  }
}
@media (max-height: 400px) {
  section#game-board .main-modals .m-modal[mname=dice] .settings input, section#game-board .main-modals .m-modal[mname=dice] .settings select {
    font-size: 14px;
  }
}
@media (max-height: 350px) {
  section#game-board .main-modals .m-modal[mname=dice] .settings input, section#game-board .main-modals .m-modal[mname=dice] .settings select {
    padding-block: 7px;
  }
}
section#game-board .main-modals .m-modal[mname=dice] .settings input option, section#game-board .main-modals .m-modal[mname=dice] .settings select option {
  background-color: #121212;
}
section#game-board .main-modals .m-modal[mname=dice] .settings select {
  position: relative;
}
section#game-board .main-modals .m-modal[mname=dice] .btn-row .btn {
  margin-inline: 0;
}
section#game-board .main-modals .m-modal[mname=dice] .dice-results {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: inherit;
  width: 90%;
  height: 90%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
section#game-board .main-modals .m-modal[mname=dice] .dice-results[open=false] {
  opacity: 0;
  pointer-events: none;
}
section#game-board .main-modals .m-modal[mname=dice] .dice-results h3 {
  text-align: center;
  font-size: 30px;
}
section#game-board .main-modals .m-modal[mname=dice] .dice-results .results-display {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}
section#game-board .main-modals .m-modal[mname=dice] .dice-results .results-display .d-result {
  border: 1px solid #fff;
  border-radius: 5px;
  width: 40px;
  aspect-ratio: 1/1;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 700px) {
  section#game-board:not(.portrait) .players .player {
    border-width: 0.5px;
  }
}
@media (max-width: 1000px) {
  section#game-board:not(.portrait) .players .player .btn-panel {
    gap: 10%;
  }
}
@media (max-width: 700px) {
  section#game-board:not(.portrait) .players .player .btn-panel {
    padding-top: 25px;
  }
}
@media (max-width: 550px) {
  section#game-board:not(.portrait) .players .player .btn-panel {
    padding-top: 20px;
  }
}
@media (max-width: 1000px) {
  section#game-board:not(.portrait) .players .player .btn-panel .col.c2 button.icon.b-life {
    font-size: 60px;
  }
}
@media (max-width: 600px) {
  section#game-board:not(.portrait) .players .player .btn-panel .col.c2 button.icon.b-life {
    font-size: 40px;
  }
}
@media (max-width: 450px) {
  section#game-board:not(.portrait) .players .player .btn-panel .col.c2 button.icon.b-life {
    font-size: 30px;
  }
}
@media (max-width: 700px) {
  section#game-board:not(.portrait) .players .player .btn-panel .col:not(.c2) button.icon {
    width: 30px;
  }
}
@media (max-width: 600px) {
  section#game-board:not(.portrait) .players .player .btn-panel .col:not(.c2) button.icon {
    width: 25px;
  }
}
@media (max-width: 450px) {
  section#game-board:not(.portrait) .players .player .btn-panel .col:not(.c2) button.icon {
    width: 20px;
  }
}
@media (max-width: 700px) {
  section#game-board:not(.portrait) .players .player .btm-btns button {
    padding: 15px 10px;
    font-size: 14px;
  }
}
@media (max-width: 550px) {
  section#game-board:not(.portrait) .players .player .btm-btns button {
    padding: 10px;
    font-size: 12px;
  }
}
@media (max-width: 475px) {
  section#game-board:not(.portrait) .players .player .btm-btns button {
    padding: 7.5px;
  }
}
@media (max-width: 1000px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container {
    padding-bottom: 10px;
  }
}
@media (max-width: 1000px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container.mana .c-info.m-btns .b-mana {
    gap: 5px;
  }
}
@media (max-width: 750px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container.mana .c-info.m-btns .b-mana {
    padding: 10px;
  }
}
@media (max-width: 650px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container.mana .c-info.m-btns .b-mana {
    padding: 5px;
  }
}
@media (max-width: 1000px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container.mana .c-info.m-btns .b-mana img {
    height: 22.5px;
  }
}
@media (max-width: 750px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container.mana .c-info.m-btns .b-mana img {
    height: 17.5px;
  }
}
@media (max-width: 1000px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container.mana .c-info.m-btns .b-mana .b-value {
    font-size: 22.5px;
  }
}
@media (max-width: 750px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container.mana .c-info.m-btns .b-mana .b-value {
    font-size: 17.5px;
  }
}
@media (max-width: 1000) {
  section#game-board:not(.portrait) .players .player .modal .modal-container.commander .c-info.grid .b-cdmg {
    padding-block: 10px;
    font-size: 14px;
  }
}
@media (max-height: 450px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container.commander .c-info.grid .b-cdmg {
    padding-block: 10px;
    font-size: 14px;
  }
}
@media (max-width: 1000px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container .c-info .c-title {
    font-size: 14px;
  }
}
@media (max-width: 1000px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container .c-info .c-row .c-icon {
    width: 30px;
  }
}
@media (max-width: 500px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container .c-info .c-row .c-icon {
    width: 25px;
  }
}
@media (max-width: 1000px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container .c-info .c-row .c-value, section#game-board:not(.portrait) .players .player .modal .modal-container .c-info .c-row .c-minus, section#game-board:not(.portrait) .players .player .modal .modal-container .c-info .c-row .c-plus {
    font-size: 20px;
  }
}
@media (max-width: 1000px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container .c-info .c-row .c-value {
    margin-inline: 10px;
  }
}
@media (max-width: 1000px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container .c-info .c-row .c-minus, section#game-board:not(.portrait) .players .player .modal .modal-container .c-info .c-row .c-plus {
    width: 30px;
    height: 30px;
    border-width: 1px;
    margin-block: auto;
  }
}
@media (max-width: 500px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container .c-info .c-row .c-minus, section#game-board:not(.portrait) .players .player .modal .modal-container .c-info .c-row .c-plus {
    width: 25px;
    height: 25px;
  }
}
@media (max-width: 600px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container .c-info .c-row .c-plus {
    margin-left: 5px;
  }
}
@media (max-width: 1000px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container .c-btm-row button {
    padding: 10px;
    border: 1px solid white;
    font-size: 14px;
  }
}
@media (max-width: 600px) {
  section#game-board:not(.portrait) .players .player .modal .modal-container .c-btm-row button {
    padding: 5px 7.5px;
  }
}
@media (max-width: 550px) {
  section#game-board:not(.portrait) .players[players="3"] .player .btm-btns button .icon, section#game-board:not(.portrait) .players[players="4"] .player .btm-btns button .icon {
    display: none;
  }
}
@media (max-width: 700px) {
  section#game-board:not(.portrait) .menu button {
    width: 40px;
  }
}
@media (max-width: 550px) {
  section#game-board:not(.portrait) .menu button {
    width: 35px;
  }
}

@media (max-height: 700px) {
  section#game-board.portrait .players .player {
    border-width: 0.5px;
  }
}
@media (max-height: 1000px) {
  section#game-board.portrait .players .player .btn-panel {
    gap: 10%;
  }
}
@media (max-height: 700px) {
  section#game-board.portrait .players .player .btn-panel {
    padding-top: 25px;
  }
}
@media (max-height: 550px) {
  section#game-board.portrait .players .player .btn-panel {
    padding-top: 20px;
  }
}
@media (max-height: 1000px) {
  section#game-board.portrait .players .player .btn-panel .col.c2 button.icon.b-life {
    font-size: 60px;
  }
}
@media (max-height: 600px) {
  section#game-board.portrait .players .player .btn-panel .col.c2 button.icon.b-life {
    font-size: 40px;
  }
}
@media (max-height: 450px) {
  section#game-board.portrait .players .player .btn-panel .col.c2 button.icon.b-life {
    font-size: 30px;
  }
}
@media (max-height: 700px) {
  section#game-board.portrait .players .player .btn-panel .col:not(.c2) button.icon {
    width: 30px;
  }
}
@media (max-height: 600px) {
  section#game-board.portrait .players .player .btn-panel .col:not(.c2) button.icon {
    width: 25px;
  }
}
@media (max-height: 450px) {
  section#game-board.portrait .players .player .btn-panel .col:not(.c2) button.icon {
    width: 20px;
  }
}
@media (max-height: 700px) {
  section#game-board.portrait .players .player .btm-btns button {
    padding: 15px 10px;
    font-size: 14px;
  }
}
@media (max-height: 550px) {
  section#game-board.portrait .players .player .btm-btns button {
    padding: 10px;
    font-size: 12px;
  }
}
@media (max-height: 475px) {
  section#game-board.portrait .players .player .btm-btns button {
    padding: 7.5px;
  }
}
@media (max-height: 1000px) {
  section#game-board.portrait .players .player .modal .modal-container {
    padding-bottom: 10px;
  }
}
@media (max-height: 1000px) {
  section#game-board.portrait .players .player .modal .modal-container.mana .c-info.m-btns .b-mana {
    gap: 5px;
  }
}
@media (max-height: 750px) {
  section#game-board.portrait .players .player .modal .modal-container.mana .c-info.m-btns .b-mana {
    padding: 10px;
  }
}
@media (max-height: 650px) {
  section#game-board.portrait .players .player .modal .modal-container.mana .c-info.m-btns .b-mana {
    padding: 5px;
  }
}
@media (max-height: 1000px) {
  section#game-board.portrait .players .player .modal .modal-container.mana .c-info.m-btns .b-mana img {
    height: 22.5px;
  }
}
@media (max-height: 750px) {
  section#game-board.portrait .players .player .modal .modal-container.mana .c-info.m-btns .b-mana img {
    height: 17.5px;
  }
}
@media (max-height: 1000px) {
  section#game-board.portrait .players .player .modal .modal-container.mana .c-info.m-btns .b-mana .b-value {
    font-size: 22.5px;
  }
}
@media (max-height: 750px) {
  section#game-board.portrait .players .player .modal .modal-container.mana .c-info.m-btns .b-mana .b-value {
    font-size: 17.5px;
  }
}
@media (max-height: 1000) {
  section#game-board.portrait .players .player .modal .modal-container.commander .c-info.grid .b-cdmg {
    padding-block: 10px;
    font-size: 14px;
  }
}
@media (max-width: 450px) {
  section#game-board.portrait .players .player .modal .modal-container.commander .c-info.grid .b-cdmg {
    padding-block: 10px;
    font-size: 14px;
  }
}
@media (max-height: 1000px) {
  section#game-board.portrait .players .player .modal .modal-container .c-info .c-title {
    font-size: 14px;
  }
}
@media (max-height: 1000px) {
  section#game-board.portrait .players .player .modal .modal-container .c-info .c-row .c-icon {
    width: 30px;
  }
}
@media (max-height: 500px) {
  section#game-board.portrait .players .player .modal .modal-container .c-info .c-row .c-icon {
    width: 25px;
  }
}
@media (max-height: 1000px) {
  section#game-board.portrait .players .player .modal .modal-container .c-info .c-row .c-value, section#game-board.portrait .players .player .modal .modal-container .c-info .c-row .c-minus, section#game-board.portrait .players .player .modal .modal-container .c-info .c-row .c-plus {
    font-size: 20px;
  }
}
@media (max-height: 1000px) {
  section#game-board.portrait .players .player .modal .modal-container .c-info .c-row .c-value {
    margin-inline: 10px;
  }
}
@media (max-height: 1000px) {
  section#game-board.portrait .players .player .modal .modal-container .c-info .c-row .c-minus, section#game-board.portrait .players .player .modal .modal-container .c-info .c-row .c-plus {
    width: 30px;
    height: 30px;
    border-width: 1px;
    margin-block: auto;
  }
}
@media (max-height: 500px) {
  section#game-board.portrait .players .player .modal .modal-container .c-info .c-row .c-minus, section#game-board.portrait .players .player .modal .modal-container .c-info .c-row .c-plus {
    width: 25px;
    height: 25px;
  }
}
@media (max-height: 600px) {
  section#game-board.portrait .players .player .modal .modal-container .c-info .c-row .c-plus {
    margin-left: 5px;
  }
}
@media (max-height: 1000px) {
  section#game-board.portrait .players .player .modal .modal-container .c-btm-row button {
    padding: 10px;
    border: 1px solid white;
    font-size: 14px;
  }
}
@media (max-height: 600px) {
  section#game-board.portrait .players .player .modal .modal-container .c-btm-row button {
    padding: 5px 7.5px;
  }
}
@media (max-height: 550px) {
  section#game-board.portrait .players[players="3"] .player .btm-btns button .icon, section#game-board.portrait .players[players="4"] .player .btm-btns button .icon {
    display: none;
  }
}
@media (max-height: 700px) {
  section#game-board.portrait .menu button {
    width: 40px;
  }
}
@media (max-height: 550px) {
  section#game-board.portrait .menu button {
    width: 35px;
  }
}/*# sourceMappingURL=style.css.map */