/* Supplied artwork stays intact. Layout layers art behind the transparent front. */
.card-face {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  container-type: inline-size;
  isolation: isolate;
  color: #281b14;
  font-family: system-ui, sans-serif;
  text-align: left;
  line-height: 1.3;
}
.card-face > [class^='frame-'] {
  position: absolute;
}
.card-face .frame-background {
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  z-index: 1;
}
.card-face .frame-art {
  left: 12%;
  top: 7%;
  width: 76%;
  height: 43%;
  overflow: hidden;
  border-radius: 40% 40% 0 0 / 22% 22% 0 0;
  background: radial-gradient(ellipse at top, #526b63, #17282d);
}
.card-face .frame-art img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}
.card-face .frame-title {
  z-index: 2;
  left: 12%;
  top: 47.8%;
  width: 76%;
  height: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 6.2cqw;
  line-height: 1.05;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.card-face .frame-skills {
  z-index: 2;
  left: 16%;
  top: 59.5%;
  width: 68%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3%;
}
.card-face .frame-description {
  z-index: 2;
  left: 18%;
  top: 70%;
  width: 64%;
  height: 18.5%;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: max(12px, 4.7cqw);
  font-weight: 500;
}
.card-face .frame-description small {
  display: block;
  margin-bottom: 4%;
  font-size: 3.6cqw;
  font-weight: 750;
  text-transform: uppercase;
  color: #453122;
}
.card-face .frame-footer {
  z-index: 2;
  left: 15%;
  top: 92%;
  width: 70%;
  font-size: 3.5cqw;
  color: #ffe7ad;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-face .class-gem {
  position: absolute;
  z-index: 2;
  right: 3%;
  top: 2%;
  width: 15%;
  height: auto;
  margin: 0;
}
.player-card-back {
  display: block;
  width: 140px;
  max-width: 100%;
  height: auto;
  margin: 12px auto;
}
.playing .hand-card.framed-hand,
.hand-card.framed-hand {
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  display: block;
  flex: 0 0 260px;
  width: 260px;
  max-height: none;
  align-self: flex-start;
  color: #281b14;
}
.hand-card.framed-hand:disabled {
  opacity: 0.8;
}
.hand-card.framed-hand:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
.playing .hand-card.framed-hand.selected {
  box-shadow:
    0 0 0 3px var(--gold),
    0 12px 22px #0006;
}
.playing .hand {
  align-items: flex-start;
}
.library-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.library-grid .framed-library-card {
  padding: 0;
  border: 0;
  background: transparent;
  min-width: 0;
}
@media (max-width: 580px) {
  .playing .hand-card.framed-hand {
    flex-basis: 240px;
    width: 240px;
  }
}