/* Pokémon Card Gallery - Simplified CSS */

.crominus-card {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    position: relative;
    width: 100%;
    display: block;
}

/* Dynamic aspect ratio - simple approach */
.crominus-card[data-aspect-ratio] {
    aspect-ratio: var(--aspect-ratio);
    height: auto;
    min-height: 120px;
}

.crominus-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/cards/background.png') center/cover;
    border-radius: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

/* Ensure card container doesn't limit width */
.card-container {
    width: 100%;
}

.crominus-card.show-back::before {
    opacity: 1;
}

.tilt-card::part(container), .crominus-card {
    border-radius: 14px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.crominus-card.expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(2) rotateY(360deg);
    z-index: 1000;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    border-radius: 14px;
    max-width: 100%;
    max-height: 100%;
    cursor: zoom-out;
    background-size: cover;
    background-position: center;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    backdrop-filter: blur(20px);
}

.overlay.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.img-back-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/cards/background.png') center/cover;
    border-radius: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.img-back-overlay.show {
    opacity: 1;
}

/* Rarity styles for crominus-card */
.crominus-card.is-normal { border: 3px solid var(--is-normal); }
.crominus-card.is-special { border: 3px solid var(--is-special); }
.crominus-card.is-rare { border: 3px solid var(--is-rare); }
.crominus-card.is-epic { border: 3px solid var(--is-epic); }
.crominus-card.is-legendary { border: 3px solid var(--is-legendary); }

/* Expanded card styles - thinner border and perfect fit */
.crominus-card.expanded,
.crominus-card[style*="position: fixed"] {
    border-width: 2px !important;
    border-radius: 36px !important;
    background-size: cover !important;
    background-position: center !important;
}

.crominus-card.expanded.is-normal { border: 1px solid var(--is-normal) !important; }
.crominus-card.expanded.is-special { border: 1px solid var(--is-special) !important; }
.crominus-card.expanded.is-rare { border: 1px solid var(--is-rare) !important; }
.crominus-card.expanded.is-epic { border: 1px solid var(--is-epic) !important; }
.crominus-card.expanded.is-legendary { border: 1px solid var(--is-legendary) !important; }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}