/* ============================================
   PLAYING CARDS
   ============================================ */

/* Stage: deck + drawn hand side by side */
.card-stage {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-md);
    align-items: center;
}

@media (min-width: 600px) {
    .card-stage { flex-direction: row; align-items: flex-start; }
}

/* Deck stack visual */
.card-deck-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nb-space-sm);
    flex-shrink: 0;
}

.card-deck {
    position: relative;
    width: 80px;
    height: 112px; /* 2.5:3.5 ratio */
    cursor: pointer;
    transition: transform var(--nb-transition-fast);
}

.card-deck:hover { transform: translateY(-2px); }

/* Stacked shadow cards (decorative) */
.card-deck::before,
.card-deck::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 112px;
    border-radius: var(--nb-radius-md);
    background: var(--nb-bg-layer-1);
    border: 1px solid var(--nb-border-subtle);
}

.card-deck::before { top: 4px; left: 2px; z-index: 0; }
.card-deck::after  { top: 2px; left: 1px; z-index: 1; }

.card-back-face {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--nb-radius-md);
    background: var(--nb-bg-layer-2);
    border: 2px solid var(--nb-accent-border-medium);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card back pattern — pure CSS geometric */
.card-back-face::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid var(--nb-accent-border-soft);
    border-radius: calc(var(--nb-radius-md) - 4px);
    background:
        repeating-linear-gradient(
            45deg,
            var(--nb-accent-tint-subtle) 0px,
            var(--nb-accent-tint-subtle) 2px,
            transparent 2px,
            transparent 8px
        ),
        repeating-linear-gradient(
            -45deg,
            var(--nb-accent-tint-subtle) 0px,
            var(--nb-accent-tint-subtle) 2px,
            transparent 2px,
            transparent 8px
        );
}

/* Nodeblue logo mark in center of card back */
.card-back-face::after {
    content: 'N';
    position: relative;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--nb-accent-border-strong);
    font-style: italic;
    z-index: 1;
    letter-spacing: -0.05em;
}

/* Remaining count badge on deck */
.deck-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--nb-text-muted);
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
}

.deck-count span {
    color: var(--nb-accent-hover);
}

/* ============================================
   PLAYING CARD
   ============================================ */
.playing-card {
    width: 80px;
    height: 112px;
    perspective: 600px;
    flex-shrink: 0;
    cursor: default;
}

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

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

.card-front,
.card-back-of-card {
    position: absolute;
    inset: 0;
    border-radius: var(--nb-radius-md);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

/* Card back (on drawn card — same design as deck) */
.card-back-of-card {
    background: var(--nb-bg-layer-2);
    border: 2px solid var(--nb-accent-border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-back-of-card::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid var(--nb-accent-border-soft);
    border-radius: calc(var(--nb-radius-md) - 3px);
    background:
        repeating-linear-gradient(45deg, var(--nb-accent-tint-subtle) 0px, var(--nb-accent-tint-subtle) 2px, transparent 2px, transparent 8px),
        repeating-linear-gradient(-45deg, var(--nb-accent-tint-subtle) 0px, var(--nb-accent-tint-subtle) 2px, transparent 2px, transparent 8px);
}

/* Card front face */
.card-front {
    transform: rotateY(180deg);
    background: #FAFAFA;
    border: 1px solid #DDD;
    display: flex;
    flex-direction: column;
    padding: 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: relative;
}

/* Suit colours */
.card-front.suit-hearts,
.card-front.suit-diamonds {
    --card-suit-color: #C41E3A;
}

.card-front.suit-spades,
.card-front.suit-clubs {
    --card-suit-color: #1A1A1A;
}

/* Rank + suit top-left */
.card-rank-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    color: var(--card-suit-color, #1A1A1A);
}

.card-rank-text {
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
}

.card-suit-text {
    font-size: 0.7rem;
    line-height: 1;
    margin-top: 1px;
}

/* Large center suit symbol */
.card-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--card-suit-color, #1A1A1A);
}

/* Rank + suit bottom-right (rotated) */
.card-rank-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transform: rotate(180deg);
    line-height: 1;
    color: var(--card-suit-color, #1A1A1A);
    align-self: flex-end;
}

/* ============================================
   HAND — drawn cards displayed as a fan
   ============================================ */
.cards-hand {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nb-space-sm);
    justify-content: center;
    flex: 1;
    align-items: flex-end;
    min-height: 112px;
}

.cards-hand-empty {
    font-size: 0.875rem;
    color: var(--nb-text-muted);
    text-align: center;
    align-self: center;
    padding: var(--nb-space-md);
}

/* Draw animation: card slides in from deck area */
@keyframes cardDealIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.playing-card.dealing {
    animation: cardDealIn 0.35s ease-out forwards;
}

/* Card controls row */
.cards-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nb-space-sm);
    align-items: center;
}

.cards-stat {
    font-size: 0.8125rem;
    color: var(--nb-text-muted);
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
}

.cards-stat span { color: var(--nb-text-primary); font-weight: 600; }

/* Joker card styling */
.card-front.joker {
    --card-suit-color: #4B0082;
    background: linear-gradient(135deg, #FFF8F8 0%, #F8F0FF 100%);
}

/* Shuffle animation — full riffle on reset */
@keyframes deckShuffle {
    0%  { transform: rotate(0deg) scale(1); }
    20% { transform: rotate(-5deg) scale(0.97); }
    40% { transform: rotate(5deg) scale(0.97); }
    60% { transform: rotate(-3deg) scale(0.99); }
    80% { transform: rotate(3deg) scale(0.99); }
    100%{ transform: rotate(0deg) scale(1); }
}

.card-deck.shuffling {
    animation: deckShuffle 0.5s ease-in-out;
}

/* Pre-draw animation — deck tilts as if a card is being pulled from it */
@keyframes deckDraw {
    0%   { transform: none; }
    20%  { transform: translateX(-4px) rotate(-4deg) scale(0.97); }
    45%  { transform: translateX(3px) rotate(2deg) scale(0.98); }
    70%  { transform: translateX(-2px) rotate(-1deg) scale(0.99); }
    100% { transform: none; }
}

.card-deck.drawing {
    animation: deckDraw var(--deck-draw-dur, 0.38s) ease-in-out;
}

/* Responsive: larger cards on desktop */
@media (min-width: 768px) {
    .playing-card { width: 90px; height: 126px; }
    .card-deck    { width: 90px; height: 126px; }
    .card-deck::before, .card-deck::after { width: 90px; height: 126px; }
    .card-center  { font-size: 2.25rem; }
    .card-rank-text { font-size: 1rem; }
    .card-suit-text { font-size: 0.8rem; }
}