/* Carta de póker con una ilustración (assets/js/carta.js arma el HTML). Todo se mide en cqw (1cqw = 1 % del ancho de
   la carta, que mide 100 × 140): para agrandarla basta con cambiar --carta-w. Colores y letra de «19 · Carta» de la guía
   de estilo (dev-docs/ui-kit.html): pergamino, número en serif, rojo óxido y negro. Es un objeto físico: se ve igual
   en los dos temas. La ilustración se mezcla con el papel (multiply), así que su fondo blanco no se nota. */
.carta {
  --carta-w: 120px; --carta-fondo: #F5EEDC; --carta-borde: #3A3128; --carta-roja: #B0492A; --carta-negra: #1A1A18; --carta-oro: #B98A1F;
  position: relative; display: inline-block; vertical-align: middle; flex: none; box-sizing: border-box; overflow: hidden; isolation: isolate;
  width: var(--carta-w); aspect-ratio: 5 / 7; container-type: inline-size;
  border-radius: calc(var(--carta-w) * .07); background: var(--carta-fondo); border: 1px solid var(--carta-borde);
  box-shadow: 0 calc(var(--carta-w) * .04) calc(var(--carta-w) * .12) rgba(0, 0, 0, .38);
  color: var(--carta-negra); font-family: "Instrument Serif", Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1;
  -webkit-user-select: none; user-select: none;
}
.carta-roja { color: var(--carta-roja); }
.carta.item-card, .tr-card .carta { --carta-fondo: #FFFFFF; }
.carta * { box-sizing: border-box; }
.carta i, .carta b { font-style: normal; font-weight: 400; }
/* brightness: el fondo casi blanco de algunas ilustraciones (#FCFCFC) pasa a blanco y desaparece en el papel */
.carta img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.06); -webkit-user-drag: none; }

/* índice de las esquinas: el valor y el palo debajo; el de abajo a la derecha, invertido */
.carta-esq { position: absolute; z-index: 2; left: 2.5cqw; top: 4cqw; width: 15cqw; display: flex; flex-direction: column; align-items: center; gap: .5cqw; }
.carta-esq b { font-size: 18cqw; letter-spacing: -.02em; }
.carta-10 .carta-esq b { font-size: 15cqw; letter-spacing: -.03em; }
.carta-esq i { font-size: 14cqw; }
.carta-esq.carta-inv { left: auto; top: auto; right: 2.5cqw; bottom: 4cqw; transform: rotate(180deg); }

/* del 2 al 10: la ilustración en un recuadro (de una línea; el 10, de dos) y el palo grande en dos esquinas */
.carta-arte { position: absolute; left: 18cqw; right: 18cqw; top: 15cqw; bottom: 15cqw; display: flex; align-items: center; }
.carta-arte img { padding: 3cqw; height: auto; aspect-ratio: 1; transform: scale(1.08); }   /* las ilustraciones traen margen blanco */
.carta-num .carta-mp { font-size: 18cqw; }
.carta-recuadro .carta-arte { overflow: hidden; border: .7cqw solid currentColor; border-radius: 1.5cqw; }
.carta-doble .carta-arte { box-shadow: inset 0 0 0 1.4cqw var(--carta-fondo), inset 0 0 0 1.8cqw currentColor; }

/* figuras (J, Q, K) y As: la ilustración en un marco de doble filete, con el palo en dos esquinas */
.carta-marco { position: absolute; left: 18cqw; right: 18cqw; top: 15cqw; bottom: 15cqw; display: flex; align-items: center;
  overflow: hidden; border: .7cqw solid currentColor; border-radius: 1.5cqw; box-shadow: inset 0 0 0 1.4cqw var(--carta-fondo), inset 0 0 0 1.8cqw currentColor; }
.carta-marco img { padding: 3cqw; height: auto; aspect-ratio: 1; transform: scale(1.15); }
/* el palo de adentro, metido en la esquina del recuadro (o del marco) */
/* line-height chico: la caja queda pegada al dibujo del palo, sin el aire de la letra arriba y abajo */
.carta-mp { position: absolute; z-index: 1; left: 2cqw; top: 2.5cqw; font-size: 14cqw; line-height: .72; }
.carta-mp.carta-inv { left: auto; top: auto; right: 2cqw; bottom: 2.5cqw; transform: rotate(180deg); }
.carta-marco .carta-mp, .carta-doble .carta-mp { left: 3.5cqw; top: 3.5cqw; }   /* dentro del doble filete */
.carta-marco .carta-mp.carta-inv, .carta-doble .carta-mp.carta-inv { left: auto; top: auto; right: 3.5cqw; bottom: 3.5cqw; }
.carta-as .carta-marco { border-color: var(--carta-oro); box-shadow: inset 0 0 0 1.4cqw var(--carta-fondo), inset 0 0 0 1.8cqw var(--carta-oro); }

/* dorso (19 · Carta: rayado muro con filete de pergamino) */
.carta-dorso { border: calc(var(--carta-w) * .03) solid var(--carta-fondo); outline: 1px solid var(--carta-borde); outline-offset: -1px;
  background: repeating-linear-gradient(45deg, #2A241D 0 calc(var(--carta-w) * .05), #3A3128 0 calc(var(--carta-w) * .1)); }