#cards {
  position: fixed;
  width: 100%;
  height: 0%; /* was 50% before, but why? */
  transform: translateY(-600px);
  z-index: 5;
  transition: transform 0.8s ease-out;
}
#cards.active {
  transform: translateY(0);
}
#cards.battle-mode {
  height: 100%;
}

#cards .cards-blocker {
  z-index: 210;
  background-color: rgba(77, 60, 72, 0.9);
  position: fixed;
  top: 0;
  left: -50px;
  right: -50px;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
#cards .cards-blocker.active {
  opacity: 1;
}
.card {
  position: fixed;
  width: 372px;
  height: 509px;
  box-shadow: 0 4px 4px rgba(53, 35, 26, 0.5);
  border-radius: 32px;
  opacity: 1;
  top: 60px;
  background-color: transparent;
  background-position: center center;
  background-image: url(../img/card/card-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(0.8);
  transition: transform 0.1s ease-out, top 0.3s ease-out, left 0.3s ease-out, opacity 0.4s ease-in;
}
.card.out-of-queue {
  display: none;
}
#cards.cards-at-bottom {
  transform: none;
}
#cards.cards-at-bottom .card {
  top: initial;
  bottom: 80px;
}
.card.remove {
  top: -50px;
  opacity: 0;
}
.card.zombie {
  background-image: url(../img/card/card-bg-z.png);
}
.card.fight {
  z-index: 220;
}
.card.day .at-night {
  display: none;
}
.card .dead {
  width: 100%;
  position: absolute;
  top: 22%;
  display: none;
}
.card.preview .dead,
.card.dead .dead {
  display: block;
}
.card.dead div.health,
.card.dead div.attack {
  display: none !important;
}
.card .dead img {
  width: 100%;
  height: auto;
}
#dismantle-card.active,
.card.fight.active {
  box-shadow: 0 0 5px 4px #dc6452, 0 0 12px 8px #dc6452;
}
.card div.attack,
.card div.shield,
.card div.health {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(53, 35, 26, 0.5);
  text-align: center;
  font-size: 52px;
  line-height: 1.55em;
  font-weight: 300;
}
.card .shield {
  right: 30px;
  bottom: 30px;
  color: white;
  background-color: rgba(145, 211, 242, 0.9);
  border: 1px rgba(75, 153, 190, 0.25) solid;
}
.card div.attack {
  left: 30px;
  top: 30px;
  color: white;
  background-color: rgba(220, 100, 82, 0.66);
  border: 1px rgba(220, 100, 82, 0.2) solid;
}
.card div.health {
  right: 30px;
  top: 30px;
  color: white;
  background-color: rgba(94, 195, 85, 0.66);
  border: 1px rgba(94, 195, 195, 0.2) solid;
}
.card.zombie img.motive {
  top: 24px;
  left: 0;
  width: 100%;
}
.card.zombie .distance {
  background-color: #dc6452;
  background: linear-gradient(to bottom, rgba(0,0,0, 0.4) 0, #dc6452 8px, #dc6452 100%);
  color: #fff;
}
.card.event .distance {
  background-color: rgba(91, 155, 213, 1);
  background: linear-gradient(to bottom, rgba(0,0,0, 0.4) 0, rgba(91, 155, 213, 1) 8px, rgba(91, 155, 213, 1) 100%);
  color: #fff;
}

.card .distance {
  display: inline-block;
  pointer-events: none;
  background-color: #f0e4da ;
  color: rgba(91, 155, 213, 1);
  padding: 11px 24px 4px;
  line-height: 1em;
  border-bottom-right-radius: 8px 8px;
  border-bottom-left-radius: 8px 8px;
  font-size: 24px;
  font-weight: 300;
  font-style: italic;
  position: absolute;
  bottom: -39px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(53, 35, 26, 0.4);
  background: linear-gradient(to bottom, rgba(53, 35, 26, 0.1) 0, #fffefb 8px, #fffefb 100%);
  z-index: -1;
}
.card .inner {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(../img/card/border-house.png);
  background-position: center center;
  background-size: 97% 98%;
  background-repeat: no-repeat;
}

.card .inner .status {
  position: absolute;
  z-index: 1;
  top: 26px;
  right: 26px;
}
.card .inner .status div {
  display: none;
  width: 56px;
  height: 56px;
  padding: 0 8px;
  background: url(../img/card/status.png) center center no-repeat;
  background-size: contain;
}
.card .inner .status div.status-locked {
  background-image: url(../img/card/status-locked.png);
}
.card .inner .status div.status-looted {
  background-image: url(../img/card/status-looted.png);
}
.card .inner .status div.status-zombies {
  background-image: url(../img/card/status-zombies.png);
}
.card .inner .status div.status-infested {
  background-image: url(../img/card/status-infested.png);
}
.card h2 {
  position: absolute;
  top: 32px;
  width: 100%;
  font-weight: 300;
  color: rgba(137, 110, 102, 1);
  font-size: 36px;
  text-align: center;
  text-transform: capitalize;
}
#cards .card li.close,
#cards .card li.got-it {
  margin-top: 340px;
}
.card p.text {
  position: absolute;
  top: 80px;
  width: 100%;
  padding: 0 36px;
  font-family: 'Kalam';
  color: rgba(137, 110, 102, 1);
  font-size: 26px;
  text-align: center;
}
.card p.text img.double {
  width: 80px;
  height: auto;
  padding-top: 10px;
}

.card img.motive {
  position: absolute;
  top: 50px;
  left: 5%;
  width: 90%;
  height: auto;
  transition: opacity 0.1s ease-out, filter 0.1s ease-out;
}
.card.fight span.distance,
.card.fight ul.actions {
  display: none;
}
.card:not(.fight):hover {
  transform: scale(0.9);
  z-index: 201;
}
.card.fight.attack {
  transform: scale(0.9);
}
#cards .card:not(.fight):hover img.motive {
  filter: blur(4px);
  opacity: 0.8;
}
#cards .card:not(.fight):hover .banner {
  opacity: 0;
  transform: translateY(5px);
}

#cards .banner {
  position: absolute;
  bottom: 7%;
  width: 100%;
  color: rgba(137, 110, 102, 0.8);
  text-align: center;
  text-transform: capitalize;
  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}

#cards .banner img {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

.card.weapon .inner {
  background-image: url(../img/card/border-weapon.png);
}

.card.event .inner {
  background-image: url(../img/card/border-weapon.png);
}

.card.weapon img.motive {
  top: 70px;
  width: 80%;
  left: 50%;
  transform: translatex(-50%);
}

.card.weapon .distance {
  font-style: normal;
}

.card.weapon .extensions {
  position: absolute;
  top: 76%;
  left: 50%;
  width: 78%;
  transform: translateX(-50%);
}

.card.weapon .extensions li {
  display: inline-block;
  margin: 0 2px;
  position: relative;
  width: 86px;
  height: 77px;
  box-shadow: 0 2px 3px rgba(53, 35, 26, 0.4);
  border-radius: 18px;
  background-color: transparent;
  background-position: center center;
  background-image: url(../img/card/chip.png);
  background-size: cover;
  background-repeat: no-repeat;  
}

.card.weapon .extensions li span {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(../img/card/chip-border-neutral.png);
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.card.weapon .extensions .text {
  text-align: center;
}
.card.weapon .extensions .damage {
  color: #ed7d31;
  padding: 8px 4px;
  font-size: 42px;
}
.card.weapon .extensions .durability {
  color: rgba(91, 155, 213, 1);
  padding: 12px 4px;
  font-size: 36px;
}
.card.weapon .extensions .add {
  color: rgba(137, 110, 102, 1);
  padding: 8px 4px;
  font-size: 42px;
}

.card.weapon .dmg.chip {
  background-color: #ed7d31;
  box-shadow: 0 2px 3px rgba(137, 110, 102,0.6);
  color: white;
  position: absolute;
  top: 32px;
  left: 28px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  text-align: center;
}

.card.weapon .dmg.chip .label {
  display: block;
  margin: 8px 0 -18px;
  font-size: 20px;
}

.card.weapon .dmg.chip {
  font-size: 46px;
  margin: 0;
  padding: 0;
  vertical-align: top;
}