.court-card {
  position: absolute;
  inset: 22px 12px 21px;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: linear-gradient(135deg, #f7edcf 0 46%, #e9d59f 46% 54%, #f7edcf 54%);
  box-shadow: inset 0 0 0 2px #f7edcf, inset 0 0 0 3px currentColor;
}

.court-card::before,
.court-card::after {
  position: absolute;
  z-index: 3;
  font: 700 9px/1 Georgia, serif;
}
.court-card::before { content: attr(data-rank); top: 5px; left: 5px; }
.court-card::after { content: attr(data-rank); right: 5px; bottom: 5px; transform: rotate(180deg); }

.court-regalia {
  position: absolute;
  top: 2px;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  color: #b4872e;
  font: 18px/1 Georgia, serif;
  text-shadow: 0 1px 0 #fff4cc;
}

.court-portrait {
  position: absolute;
  inset: 15px 7px 12px;
  display: block;
}

.court-head {
  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 2;
  width: 21px;
  height: 24px;
  transform: translateX(-50%);
  border: 1px solid #8d5947;
  border-radius: 48% 48% 44% 44%;
  background: linear-gradient(110deg, #d79a76, #f0c4a0 54%, #c98262);
  box-shadow: -6px -2px 0 -3px #332821, 6px -2px 0 -3px #332821;
}

.court-head::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 3px;
  height: 2px;
  border-radius: 50%;
  background: #37251f;
  box-shadow: 9px 0 #37251f;
}

.court-head::after {
  content: "";
  position: absolute;
  left: 7px;
  bottom: 4px;
  width: 7px;
  height: 2px;
  border-bottom: 1px solid #9d524e;
  border-radius: 50%;
}

.court-body {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 43px;
  height: 37px;
  transform: translateX(-50%);
  border: 2px solid #d1a94f;
  clip-path: polygon(28% 0,72% 0,100% 100%,0 100%);
  background: repeating-linear-gradient(135deg, #173b48 0 7px, #e8d195 7px 10px, #8f3034 10px 17px);
}

.court-body::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 20px;
  height: 13px;
  transform: translateX(-50%);
  background: #f6eee0;
  clip-path: polygon(0 0,50% 100%,100% 0,82% 0,50% 60%,18% 0);
}

.court-suit {
  position: absolute;
  left: 50%;
  bottom: 2px;
  z-index: 4;
  transform: translateX(-50%);
  font: 12px/1 Georgia, serif;
}

/* Papaz: taç, sakal ve ağır lacivert-altın kostüm. */
.court-k .court-regalia { font-size: 20px; }
.court-k .court-head::after {
  left: 4px;
  bottom: -7px;
  width: 13px;
  height: 11px;
  border: 0;
  border-radius: 0 0 7px 7px;
  background: #5b3828;
  clip-path: polygon(0 0,100% 0,80% 100%,50% 70%,20% 100%);
}
.court-k .court-body { background: repeating-linear-gradient(135deg, #173b48 0 7px, #d3ad55 7px 10px, #7a2830 10px 17px); }

/* Kız: tiara, uzun saç ve bordo-altın elbise. */
.court-q .court-regalia { color: #b76b70; }
.court-q .court-head { box-shadow: -7px 2px 0 -2px #3b2923, 7px 2px 0 -2px #3b2923, 0 -4px 0 -2px #3b2923; }
.court-q .court-body { background: repeating-linear-gradient(45deg, #8e2937 0 7px, #e7c978 7px 10px, #183f49 10px 17px); }

/* Vale: tüylü arma ve daha canlı yeşil-kırmızı kostüm. */
.court-j .court-regalia { top: 3px; color: #286b58; transform: translateX(-50%) rotate(-12deg); }
.court-j .court-head { border-radius: 46% 46% 40% 40%; box-shadow: -5px -3px 0 -2px #5a3825, 5px -3px 0 -2px #5a3825; }
.court-j .court-body { background: repeating-linear-gradient(135deg, #286b58 0 7px, #e0bd60 7px 10px, #a23b36 10px 17px); }

.split-layout .court-card { inset: 18px 6px 17px; }
.split-layout .court-portrait { inset-inline: 4px; }
.split-layout .court-body { width: 36px; }

@media (max-width: 430px) {
  .court-card { inset: 17px 6px 16px; }
  .court-head { width: 17px; height: 20px; }
  .court-body { width: 34px; height: 31px; }
  .court-regalia { font-size: 15px; }
  .court-suit { font-size: 9px; }
}