/* 기본 리셋 */
@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300&family=Gamja+Flower&family=Gowun+Dodum&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 바디 스타일 */
body {
    font-family: "Gowun Dodum", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    background-color: #f7f7f7;
    color: #333;
    padding: 20px;
}

/* 헤더 스타일 */
header {
    margin-bottom: 20px;
    text-align: center;
}

header h1 {
    font-size: 3em; /* 카드 크기 확대 */
    color: #ff69b4; /* 핑크색 */
}

/* 카테고리 선택 섹션 */
.category-selection {
    width: 100%;
    max-width: 1200px; /* 카드 크기 확대 */
    margin-bottom: 30px;
    text-align: center;
}

.category-selection h2 {
    margin-bottom: 15px;
    font-size: 2em; /* 확대 */
    color: #333;
}

.categories {
    display: flex;
    justify-content: center;
    gap: 20px; /* 간격 확대 */
    flex-wrap: wrap;
}

.category-button {
    flex: 1 1 150px; /* 버튼 크기 확대 */
    padding: 20px 25px; /* 패딩 확대 */
    border: none;
    background-color: #28a745;
    color: white;
    border-radius: 10px; /* 라운드 확대 */
    cursor: pointer;
    font-size: 1.2em; /* 폰트 크기 확대 */
    transition: background-color 0.3s ease;
}

.category-button:hover {
    background-color: #218838;
}

/* 게임 컨테이너 */
.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px; /* PC 최대 너비 */
    min-width: 700px;
    height: 90vh;
    box-sizing: border-box;
}

/* 이미지 래퍼 */
.image-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px; /* PC 최대 너비 */
    aspect-ratio: 1 / 1; /* 정사각형 비율 유지 */
    overflow: hidden;
    border: 3px solid #ccc;
    border-radius: 15px;
    background-color: #000;
}

/* 숨겨진 이미지 */
#hidden-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 이미지가 컨테이너에 꽉 차도록 설정 */
}

/* 덮여 있는 마스크 */
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 1); /* 불투명도 100% */
    cursor: grab;
    touch-action: none; /* 터치 드래그 방지 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.mask.dragging {
    cursor: grabbing;
}

/* 정답 표시 스타일 */
.correct-answer {
    position: absolute;
    bottom: 15px; /* 위치 조정 */
    left: 15px; /* 위치 조정 */
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 15px; /* 패딩 확대 */
    border-radius: 8px; /* 라운드 확대 */
    font-size: 1.6em; /* 폰트 크기 확대 */
    color: #333;
    display: none; /* 초기에는 숨김 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* 버튼 스타일 */
.controls {
    margin-top: 25px; /* 간격 확대 */
    display: flex;
    gap: 15px; /* 간격 확대 */
    width: 100%;
    max-width: 800px; /* 카드 크기 확대 */
}

.controls button {
    flex: 1;
    padding: 20px 0; /* 버튼 크기 확대 */
    border: none;
    background-color: #007BFF;
    color: white;
    border-radius: 8px; /* 라운드 확대 */
    cursor: pointer;
    font-size: 1.4em; /* 폰트 크기 확대 */
    transition: background-color 0.3s ease;
}

.controls button:hover {
    background-color: #0056b3;
}

/* "정답 보기" 버튼 스타일 */
#show-answer-button {
    background-color: #ffc107;
}

#show-answer-button:hover {
    background-color: #e0a800;
}

/* 반응형 디자인 */
@media (max-width: 1600px) {
    .game-container {
        max-width: 100%; /* 디바이스 너비에 맞춤 */
        min-width: 800px;
    }

    .image-wrapper {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 1 / 1; /* 정사각형 유지 */
    }
}

@media (max-width: 768px) {
    .game-container {
        max-width: 100%; /* 디바이스 너비에 맞춤 */
        min-width: 420px;
    }

    .image-wrapper {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 1 / 1; /* 정사각형 유지 */
    }
}

@media (max-width: 480px) {
    .game-container {
        width: 100%; /* 모바일 화면 너비에 꽉 차게 */
        min-width: 320px;
    }

    .image-wrapper {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 1 / 1; /* 정사각형 유지 */
    }
}