body {
    font-family: 'Google Sans Text', Roboto, 'Helvetica Neue', Helvetica, sans-serif, 'Noto Color Emoji';
    text-align: center;
    background-color: #f0f8ff;
    /*overflow: hidden;*/
}

h1 {
    color: #ff4500;
    margin-bottom: 20px;
}

.falling-packets {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    /*border: 2px solid #ff4500;*/
    background: #ffe4b5;
    /*margin-bottom: 30px;*/
    background: url(image/background.png);
    background-size: cover;
    user-select:none;
}

.red-packet {
    width: 50px;
    height: 80px;
    background: #ff0000;
    position: absolute;
    top: -100px;
    border-radius: 5px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.5s ease, height 0.5s ease, width 0.5s ease;
    overflow: hidden;
    animation: fall 5s ease-in infinite;
    background-image: url(image/redpackage.jpg);
    background-size: cover;
    box-shadow: 1px 1px 8px #000000;
}

.red-packet.centered {
    position: absolute;
    left: 50vw !important;
    top: calc(500px - 250px)!important;
    transform: translate(-50%, -50%) scale(1.8) rotateY(180deg); /* Zoom-in effect */
    z-index: 1000;
    width: 150px;
    height: 240px;
    background: #ff0000;
    transition: all 2s ease-in-out;
    background-image: url(image/redpackage-flip.jpg);
    background-size: cover;
}

.red-packet.opened {
    position: absolute;
    left: 50vw !important;
    top: calc(500px - 250px)!important;
    transform: translate(-50%, -50%) scale(1.8) rotateY(0deg); /* Flip effect on second click */
    transition: all 1s ease-in-out;
    background-image: url(image/redpackage-b.jpg);
}

.red-packet .prize {
    display: none;
    font-size: 30px;
    color: #000;
    font-weight: bold;
}

.red-packet.opened .prize {
    display: block;
}

.red-packet .content {
    display: none;
}

.red-packet.opened .content {
    display: block;
    animation: openAnimation 1s forwards;
}

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

@keyframes fall {
    0% {
        top: -100px;
    }
    100% {
        top: 500px;
    }
}

.prizeresult{
    height: 80px;
}

.prize500{
    font-size: 30px;
    font-weight: bold;
}

.prize400{
    font-size: 30px;
    font-weight: bold;
}

.prize300{
    font-size: 30px;
    font-weight: bold;
}

.prize200{
    font-size: 20px;
    font-weight: bold;
}

.prize150{
    font-size: 20px;
    font-weight: bold;
}

.prize100{
    font-size: 20px;
    font-weight: bold;
}

.prize50{
    font-size: 20px;
    font-weight: bold;
}

.panel1{
    width: 340px;
    background: #ffffff;
    box-shadow: 2px 2px 11px rgba(0,0,0,0.3);
    border-radius: 10px;
    overflow: hidden;
}

.panel1 .header{
    background: #d7642e;
    padding: 4px 4px;
    color: #ffffff;
}

.panel1 .detail{
    background: #ffffff;
    padding: 15px 20px;
    min-height: 54px;
}

.panel2{
    background: #ffffff;
    box-shadow: 2px 2px 11px rgba(0,0,0,0.3);
    border-radius: 10px;
    overflow: hidden;
}

.panel2 .header{
    background: #616aa4;
    padding: 4px 4px;
    color: #ffffff;
}

.panel2 .detail{
    background: #ffffff;
    padding: 15px 20px;
    min-height: 54px;
}

.panel3{
    background: #ffffff;
    box-shadow: 2px 2px 11px rgba(0,0,0,0.3);
    border-radius: 10px;
    overflow: hidden;
}

.panel3 .header{
    background: #267fb1;
    padding: 4px 4px;
    color: #ffffff;
}

.panel3 .detail{
    background: #ffffff;
    padding: 15px 20px;
    min-height: 54px;
}

.confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #f0f;
            animation: confetti-fall 3s linear infinite;
            opacity: 0.7;
        }

        @keyframes confetti-fall {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        @keyframes confetti-left {
            0% {
                left: 0;
            }
            100% {
                left: calc(50% - 50px); /* Move towards center */
            }
        }

        @keyframes confetti-right {
            0% {
                right: 0;
            }
            100% {
                right: calc(50% - 50px); /* Move towards center */
            }
        }