#gachaCard {


    width: 300px;
    height:400px;
    padding:100px 30px 100px;
    cursor: pointer;
    margin:0 auto;
    text-align:center;
    background:#fff;
    border-radius:5px;
    display:flex;
    flex-flow:column;	
    align-items:center;
    transition: transform 1s;
    transform-style: preserve-3d;
    border:3px solid #ddd;

}

#cardContainer {
	    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    justify-content: center;
    align-items: center;

    background: rgba(0,0,0,0.6);

}


.front,
.back{
    position: absolute;

    width: 100%;
    height: 100%;

    backface-visibility: hidden;
}

.back {
    transform: rotateY(180deg);
    
}

.flip {
    transform: rotateY(180deg);
}

#gachaCard button{
	margin-top:200px;
	backface-visibility: hidden;
}

.hidden {
    opacity: 0;
    pointer-events: none;
}

.visible {
    opacity: 1;
}

.modal {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    justify-content: center;
    align-items: center;

    background: rgba(0,0,0,0.6);

}



.reward-card {

    max-width: 700px;
    
	width:350px; 
	hegiht:400px;
	
    padding: 20px;

    border-radius: 20px;

    background: #fff;

    text-align: center;

    transition: 0.5s;

}

.rarity-N,
.rarity-N img  {

    border: 5px solid #9e9e9e;

    box-shadow:
        0 0 10px rgba(0,0,0,0.2);

}

.rarity-R,
.rarity-R img  {

    border: 5px solid #4caf50;

    box-shadow:
        0 0 15px rgba(76,175,80,0.7);

}

.rarity-SR,
.rarity-SR img  {

    border: 5px solid #2196f3;

    box-shadow:
        0 0 20px rgba(33,150,243,0.8);

}

.rarity-SSR,
.rarity-SSR img {

    border: 5px solid #9c27b0;

    box-shadow:
        0 0 30px rgba(156,39,176,0.9),
        0 0 60px rgba(156,39,176,0.5);

}

.rarity-Legend,
.rarity-Legend img {

    border: 5px solid gold;

    box-shadow:
        0 0 30px gold,
        0 0 60px gold,
        0 0 100px rgba(255,215,0,0.8);

    border: 5px solid gold;

    animation:
        legendGlow 2s infinite;

}



@keyframes legendGlow {

    0% {
        box-shadow:
            0 0 20px gold;
    }

    50% {
        box-shadow:
            0 0 60px gold;
    }

    100% {
        box-shadow:
            0 0 20px gold;
    }

}