/* Poker-size card, 63.5 x 88.9 mm. Own layout: it does not copy the published card frames. */
.dh {
  --c: #6a3d9a;
  --head: 'Cinzel', 'Times New Roman', serif; --body: 'Alegreya Sans', 'Trebuchet MS', sans-serif;
  position: relative; box-sizing: border-box; width: 63.5mm; height: 88.9mm; flex: none;
  display: flex; flex-direction: column; overflow: hidden; border-radius: 3mm;
  background: #f4efe4; color: #1d1a16; font-family: var(--body); text-align: left;
  border: 1.6mm solid var(--c);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.dh.square { border-radius: 0; }
.dh * { box-sizing: border-box; }

.d-art { flex: none; height: 33mm; position: relative; overflow: hidden; background: var(--c); }
.d-art img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
/* No artwork: a short band with the type glyph, so the text gets the room. */
.dh.noart .d-art { height: 12mm; }
.d-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; opacity: .28; }
.d-glyph svg { height: 150%; width: auto; }

.d-badge {
  position: absolute; top: 1.2mm; min-width: 8mm; height: 8mm; padding: 0 1.2mm; border-radius: 4mm;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #f4efe4; color: #1d1a16; border: .5mm solid var(--c); box-shadow: 0 .3mm 1mm #0006;
}
.d-badge.l { left: 1.2mm; }
.d-badge.r { right: 1.2mm; }
.d-badge b { font: 900 3.6mm/1 var(--head); }
.d-badge i { font: 700 1.25mm/1 var(--body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; margin-top: .3mm; color: #5d564b; }

.d-kick {
  flex: none; height: 4.6mm; padding: 0 2.4mm; background: var(--c); color: #fff;
  font: 700 2.05mm/4.6mm var(--body); letter-spacing: .14em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden;
}
.d-name { flex: none; padding: 1.6mm 2.4mm .6mm; font: 900 4.3mm/1.1 var(--head); text-align: center; white-space: nowrap; overflow: hidden; }

.d-stats { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .7mm; padding: .6mm 1.6mm .4mm; }
.d-stat { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: .6mm .3mm .7mm; border-radius: 1mm; background: #fff; border: .25mm solid #cfc6b4; }
.d-stat i { font: 700 1.5mm/1.2 var(--body); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #6d6558; }
.d-stat b { font: 700 2.65mm/1.15 var(--body); white-space: nowrap; }

.d-text { flex: 1; min-height: 0; overflow: hidden; margin: .8mm 2.4mm 0; font-size: 3.3mm; line-height: 1.22; }
.d-text p { margin: 0 0 1mm; }
.d-text ul { margin: 0 0 1mm; padding-left: 3mm; }
.d-text li { margin-bottom: .4mm; }
.d-text table { width: 100%; border-collapse: collapse; margin: 0 0 1mm; font-size: .88em; }
.d-text th, .d-text td { padding: .2mm .8mm; border: .15mm solid #cfc6b4; text-align: left; vertical-align: top; }
.d-text th { background: #e6dfcf; }
.d-text .feat { font-weight: 700; font-style: italic; }
.d-foot { flex: none; height: 3.6mm; padding: 0 2.4mm; font-size: 1.5mm; line-height: 3.6mm; text-align: center; color: #6d6558; white-space: nowrap; overflow: hidden; }

/* ---------- back ---------- */
.dh.back {
  align-items: center; justify-content: center; gap: 2mm; color: #fff; border-color: #f4efe4;
  background: repeating-linear-gradient(45deg, #0000 0 3mm, #ffffff12 3mm 6mm), repeating-linear-gradient(-45deg, #0000 0 3mm, #00000018 3mm 6mm), var(--c);
}
.dh.back .b-glyph svg { width: 24mm; height: 24mm; display: block; }
.dh.back .b-type { font: 900 4mm/1.1 var(--head); letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 0 3mm; }
.dh.back .b-sub { font: 700 2.2mm/1 var(--body); letter-spacing: .2em; text-transform: uppercase; opacity: .85; }