/* Color palette created using https://coolors.co/f2f2df-95937d-4c5760-5e6b6e-5d737e */

body {
  background-color: #4C5760;
  color: #fff;
}

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

.choose-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.choose-cards > .cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  justify-content: center;

  max-width: 900px;
}

.game {
  display: flex;
  flex-direction: column;
}

#controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1em;
}

#controls > .buttons {
  display: flex;
  flex-direction: row;
}

#status {
  font-size: 1.5em;
  margin: 0.5em;
}

#board.white {
  transform: rotate(180deg);
}

.middle {
  display: flex;
  flex-direction: row;
}

.white-cards > .board-cards, .black-cards > .board-cards {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.to-white-cards, .to-black-cards {
  display: flex;
  justify-content: center;
  flex-direction: column-reverse;

  min-width: 250px;
}

.to-white-cards, .white-cards {
  transform: rotate(180deg);
}

.card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;

  width: 200px;

  padding: 0.2em;
  margin: 0.2em;

  color: #010400;
  background-color: #e9e6c4;
  border-radius: 0.5em;
}

.card.selected {
  background-color: #95937D;
}

.card-name {
  font-size: 1em;
}

.card-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  flex-grow: 1;

  margin: 0.1em;
}

@font-face {
    font-family: "Aoyagi Reisho";
    src: url(/static/font/Aoyagi\ Reisho.otf);
}

.card-character {
  font-family: "Aoyagi Reisho";
  font-size: 2.5em;
}

.card-deltas {
  margin: 0.1em;
}

.delta {
  width: 1em;
  height: 1em;
}

.delta.red {
  background-color: #995248;
}

.delta.green {
  background-color: #828d73;
}

.delta.blue {
  background-color: #52798d;
}

.delta.piece {
  background-color: #010400;
}

.delta.normal {
  background-color: #f2f2df;
}

.grid {
  flex-grow: 1;
}

.grid-row {
  display: flex;
  direction: row;
}

.grid-square {
  display: flex;
  justify-content: center;
  align-content: center;

  height: 5em;
  width: 5em;
  margin: 0.3em;
}

.grid-square.arch {
  box-shadow: inset 0 0 8px #010400;
}

.grid-square.white {
  transform: rotate(180deg);
}

.grid-square.normal {
  background-color: #93A8AC;
}

.grid-square.selected {
  background-color: #010400;
}

.grid-square.dest {
  background-color: #5E6B6E;
}