/* 기본 설정 */
body {
    -webkit-font-smoothing: antialiased;
    transition: background-color 1.5s ease-in-out;
}

/* Phase별 배경 색상 */
.bg-phase-1 {
    background-color: #FDFBF7; /* 따뜻한 아이보리 */
}

.bg-phase-3 {
    background-color: #334155; /* Slate 700 - 차분하고 어두운 회색/남색 */
}

.bg-phase-final {
    background-color: #020617; /* Slate 950 - 거의 검정 */
}

/* 카드 컨테이너 */
.card-container {
    perspective: 1000px;
    cursor: pointer;
    position: relative;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.card-container.flipped .card-inner {
    transform: rotateY(180deg);
}

/* 카드 앞면/뒷면 공통 */
.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 카드 앞면: 미니멀 */
.card-front {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
}

/* 카드 뒷면: 기본 (미공개 상태) - 강렬한 블랙 */
.card-back {
    background-color: #1a1a1a; 
    color: white;
    transform: rotateY(180deg);
    border: 2px solid #404040;
}

/* 카드 뒷면: 결과 공개 후 스타일 */
.card-back.winner {
    background-color: #EF4444; /* Red 500 */
    color: white;
    border: 2px solid #B91C1C;
}

/* [수정] 중간 순위(Safe) 카드를 밝은 회색으로 변경 */
.card-back.safe {
    background-color: #bfc1c5; /* Tailwind Gray 200 - 밝은 회색 */
    color: #4B5563; /* Gray 600 - 텍스트도 회색조 */
    border: 2px solid #b2b4b7; /* 테두리 */
}

.card-back.lucky {
    background-color: #F3F4F6; /* Gray 100 */
    color: #9CA3AF;
    border: 2px solid #D1D5DB;
}

/* 셔플용 가짜 카드 (뒷면 모양) */
.fake-card {
    position: absolute;
    background-color: #1a1a1a !important; 
    border: 2px solid #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 45; 
}

/* 선택됨 효과 */
.selected-card {
    border-color: #333;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.1);
}

/* 텍스트 유틸리티 */
.font-black {
    font-weight: 900;
}

/* 스포트라이트 오버레이 (Phase 4-5) */
.dark-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 25;
    pointer-events: none;
    transition: opacity 0.5s;
}

/* 생존 카드 강조 효과 */
.spotlight-card {
    z-index: 50 !important;
    box-shadow: 0 0 50px 20px rgba(220, 38, 38, 0.4); /* 붉은색 글로우 */
    border: 2px solid #fff;
}

/* 흔들림 애니메이션 */
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}