/* Poker-size card, 63.5 x 88.9 mm. Own design: front = identity, art and powers; back = the dial. */
.hc {
  --p: #c4202b; --s: #1b2333;
  --head: 'Barlow Condensed', 'Arial Narrow', sans-serif; --num: 'Oxanium', 'Arial Black', 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: var(--s); color: #fff; font-family: 'Open Sans', Arial, sans-serif; text-align: left;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.hc.square { border-radius: 0; }
.hc * { box-sizing: border-box; }

.h-top { flex: none; height: 11mm; display: flex; align-items: center; gap: 1.5mm; padding: 0 1.8mm 0 2.6mm; background: var(--p); }
.h-title { flex: 1; min-width: 0; }
.h-name { font: 700 5.4mm/1.05 var(--head); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; }
.h-real { font-size: 2.1mm; line-height: 1.2; opacity: .9; white-space: nowrap; overflow: hidden; }
.h-pts {
  flex: none; min-width: 11mm; max-width: 22mm; height: 8mm; padding: 0 1.4mm; border-radius: 1.4mm; background: #fff; color: #15171c;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.h-pts b { font: 800 4mm/1 var(--num); white-space: nowrap; }
.h-pts.multi b { font-size: 3mm; }
.h-pts i { font: 700 1.5mm/1 var(--head); letter-spacing: .12em; margin-top: .5mm; color: #5b6472; }

.h-art { flex: none; height: 35mm; position: relative; overflow: hidden; background: #2a2f3a; }
.h-art-in { position: absolute; inset: 0; }
.h-art img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.h-art-empty { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 2.4mm; color: #8a93a3; }
.h-tab {
  position: absolute; left: 2mm; bottom: 1.6mm; display: flex; align-items: center; gap: 1mm;
  padding: .5mm 1.6mm .5mm 1mm; border-radius: 3mm; background: #000b; font: 700 2mm/1.4 var(--head); letter-spacing: .06em;
}
.h-tab u { width: 2.2mm; height: 2.2mm; border-radius: 50%; border: .25mm solid #fff; }

.h-kw { flex: none; height: 4.4mm; padding: 0 2.6mm; background: #0007; font-size: 2.05mm; font-style: italic; line-height: 4.4mm; white-space: nowrap; overflow: hidden; }
.h-sym { flex: none; display: flex; flex-wrap: wrap; gap: .8mm; padding: 1mm 2mm; }
.h-chip { display: flex; align-items: center; gap: .6mm; height: 4mm; padding: 0 1.2mm 0 .8mm; border-radius: 1mm; background: #fff; color: #15171c; font: 700 2.1mm/1 var(--head); text-transform: uppercase; letter-spacing: .03em; }
.h-chip svg { width: 2.9mm; height: 2.9mm; }
.h-chip.range { background: var(--p); color: #fff; margin-left: auto; font-family: var(--num); font-size: 2.6mm; }
.h-chip.range svg { width: 1.8mm; height: 2.9mm; margin-left: -.3mm; }

.h-panel, .b-legend {
  flex: 1; min-height: 0; margin: 0 2mm; padding: 1.2mm 1.7mm; border-radius: 1.5mm; overflow: hidden;
  background: #fff; color: #15171c; font-size: 2.15mm; line-height: 1.3;
}
.h-panel p, .b-legend p { margin: 0 0 .9mm; }
.h-panel p:last-child, .b-legend p:last-child { margin-bottom: 0; }
.h-panel b, .b-legend b { font-family: var(--head); font-size: 1.12em; letter-spacing: .02em; text-transform: uppercase; }
.h-imp { color: #3a4150; }
.sq { display: inline-block; width: 1.9mm; height: 1.9mm; margin-right: .8mm; vertical-align: -.2mm; border: .2mm solid #15171c; border-radius: .3mm; }
.sq.special { background: #fff; border-width: .5mm; }
.sq.trait { border-radius: 50%; background: #15171c; }
.sq svg { display: none; }
.h-foot { flex: none; height: 4.6mm; padding: 0 2.6mm; font-size: 1.7mm; line-height: 4.6mm; text-align: center; opacity: .8; white-space: nowrap; overflow: hidden; }

/* Nothing to list on the front: the artwork takes the space. */
.hc.nopanel .h-art { flex: 1; height: auto; }
.hc.nopanel .h-panel { display: none; }

/* ---------- back: the dial ---------- */
.hc.back .h-top { height: 9mm; }
.hc.back .h-name { font-size: 4.4mm; }
.d-wrap { flex: none; padding: 1.6mm 2mm 1.4mm; }
.d-dial { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; margin-bottom: 1.2mm; }
.d-dial:last-child { margin-bottom: 0; }
.d-dial th, .d-dial td { padding: 0; text-align: center; }
.d-dial .d-ico { width: 5mm; }
.d-dial .d-ico svg { width: 3.2mm; height: 3.2mm; display: block; margin: 0 auto; }
.d-dial .d-start td { height: 2.5mm; font: 700 1.5mm/2.5mm var(--num); }
.d-dial .d-start span { display: block; margin: 0 .15mm; border-radius: .6mm .6mm 0 0; color: #15171c; }
.d-dial .d-head th { height: 2.6mm; font: 700 1.7mm/2.6mm var(--head); color: #c9cfd9; }
.d-dial .d-head th.on { color: #15171c; }
.d-dial td.c { height: 4.5mm; font: 800 2.7mm/4.5mm var(--num); background: #fff; color: #15171c; border: .15mm solid #15171c; }
.d-dial td.c.special { box-shadow: inset 0 0 0 .55mm #15171c; }
.d-dial td.ko { height: 4.5mm; font: 800 1.7mm/4.5mm var(--num); background: #3a0f12; color: #ff6b63; border: .15mm solid #15171c; }
.b-legend { font-size: 2mm; }