.card-face {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  aspect-ratio: 20 / 27;
  container-type: inline-size;
  color: #f5e9cf;
  font-family: Georgia, serif;
}
.card-face img { position: absolute; max-width: none; border-radius: 0; }
.card-face .face-art { left: 14%; top: 18%; width: 72%; height: 55%; object-fit: cover; }
.card-face .face-frame { inset: 0; width: 100%; height: 100%; }
.face-title, .face-cost, .face-text, .face-emblems {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
}
.face-title { left: 19.25%; width: 60.75%; top: 6.2%; height: 9%; font-size: 5cqw; line-height: 1.04; }
.face-title-long { font-size: 4.35cqw; }
.face-cost {
  left: 84.7%; top: 6.2%; width: 7.1%; height: 5.25%;
  font-size: 4.1cqw; font-weight: bold; color: #fff5e1;
  background: url("frames/silver.svg") center / contain no-repeat;
}
.face-text {
  left: 16%;
  width: 68%;
  top: 79.45%;
  height: 9.7%;
  font: 3.5cqw/1.1 system-ui, sans-serif;
  align-content: center;
  color: #e9e0cd;
}
.face-text-long { font-size: 3cqw; }
.face-emblems { left: 83%; top: 16%; width: 10.5%; height: 11%; gap: 2px; }
.card-face .face-emblem { position: relative; width: 78%; }
.face-emblems:has(> :nth-child(2)) { grid-template-columns: repeat(2, 1fr); }
.face-emblems:has(> :nth-child(2)) .face-emblem { width: 100%; }
.compendium-art { display: block; width: min(100%, 235px); text-decoration: none; }
.cards #results { grid-template-columns: repeat(auto-fill, minmax(min(100%, 178px), 1fr)); }
.cards #results > article { padding: .6rem; }
.cards #results .compendium-art { margin-inline: auto; }
.cards #results article p { margin: .3rem 0 0; font-size: .82rem; }
.card-inspection { display: grid; grid-template-columns: minmax(125px, .72fr) minmax(0, 1fr); gap: .85rem; align-items: start; }
.card-inspection h3 { margin-block: 0 .35em; }
.card-inspection p { margin-block: .4em; }
.rating-tier { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .7rem; border-top: 1px solid var(--line); padding: .65rem 0; }
.rating-tier h3 { margin: .2rem 0 0; font-size: 1.35rem; }
.rating-tier ul { display: flex; flex-wrap: wrap; gap: .38rem; max-width: none; list-style: none; margin: 0; padding: 0; }
.rating-tier button { padding: .28rem .58rem; border-color: var(--line); text-align: left; font-size: .91rem; }
.rating-tier button:hover, .rating-tier button:focus-visible { color: var(--gold); border-color: var(--gold); }
.rating-tier[data-tier="S"] h3 { color: #f4d78f; }
.rating-tier[data-tier="A"] h3 { color: #c6d4a0; }
.rating-tier[data-tier="B"] h3 { color: #b9d5ed; }
.rating-tier[data-tier="C"] h3 { color: #ceb8db; }
.rating-tier[data-tier="D"] h3 { color: #cbb7a6; }
.card-preview {
  position: fixed;
  z-index: 10;
  width: min(490px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  overflow: auto;
  padding: 12px;
  background: #1b1c1c;
  border: 1px solid #997d52;
  border-radius: 8px;
  box-shadow: 0 12px 36px #000a;
  font-size: .9rem;
}
.card-preview:not([data-pinned]) { pointer-events: none; }
.card-preview .preview-close { float: right; margin: 0 0 .35em .6em; padding: .12em .45em; }
.card-preview .card-inspection { clear: both; }
@media (max-width: 420px) {
  .card-inspection { grid-template-columns: minmax(0, 1fr); }
  .card-preview .card-face { width: min(155px, 55vw); margin-inline: auto; }
}