/* card-games-common.css — shared card rendering & layout for all card games */

/* ── Playing card ─────────────────────────────────────────────────────────── */
.fc-card {
    width: 64px;
    height: 96px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.14);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: Georgia, serif;
    color: #1e293b;
    transition: transform .15s;
    user-select: none;
}
.fc-card--red   { color: #dc2626; }

/* Face-down card */
.fc-card--down  { background: #1e3a5f; border-color: #1e40af; }
.fc-card-back {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border-radius: 6px;
    background: repeating-linear-gradient(
        45deg,
        #1e40af 0px, #1e40af 5px,
        #1e3a5f 5px, #1e3a5f 10px
    );
}

/* Corner pips */
.fc-corner {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}
.fc-tl { top: 4px; left: 6px; }
.fc-br { bottom: 4px; right: 6px; transform: rotate(180deg); }
.fc-rank { font-size: .8rem; font-weight: 700; }
.fc-suit { font-size: .6rem; }

/* Centre suit symbol */
.fc-center { font-size: 1.6rem; line-height: 1; }

/* ── Hand (row of cards) ──────────────────────────────────────────────────── */
.fc-hand {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 96px;
    align-items: center;
}

/* ── Deal-in animation ────────────────────────────────────────────────────── */
@keyframes fcDeal {
    from { opacity: 0; transform: translateY(-12px) scale(.9); }
    to   { opacity: 1; transform: none; }
}
.fc-card { animation: fcDeal .18s ease-out both; }