/* A card (spec §5). Everything scales from --card-w; nothing about the tab is in pixels. */

.card {
  --card-w: 84px;
  position: relative;
  display: block;
  box-sizing: border-box;
  width: var(--card-w);
  aspect-ratio: 320 / 576;
  margin: 0;
  padding: 0;
  border: 0;
  /* the scan's own corner: 5.5% of the width, the same length on both axes */
  border-radius: 5.5% / 3.06%;
  overflow: hidden;
  background: var(--carton);
  color: var(--encre);
  box-shadow: var(--shadow-card);
  filter: brightness(var(--card-dim));
  font: 700 calc(var(--card-w) * .2) / 1 var(--font-index);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.card__face {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.card__tab {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* sized from the card's width, never in pixels: at the 24 px overlap floor of an 84 px card
     the visible strip is 28% of the card, and the tab fills it. A trump's tab grows with its
     numeral and is shorter, since it carries no mark. Percent padding is a share of the WIDTH. */
  gap: calc(var(--card-w) * .02);
  min-width: 28%;
  padding: 5% 4% 4% 5%;
  background: var(--carton);
  border-bottom-right-radius: calc(var(--card-w) * .09);
  font-size: calc(var(--card-w) * .19);
  letter-spacing: -.03em;
}

.card__rank { display: block; }

.card__tab--foot {
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}

.card__mark {
  display: block;
  width: calc(var(--card-w) * .17);
  height: calc(var(--card-w) * .17);
  fill: currentColor;
}

.card--H, .card--D { color: var(--vermillon); }

:root[data-marks="four"] .card--D { color: var(--azur); }
:root[data-marks="four"] .card--C { color: var(--sapin); }

/* a row of dark tabs is "my trumps" at arm's length, before any digit is read (spec S2) */
.card--trump .card__tab { background: var(--encre); color: var(--carton); }

.card--excuse .card__mark { width: calc(var(--card-w) * .2); height: calc(var(--card-w) * .2); }

.card--back { box-shadow: var(--shadow-card); }

.card:focus-visible { outline: 3px solid var(--dorure); outline-offset: 2px; }
.card.is-dimmed { filter: brightness(calc(var(--card-dim) * .55)) saturate(.5); }
.card.is-lifted { box-shadow: var(--shadow-lifted); outline: 2px solid var(--dorure); }