body {
    margin: 0;
    overflow: hidden;
    background-color: #f0f0f0;
}

/* クラッカーのコンテナを画面下部に固定 */
.cracker-container {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 10;
}

.cracker {
    width: 150px;
    height: auto;
}

/* 紙吹雪のコンテナ */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

/* 紙吹雪の基本スタイル */
.confetti {
    position: absolute;
    opacity: 0;
    transform-origin: center center;
}

/* 形状ごとのスタイル */
.shape-circle {
    border-radius: 50%;
}

.shape-triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.shape-star {
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
        50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
    );
}

.shape-heart {
    clip-path: path("M12 21.593c-5.63-5.539-11-10.297-11-14.402 0-3.791 3.068-5.191 5.281-5.191 1.312 0 4.151.501 5.719 4.457 1.59-3.968 4.464-4.447 5.726-4.447 2.54 0 5.274 1.621 5.274 5.181 0 4.069-5.136 8.625-11 14.402m5.726-20.583c-2.203 0-4.446 1.042-5.726 3.238-1.285-2.206-3.522-3.248-5.719-3.248-3.183 0-6.281 2.187-6.281 6.191 0 4.661 5.571 9.429 12 15.809 6.43-6.38 12-11.148 12-15.809 0-4.011-3.095-6.181-6.274-6.181");
}


/* クラッカーのアニメーション */
@keyframes cracker-pop {
    0% {
        transform: scale(1);
    }
    66% {
        transform: scale(0.85); /* 10%縮小 */
    }
    90% {
        transform: scale(1.2); /* 20%拡大 */
    }
    100% {
        transform: scale(1); /* 元のサイズに戻る */
    }
}

/* 紙吹雪のアニメーション */
@keyframes diagonal-fall {
    0% {
        transform: translate(0, 0) rotate(var(--initial-rotation, 0deg));
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--target-x-offset), var(--target-y-offset)) rotate(calc(var(--initial-rotation, 0deg) + 720deg));
        opacity: 0;
    }
}