/* Four-color decks with centered ranks, matching the user's reference sheets. */
.hero-card { --deck-width: 60px; }
.hr-card { --deck-width: var(--hr-card-width); }
.pf-card { --deck-width: var(--pf-card-width); }
.pf-small-cards .pf-card { --pf-card-width: 25px; }

:is(.suit-spades, .hr-suit-s, .pf-suit-s) { --deck-top: #303234; --deck-bottom: #1b1c1e; --deck-edge: #474849; --deck-top-edge: #858687; }
:is(.suit-hearts, .hr-suit-h, .pf-suit-h) { --deck-top: #93232a; --deck-bottom: #591016; --deck-edge: #85252d; --deck-top-edge: #be4d53; }
:is(.suit-clubs, .hr-suit-c, .pf-suit-c) { --deck-top: #2a7842; --deck-bottom: #114723; --deck-edge: #265f36; --deck-top-edge: #589567; }
:is(.suit-diamonds, .hr-suit-d, .pf-suit-d) { --deck-top: #23578f; --deck-bottom: #103360; --deck-edge: #254e79; --deck-top-edge: #5b84b0; }

:is(#boardCards, .hr-view, .pf):is([data-deck-style="four-color"], [data-deck-style="four-color-faceted"], [data-deck-style="four-color-matte"]) :is(.hero-card, .hr-card, .pf-card) {
  box-sizing: border-box;
  height: calc(var(--deck-width) * 1.62);
}

:is(#boardCards, .hr-view, .pf):is([data-deck-style="four-color"], [data-deck-style="four-color-faceted"], [data-deck-style="four-color-matte"]) :is(.hero-card, .hr-card:not(.hr-card-empty), .pf-card) {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--deck-edge);
  border-top-color: var(--deck-top-edge);
  border-bottom-color: #080d0d;
  border-radius: calc(var(--deck-width) * .09);
  color: #fafaf9;
  background: linear-gradient(165deg, var(--deck-top), var(--deck-bottom));
  box-shadow: inset 0 1px 0 #ffffff08, 0 2px 3px #0006;
  user-select: none;
}

:is(#boardCards, .hr-view, .pf):is([data-deck-style="four-color"], [data-deck-style="four-color-faceted"], [data-deck-style="four-color-matte"]) :is(.hero-card, .hr-card, .pf-card) > :is(b, .hero-card-rank) {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  display: block;
  width: max-content;
  color: #fafaf9;
  font: 900 calc(var(--deck-width) * .74)/1 Arial, Helvetica, sans-serif;
  letter-spacing: -.035em;
  text-align: center;
  text-shadow: 0 1px 1px #ffffff12;
  transform: translate(-50%, -50%) scaleX(.82);
  transform-origin: center;
}

:is(#boardCards, .hr-view, .pf):is([data-deck-style="four-color"], [data-deck-style="four-color-faceted"], [data-deck-style="four-color-matte"]) :is(.hero-card, .hr-card, .pf-card).is-ten > :is(b, .hero-card-rank) {
  letter-spacing: -.07em;
  transform: translate(-50%, -50%) scaleX(.72);
}

:is(#boardCards, .hr-view, .pf):is([data-deck-style="four-color"], [data-deck-style="four-color-faceted"], [data-deck-style="four-color-matte"]) :is(.hr-card, .pf-card) > span,
#boardCards:is([data-deck-style="four-color"], [data-deck-style="four-color-faceted"], [data-deck-style="four-color-matte"]) .hero-card-suit {
  display: none;
}

/* The visible rank fills just over half of the original four-color card height. */
:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color"] :is(.hero-card, .hr-card, .pf-card) > :is(b, .hero-card-rank) {
  font-size: calc(var(--deck-width) * 1.26);
  font-weight: 700;
  font-synthesis: none;
  transform: translate(-50%, -50%) scaleX(.82);
}

/* Fit 10 by tightening the space between digits, preserving every glyph's stroke width. */
:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color"] :is(.hero-card, .hr-card, .pf-card).is-ten > :is(b, .hero-card-rank) {
  letter-spacing: -.15em;
  padding-inline-end: .15em;
  transform: translate(-50%, -50%) scaleX(.82);
}

/* Faceted deck: brighter faces, a light frame and larger ranks. */
:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-faceted"] :is(.suit-spades, .hr-suit-s, .pf-suit-s) { --deck-top: #303134; --deck-bottom: #26272b; }
:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-faceted"] :is(.suit-hearts, .hr-suit-h, .pf-suit-h) { --deck-top: #b62d40; --deck-bottom: #a82639; }
:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-faceted"] :is(.suit-clubs, .hr-suit-c, .pf-suit-c) { --deck-top: #277e49; --deck-bottom: #237343; }
:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-faceted"] :is(.suit-diamonds, .hr-suit-d, .pf-suit-d) { --deck-top: #286ab3; --deck-bottom: #255f9f; }

:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-faceted"] :is(.hero-card, .hr-card:not(.hr-card-empty), .pf-card) {
  border: 1px solid #e2e3e3;
  border-radius: calc(var(--deck-width) * .06);
  background:
    linear-gradient(43deg, transparent 60%, #ffffff07 60%, #ffffff07 78%, transparent 78%),
    linear-gradient(135deg, #0000000c 26%, transparent 26%, transparent 67%, #ffffff04 67%),
    linear-gradient(165deg, var(--deck-top), var(--deck-bottom));
  box-shadow: inset 0 0 0 1px #ffffff12, 0 2px 3px #0006;
}

:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-faceted"] :is(.hero-card, .hr-card, .pf-card) > :is(b, .hero-card-rank) {
  font-family: 'Arial Black', Arial, Helvetica, sans-serif;
  font-size: calc(var(--deck-width) * 1.04);
  -webkit-text-stroke: .012em currentColor;
  letter-spacing: -.04em;
  text-shadow: none;
  transform: translate(-50%, -50%) scaleX(.8);
}

:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-faceted"] :is(.hero-card, .hr-card, .pf-card).is-ten > :is(b, .hero-card-rank) {
  letter-spacing: -.07em;
  transform: translate(-50%, -50%) scaleX(.62);
}

/* Matte deck: muted gradients and soft dark edges, with taller faces. */
:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-matte"] :is(.suit-spades, .hr-suit-s, .pf-suit-s) { --deck-top: #474747; --deck-bottom: #262627; --deck-edge: #343435; --deck-top-edge: #626262; }
:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-matte"] :is(.suit-hearts, .hr-suit-h, .pf-suit-h) { --deck-top: #9f4b4e; --deck-bottom: #582325; --deck-edge: #653033; --deck-top-edge: #a65a5c; }
:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-matte"] :is(.suit-clubs, .hr-suit-c, .pf-suit-c) { --deck-top: #5c8864; --deck-bottom: #2c4c33; --deck-edge: #365840; --deck-top-edge: #6a9372; }
:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-matte"] :is(.suit-diamonds, .hr-suit-d, .pf-suit-d) { --deck-top: #456a8f; --deck-bottom: #233b54; --deck-edge: #304d69; --deck-top-edge: #5a7d9e; }

:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-matte"] :is(.hero-card, .hr-card, .pf-card) {
  height: calc(var(--deck-width) * 1.8);
}

:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-matte"] :is(.hero-card, .hr-card:not(.hr-card-empty), .pf-card) {
  border-bottom-color: var(--deck-bottom);
  border-radius: calc(var(--deck-width) * .085);
  background: linear-gradient(170deg, var(--deck-top), var(--deck-bottom));
  box-shadow: inset 0 1px 0 #ffffff05, 0 2px 4px #0007;
}

:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-matte"] :is(.hero-card, .hr-card, .pf-card) > :is(b, .hero-card-rank) {
  font-family: 'Arial Black', Arial, Helvetica, sans-serif;
  font-size: calc(var(--deck-width) * .94);
  -webkit-text-stroke: .008em currentColor;
  text-shadow: 0 1px 1px #ffffff12;
  transform: translate(-50%, -50%) scaleX(.8);
}

:is(#boardCards, .hr-view, .pf)[data-deck-style="four-color-matte"] :is(.hero-card, .hr-card, .pf-card).is-ten > :is(b, .hero-card-rank) {
  transform: translate(-50%, -50%) scaleX(.64);
}

@media (max-width: 680px) {
  .hero-card { --deck-width: 54px; }
}