/* ═══════════════════════════════════════════════════════════════
   SolPoker — CSS Playing Cards
   Pure CSS representation of playing cards with 3D flip effects.
   ═══════════════════════════════════════════════════════════════ */

.playing-card {
    width: 60px;
    height: 84px;
    perspective: 1000px;
    position: relative;
    user-select: none;
    flex-shrink: 0;
}

.playing-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.playing-card.is-flipped .playing-card-inner {
    transform: rotateY(180deg);
}

.playing-card-front, .playing-card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Back of Card — uses cardback1.png across all card instances.
   The .sm variant (player hole cards on table) uses cardback1b.png. */
.playing-card-back {
    background: url('/img/cardback1.png') center / cover no-repeat;
    background-color: #0a0a0a;
    border: 2px solid var(--accent-gold);
}
.playing-card.sm .playing-card-back {
    background-image: url('/img/cardback1b.png');
}

/* Front of Card — uses absolute positioning so corner pips and the
   center suit are pinned inside the card border regardless of size.
   Previously this used flexbox column layout, which let the center
   suit push the bottom pip past the card's bottom edge on small cards. */
.playing-card-front {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    transform: rotateY(180deg);
    position: relative;
    overflow: hidden;
}

.card-top-left,
.card-bottom-right {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    font-size: 0.9rem;
    font-weight: 800;
}

.card-top-left {
    top: 3px;
    left: 4px;
}

.card-bottom-right {
    bottom: 3px;
    right: 4px;
    transform: rotate(180deg);
}

.card-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.75rem;
    line-height: 1;
}

/* Suits */
.playing-card.suit-hearts .playing-card-front,
.playing-card.suit-diamonds .playing-card-front {
    color: #e63946;
}

.playing-card.suit-spades .playing-card-front,
.playing-card.suit-clubs .playing-card-front {
    color: var(--text-on-gold);
}

/* Sizes
   ─ Default  = 60×84  (community cards, action bar)
   ─ .sm      = 68×95  (player hole cards — +50% from prior 45×63)
   ─ .lg      = 80×112 (winning hand / showdown highlight) */
.playing-card.sm {
    width: 68px;
    height: 95px;
}
.playing-card.sm .card-top-left,
.playing-card.sm .card-bottom-right {
    font-size: 1.1rem;
}
.playing-card.sm .card-center {
    font-size: 2.1rem;
}

.playing-card.lg {
    width: 80px;
    height: 112px;
}
.playing-card.lg .card-top-left, .playing-card.lg .card-bottom-right {
    font-size: 1.4rem;
}
.playing-card.lg .card-center {
    font-size: 2.8rem;
}

/* Winner Highlight */
.playing-card.is-winner {
    box-shadow: 0 0 15px var(--accent-gold-bright);
    border-color: var(--accent-gold-bright);
}