/* 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: 275px;
    height: 227px;
    background-size: contain;
    background-repeat: no-repeat;
    transform: translate(-50%, -50%);
    z-index: 10001;
}
.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);
    }
}
.explosion-flash{
    position:fixed;
    width:200px;
    height:200px;
    background:radial-gradient(circle, white, rgba(255,200,100,0.7), transparent);
    transform:translate(-50%,-50%);
    animation:flashBoom 0.2s forwards;
    pointer-events:none;
    z-index:10002;
}

@keyframes flashBoom{
    0%{transform:translate(-50%,-50%) scale(0.3); opacity:1;}
    100%{transform:translate(-50%,-50%) scale(2); opacity:0;}
}
.ground-shockwave{
    position:fixed;
    width:80px;
    height:30px;
    background:radial-gradient(ellipse, rgba(120,120,120,0.8), transparent);
    transform:translate(-50%,-50%);
    border-radius:50%;
    animation:shockGround 1.2s ease-out forwards;
    pointer-events:none;
}

@keyframes shockGround{
    0%{
        transform:translate(-50%,-50%) scale(0.5);
        opacity:0.8;
    }
    100%{
        transform:translate(-50%,-50%) scale(6);
        opacity:0;
    }
}
.explosion-fire {
    position: fixed;
    width: 15px;
    height: 15px;
    background: radial-gradient(circle, rgb(255, 255, 0), rgb(255, 0, 0));
    border-radius: 50%;
    pointer-events: none;
}

.sprite-explosion {
    position: fixed;
    width: 275px;  /* 요청하신 너비 */
    height: 227px; /* 요청하신 높이 */
    transform: translate(-50%, -50%);
    z-index: 10001;
    pointer-events: none;
    background-repeat: no-repeat;
    /* 이미지가 영역에 맞춰 비율이 조정되도록 설정 */
    background-size: auto 100%; 
    image-rendering: auto; 
}