/* Card faces, shared by the big screen and phones */
.card {
  --w: 300px; width: var(--w); aspect-ratio: 5 / 7.2; border-radius: calc(var(--w) * .06);
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  font-family: Rubik, system-ui, sans-serif; color: #2a1a10; box-shadow: 0 10px 30px #0008;
  padding: calc(var(--w) * .035); gap: calc(var(--w) * .02); box-sizing: border-box;
  font-size: calc(var(--w) * .052); line-height: 1.3;
}
.card.deck-door { background: linear-gradient(160deg, #f7e7c9, #e9cf9f); border: calc(var(--w) * .03) solid #7a3b1c; }
.card.deck-treasure { background: linear-gradient(160deg, #fff4cf, #f2d27a); border: calc(var(--w) * .03) solid #b8860b; }
.card.t-curse { background: linear-gradient(160deg, #e9dcf5, #c9b2e3); border-color: #4b2475; }
.card.t-monster { border-color: #8f1d1d; }
.card-name {
  font-family: Lobster, Georgia, serif; text-align: center; font-size: 1.45em; line-height: 1.05;
  color: #3b1606; min-height: 2.1em; display: flex; align-items: center; justify-content: center;
}
.card-art {
  flex: 0 0 auto; height: 42%; border-radius: calc(var(--w) * .03);
  background: radial-gradient(circle at 50% 40%, #fffaf0, #e8d5a8 70%); display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 2px solid #0002;
}
.card-art img { max-width: 92%; max-height: 92%; object-fit: contain; filter: drop-shadow(0 4px 4px #0004); }
.card-art.noart { font-family: Lobster, serif; font-size: 1.3em; text-align: center; padding: .5em; color: #7a3b1c; }
.card-type { text-align: center; font-weight: 600; font-size: .9em; color: #5a3a20; }
.card-type b.lvl { color: #a01818; font-size: 1.25em; }
.card-type b.bonus { color: #1d6b1d; font-size: 1.25em; }
.card-short { color: #3d2410; font-weight: 700; line-height: 1.2; padding: 0 .3em; }
.card-body { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; gap: .35em; font-size: .92em; }
.card-bad { color: #7a1010; }
.card-flavor { font-style: italic; color: #6b4a2a; font-size: .92em; }
.card-foot { text-align: center; font-weight: 800; color: #6b3d0c; font-size: .95em; }
.card-mini { --w: 120px; font-size: calc(var(--w) * .075); }
.card-mini .card-art { height: 55%; }
.card-mini .card-name { font-size: 1.15em; min-height: 2.2em; }
.card-big { --w: 460px; }
.card-back { display: flex; align-items: center; justify-content: center; }
.card-back.deck-door { background: repeating-linear-gradient(45deg, #7a3b1c 0 12px, #8f4a26 12px 24px); }
.card-back.deck-treasure { background: repeating-linear-gradient(45deg, #b8860b 0 12px, #cf9d1f 12px 24px); }
.back-mark { font-size: calc(var(--w) * .4); filter: drop-shadow(0 4px 6px #0006); }