/* [card-style.css] 카드 게임 전용 스타일 */

/* 1. 카드 기본 틀 */
.card-area {
    display: inline-block;
    perspective: 1000px; /* 3D 회전 효과 */
    margin: 5px;
    cursor: pointer;
    transition: transform 0.2s;
}

.card {
    width: 80px;
    height: 120px;
    position: relative;
    transform-style: preserve-3d; /* 앞/뒤집기 효과 */
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    border-radius: 8px;
    background-color: white;
    user-select: none;
}

/* 카드 내용물 (숫자, 문양) */
.card-face {
    position: absolute;
    width: 100%; height: 100%;
    backface-visibility: hidden; /* 뒤집혔을 때 뒷면 숨김 */
    border: 1px solid #ccc;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px;
    box-sizing: border-box;
    font-family: 'Courier New', monospace;
    background: white;
}

/* 색상 */
.card.red .card-face { color: #d73a49; }
.card.black .card-face { color: #24292f; }

/* 뒷면 (패턴) */
.card-back {
    position: absolute;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    transform: rotateY(180deg); /* 기본적으로 뒤집혀 있음 */
    background: repeating-linear-gradient(
            45deg, #2da44e, #2da44e 10px, #238636 10px, #238636 20px
    );
    border-radius: 8px;
    border: 2px solid white;
}

/* 2. 상태 클래스 */
/* 카드가 뒤집힌 상태 */
.card.flipped {
    transform: rotateY(180deg);
}

/* 마우스 올렸을 때 (선택 가능) */
.card-area:hover .card {
    transform: translateY(-10px);
    box-shadow: 4px 8px 12px rgba(0,0,0,0.3);
}
/* 선택됨 (위로 쑥 올라옴) */
.card-area.selected .card {
    transform: translateY(-20px);
    border: 2px solid #0969da;
    box-shadow: 0 0 10px rgba(9, 105, 218, 0.5);
}

/* 3. 배치 레이아웃 */
/* 부채꼴이나 겹쳐서 보여주기 */
.hand-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    padding: 10px;
    overflow: visible;
}

/* 카드 겹치기 (원카드 스타일) */
.hand-container.overlap .card-area {
    margin-left: -40px; /* 겹침 정도 */
}
.hand-container.overlap .card-area:first-child { margin-left: 0; }
.hand-container.overlap .card-area:hover {
    z-index: 100; /* 호버 시 맨 위로 */
    margin-right: 40px; /* 공간 확보 */
}

/* 4. 애니메이션 효과 */
@keyframes dealCard {
    from { opacity: 0; transform: translateY(-100px) scale(0.5); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.card-anim-deal { animation: dealCard 0.4s ease-out forwards; }