.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}
.playing-card.revealed .card-inner {
  transform: rotateY(180deg);
}
.card-face,
.card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 6px;
  overflow: hidden;
}
.card-back {
  background: #c6d3b8;
  border: 1px solid #dce4ce;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-back::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #61795677;
  border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, #42664c1f 0px, #42664c1f 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(-45deg, #42664c1a 0px, #42664c1a 1px, transparent 1px, transparent 5px);
}
.card-back::after {
  content: "N";
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 17px;
  color: #617957;
  background: #c6d3b8;
  width: 27px;
  height: 31px;
  border: 1px solid #6a815566;
  transform: rotate(-8deg);
  border-radius: 4px;
}
.card-face {
  background: #f3f1e9;
  color: #24312c;
  transform: rotateY(180deg);
  border: 1px solid #fff8;
}
.card-face.red {
  color: #c26c5f;
}
.card-corner {
  position: absolute;
  left: 7px;
  top: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.05;
}
.card-corner small {
  font-size: 12px;
  margin-top: 1px;
}
.card-corner.bottom {
  inset: auto 7px 5px auto;
  transform: rotate(180deg);
}
.card-suit {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  font-family: Georgia, serif;
  font-size: 37px;
  line-height: 1;
}