/**
 * Card Games - Shared Card Styles
 * Common card styling used across all solitaire games
 * Import this after variables.css and before game-specific styles
 */

/* ==========================================================================
   Base Card Structure
   ========================================================================== */

.card {
    width: var(--card-width);
    height: var(--card-height);
    border-radius: var(--border-radius, 6px);
    position: absolute;
    cursor: pointer;
    user-select: none;
    transition: box-shadow var(--transition-fast);
    box-shadow: var(--shadow-sm);
    z-index: var(--z-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card.dragging {
    opacity: 0.5;
    z-index: var(--z-dropdown);
}

/* ==========================================================================
   Card Face Visibility
   ========================================================================== */

.card.face-down .card-front {
    display: none;
}

.card.face-up .card-back {
    display: none;
}

/* ==========================================================================
   Card Faces (Front & Back)
   ========================================================================== */

.card-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 6px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px;
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
    backface-visibility: hidden;
}

.card-front {
    background: var(--card-bg);
    color: inherit;
    z-index: 2;
}

.card-back {
    background: var(--card-back);
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.05) 10px,
        rgba(255, 255, 255, 0.1) 10px,
        rgba(255, 255, 255, 0.1) 20px
    );
    border: 2px solid var(--card-back-border);
    z-index: 1;
}

/* ==========================================================================
   Card Colors
   ========================================================================== */

.card.red .card-front {
    color: #e53935;
}

.card.black .card-front {
    color: #212121;
}

/* ==========================================================================
   Card Corners & Center
   ========================================================================== */

.card-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.card-corner-bottom {
    align-self: flex-end;
    transform: rotate(180deg);
}

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

/* ==========================================================================
   Drag Ghost (for drag & drop)
   ========================================================================== */

#drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 2147483647;
    opacity: 0.9;
}

#drag-ghost .card {
    position: absolute;
}

/* ==========================================================================
   Responsive Card Sizing
   ========================================================================== */

@media (max-width: 700px) {
    :root {
        --card-width: 50px;
        --card-height: 70px;
        --card-gap: 6px;
    }
    
    .card-face {
        padding: 3px;
        font-size: 0.6rem;
    }
    
    .card-center {
        font-size: 1rem;
    }
}