@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap');

:root {
    --primary-color: #ff6f61; /* 커피빵의 따뜻한 느낌을 주는 코랄색 */
    --background-color: #f9f9f9;
    --text-color: #333;
    --card-bg: #ffffff;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    flex-direction: column;
}

.container {
    max-width: 420px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* 화면 전환 기본 스타일 */
.screen {
    display: none;
    flex-direction: column;
    animation: fadeIn 0.5s ease-in-out;
    justify-content: center;
    align-items: center;
}

.screen.active {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 메인 메뉴 */
header h1 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 30px;
    padding: 60px 20px; /* 텍스트가 잘 보이도록 패딩 값 조정 */
    border-radius: 15px;
    
    /* --- 이미지 배경 적용 --- */
    background-image: url('../assets/images/main-image.png');
    background-size: cover;
    background-position: center;
    
    /* ❗수정: 텍스트 클리핑 효과 제거 및 흰색 글씨 적용 */
    color: white; 
    /* ❗추가: 이미지 위에서 글자가 더 잘 보이도록 그림자 효과 추가 */
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}  

.game-cards .card {
    background-color: var(--card-bg);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.game-cards .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.game-cards .card h3 {
    margin: 0 0 10px;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.game-cards .card p {
    margin: 0;
    line-height: 1.6;
    color: #666;
}

/* 결과 화면 */
.result-content {
    animation: slideUp 0.6s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.result-content h2 {
    font-size: 1.8rem;
}

.result-content .loser-name {
    font-size: 4rem;
    font-weight: 900;
    color: var(--primary-color);
    margin: 20px 0;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.result-buttons button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    margin: 10px;
    transition: transform 0.2s;
}

.result-buttons button:hover {
    transform: translateY(-2px);
}
/* --- 게임 공통 스타일 --- */
.game-header h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.player-setup {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    gap: 10px;
}

.player-control-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    background-color: white;
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
}

#player-count {
    font-size: 1.5rem;
    font-weight: bold;
    min-width: 30px;
}

.player-names {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 30px;
    width: 80%;
}

.player-name-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center;
    font-size: 1rem;
}

.cta-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}
.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.game-area {
    width: 100%;
    margin-top: 20px;
}

.hidden {
    display: none !important;
}

/* --- 콩콩팥팥 타이머 게임 스타일 --- */
.turn-indicator {
    font-size: 1.2rem;
    margin-bottom: 15px;
    /* ❗수정: 아래 두 줄을 추가/수정하여 간격을 확보합니다. */
    margin-bottom: 60px; 
    min-height: 1.5em; /* 문구가 바뀌어도 높이가 유지되도록 추가 */
}

.stopwatch-display {
    font-size: 4.5rem;
    font-weight: 900;
    font-family: 'Courier New', Courier, monospace;
    margin-bottom: 20px;
    color: #333;
}

.action-btn {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    font-size: 2rem;
    font-weight: bold;
    border: 5px solid;
    cursor: pointer;
}
.action-btn.start {
    background-color: #2ecc71;
    border-color: #27ae60;
    color: white;
}
.action-btn.stop {
    background-color: #e74c3c;
    border-color: #c0392b;
    color: white;
}

.scoreboard-area {
    margin-top: 30px;
    width: 100%;
}

.scoreboard {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    box-shadow: var(--shadow);
    border-radius: 10px;
    overflow: hidden;
}

.scoreboard th, .scoreboard td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

.scoreboard th {
    background-color: #f7f7f7;
    font-weight: 700;
}

.scoreboard tr:last-child td {
    border-bottom: none;
}
/* --- 결과 화면 점수판 영역 스타일 --- */
.final-scores-area {
    margin: 30px 0;
    width: 90%;
    align-self: center; /* 가운데 정렬을 위해 추가 */
}
/* --- 서부의 결투 게임 스타일 --- */
/* ❗기존 #reaction-game-screen 규칙을 아래 코드로 교체해주세요. */
#reaction-game-screen {
    width: 100%; /* vw 대신 %를 사용하여 부모(.container) 너비에 맞춤 */
}

#reaction-player-setup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ❗기존 .reaction-game-area 규칙을 아래 코드로 교체해주세요. */
.reaction-game-area {
    display: flex;
    flex-direction: column;
    /* 화면 전체를 덮는 오버레이로 만듭니다. */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
}


.player-zone {
    flex: 1; /* 남은 공간을 모두 차지 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.1s;
    cursor: pointer;
    background-color: #34495e; /* 대기중 남색 */
    -webkit-tap-highlight-color: transparent;
}

.player-zone .player-name-display {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    opacity: 0.5;
    /* 텍스트가 세로로 보이도록 회전 */
    transform: rotate(90deg);
}

.center-strip {
    background-color: #2c3e50; /* 짙은 남색 */
    color: white;
    padding: 10px 0;
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.reaction-scoreboard {
    font-size: 1.5rem;
    font-weight: bold;
}

.status-display {
    font-size: 2.5rem;
    font-weight: 900;
    min-height: 40px; /* 높이를 고정하여 떨림 방지 */
}

/* JS에서 추가/제거할 상태 클래스 */
.player-zone.waiting { background-color: #34495e; } /* 대기 */
.player-zone.ready { background-color: #e74c3c; }  /* 준비 (부정출발 유도) */
.player-zone.go { background-color: #2ecc71; }   /* 시작! */
.player-zone.foul { background-color: #c0392b; }  /* 부정출발 */
/* --- 서부의 결투 (다인용) 스타일 --- */
.reaction-game-area.grid-2,
.reaction-game-area.grid-3,
.reaction-game-area.grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    /* row-gap: 5px; */
    /* column-gap: 5px; 👈 이 줄을 추가하세요 */
}

.player-zone {
    position: relative; /* 자식 요소(이름) 위치 조정을 위해 추가 */
}

/* 플레이어 이름 위치 조정 */
.player-zone .player-name-display {
    position: absolute;
    font-size: 1.5rem;
    transform: none; /* 기존 90도 회전 초기화 */
    opacity: 0.7;
}

/* 각 코너에 이름 배치 */
.player-zone.p1 .player-name-display { top: 15px; left: 15px; }
.player-zone.p2 .player-name-display { top: 15px; right: 15px; }
.player-zone.p3 .player-name-display { bottom: 15px; left: 15px; }
.player-zone.p4 .player-name-display { bottom: 15px; right: 15px; }

/* 3인용일 때 마지막 칸은 비활성화 */
.player-zone.disabled {
    background-color: #2c3e50;
    pointer-events: none; /* 클릭 안되게 설정 */
}

/* --- 카드 뽑기 게임 스타일 --- */
.card-game-area {
    width: 100%;
}

.card-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
    min-height: 125px; /* 카드 높이 + 여백 */
    perspective: 1000px; /* 3D 효과를 위한 원근감 */
}

.game-card {
    width: 80px;
    height: 120px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* 뒷면은 안보이게 */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
}

.card-front {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white;
}

.card-back {
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    transform: rotateY(180deg);
    font-size: 2rem;
}

.player-tag {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.card-game-buttons {
    margin-top: 20px;
}

.game-btn {
    background-color: #fff;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    margin: 0 10px;
    transition: all 0.2s;
}

.game-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

.game-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #eee;
    border-color: #ddd;
    color: #999;
}
/* css/style.css 파일 맨 아래에 추가 */

/* --- 카드 뽑기 애니메이션 --- */
/* 선택된 카드가 위로 살짝 올라옴 */
.game-card.is-selected {
    transform: translateY(-20px) scale(1.05); /* 위로 이동 및 살짝 확대 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 그림자 추가 */
    z-index: 10; /* 다른 카드보다 위에 보이도록 */
}

/* 벌칙 카드가 위로 뽑히며 강조 */
.game-card.is-loser {
    transform: translateY(-50px) scale(1.1); /* 더 크게, 더 높이 */
    box-shadow: 0 15px 30px rgba(231, 76, 60, 0.5); /* 빨간색 그림자 */
    animation: loserHighlight 1s infinite alternate; /* 깜빡이는 애니메이션 */
    z-index: 100; /* 최상단에 보이도록 */
}

/* 벌칙 카드 강조 애니메이션 */
@keyframes loserHighlight {
    from { border: 3px solid transparent; }
    to { border: 3px solid #e74c3c; } /* 붉은 테두리 강조 */
}
/* --- 플레이어별 카드 색상 (최대 5명) --- */
/* .player-card-color-0 .card-front { 
    border: 3px solid #D9534F;       
    background: #fff3f3;             
    box-sizing: border-box;          
} 
.player-card-color-1 .card-front { 
    border: 3px solid #c8fa3e;       
    background: #f2fdd4;            
    box-sizing: border-box;     
} 
.player-card-color-2 .card-front {
    border: 3px solid #40efff;       
    background: #defcff;             
    box-sizing: border-box;  
} 
.player-card-color-3 .card-front { 
    border: 3px solid #8859ff;      
    background: #ded1ff;             
    box-sizing: border-box;  
} 
.player-card-color-4 .card-front { 
    border: 3px solid #ff4fe7;       
    background: #ffcaf8;             
    box-sizing: border-box;  
} */
.card-front {
    background-color: #fff;
    /* ❗수정: 이미지가 카드 영역을 꽉 채우도록 cover로 변경 */
    background-size: cover;
    background-position: center;
    border: none;
    box-sizing: border-box;
}
/* 벌칙 카드의 뒷면은 고정색 */
.game-card.loser-card .card-back {
    background: linear-gradient(135deg, #e74c3c, #c0392b); /* 어두운 빨강 */
    color: white;
}

/* css/style.css 파일 맨 아래에 추가 */

/* --- 카드 뽑기 딜레이 애니메이션 --- */
.game-card.is-drawing {
    animation: card-draw-roulette 0.2s infinite;
}

@keyframes card-draw-roulette {
    0%, 100% {
        transform: translateY(0) scale(1.05);
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    }
    50% {
        transform: translateY(-10px) scale(1.08);
        box-shadow: 0 12px 24px rgba(0,0,0,0.3);
    }
}
/* --- 카드 섞기 애니메이션 --- */
@keyframes shuffle-distort {
    0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    25% { transform: translateY(-10px) rotate(5deg) scale(1.02); opacity: 0.9; }
    50% { transform: translateY(10px) rotate(-5deg) scale(0.98); opacity: 0.8; }
    75% { transform: translateY(-5px) rotate(3deg) scale(1.01); opacity: 0.9; }
    100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
}

.game-card.shuffling {
    animation: shuffle-distort 0.4s ease-in-out forwards;
}
/* css/style.css 파일 맨 아래에 추가 */

/* --- 광고 컨테이너 스타일 --- */
.ad-container {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 320px; /* 광고 너비(data-ad-width)와 일치 */
    height: 100px; /* 광고 높이(data-ad-height)와 일치 */
    margin: 30px auto 0; /* 위쪽 여백, 좌우는 자동으로 가운데 정렬 */
    background-color: #d7d7d7; /* 광고 로딩 전 배경색 */
}


/* --- 세로 광고 컨테이너 스타일 --- */
.ad-container-vertical {
    display: none; /* 모바일에서는 숨김 */
    position: fixed; /* 화면에 고정 */
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 160px; /* 광고 너비와 일치 */
    height: 600px; /* 광고 높이와 일치 */
    background-color: #d7d7d7;
}

/* 화면 너비가 1000px 이상일 때만 세로 광고를 표시 */
@media (min-width: 1000px) {
    .ad-container-vertical {
        display: flex;
    }
}

/* --- 푸터 스타일 --- */
footer {
    width: 100%;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
    font-size: 0.8rem;
    color: #aaa;
}

footer a {
    color: inherit;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}
/* css/style.css 파일 맨 아래에 추가 */

/* --- 반응속도 게임 시간 표시 --- */
.reaction-time-display {
    position: absolute;
    top: 60%; /* 이름 아래에 위치하도록 조정 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    opacity: 0; /* 평소엔 숨겨져 있음 */
    transition: opacity 0.2s;
}

.player-zone.tapped .reaction-time-display {
    opacity: 1; /* 터치된 존의 시간만 보이도록 설정 */
}