/* The card itself. All measurements are real millimetres: 76 x 111.
   --p = primary (side column), --s = secondary (card body). */
.card {
  --p: #c4202b;
  --s: #1b4a8f;
  --p-dark: color-mix(in srgb, var(--p) 62%, #000);
  --title: "Passion One", Impact, "Arial Narrow Bold", sans-serif;
  --num: "Oxanium", "Arial Black", sans-serif;
  --body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  position: relative;
  flex: none;
  width: 76mm;
  height: 111mm;
  overflow: hidden;
  border-radius: 3.5mm;
  background: var(--s);
  color: #151515;
  font-family: var(--body);
  line-height: 1.2;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.card.square { border-radius: 0; }
.card * { box-sizing: border-box; }

.c-frame {
  position: absolute;
  inset: 2.4mm;
  border: 0.35mm solid #fff;
  border-radius: 2.4mm;
}

/* ---------- side column with the five stats ---------- */
.c-side {
  position: absolute;
  left: 2.4mm;
  top: 2.4mm;
  width: 20.6mm;
  height: 87mm;
  background: var(--p);
  border-top-left-radius: 2.4mm;
  overflow: hidden;
}
.c-stats { position: absolute; left: 0; right: 0; top: 18.6mm; bottom: 0; }
.c-stat {
  position: relative;
  height: 13.68mm;
  display: flex;
  align-items: center;
}
.c-stat::before {
  content: "";
  position: absolute;
  left: -2mm; right: -2mm; top: -0.3mm;
  height: 0.55mm;
  background: var(--p-dark);
  transform: rotate(-5deg);
}
.c-stat:nth-child(even) { background: color-mix(in srgb, var(--p) 93%, #000); }
.c-tab {
  position: absolute;
  left: 0; top: 50%;
  width: 5.4mm; height: 7mm;
  margin-top: -3.5mm;
  background: var(--s);
  display: flex; align-items: center; justify-content: center;
}
.c-tab span {
  transform: rotate(-90deg);
  font: 400 3.3mm/1 var(--title);
  letter-spacing: 0.15mm;
  color: #fff;
}
.c-num {
  margin-left: 7.2mm;
  font: 800 11.5mm/1 var(--num);
  color: #fff;
  -webkit-text-stroke: 1.5mm var(--s);
  paint-order: stroke fill;
  letter-spacing: -0.3mm;
  white-space: nowrap;
}
.c-num i { font-style: normal; font-size: 0.72em; margin-left: 0.4mm; }
.c-num.wide { margin-left: 5.8mm; font-size: 9.2mm; letter-spacing: -0.7mm; -webkit-text-stroke-width: 1.3mm; }
.c-box {
  margin-left: 7.2mm;
  width: 11.6mm; height: 10mm;
  background: #fff;
  border: 0.5mm solid var(--s);
  border-radius: 1.2mm;
}

/* ---------- title ---------- */
.c-title {
  position: absolute;
  left: 5.6mm; top: 7.4mm;
  width: 66mm;
  transform: rotate(-3deg);
  transform-origin: left center;
  color: #fff;
  font-family: var(--title);
  text-shadow: 0.45mm 0.45mm 0 #161616, -0.2mm -0.2mm 0 #161616, 0.2mm -0.2mm 0 #161616, -0.2mm 0.2mm 0 #161616;
  white-space: nowrap;
  z-index: 3;
}
.c-small { font-size: 4.3mm; line-height: 1; padding-left: 3mm; overflow: hidden; }
.c-big { font-size: 8.6mm; line-height: 0.95; text-transform: uppercase; letter-spacing: 0.1mm; overflow: hidden; }

/* ---------- artwork ---------- */
.c-art {
  position: absolute;
  left: 23mm; top: 11.6mm;
  width: 46.6mm; height: 53.4mm;
  background: var(--s);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  z-index: 2;
}
.c-art-in {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #c9d3dc;
  clip-path: polygon(0 0, 100% 0, 100% calc(92% - 0.8mm), 0 calc(100% - 0.8mm));
}
.c-art-in img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.c-art-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font: 600 3mm/1.3 var(--body);
  color: #7d8a96;
}

/* ---------- white text panel ---------- */
.c-panel {
  position: absolute;
  left: 23mm; top: 58mm;
  width: 46.6mm; height: 35mm;
  padding: 7.9mm 1.6mm 1.2mm 1.8mm;
  background: #fff;
  display: flex; flex-direction: column;
  font-size: 3.15mm;
  z-index: 1;
}
.c-h {
  display: flex; align-items: center; gap: 0.6mm;
  font: 400 3.5mm/1 var(--title);
  letter-spacing: 0.12mm;
  color: var(--p);
  text-transform: uppercase;
  white-space: nowrap;
}
.c-h::after {
  content: "";
  flex: 1;
  height: 0.55mm;
  background: var(--s);
  clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%);
}
.c-skills { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.c-skilltext { margin-top: 0.7mm; line-height: 1.22; }
.c-skilltext b { color: var(--p); font-weight: 700; }
.c-lines { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; min-height: 0; }
.c-lines span { display: block; border-bottom: 0.2mm solid #8a8a8a; height: 4.4mm; }
.c-dev { flex: none; padding-top: 1mm; }
.c-dev p { margin: 0.6mm 0 0; }
.c-dev b { font-weight: 700; }
.c-dev .c-blank { display: inline-block; width: 22mm; border-bottom: 0.2mm solid #8a8a8a; }

/* ---------- footer: GP badge + keywords ---------- */
.c-gp { position: absolute; left: 3.6mm; top: 86.2mm; width: 18.6mm; height: 18mm; z-index: 4; }
.c-cost { display: none; }
.c-gp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.c-foot {
  position: absolute;
  left: 23.4mm; top: 94.4mm;
  width: 49mm; height: 8mm;
  display: flex; align-items: center;
  font: 400 5.4mm/1 var(--title);
  color: #fff;
  text-shadow: 0.35mm 0.35mm 0 #161616;
  white-space: nowrap;
  overflow: hidden;
  z-index: 3;
}

.c-special { margin-top: 0.8mm; font-style: italic; }
.c-special b { font-style: normal; }

/* ---------- text cards: skills, traits, reference ---------- */
.t-head {
  position: absolute;
  left: 2.4mm; right: 2.4mm; top: 2.4mm;
  height: 21mm;
  background: var(--p);
  border-radius: 2.4mm 2.4mm 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
.card.text .c-title { top: 6.6mm; width: 50mm; }
.card.text.noletter .c-title { width: 64mm; }
.t-letter {
  position: absolute;
  right: 6mm; top: 4.6mm;
  width: 13mm; height: 13mm;
  border-radius: 50%;
  background: var(--s);
  border: 0.6mm solid #fff;
  display: flex; align-items: center; justify-content: center;
  font: 800 7.6mm/1 var(--num);
  color: #fff;
  z-index: 4;
}
.t-panel {
  position: absolute;
  left: 5.4mm; right: 5.4mm; top: 24.5mm; bottom: 18.5mm;
  padding: 2.4mm 2.6mm;
  background: #fff;
  border-radius: 1mm;
  overflow: hidden;
  font-size: 4.2mm;
  line-height: 1.3;
}
.t-panel p { margin: 0 0 1.5mm; }
.t-panel p:last-child { margin-bottom: 0; }
.card.text .c-foot { left: 6mm; width: 64mm; }
.t-panel table { width: 100%; border-collapse: collapse; margin: 0 0 1.6mm; font-size: 0.92em; }
.t-panel td { border: 0.15mm solid #9a9a9a; padding: 0.5mm 0.6mm; text-align: center; line-height: 1.1; }
.t-panel tr:first-child td { background: color-mix(in srgb, var(--s) 14%, #fff); font-size: 0.82em; }

/* Star Players carry more text: shorter artwork, taller panel. */
.card.star .c-art { height: 39mm; }
.card.star .c-panel { top: 44mm; height: 49mm; padding-top: 7.4mm; }
.card.star .c-dev p { font-size: 2.8mm; }

/* ---------- card back ---------- */
.b-band {
  position: absolute; left: 0; right: 0; top: 30mm; height: 51mm;
  background: var(--p);
  clip-path: polygon(0 14%, 100% 0, 100% 86%, 0 100%);
  box-shadow: inset 0 0 0 0.6mm #fff;
}
.b-band::before, .b-band::after {
  content: ""; position: absolute; left: -5%; width: 110%; height: 0.7mm; background: #fff;
  transform: rotate(-5.3deg);
}
.b-band::before { top: 7%; }
.b-band::after { bottom: 7%; }
.b-logo {
  position: absolute; left: 8mm; top: 14mm; width: 60mm; height: 83mm;
  object-fit: contain;
}
.b-word {
  position: absolute; left: 0; right: 0; top: 36mm;
  display: flex; flex-direction: column; align-items: center;
  transform: rotate(-5.3deg);
  font: 400 17mm/0.9 var(--title);
  text-transform: uppercase;
  letter-spacing: 0.3mm;
  color: #fff;
  text-shadow: 0.8mm 0.8mm 0 #161616, -0.25mm -0.25mm 0 #161616, 0.25mm -0.25mm 0 #161616, -0.25mm 0.25mm 0 #161616;
}
.b-word i { font-style: normal; font-size: 5mm; line-height: 1.4; letter-spacing: 2mm; text-shadow: none; }

/* Mega-Star ribbon, bottom-right of the (shorter) star artwork, clear of long names. */
.c-mega {
  position: absolute;
  right: 6.4mm; top: 40.6mm;
  padding: 0.9mm 2.2mm 0.7mm 3.4mm;
  background: var(--p);
  border: 0.35mm solid #fff; border-right: 0;
  clip-path: polygon(2.2mm 0, 100% 0, 100% 100%, 0 100%);
  font: 400 3.4mm/1 var(--title);
  letter-spacing: 0.2mm;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0.25mm 0.25mm 0 #161616;
  z-index: 3;
}