/* /hwatu/css/hwatu-style.css */
body, html {
    overflow: hidden;
}

.hwatu-game-container {
    width: 100%;
    padding-top: 20px;
    min-height: 100vh;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    position: relative;
    background-color: #003d00;
    background-image: radial-gradient(
        circle at center,
        rgba(31, 129, 31, 0.85) 0%,
        rgba(0, 70, 0, 0.9) 80%
    );
}
 /* 모든 장면의 기본 컨테이너 */
.scene {
    width: 100%;
    height: auto;
    display: none; 
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    position: static;
    top: auto;
    left: auto;
    text-align: center; 
    /* 이 값을 조절하여 모든 장면의 시작 높이를 올리거나 내릴 수 있습니다. */
    padding-top: 5vh; /* 예시: 화면 높이의 5% 만큼 위에서 시작 (기존 10px에서 변경) */
    padding-left: 10px; /* 좌우, 하단 여백은 최소화 */
    padding-right: 10px;
    padding-bottom: 10px; 
    box-sizing: border-box;
}

.scene.active-scene {
    display: flex;
}

.scene-content {
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    width: auto; /* 내용에 맞게 너비 조절 */
    box-sizing: border-box;
}

/* 나이 입력 폼이 있는 장면의 콘텐츠 박스 스타일 */
#age-input-scene .scene-content,
#shuffle-scene .scene-content {
    /* USER ADJUST: 입력폼/셔플 장면의 수직 위치. 음수 값이 커질수록 위로 올라갑니다. */
    margin-top: 0; /* 예시: 중앙에서 20% 위로 (이전 -25vh 또는 -50vh 에서 조절) */
}

/* #age-input-scene .scene-content 스타일 (배경색 등) 은 이전과 동일하게 유지 */
/* #shuffle-scene .scene-content 스타일 (배경 투명 등) 은 이전과 동일하게 유지 */

#age-input-scene .scene-content {
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}


/* 셔플 애니메이션 장면의 콘텐츠 박스 스타일 */
#shuffle-scene .scene-content {
    background-color: transparent; /* 흰색 박스 제거, 부모의 녹색 배경 사용 */
    box-shadow: none; /* 그림자 제거 */
    /* displayedAgeText의 위치 조정을 위해 패딩은 유지하거나 조절 가능 */
}

#age-input-scene h1 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 24px;
    color: #333; /* 흰색 배경 위에 보이도록 */
}

#age-input {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
    width: 100px;
    text-align: center;
}

#submit-age-button {
    padding: 10px 20px;
    font-size: 18px;
    color: white;
    background-color: #4CAF50;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#submit-age-button:hover {
    background-color: #45a049;
}

.error-message {
    color: red; /* 흰색 배경 위에서 보이도록 */
    background-color: rgba(255,255,255,0.7); /* 가독성 위해 추가 */
    padding: 5px;
    border-radius: 3px;
    font-size: 14px;
    height: auto; /* 내용에 맞게 */
    min-height: 20px;
    margin-top: 10px;
}


.large-text { /* displayedAgeText */
    font-size: 72px;
    font-weight: bold;
    color: #FFFFFF; /* 녹색 배경 위에 잘 보이도록 흰색으로 변경 */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 가독성 향상 */
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
}

#shuffle-animation-container {
    width: 280px;
    height: 220px;
    position: relative;
}
/* 셔플 애니메이션에서 사용되는 카드 크기 */
#shuffle-animation-container .shuffle-card {
    width: 90px;   /* JS config와 일치 */
    height: 118px; /* JS config와 일치 */
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: absolute;
    left: 50%;
    top: 50%;
}

/* 게임 테이블 장면 내부 콘텐츠 영역 */
#game-table-scene .game-table-content {
    width: 100%;
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 내부 요소들을 위쪽부터 배치 */
    align-items: center;
    
    /* USER ADJUST: 이 padding-top 값으로 게임 테이블 내 모든 요소 그룹의 '시작 높이'를 조절합니다. */
    /* 값을 줄이면 전체적으로 더 위로 올라갑니다. (예: 2vh 또는 10px) */
    padding-top: 0; /* 예시: 이전 3vh 에서 더 줄여서 위로 올림 */

    /* USER ADJUST: 이 padding-bottom 값으로 게임 테이블 하단 끝의 여백을 조절합니다. */
    padding-bottom:5px; /* 예시: 이전 5vh 에서 줄임 */
    box-sizing: border-box;
    transition: justify-content 0.5s ease;
        /* 레이아웃 변경 시 부드러운 효과 */
}

/* 획득 카드 영역 컨테이너 */
/* 획득 카드 영역 컨테이너 */
.collected-cards-area { /* 오타 수정: ares -> area */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start; /* align-items: center; 에서 flex-start 로 변경하여 슬롯 상단 정렬 */
    width: auto; /* 자식 요소들 크기에 맞춤 */
    /* max-width: 450px; */ /* 이전 값. 자식 슬롯들의 총 너비 + 마진으로 계산되어야 함 */
                            /* 예: (95px + 10px 마진)*4 - 마지막 마진 10px = 410px.  */
    max-width: 450px;
    margin-bottom: 2vh; /* 예시: (95px*4) + (5px*2*3) = 380 + 30 = 410px. 약간 여유있게. */

}

.collected-pile {
    width: 95px;   /* .deck-slot 너비와 동일하게 */
    height: 123px; /* .deck-slot 높이와 동일하게 */
    background-color: rgba(255, 255, 255, 0.1); /* 배경색 약간 밝게 */
    margin: 0 5px;  /* 수정: margin-right: 0 5px; -> margin-left, margin-right 또는 margin: 0 5px; */
    
    /* position, overflow, box-sizing 등은 .deck-slot 클래스에서 상속 (HTML에 함께 사용 시) */
}
.collected-pile:last-child {
    margin-right: 0;
}

.collected-pile .card-in-pile { /* .collected-pile 내부에 쌓일 카드에 적용할 클래스 */
    width: 100%; /* 부모 슬롯 크기에 맞춤 */
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-size: 100% 100%;
    border-radius: 4px;
}


/* 게임 테이블 하단 영역 (메인 덱, 오픈된 카드 슬롯 있는 곳) */
.bottom-area-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 5px 0;
    border-radius: 8px;
    width: auto;
    /* margin-top은 .player-hands-area의 margin-bottom으로 조절됨 */
}

.main-deck-area {
    position: relative;
}

/* 깜빡이는 효과를 위한 @keyframes 애니메이션 정의 */
@keyframes blink-effect {

    /* 애니메이션 주기의 50% 지점에서 투명도를 0.2로 만듭니다. */
    50% {
        opacity: 0.2;
    }
}

/* 덱 클릭 안내 스타일 (텍스트용으로 수정) */
.click-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 250;
    pointer-events: none;
    /* 클릭을 방해하지 않도록 함 (중요) */
    display: none;
    /* JS가 보이게 할 때까지 숨김 */
    opacity: 0;
    /* JS가 투명도를 1로 애니메이션 */

    /* --- 텍스트 스타일 --- */
    color: white;
    font-size: 22px;
    /* 글자 크기 */
    font-weight: bold;
    /* text-shadow: 0 0 8px rgba(0, 0, 0, 0.8); */
    /* 글자 그림자 효과 */
    padding: 8px 16px;
    /* 텍스트 주변 여백 */
    /*
    background-color: rgba(0, 0, 0, 0.4);

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 8px;

    */
    /* --- 애니메이션 적용 --- */
    animation: blink-effect 0.8s step-end infinite;
    /* 1.2초 주기로 무한 반복 */
}

.main-deck-area, .open-card-area {
    margin: 0 15px;
}

/* 게임판의 카드 놓는 자리 (덱 슬롯) 크기 */
/* .deck-slot 기본 스타일 */
.deck-slot {
    width: 95px;   /* 카드 가로 크기 (이 크기가 player-hand 에도 적용됨) */
    /* height: 106px; */ /* .player-hand 에서 height를 재정의하므로 여기선 주석 처리하거나 기본값으로 둠 */
    min-height: 123px; /* 최소 높이 (기본 슬롯용) */
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    background-color: rgba(0,0,0,0.2);
    position: relative; 
    overflow: hidden;
    box-sizing: border-box;
}
/* deck-card-visual은 부모 .deck-slot의 width:100% height:100%를 사용하므로 .deck-slot 크기가 변겨오디면 자동으로 크기가 조절됨.*/
.deck-card-visual {
    width: 100%;
    height: 100%;
    background-size: cover; /* 또는 contain, 실제 카드 이미지 비율에 따라 */
    background-repeat: no-repeat;
    border-radius: 3px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
    position: absolute;
}

/* 카드분배 영역 */
.player-hands-area {
    display: flex;                
    flex-direction: row;          
    justify-content: space-around; 
    align-items: flex-start;      
    width: 90%;                   
    max-width: 600px; 
    /* USER ADJUST: 이 margin-bottom 값으로 [플레이어 패 영역]과 그 아래 [하단 덱 영역] 사이의 간격을 조절합니다. */
    /* 값을 줄이면 간격이 좁아집니다. (예: 15px 또는 2vh) */
    margin-bottom: 10px; /* 예시: 이전 20px 또는 3vh 에서 줄임 */
}

/* 플레이어 패 영역 스타일 */
.player-hand {
 /* width는 .deck-slot에서 상속 (예: 95px) */
    /* USER ADJUST: 카드가 세로로 겹쳐 쌓일 때 필요한 전체 높이입니다. */
    /* 새 카드 높이 118px, 반씩(59px) 겹쳐 4장 기준: 118px + (59px * 3) = 118 + 177 = 295px */
    background-color: rgba(0,0,0,0.3);
    height: 360px;
    /* flex-basis: 23%; */ /* << 만약 space-between 사용 시 각 아이템 너비 지정 가능 */
    /* margin: 0 5px; */   /* << 각 패 영역 사이의 간격 직접 지정 가능 */
    /* border: 1px dashed yellow; */ /* << 디버깅용: 개별 패 영역 확인 */
}

/* 분배된 카드 스타일 */
.dealt-card, .opened-card { /* 공통 스타일 묶기 가능 */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
    position: absolute;
    transform-origin: center center;
}

.opened-card { /* .opened-card 만의 추가 스타일이 있다면 여기에 */
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    cursor: default;
}
#open-card-slot {
    width: 640px; 
    height: 260px; 
    overflow: hidden;
    padding: 5px; 
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.2); /* 일관성을 위해 .deck-slot과 유사한 테두리 추가 */
    border-radius: 5px;
    background-color: rgba(0,0,0,0.2); /* 일관성을 위해 .deck-slot과 유사한 배경 추가 */
}

/* 게임 컨트롤 버튼 영역 스타일*/
.game-controls button {
    background-color: #555;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.game-controls button:hover {
    background-color: #777;
}

.game-controls button:disabled {
    background-color: #333;
    color: #888;
    cursor: not-allowed;
}

/* 최종 결과 화면에서 #open-card-slot의 기본 스타일을 재정의할 수 있습니다. */
/* 하지만 위 JS에서 직접 스타일을 제어하므로, 이 부분은 필수는 아닙니다. */
#game-table-scene.results-shown #open-card-slot {
    width: 90%;
    max-width: 600px;
    height: auto;
    min-height: 20vh;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

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

--- 최종 결과 표시 영역 스타일 --- */

/* 결과 화면 전체를 감싸고 중앙 정렬하는 컨테이너 */
.result-display-area {
    width: 90%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    /* 제목, 카드, 텍스트, 버튼을 세로로 쌓음 */
    align-items: center;
    /* 모든 자식 요소를 가로 중앙 정렬 */
    gap: 25px;
    /* 각 섹션 사이의 간격 */
    padding: 20px;
    margin-top: 5vh;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

/* "완성된 월", "점괘 결과" 같은 제목 스타일 */
.result-title {
    font-size: 22px;
    font-weight: bold;
    color: #ffde7d;
    text-shadow: 0 0 5px black;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(255, 222, 125, 0.3);
    padding-bottom: 10px;
    width: 100%;
    text-align: center;
}

/* 최종 결과 카드들을 감싸는 컨테이너 */
.result-cards-container {
    display: flex;
    /* 자식들을 flexbox로 제어 */
    flex-direction: row;
    /* <<<< 이것이 카드를 가로로 배열하는 핵심 코드입니다! */
    flex-wrap: wrap;
    /* 화면이 좁아지면 줄바꿈 */
    justify-content: center;
    /* 가로 중앙 정렬 */
    gap: 15px;
    /* 카드 슬롯 사이의 간격 */
    width: 100%;
}

/* 개별 결과 카드를 담는 슬롯 */
.result-card-slot {
    width: 90px;
    /* 카드 너비 */
    height: 118px;
    /* 카드 높이 */
}

/* 슬롯 안의 실제 카드 이미지 */
.result-card-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 이미지 비율 유지 */
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* 점괘 텍스트 내부 스타일 */
.fortune-text {
    width: 100%;
    text-align: left;
    color: white;
    font-size: 16px;
    line-height: 1.7;
}

.fortune-text p {
    margin: 15px 0;
}

.fortune-text p strong {
    color: #ffde7d;
    font-size: 18px;
    display: block;
    margin-bottom: 5px;
}

.restart-button-area {
    margin-top: 15px;
}

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

/* --- 최종 버튼 스타일 --- */
.stalemate-btn {
    /* 글꼴 및 텍스트 스타일 */
    font-size: 16px;
    font-weight: bold;
    color: #4a2e0a;
    /* 어두운 갈색 텍스트로 가독성 확보 */
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
    /* 텍스트에 입체감 */

    /* 배경 및 테두리 */
    background: linear-gradient(145deg, #fceabb, #f8b500);
    /* 빛나는 금색 느낌의 그라데이션 */
    border: 2px solid #a08845;
    /* 배경과 어울리는 짙은 금색 테두리 */
    border-radius: 10px;
    /* 부드러운 둥근 모서리 */

    /* 여백 및 크기 */
    padding: 12px 28px;
    /* 내부 여백으로 버튼 크기 확보 */

    /* 효과 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25),
        /* 버튼을 띄워 보이는 그림자 */
        inset 0 -3px 3px rgba(0, 0, 0, 0.1);
    /* 안쪽 하단에 그림자를 주어 입체감 부여 */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    /* 모든 효과에 부드러운 전환 애니메이션 적용 */
}

/* 마우스를 올렸을 때 (hover) */
.stalemate-btn:hover {
    background: linear-gradient(145deg, #fff5d6, #ffc53d);
    /* 더 밝은 금색으로 변경 */
    transform: translateY(-2px);
    /* 살짝 위로 떠오르는 효과 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* 마우스를 클릭했을 때 (active) */
.stalemate-btn:active {
    transform: translateY(1px);
    /* 살짝 아래로 눌리는 효과 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }

/* =================================== */
/* =================================== */
/* 모바일 반응형 스타일 (최종 결과 화면) */
/* =================================== */

/* 화면 너비가 768px 이하일 때만 아래 스타일이 적용됩니다. */
@media (max-width: 768px) {

    #game-table-scene.results-shown .game-table-content {
        /* 수정: 중앙 정렬 대신 위쪽 정렬로 변경하여 상단이 잘리지 않도록 함 */
        justify-content: flex-start;
        padding-top: 2vh;
        /* 화면 상단과의 적절한 여백 */
        gap: 25px;
        transform: none;
        margin-top: 0;
        /* 카드 영역과 텍스트 영역 사이의 간격 조정 */   }

    /* 최종 결과 영역 전체 레이아웃 */
    .result-display-area {
        width: 95vw;
        /* 화면 너비에 맞춤 */
        gap: 15px;
        padding: 6px;
        margin-top: 1vh;
    }

    /* 제목 텍스트 크기 조정 */
    .result-title {
        font-size: 18px;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }

    /* 결과 카드 컨테이너 간격 조정 */
    .result-cards-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
    }

    /* 결과 카드 슬롯 및 이미지 크기 축소 */
    .result-card-slot {
        width: 68px;
        /* 카드의 너비를 약 75%로 축소 */
        height: 89px;
        /* 카드의 높이를 약 75%로 축소 */
    }

    /* 점괘 텍스트 영역 글꼴 크기 조정 */
    .fortune-text {
        font-size: 16px;
        line-height: 1.4;
    }

    .fortune-text p {
        margin: 5px 0;
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .fortune-text p strong {
        font-size: 16px;
    }

    /* 새로 점보기 버튼 영역 여백 조정 */
    .restart-button-area {
        margin-top: 7px;
        text-align: center;
    }
    /* 마지막 문단의 불필요한 아래쪽 여백과 구분선 제거 */
    .fortune-text p:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
   /* --- 2. 메인 컨테이너 스크롤 설정 --- */
   #main-content.hwatu-page,
   .hwatu-game-container {
       transform: none;
       height: auto;
       /* 높이 고정을 해제하여 내용에 따라 늘어나게 함 */
       min-height: 100vh;
       /* 최소한 화면 전체 높이는 유지 */
       overflow: visible;
       /* 자식 요소가 넘쳐도 숨기지 않고 스크롤 가능하게 함 */
       width: 100%;
       padding-top: 0;
       /* 화면 너비에 꽉 채움 */
   }

    /* 게임 테이블 장면의 스크롤을 허용합니다. */
    #game-table-scene,
    .game-table-content {
        height: auto;
        overflow: visible;
    }
    .player-hand-deck {
        height: 140px;
    }
    .dealt-card,
    .opened-card {
        width: 68px;
        height: 89px;
    }

}