/* === CARD === */
.card {
    width: var(--card-w); height: var(--card-h);
    border-radius: var(--card-r);
    position: relative; flex-shrink: 0;
}

/* Back */
.card-back {
    background: #1f3f82;
    border: 1px solid #162e5c;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
    overflow: hidden;
}
.card-back-design {
    position: absolute; inset: 3.5px;
    border-radius: calc(var(--card-r) - 2px);
    border: 1px solid rgba(200,175,100,0.35);
    background: repeating-linear-gradient(45deg,
        rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px,
        transparent 2px, transparent 5px);
}
.card-back-design::after {
    content: ''; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 45%; height: 35%;
    border: 1px solid rgba(200,175,100,0.25);
    border-radius: 3px;
}

/* Face */
.card-face {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 0 0 0.5px rgba(255,255,255,0.6);
    overflow: hidden;
}

/* Suit colors via CSS variables */
.card-face.hearts   { color: var(--suit-hearts); }
.card-face.spades   { color: var(--suit-spades); }
.card-face.diamonds { color: var(--suit-diamonds); }
.card-face.clubs    { color: var(--suit-clubs); }

/* Card inner */
.card-inner {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    justify-content: space-between;
    padding: 3px 5px;
}

/* Corner: rank + suit SIDE BY SIDE for peek readability */
.c-corner {
    display: flex; flex-direction: row;
    align-items: baseline; gap: 1px;
    line-height: 1;
}
.c-rank {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(0.95rem, 4vw, 1.3rem);
    font-weight: 700;
}
.c-suit-s {
    font-size: clamp(0.75rem, 3vw, 1rem);
}
.c-corner-br {
    align-self: flex-end;
    transform: rotate(180deg);
}

/* Center area */
.c-center {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column;
    align-items: center; gap: 0;
    pointer-events: none;
    opacity: 0.18;
}
.c-big-suit {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    line-height: 1;
}
.c-big-rank {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(0.9rem, 3.5vw, 1.3rem);
    font-weight: 700; line-height: 1; margin-top: -2px;
}

/* Ace */
.card-face.ace .c-center { opacity: 0.3; }
.card-face.ace .c-big-suit { font-size: clamp(2.2rem, 10vw, 3.2rem); }
.card-face.ace .c-big-rank { display: none; }

/* Face card */
.card-face.face .c-center { opacity: 0.14; }
.card-face.face .c-big-suit { font-size: clamp(1.2rem, 5vw, 1.8rem); }
.card-face.face .c-big-rank { font-size: clamp(1.2rem, 5vw, 1.8rem); margin-top: 0; }

/* === FLYING CARD === */
#flying-card {
    position: fixed; z-index: 1000;
    pointer-events: none; transition: none;
}