#cards {
  position: absolute;
  bottom: 0; right: 250px;
  height: 280px;
  width: 200px;
  margin: auto;
  z-index: 100;
}

#cards.closed .card,
#cards.hide-not-chosen .card:not(.chosen) {
  bottom: 0;
  transform: rotate(0turn) translate(0, 300px);
}


.card {
  width: 200px;
  height: 280px;
  position: absolute;
  bottom: 75px;
  cursor: pointer;
  transition: all ease-out 200ms;
  font-size: 0.9rem;
}

.card > * { pointer-events: none; }

.card .front,
.card .back {
  border-radius: 5px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  background-color: #eee;
  padding: 8px;
  transform-style: preserve-3d;
  position: absolute;
  transition: transform ease-out 200ms;
  top: 0; left: 0; right: 0; bottom: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card .front {
  z-index: 2;
  transform: rotateX(0) rotateY(0);
}

.card .back {
  z-index: 1;
  transform: rotateY(-180deg);
}

.card.chosen .front {
  transform: rotateY(180deg);
  z-index: 0;
}

.card.chosen .back {
  transform: rotateY(0);
}

.card:nth-of-type(1) {
  transform: rotate(-0.03turn) translate(-180px, 0);
}

.card:nth-of-type(2) {
  transform: rotate(-0.01turn) translate(-60px, 20px);
}

.card:nth-of-type(3) {
  transform: rotate(0.01turn) translate(60px, 20px);
}

.card:nth-of-type(4) {
  transform: rotate(0.03turn) translate(180px, 0);
}

.card:hover:not(.chosen) {
  bottom: 150px;
  z-index: 99;
}

.card.chosen {
  z-index: 100;
  transform: rotate(0turn) translate(0, -150px);
}

.card .type,
.card .money,
.card .subtext {
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 1.5;
}
.card .money {
  padding: 10px 0;
  font-weight: 600;
  font-size: 1.1em;
}
.card .money .amount {
  display: inline-block;
  line-height: 20px;
  vertical-align: middle;
}
.card .money img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.card[data-sign="1"] .money {
  color: #60806d;
}
.card[data-sign="-1"] .money {
  color: #a85555;
}
.card[data-sign="0"] .money {
  display: none;
}
.card .type {
  top: 0; left: 0;
  font-weight: 400;
  font-variant: small-caps;
  font-size: 1.2em;
  border-radius: 5px 5px 0 0;
}

b.surgeon,
.card.surgeon .type {
  background-color: #f0b5b5;
  color: #a85555;
}

b.job,
.card.job .type {
  background-color: #a9d1f2;
  color: #4e6f91;
}

b.event,
.card.event .type {
  background-color: #C9E0CD;
  color: #60806d;
}

b.victory,
.card.victory .type {
  background-color: gold;
  color: #716316;
}

.card .flavor {
  width: 100%;
  height: 100%;
  padding: 25px 0;
  color: black;
}

.card .money,
.card .subtext {
  bottom: 0; left: 0;
}

.card .subtext {
  color: #666;
  line-height: 2;
  font-size: 0.8em;
  text-transform: lowercase;
}


.card *::selection {
  background: none;
}

.card .flavor > p:first-of-type {
  margin-top: 0;
}

.card .back > p {
  margin: 0;
  padding-top: 25px;
}

.card b {
  font-weight: 500;
}

.card.surgeon strong,
.card.surgeon b {
  color: #a85555;
}

.card.event strong,
.card.event b {
  color: #60806d;
}

.card.job strong,
.card.job b {
  color: #4e6f91;
}

.card.victory strong,
.card.victory b {
  color: #716316;
}

.card i {
  font-size: 0.9em;
  display: block;
  font-style: normal;
  color: #666;
}

.card.disabled {
  pointer-events: none;
}
.card.disabled .front,
.card.disabled .back {
  background: #cfcfcf;
  color: #444;
}
.card.disabled .type {
  background: #afafaf;
  color: #666;
}