/* Shared tarot-card face used on the homepage and reading detail page. */
.tarot-card-face {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 190px;
  height: 285px;
  padding: 18px;
  border: 1px solid #d5a9c8;
  border-radius: 24px;
  background: radial-gradient(ellipse at 35% 22%, #c797bc 0, #755587 48%, #242049 100%);
  box-shadow: inset 0 0 0 7px #ffffff0d, 0 0 45px #c88cba33;
  color: #f8e9ed;
}
.module-area#tarot .tarot-card-back { width: 190px; height: 285px; }
.tarot-card-face::before {
  position: absolute;
  z-index: 0;
  inset: 12px;
  border: 1px solid #f1d9e355;
  border-radius: 17px;
  content: "";
  pointer-events: none;
}
.tarot-card-ornament {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  color: #d9b2ce;
  font-size: 10px;
  letter-spacing: 6px;
  text-align: center;
}
.tarot-card-ornament.top { top: 23px; }
.tarot-card-ornament.bottom { bottom: 22px; }
.tarot-card-face .tarot-illustration {
  position: relative;
  z-index: 1;
  display: block;
  width: 116px;
  height: 154px;
  overflow: visible;
  flex: 0 0 auto;
}
.tarot-card-face .art-line {
  fill: none;
  stroke: #f5e9e5;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tarot-card-face .art-gold {
  fill: none;
  stroke: #dfb64f;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tarot-card-face .tarot-card-name {
  position: absolute;
  z-index: 1;
  right: 15px;
  bottom: 48px;
  left: 15px;
  color: #edc55e;
  font: 600 10px/1.2 var(--sans, Arial, sans-serif);
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.tarot-card-back.tarot-card-face.revealed {
  transform: rotate(0) scale(1.04);
  border-color: #d5a9c8;
  background: radial-gradient(ellipse at 35% 22%, #c797bc 0, #755587 48%, #242049 100%);
  box-shadow: inset 0 0 0 7px #ffffff0d, 0 0 45px #c88cba55;
}
.tarot-face.tarot-card-face { margin: 0 auto 28px; }
@media (max-width: 760px) {
  .module-area#tarot .tarot-card-back { width: 166px; height: 249px; }
  .tarot-face.tarot-card-face,
  .tarot-card-back.tarot-card-face.revealed {
    width: 166px;
    height: 249px;
  }
  .tarot-card-face .tarot-illustration { width: 106px; height: 140px; }
  .tarot-card-face .tarot-card-name { bottom: 42px; font-size: 9px; }
}