@charset "utf-8";

.card-slot {
    width: 65px;
    height: 120px;
    perspective: 1000px;
}

/* 카드 기본 스타일 및 레이아웃 이동 애니메이션 추가 */
.game-card {
    width: 65px; 
    height: 70px;
    border: 2px solid var(--bs-border-color);
    border-radius: 0.5rem;
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    font-size: 1.5rem; 
    font-weight: bold;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: var(--bs-box-shadow-sm);
    line-height: 1.1;
    
    /* [핵심] 기존 카드가 옆으로 밀려날 때 부드럽게 이동하게 함 */
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    
    /* 등장 애니메이션 설정 */
    backface-visibility: hidden;
    animation: dealCard 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, opacity, margin; 
}

/* 모바일 카드 크기 */
@media (max-width: 576px) {
    .game-card {
        width: 45px;
        height: 60px;
        font-size: 1.2rem;
    }
}

/* 부드럽고 화려한 등장 애니메이션 */
@keyframes dealCard {
    0% {
        opacity: 0;
        /* 시작점: 멀리서 회전하며 작게 시작 */
        transform: translateY(-150px) translateX(-100px) rotateY(180deg) rotateZ(-45deg) scale(0.3);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        /* 도착점: 정위치에 부드럽게 안착 */
        transform: translateY(0) translateX(0) rotateY(0) rotateZ(0) scale(1);
        filter: blur(0);
    }
}

/* 카드 색상 및 뒷면 스타일 */
.game-card.red {
    color: var(--bs-danger);
}

.game-card.black {
    color: var(--bs-emphasis-color);
}

.game-card.back { 
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-dark)); 
    /* 카드 뒷면 무늬 살짝 추가 (고급화) */
    background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.1) 1px, transparent 0);
    background-size: 10px 10px;
    border: 2px solid rgba(255,255,255,0.2);
    color: transparent !important; 
}

/* 카드가 들어가는 컨테이너에도 부드러운 정렬 변화 적용 */
#dealerCards, #playerCards {
    display: flex;
    justify-content: center;
    gap: 0px; /* 카드 간격 */
    transition: all 0.5s ease;
}

.game-card.red {
	color: var(--bs-danger);
}

.game-card.black {
	color: var(--bs-emphasis-color);
}

.game-card.back { 
    background: linear-gradient(135deg, var(--bs-primary), var(--bs-dark)); 
    color: transparent !important; 
}

/* 모달 애니메이션 */
#gameModal { 
    display: none;
	position: fixed;
	z-index: 2000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%; 
    background-color: rgba(0,0,0,0.7); align-items: center; justify-content: center; backdrop-filter: blur(4px); 
}

#gameModal.active .modal-content {
	transform: scale(1);
	opacity: 1;
}

.modal-content { 
    transform: scale(0.8);
	opacity: 0;
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color-translucent);
}

/* 카드 출력 영역 가운데 정렬 추가 */
#dealerCards, #playerCards {
    justify-content: center !important;
}

/* 장식용 카드 전용 애니메이션 */
@keyframes introCard {
    from {
        opacity: 0;
        transform: translateY(-30px) rotateY(90deg) rotate(0deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateY(0) rotate(var(--r));
    }
}

.random-display-card {
    --r: 0deg;   /* 최종 회전 각도 */
    --d: 0s;     /* 등장 지연 시간 */
    animation: introCard 0.7s var(--d) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;  /* 시작 전에는 안보이게 */
    transform-origin: center center;
}