/* cards.css — rendering carte in puro CSS (nessun asset esterno).
   Dimensione guidata da --cw; l'altezza segue il rapporto 1:1.4 delle carte reali. */

.pc {
  --cw: 52px;
  --cr: calc(var(--cw) * 0.11);
  position: relative;
  width: var(--cw);
  /* 1.514 e non 1.4: e' il rapporto della carta nella grafica di riferimento
     (37x56 px). Con 1.4 le carte risultavano basse e non combaciavano ne' col
     banner del board ne' col blocco giocatore. */
  height: calc(var(--cw) * 1.514);
  border-radius: var(--cr);
  background: linear-gradient(160deg, #fffdf7 0%, #f3ece0 60%, #e6dcc9 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 calc(var(--cw) * .04) calc(var(--cw) * .12) rgba(0, 0, 0, .45);
  color: #16181d;
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
  flex: none;
}

.pc--red { color: #cf2233; }
.pc--black { color: #1a1c22; }

.pc__r,
.pc__s {
  position: absolute;
  left: calc(var(--cw) * .09);
  line-height: .95;
  font-weight: 800;
}

.pc__r {
  top: calc(var(--cw) * .06);
  font-size: calc(var(--cw) * .42);
  letter-spacing: -.02em;
}

/* il dieci e' l'unico rango a due cifre: rimpicciolito e stretto, altrimenti
   esce dall'angolo della carta alle misure piccole (grid, slot della regia) */
.pc--ten .pc__r {
  font-size: calc(var(--cw) * .33);
  letter-spacing: -.06em;
  top: calc(var(--cw) * .1);
}

.pc__s {
  top: calc(var(--cw) * .48);
  font-size: calc(var(--cw) * .3);
}

/* seme grande in basso a destra */
.pc__big {
  position: absolute;
  right: calc(var(--cw) * -.04);
  bottom: calc(var(--cw) * -.12);
  font-size: calc(var(--cw) * .82);
  line-height: 1;
  opacity: .22;
  pointer-events: none;
}

.pc--empty {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 6px, transparent 6px 12px),
    rgba(255, 255, 255, .05);
  border: 1px dashed rgba(255, 255, 255, .22);
  box-shadow: none;
  color: rgba(255, 255, 255, .3);
}

.pc--empty::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* dorso */
.pc--back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 4px, transparent 4px 8px),
    linear-gradient(150deg, var(--back-a, #1f4f8f) 0%, var(--back-b, #0d2244) 100%);
  background-color: #16325c;
  border: calc(var(--cw) * .045) solid #f2ede2;
  box-shadow: 0 calc(var(--cw) * .04) calc(var(--cw) * .12) rgba(0, 0, 0, .45);
}

.pc--back::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: calc(var(--cr) * .6);
  border: 1px solid rgba(255, 255, 255, .28);
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .16), transparent 62%);
}