.m-photocard {
        width: 300px;
        margin: auto;
        height: 350px;
        padding: 8px;
        border-radius: 22px;
        background: linear-gradient(135deg, #fff, #777, #fff);
        box-shadow: 0 20px 50px rgba(0,0,0,0.6);
        transition: transform 0.3s ease;
    }

    .m-photocard:hover {
        transform: rotateY(8deg) rotateX(5deg) scale(1.03);
    }

    .m-card-inner {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 17px;
        position: relative;
        background: #222;
    }

    .m-card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .m-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            transparent 45%,
            rgba(0,0,0,0.85) 100%
        );
    }

    .m-info {
        position: absolute;
        bottom: 20px;
        left: 20px;
        color: white;
    }

    .m-name {
        font-size: 20px;
        font-weight: bold;
    }

    .m-subtitle {
        margin-top: 5px;
        font-size: 14px;
        opacity: 0.8;
    }

    .m-rarity {
        position: absolute;
        top: 15px;
        right: 15px;
        padding: 7px 12px;
        border-radius: 20px;
        background: rgba(255,255,255,0.2);
        backdrop-filter: blur(10px);
        color: white;
        font-size: 12px;
        font-weight: bold;
    }