/* Cards CSS for Treasuretrap */

/* This file imports all card component styles */

/* Import base card styles */
@import 'cards-base.css';

/* Import card type styles */
@import 'cards-types.css';

/* Import inventory card styles */
@import 'cards-inventory.css';

/* Import card effect styles */
@import 'cards-effects.css';

/* Import card pattern styles */
@import 'cards-patterns.css';

/* Custom font for all card text */
.card-title,
.card-value,
.card-description,
.trap-type,
.special-badge,
.deck-icon {
    font-family: var(--title-font);
}

/* Mobile responsive card adjustments */
@media (max-width: 768px) {
    /* Smaller cards for mobile screens */
    .card {
        width: 130px;
        height: 182px;
    }
    
    /* Adjust card content */
    .card-title {
        font-size: 0.9rem;
    }
    
    .card-value {
        font-size: 1.8rem;
    }
    
    .card-description {
        font-size: 0.7rem;
    }
    
    /* Smaller badges for traps and special cards */
    .trap-type,
    .special-badge {
        font-size: 0.7rem;
        padding: 2px 6px;
    }
}

@media (max-width: 480px) {
    /* Even smaller cards for very small screens */
    .card {
        width: 120px;
        height: 168px;
    }
    
    /* Further adjust card content */
    .card-title {
        font-size: 0.8rem;
    }
    
    .card-value {
        font-size: 1.6rem;
    }
    
    .card-icon {
        font-size: 1.8rem;
    }
}

/* Add styling for inventory card labels */
.card-inventory-label {
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    text-align: center;
    background-color: var(--dark-color);
    color: var(--gold-color);
    font-size: 0.8rem;
    padding: 2px 5px;
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
    z-index: 5;
    max-width: 90%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
} 

/* Cursed Trap Visual Effects */
.cursed-trap-active {
    animation: cursed-pulse 2s forwards;
    position: relative;
    z-index: 100;
    box-shadow: 0 0 30px 15px rgba(255, 0, 0, 0.8);
}

.cursed-trap-active::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(255,0,0,0.9) 0%, rgba(128,0,32,0.8) 30%, rgba(0,0,0,0) 70%);
    z-index: -1;
    animation: cursed-spread 2s forwards;
}

.cursed-trap-active::after {
    content: "☠️";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    z-index: 5;
    opacity: 0;
    animation: skull-animation 2s forwards;
}

@keyframes cursed-pulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    20% {
        transform: scale(1.3);
        filter: brightness(1.5) hue-rotate(330deg);
    }
    30% {
        transform: scale(1.2);
        filter: brightness(1.8) hue-rotate(330deg);
    }
    70% {
        transform: scale(1.1);
        filter: brightness(1.2) hue-rotate(330deg);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes cursed-spread {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    30% {
        opacity: 1;
        transform: scale(0.5);
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes skull-animation {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.1) rotate(0deg);
    }
    40% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(15deg);
    }
    60% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(-15deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3) rotate(0deg);
    }
}

/* Flying card animation enhancements */
.flying-card {
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    will-change: transform, left, top;
    /* Ensure card is fully opaque */
    opacity: 1 !important;
}

/* Prevent any transparency issues with flying card */
#flying-card.flying-card {
    background-color: transparent; /* Reset any background */
}

/* Ensure the front and back maintain exact appearance */
#flying-card.flying-card .card-front,
#flying-card.flying-card .card-back {
    opacity: 1 !important;
    background-color: inherit !important;
    border-color: inherit !important;
}

/* Make card back fully opaque */
#flying-card.flying-card .card-back {
    /* Match the original purple background color */
    background-color: var(--deck-purple, #9b59b6) !important;
    opacity: 1 !important;
}

/* Make sure the inner elements like icon are opaque */
#flying-card.flying-card .deck-icon {
    opacity: 1 !important;
}

/* Improved flipping animation */
.card-inner {
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Preserve 3D gives better visual during flip */
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Make sure flying card maintains proper appearance */
#flying-card.card .card-inner,
#flying-card.card .card-front,
#flying-card.card .card-back {
    /* Important to maintain look until flip completes */
    transition: inherit;
    background-color: inherit;
}

/* Card content fade-in effect */
.card-content {
    animation: content-fade-in 0.3s forwards;
}

@keyframes content-fade-in {
    from { opacity: 0.9; }
    to { opacity: 1; }
}

/* Enhanced card hover effect */
.card:not(.flying-card):hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}