* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#world {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: yellow;
}

#spriteContainerDog,
#spriteContainerBaby,
#spriteContainerAlien {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
}

#spriteContainerDog {
    margin-bottom: 20px;
}
#spriteContainerBaby {
    margin-bottom: 20px;
}

.runningDog,
.hihiBaby,
.walkingAlien {
    position: absolute;
    width: 64px;
    height: 64px;
    background-size: 64px 192px;
    background-repeat: no-repeat;
    left: 0;
}

.runningDog {
    background: url('../images/dog_run_sheet.png') no-repeat;
    background-position: 0 0;
}

.hihiBaby {
    background: url('../images/baby_hihi_sheet.png') no-repeat;
    background-position: 0 0;
}

.walkingAlien {
    background: url('../images/alien_walk_sheet.png') no-repeat;
    background-position: 0 0;
}





.unchi {


    width: 16px;


    height: 16px;


    pointer-events: none;


    z-index: 2;


    background: url('../images/unchi.png') no-repeat;


    background-size: 16px 32px;


}





/* UNKman Styles */
#spriteContainerUNKman {
    position: fixed; /* Fixed position to overlay everything */
    top: 50%;
    left: 50%;
    width: 300px; /* 統一サイズ */
    height: 300px; /* 統一サイズ */
    transform: translate(-50%, -50%); /* Center it */
    display: none; /* Hidden by default */
    z-index: 100;
    overflow: hidden;
}

.walkingUNKman {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../images/UNKman-Sheet.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    
    /* 統一サイズ */
    background-size: 300px 1200px; 

    animation-duration: 0.5s;
    animation-timing-function: steps(4, end);
    animation-iteration-count: infinite;
    animation-name: walk-unkman-small; /* Default animation */
}





/* UNKman Appearance Animation */
@keyframes appear-unkman {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(720deg);
        opacity: 1;
    }
}

.unkman-appear {
    animation: appear-unkman 1s ease-out forwards;
}

@keyframes unchi-fly {
    to {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* 中央に移動 */
    }
}

.unchi-flying {
    position: fixed;
    z-index: 101;
    animation: unchi-fly 1s ease-out forwards;
}







/* UNKman Walking Animation */


@keyframes walk-unkman-small {
    to { background-position: 0 -900px; }
}





/* Background Flash Effect */


@keyframes flash-bg {


    0%, 49% { background-color: yellow; }


    50%, 100% { background-color: black; }


}





.bg-flash {


    animation: flash-bg 0.2s 5; /* Flash 5 times */


}





/* Shaking Effect for other characters */


@keyframes shake-char {


    0%, 100% { transform: translateX(0) scaleX(1); }


    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px) scaleX(1); }


    20%, 40%, 60%, 80% { transform: translateX(5px) scaleX(1); }


}





.shaking {


    animation: shake-char 0.5s infinite;


}

.hidden {
    display: none !important;
}

#unkmanHealthBarContainer {
    position: fixed;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 30px;
    border: 3px solid black;
    background-color: #ccc;
    z-index: 101;
    display: none;
}

#unkmanHealthBar {
    width: 100%;
    height: 100%;
    background-color: red;
}

@keyframes unkman-defeat-animation {
    0% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

.unkman-defeated {
    animation: unkman-defeat-animation 1s ease-out forwards;
    transform-origin: center;
}

@keyframes hit-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

#world.hit-effect {
    filter: invert(1);
    animation: hit-shake 0.1s linear;
}