/**
 * Card Styles
 * Hole cards, community cards, card colors, card backs, hand name labels.
 *
 * Extracted from components/seat-layouts.css for single-responsibility.
 */

/* Cards */
.cards-container {
    display: flex;
    gap: var(--space-2);
    perspective: 600px;
    /* Removed opacity/filter transition to prevent cascading opacity to child cards during board updates */
}

/* Hide faint hole cards for CPU seats - replaced by villain portraits */
.cpu-seat .cards-container .card.hidden,
.cpu-seat .cards-container .card.empty {
    display: none;
}

/* Also hide for opponent seat when empty/hidden */
.player-seat.opponent .cards-container .card.hidden,
.player-seat.opponent .cards-container .card.empty {
    display: none;
}

/* Hand name labels for showdown */
.hand-name-label {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    color: #e8c547;
    text-align: center;
    margin-top: var(--space-2);
    min-height: 1.2em;
    text-shadow: 0 2px 6px rgba(0,0,0,0.7);
    opacity: 0;
    transform: scale(0.9) translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}

.hand-name-label.visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.hand-name-label.winner {
    color: var(--color-positive);
    text-shadow: 0 0 10px rgba(var(--color-positive-rgb), 0.5);
}

.hand-name-label.loser {
    color: #9ca3af;
}

.card {
    width: 67px;
    height: 96px;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-black);
    position: relative;
    transform-style: preserve-3d;
    transition: transform var(--transition-fast);
    opacity: 1; /* Ensure cards are visible by default - animation handles fade-in */

    /* Clean card styling */
    background: linear-gradient(160deg, #fefefe 0%, #f4f4f6 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
        0 2px 6px var(--alpha-black-20),
        0 4px 12px rgba(0, 0, 0, 0.1);
}

.card:hover {
    transform: var(--btn-hover-lift);
    box-shadow:
        0 4px 10px var(--alpha-black-25),
        0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Premium card texture overlay - linen texture + shine */
.card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        /* Linen texture pattern */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 1px,
            rgba(0, 0, 0, 0.025) 1px,
            rgba(0, 0, 0, 0.025) 2px
        ),
        /* Subtle diagonal shine */
        linear-gradient(
            135deg,
            var(--alpha-white-20) 0%,
            transparent 35%,
            transparent 65%,
            rgba(0, 0, 0, 0.03) 100%
        );
    pointer-events: none;
    z-index: 1;
}

/* .card.revealing and cardDealFromDeck moved to components/card-animations.css */

/* Hero cards - premium styling with rotation, overlap, shadows */
.player-seat.hero .card {
    width: 62px;
    height: 86px;
    position: relative;
    transition: transform var(--duration-normal) var(--ease-in-out);
    box-shadow:
        0 4px 12px var(--alpha-black-40),
        0 2px 4px var(--alpha-black-20),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.12);
    /* Slightly warm off-white — reduces sticker glare, matches scene lighting */
    background: linear-gradient(165deg, #f5f3ef 0%, #efede9 50%, #e7e5e1 100%);
}

/* First card - slight offset stacking (like real poker, no rotation) */
.player-seat.hero .card:first-child {
    transform: translateX(0);
    z-index: 1;
    margin-right: -8px;
}

/* Second card - slightly offset and raised (like peeking at cards) */
.player-seat.hero .card:nth-child(2) {
    transform: translateX(0) translateY(-2px);
    z-index: 2;
}

/* Hover - lift and enhance */
/* Higher specificity by adding pseudo-class selectors to override default z-index */
.player-seat.hero .cards-container .card:hover,
.player-seat.hero .card:first-child:hover,
.player-seat.hero .card:nth-child(2):hover {
    z-index: var(--z-dropdown);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.45),
        0 4px 8px var(--alpha-black-25),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.player-seat.hero .card:first-child:hover {
    transform: translateY(-8px) scale(1.03);
}

.player-seat.hero .card:nth-child(2):hover {
    transform: translateY(-10px) scale(1.03);
}

.card .rank {
    font-size: 1.8em;
    line-height: 1;
    font-weight: var(--font-weight-black);
    letter-spacing: -1px;
    color: currentColor !important;
    opacity: 1 !important;
}

.card .suit {
    font-size: 2em;
    line-height: 1;
    font-weight: var(--font-weight-black);
    margin-top: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor !important;
    opacity: 1 !important;
}

/* Suit images */
.suit-img {
    width: 1em;
    height: 1em;
    object-fit: contain;
    vertical-align: middle;
    user-select: none;
}

/* Card colors - solid black for black suits, red for red suits */
.card.red {
    color: var(--color-card-red) !important;
}

.card.red .rank,
.card.red .suit {
    color: var(--color-card-red) !important;
}

.card.black {
    color: #000000 !important;
}

.card.black .rank,
.card.black .suit {
    color: #000000 !important;
}

/* Hero cards have larger text to match larger card size */
.player-seat.hero .card .rank {
    font-size: 2em;
}

.player-seat.hero .card .suit {
    font-size: 2.2em;
}

/* Card backs - image via --card-back-image variable (card-back-manager.js) */
.card.hidden {
    background-image: var(--card-back-image);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow:
        0 2px 4px rgba(0, 20, 10, 0.3),
        0 4px 8px rgba(0, 20, 10, 0.2);
}

.card.hidden .rank,
.card.hidden .suit {
    display: none;
}

/* Faded card backs for folded/inactive non-hero players */
.player-seat:not(.hero):not(.acting) .card.hidden,
.player-seat.folded .card.hidden {
    opacity: 0.3;
    filter: saturate(0.6) brightness(0.8);
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.card.empty {
    display: none;
}

/* Face-down villain hole cards (drill/replay mode) */
.card.villain-hole-card.face-down {
    background-image: var(--card-back-image);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    box-shadow:
        0 2px 4px rgba(0, 20, 10, 0.3),
        0 4px 8px rgba(0, 20, 10, 0.2);
}

.card.villain-hole-card.face-down .card-back {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Opponent/CPU card sizing */
.player-seat.opponent .card.villain-hole-card,
.player-seat.cpu-seat .card.villain-hole-card {
    width: 38px;
    height: 53px;
}

/* Main villain slightly larger */
.player-seat.main-villain .card.villain-hole-card {
    width: 42px;
    height: 58px;
}

/* Community cards - scaled 20% larger (72x101px) */
.board-cards .card {
    width: 72px;
    height: 101px;
    background: linear-gradient(170deg, #f8f6f2 0%, #f0eee8 100%);
    border-radius: 7px;
    border: none;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.35),
        0 6px 14px rgba(0, 0, 0, 0.35),
        0 10px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    /* Fix blurriness - force GPU layer */
    transform: translateZ(0);
    backface-visibility: hidden;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    opacity: 1;
    color: #000000;
}

/* Empty card slot styling */
.board-cards .card.empty {
    background: var(--alpha-white-6);
    border: 2px dashed rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 1px 0 var(--alpha-white-8),
        inset 0 -2px 6px rgba(0, 0, 0, 0.35),
        0 6px 14px rgba(0, 0, 0, 0.35);
    color: var(--alpha-black-30);
    animation: emptyCardPulse 2s ease-in-out infinite;
}

@keyframes emptyCardPulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 0.85; }
}

.board-cards .card .rank {
    font-size: 34px;
    font-weight: var(--font-weight-bold);
    color: inherit !important;
    opacity: 1 !important;
    display: block;
    line-height: 1;
}

.board-cards .card .suit {
    font-size: 31px;
    color: inherit !important;
    opacity: 1 !important;
    display: block;
    line-height: 1;
}

.board-cards .card.red { color: var(--color-card-red) !important; }
.board-cards .card.black { color: #000000 !important; }

/* Board card hover lift */
.board-cards .card:not(.empty):hover {
    transform: translateZ(0) translateY(-4px);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.5),
        0 8px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

/* Ensure board card text is never faint */
.board-cards .card:not(.empty) {
    opacity: 1 !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

.board-cards .card:not(.empty) .rank,
.board-cards .card:not(.empty) .suit {
    color: currentColor;
    opacity: 1 !important;
}