/* Cartas con diseño propio: frente blanco con índice y palo grande; dorso a rombos. .cuatro-colores en activa la baraja de cuatro colores. */ .carta { position: relative; width: var(--carta-ancho); aspect-ratio: 5 / 7; flex: none; border-radius: calc(var(--carta-ancho) * .1); background: linear-gradient(#ffffff, #f1efe8); color: #1b1b1b; box-shadow: 0 2px 6px rgb(0 0 0 / .5), inset 0 0 0 1px rgb(0 0 0 / .15); font-family: Georgia, "Times New Roman", serif; user-select: none; } .carta .indice { position: absolute; left: 8%; top: 4%; display: grid; justify-items: center; line-height: .95; font-weight: 700; font-size: calc(var(--carta-ancho) * .36); } .carta .indice small { font-size: .75em; } .carta .indice.girado { display: none; } .carta .palo-grande { position: absolute; right: 8%; bottom: 4%; font-size: calc(var(--carta-ancho) * .52); line-height: 1; } .carta.h, .carta.d { color: #c62828; } .cuatro-colores .carta.d { color: #1e5bd8; } .cuatro-colores .carta.c { color: #1f8a3b; } .carta.dorso { background: repeating-linear-gradient(45deg, rgb(255 255 255 / .08) 0 4px, transparent 4px 8px), repeating-linear-gradient(-45deg, rgb(255 255 255 / .08) 0 4px, transparent 4px 8px), linear-gradient(135deg, #1d5f86, #123c57); box-shadow: 0 2px 6px rgb(0 0 0 / .5), inset 0 0 0 2px #f3f0e6, inset 0 0 0 4px #1d5f86; } /* Showdown: las 5 cartas de la mano ganadora brillan y suben; el resto se apaga. `translate` (no transform) para sumarse al giro de las cartas del asiento. */ .carta.ganadora { box-shadow: 0 0 0 3px #3ec46d, 0 0 18px 2px rgb(62 196 109 / .85); translate: 0 calc(var(--carta-ancho) * -.12); transition: translate .3s ease-out, box-shadow .3s; } .carta.apagada { filter: brightness(.45) saturate(.6); transition: filter .3s; } /* Animaciones de entrada */ .carta.entra { animation: carta-voltea .45s ease-out both; animation-delay: var(--retraso, 0s); } @keyframes carta-voltea { 0% { transform: rotateY(90deg) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } } .carta.repartida { animation: carta-reparte .35s ease-out both; animation-delay: var(--retraso, 0s); } @keyframes carta-reparte { from { transform: translate(var(--desde-x, 0), var(--desde-y, 0)) scale(.4); opacity: 0; } }