/* css/common.css 또는 rocket.css 파일 */

#missileContainer {
    position: fixed; /* 화면에 고정 */
    bottom: 0px;
    right: 50%;
    left: 50%; /* ✨ 화면의 왼쪽에서 50% 위치로 이동 */
    transform: translateX(-50%);
    width: 40px;
    height: 130px;
    z-index: 9999;
    pointer-events: auto; /* ✨ [수정] 클릭을 허용하도록 변경 none*/
    /* 테스트 시 위치를 쉽게 보려면 아래 테두리를 추가하세요 */
    /*border: 1px solid red;*/
}

#missileImage {
    position: absolute;
    /* ✨ [수정] 로켓을 컨테이너 하단에서 30px 위로 이동 */
    bottom: 34px; 
    /* ✨ [수정] 가로 중앙 정렬을 위한 표준 방식 */
    left: 50%;
    transform: translateX(-50%);
    width: 25px; /* 로켓 크기 */
    pointer-events: auto; /* ✨ [추가] 클릭 허용 */
    cursor: pointer;      /* ✨ [추가] 클릭 가능한 커서 모양 */
    display: none;
}

#fireCanvas {
    position: absolute;
    /* ✨ [수정] 화염의 '바닥'을 컨테이너 하단에서 20px 위로 이동
       (로켓 이미지의 꼬리 바로 아래) */
    bottom: -65px;
    /* ✨ [수정] 가로 중앙 정렬 */
    left: 50%;
    transform: translateX(-50%);
    width: 80px; /* 화염 효과 크기 */
    height: 100px;
}
/* 미사일과 화염을 함께 묶어 이동시킬 컨테이너 */
.missile-flight-container {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
}

/* 컨테이너 안의 미사일 이미지 */
.flying-missile-img {
    width: 25px;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -100%); /* 미사일 꼬리 끝이 (0,0)에 오도록 조정 */
}

/* 컨테이너 안의 화염 캔버스 */
.flying-missile-flame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 150px;
    transform: translate(-50%, 0%); /* 화염이 미사일 꼬리 바로 아래에서 시작하도록 조정 */
}
.explosion-effect {
    position: fixed;
    width: 175px; /* 폭발 이미지 크기에 맞게 조절 */
    height: 107px;
    /* 이미지의 정중앙이 목표 지점에 오도록 조정 */
    transform: translate(-50%, -50%); 
    z-index: 10001; /* 다른 미사일보다 위에 표시 */
    pointer-events: none;
}
.shake-effect {
    animation: shake 0.1s linear 3; /* 0.1초 동안 흔들리는 애니메이션을 3번 반복 */
}

@keyframes shake {
    0%, 100% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-5px, 0);
    }
    30% {
        transform: translate(5px, 0);
    }
    50% {
        transform: translate(-5px, 0);
    }
    70% {
        transform: translate(5px, 0);
    }
}