/* [card-style.css] 눈이 편안한 딥 파스텔(Deep Pastel) 스타일 */

/* 1. 카드 컨테이너 */
.card-area {
    display: inline-block;
    perspective: 1000px;
    margin: 0 -12px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.3, 0, 0.5, 1), margin 0.2s;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.card {
    width: 84px;
    height: 128px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
    /* 그림자도 조금 더 진하게 처리하여 깊이감 부여 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1);
    background-color: white;
    user-select: none;
}

/* 2. 카드 앞면 (공통) */
.card-face {
    position: absolute;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 6px;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
    font-weight: 800;
    border-radius: 12px;
    /* 흰색 테두리 유지 */
    border: 3px solid rgba(255, 255, 255, 0.9);
    /* 텍스트 그림자 강화 (배경이 어두워지므로 흰 글씨가 더 잘 보임) */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* 3. 색상 테마 (밝기 줄임, 눈이 편한 색상) */

/* RED: 너무 쨍한 핑크 대신 차분한 토마토 레드 */
.card.RED .card-face {
    background-color: #e55039;
    color: white;
}

/* BLUE: 형광 하늘색 대신 깊이 있는 오션 블루 */
.card.BLUE .card-face {
    background-color: #4a69bd;
    color: white;
}

/* GREEN: 눈부신 민트 대신 안정적인 포레스트 그린 */
.card.GREEN .card-face {
    background-color: #20bf6b;
    color: white;
}

/* YELLOW: 흰 글씨가 잘 보이도록 오렌지빛이 도는 딥 옐로우 */
.card.YELLOW .card-face {
    background-color: #f39c12;
    color: white;
}

/* BLACK (Wild): 묵직한 다크 그레이 */
.card.BLACK .card-face {
    background-color: #2f3640;
    color: white;
    border-color: #718093;
}


/* 4. 카드 뒷면 */
.card-back {
    position: absolute;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    background-color: #1e272e; /* 더 어두운 배경 */
    /* 패턴 색상도 톤 다운 */
    background-image: repeating-linear-gradient(45deg, #1e272e 0, #1e272e 10px, #2c3e50 10px, #2c3e50 20px);
    border-radius: 12px;
    border: 3px solid rgba(255,255,255,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-back::after {
    content: "UNO";
    color: #f39c12; /* 딥 옐로우 */
    font-weight: 900;
    font-size: 24px;
    transform: rotate(-30deg);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

/* 텍스트 크기 */
.card-center-text {
    font-size: 48px;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.card-corner-text {
    font-size: 18px;
}

/* 5. 상호작용 */
.card-area:hover {
    z-index: 100;
    margin: 0 -2px;
}
.card-area:hover .card {
    transform: translateY(-20px) scale(1.05);
    box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}

.card-area.selected .card {
    transform: translateY(-25px);
    /* 선택 효과: 딥 옐로우 빛 */
    box-shadow: 0 0 0 4px rgba(243, 156, 18, 0.6), 0 12px 24px rgba(0,0,0,0.2);
}

/* 딜링 애니메이션 */
@keyframes dealAnim {
    from { opacity:0; transform:translateY(-50px) rotate(-5deg); }
    to { opacity:1; transform:translateY(0) rotate(0); }
}
.card-anim-deal {
    animation: dealAnim 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}