/* 기본 스타일 초기화 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 전체 페이지 스타일 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f0f4f8;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    word-break: keep-all; 
}

/* 메인 앱 컨테이너 */
#app {
    width: 100%;
    max-width: 500px;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 24px 32px;
    text-align: center;
    overflow: hidden;
    /* 배경색 전환 효과 */
    transition: background-color 0.4s ease-in-out;
}

/* 화면 공통 스타일 */
.screen {
    display: none; /* 기본적으로 모든 화면을 숨김 */
    animation: fadeIn 0.5s ease-in-out;
}

/* 현재 활성화된 화면만 보여줌 */
.screen.active {
    display: block;
}

/* 페이드인 애니메이션 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 제목 스타일 */
h1 {
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 16px;
}

h2 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 24px;
    line-height: 1.4;
}

h3 {
    font-size: 1.2rem;
    color: #16a085;
    margin-bottom: 12px;
}

p {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 24px;
}

/* 버튼 공통 스타일 */
.btn {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%; 
    /* [추가] 모바일 탭 하이라이트 제거 */
    -webkit-tap-highlight-color: transparent;
    /* [추가] 포커스 외곽선 제거 */
    outline: none;
}

/* 기본 버튼 (시작/다시하기) */
#start-button,
#retry-button {
    background-color: #1abc9c;
    color: white;
}

/* 데스크톱(hover 가능 기기)에서만 hover 효과 적용 */
@media (hover: hover) {
    #start-button:hover,
    #retry-button:hover {
        background-color: #16a085;
        transform: translateY(-2px);
    }
}

/* 모바일/터치 기기에서 누르는 동안(:active) 효과 */
#start-button:active,
#retry-button:active {
    background-color: #16a085;
    transform: translateY(1px);
    transition: transform 0.1s;
}


/* --- 게임 진행 화면 --- */

/* [추가] 실시간 진행 상태 바 스타일 */
#progress-bar {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid #ecf0f1;
}

.progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.9rem;
    color: #bdc3c7; 
    width: 2.5em; 
}

.progress-number {
    font-weight: bold;
    margin-bottom: 4px;
}

.progress-result {
    font-size: 1.1rem;
    font-weight: bold;
    height: 1.2em; 
    line-height: 1.2em;
}

/* O/X 결과 색상 */
.progress-result.match {
    color: #27ae60; /* 일치 (O) */
}

.progress-result.mismatch {
    color: #e74c3c; /* 불일치 (X) */
}


#player-turn {
    font-size: 1.2rem;
    font-weight: bold;
    color: #e67e22; 
    margin-bottom: 12px;
    transition: color 0.4s ease-in-out;
}

#question-number {
    font-size: 0.9rem;
    color: #95a5a6;
    margin-bottom: 8px;
}

.choice-container {
    display: flex;
    flex-direction: column;
    gap: 16px; 
    margin-top: 20px;
}

.vs-text {
    font-size: 1rem;
    font-weight: bold;
    color: #7f8c8d;
}

/* 선택지 버튼 */
.choice-btn {
    background-color: #ecf0f1;
    color: #34495e;
    border: 2px solid #bdc3c7;
    line-height: 1.5;
    padding: 16px;
    text-align: center;
    /* [추가] 모바일 탭 하이라이트 제거 (위 .btn에 이미 있지만 중복해도 OK) */
    -webkit-tap-highlight-color: transparent; 
    outline: none; 
}

/* [수정] 데스크톱(hover 가능 기기)에서만 hover 효과 적용 */
@media (hover: hover) {
    .choice-btn:hover {
        background-color: #bdc3c7;
        border-color: #95a5a6;
    }
}

/* [추가] 모바일/터치 기기에서 누르는 동안(:active) 효과 */
.choice-btn:active {
    background-color: #bdc3c7;
    border-color: #95a5a6;
    transform: translateY(1px);
    transition: transform 0.1s;
}


/* --- 결과 화면 --- */

#result-emoji {
    font-size: 5rem;
    margin-bottom: 16px;
}

#result-headline {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 16px;
}

#match-count-text {
    font-size: 1.1rem;
    color: #e74c3c;
    font-weight: bold;
    margin-top: -10px;
}

#result-description {
    font-size: 1rem;
    color: #555;
    margin-bottom: 32px;
}


/* --- [추가] 플레이어 턴별 시각 효과 --- */

/* Player 1 활성 시 배경색 (연한 파랑) */
#app.player-1-active {
    background-color: #e6f7ff; 
}

/* Player 2 활성 시 배경색 (연한 노랑) */
#app.player-2-active {
    background-color: #fffde7;
}

/* Player 1 턴 텍스트 색상 */
#app.player-1-active #player-turn {
    color: #0056b3; /* Dark Blue */
}

/* Player 2 턴 텍스트 색상 */
#app.player-2-active #player-turn {
    color: #d97706; /* Dark Orange */
}