.luck {
    font-family: 'YeoSSi', serif;
    word-break: keep-all;
}

/* 배경 이미지 설정 */
.background {
    background-image: url('../images/main-background.png');
    /* 배경 이미지 경로 */
    background-size: cover;
    background-position: center;
    height: 100vh;
    overflow: auto;
    /* 화면 스크롤 허용 */
}

.center-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.button-container button {
    margin: 0.5rem;
}

/* 버튼 이미지 */
.btn-image {
    width: 150px;
    height: auto;
    cursor: pointer;
}

.goat-container {
    position: relative;
    /* 부모를 relative로 설정 */
    width: 100%;
}



/* 콘텐츠 이미지 */
.content-image1 {
    width: 200px;
    height: auto;
    animation: float1 5s ease-in-out infinite;
}

.content-image2 {
    width: 200px;
    height: auto;
    animation: float2 10s ease-in-out infinite;
}

.content-image3 {
    width: 200px;
    height: auto;
    animation: float3 5s ease-in-out infinite;
}

.content-image4 {
    width: 200px;
    height: auto;
    animation: float4 9s ease-in-out infinite;
}

/* 메인 염소 이미지 */
.main-goats {
    width: 300px;
    height: auto;
}

@keyframes float1 {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(20px, 15px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes float2 {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-20px, 25px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes float3 {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-20px, 30px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes float4 {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, 30px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.wave-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0, 255, 0, 0.8) 0%, rgba(0, 255, 0, 0) 70%);
    transform: translate(-50%, -50%) scale(1);
    border-radius: 50%;
    z-index: -1;
    animation: wave-animation 4s infinite;
}

@keyframes wave-animation {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.9;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.trail-image {
    position: absolute;
    width: 20px; /* 이미지 크기 */
    height: 20px;
    pointer-events: none; /* 이미지가 클릭 이벤트를 방해하지 않도록 */
    animation: fadeOut 0.3s forwards; /* 이미지 사라지는 애니메이션 */
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes jump {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    /* 위로 10px 튐 */
    100% {
        transform: translateY(0);
    }

    /* 원래 위치로 돌아옴 */
}

.jump {
    animation: jump 0.3s ease-in-out;
    /* 0.3초 동안 애니메이션 실행 */
}

.mobile {
    display: none;
}


@media (max-width: 767px) {
    .desktop {
        display: none;
    }
    
    .background {
        background-image: url('../images/mobile/mobile-bg.png');
        background-color: black;
        background-size: cover;
        background-position: center;
        height: 100vh;
        overflow: auto;
    }

    .mobile {
        display: block;
        font-family: 'Galmuri11', serif !important;
    }

    .modal {
        font-family: 'Galmuri11', serif !important;
    }
    .galmuri {
        font-family: 'Galmuri11', serif !important;
    }
    .b-galmuri {
        font-family: 'Galmuri7', serif !important;
    }

    .slot, .disabled {
        background-image: url('../images/mobile/btn-slot.png');
    }
}